|
|
|
[10] تصميم أداة نافذة widget بمواصفات خاصة في Qt4 |
تصميم أداة نافذة widget بمواصفات خاصة في Qt4
في هذا الجزء من سلسلة درورس Qt4, سنقوم بعمل أداة widget بمواصفات خاصة بحسب رغبتنا نحن.
هل مرةً نظرت إلى تطبيق ما و تعجبت و تساءلت, كيف تم إنشاء و عمل عنصر أو اداة معينة؟ من المحتمل أن كل مبرمج في البداية تسائل و تعجب من ذلك. و من ثم هل كنت تنظر إلى قائمة أدوات مُقدمة من المكتبة الرسومية المفضلة لديك. و لكنك لم تستطع أن تجدها.
حقيبة الأدوات البرمجية Toolkits عادةً تُقدم فقط الأدوات الشائعة الإستعمال مثل الزرارات Buttons و الأدوات النصيّة text widgets, و المزلاج sliders...الخ. و ليست هناك أي حقيبة ادوات برمجية Toolkit تحتوي على كل الأدوات الممكنة.
البرمجون يجب عليهم إنشاء و عمل مثل هذه الأدوات بأنفسهم. يقومون بذلك بواسطة استعمال أدوات للرسم منخفضة المستوى مزودة و مُقدمة بواسطة حقيبة الأدوات الرئيسية للمكتبة. هناك إمكانيتان لعمل ذلك و هي:
- المبرمج يستطيع تعديل او تحسين أداة widget موجودة مسبقاً.
- المبرمج يستطيع خلق و إنشاء أداة widget بمواصفات خاصة من الصفر(من البداية).
أداة لقياس عملية الحرق البياني للأقراص The Burning widget:
في المثال التالي سنقوم بإنشاء أداة رسومية مرئية تحاكي عملية تخزين\حرق بياني للأقراص. هذه الأداة يمكن مشاهدتها في تطبيقات برمجية مثل Nero أو K3B. الأداة ستكون معمولة من الصفر (من البداية).
[left]burning.h[/left]
#ifndef BURNING_H #define BURNING_H #include <QWidget> #include <QSlider> #include "widget.h" { Q_OBJECT public: public slots: void valueChanged(int); int getCurrentWidth(); private: Widget *widget; int cur_width; }; #endif
|
هذا هو الملف الرأس للنافذة الرئيسية للمثال.
private: Widget *widget; int cur_width;
|
سيكون معنا أداتين في الواجهة الرئيسية للمستخدم للنافذة. و هما مزلاج slider و هذا معرّف مسبقاً من حقيبة الأدوات الرئيسية الموجودة بـ Qt و الأداة المصممة بواسطتنا نحن و بالمواصفات المطلوبة. المتغير cur_width سيحتفظ بالقيمة الحالية من المزلاج slider. هذه القيمة ستُستعمل عند تلوين الأداة المصممة بواسطتنا.
[left]burning.cpp[/left]
#include "burning.h" #include <QApplication> #include <QPainter> #include <QVBoxLayout> #include <QFrame> #include <QPushButton> { slider = new QSlider(Qt ::Horizontal , this); slider->setMaximum(750); slider->setGeometry(50, 50, 130, 30); connect(slider, SIGNAL(valueChanged(int)), this, SLOT(valueChanged(int))); vbox->addStretch(1); widget = new Widget(this); hbox->addWidget(widget, 0); vbox->addLayout(hbox); setLayout(vbox); } void Burning::valueChanged(int val) { cur_width = val; widget->repaint(); } int Burning::getCurrentWidth() { return cur_width; }
|
هنا سنقوم ببناء النافذة الرئيسية للمثال.
void Burning::valueChanged(int val) { cur_width = val; widget->repaint(); }
|
عندما نغير قيمة المزلاج, سنحفظ القيمة الجديدة و يتم إعادة تلوين الأداة المصممة بواسطتنا.
[left]widget.h[/left]
#ifndef WIDGET_H #define WIDGET_H class Burning; #include <QFrame> { Q_OBJECT public: protected: public: Burning *burn; }; #endif
|
هذا الملف الرأس الخاص بالأداة المصممة بواسطتنا The burning widget.
نخزن مؤشر في الأداة الحاضنة الأم. و نحصل على العرض الحالي لهذه الأداة عن طريق هذا المؤشر.
[left]widget.cpp[/left]
#include "widget.h" #include "burning.h" #include <QPainter> #include <QFrame> #include <QHBoxLayout> #include <QTextStream> QString num [] = { "75", "150", "225", "300", "375", "450", "525", "600", "675" }; int asize = sizeof(num)/sizeof(num[1]); { m_parent = parent; setFrameShape (QFrame::StyledPanel); setMinimumHeight(30); } { painter. setPen(QColor("#d4d4d4")); int width = size().width(); Burning *burn = (Burning *) m_parent; int cur_width = burn->getCurrentWidth(); int step = (int) qRound(width / 10.0); int till = (int) ((width / 750.0) * cur_width); int full = (int) ((width / 750.0) * 700); if (cur_width >= 700) { painter. setPen(QColor(255, 255, 184)); painter. setBrush(QColor(255, 255, 184)); painter.drawRect(0, 0, full, 30); painter. setPen(QColor(255, 175, 175)); painter. setBrush(QColor(255, 175, 175)); painter.drawRect(full, 0, till-full, 30); } else { painter. setPen(QColor(255, 255, 184)); painter. setBrush(QColor(255, 255, 184)); painter.drawRect(0, 0, till, 30); } painter. setPen(QColor(90, 80, 60)); for ( int i=1; i <= asize; i++ ) { painter.drawLine(i*step, 0, i*step, 6); newFont.setPointSize(7); setFont(newFont); int w = metrics.width(num[i-1]); painter.drawText(i*step-w/2, 19, num[i-1]); } }
|
هنا نلوّن أداتنا المصممة الجديدة burning widget و نلوّن المستطيل الخاص بها, و الخطوط الأفقية و الأعداد التي ستكون معيار و درجة الحرق.
setFrameShape (QFrame::StyledPanel);
|
نستعمل الأداة (الصنف QFrame ) ليكون قاعدة لأداتنا المصممة الجديدة.
Burning *burn = (Burning *) m_parent; int cur_width = burn->getCurrentWidth();
|
نحصل على قيمة المتغير cur_width.
int w = metrics.width(num[i-1]); painter.drawText(i*step-w/2, 19, num[i-1]);
|
هذه الشيفرة تقوم برسم الأعداد. نستعمل مصفوفات الخطوط لنحصل على عرض النص.
الآن نحضر الحدث الخاص للتلوين لنضيفها إلى الأداة الأم .
[left]main.cpp[/left]
#include "burning.h" #include <QDesktopWidget> #include <QApplication> { int x, y; int screenWidth; int screenHeight; int WIDTH = 370; int HEIGHT = 200; screenWidth = desktop->width(); screenHeight = desktop->height(); x = (screenWidth - WIDTH) / 2; y = (screenHeight - HEIGHT) / 2; widget.setGeometry(x, y, WIDTH, HEIGHT); } int main(int argc, char *argv[]) { Burning window; window.setWindowTitle("The Burning widget"); window.show(); center(window); return app.exec(); }
|
هذا الملف الرئيسي...
و هذه صورة للنافذة الرئيسية في المثال تحتوي على المزلاج و الأداة المصممة بواسطتنا المرقّمة و المدرّجة بمواصفات خاصة و اسمها The Burning Widget.

| إسم الكاتب |
تاريخ الإضافة |
التقييم / المقيمين |
زيارات الدرس |
| رغـد |
21/01/2009 |
11 / 2 |
930 |
|
|
|
|