>> الصفحة الرئيسية >> مقالات ZetCode >> [3] البرامج الأولى

الأقسام الرئيسية
 التنصيب والاعداد التنصيب والاعداد
 دروس متقدمة دروس متقدمة
 سلسلة دروس للمبتدئين سلسلة دروس للمبتدئين
 اساسيات لغة سي++ اساسيات لغة سي++
 مقالات ZetCode مقالات ZetCode
 

جديد الدروس
 الوحدة QtUiTools (واجهة المستخدم ديناميكية التوليد) التاريخ 04/07/2009 الوحدة QtUiTools (واجهة المستخدم ديناميكية التوليد)
 Qt and Phonon التاريخ 04/07/2009 Qt and Phonon
 تتمة الرسائل ومربعات الحوار في qt التاريخ 04/07/2009 تتمة الرسائل ومربعات الحوار في qt
 مدخل الى xml في Qt التاريخ 04/07/2009 مدخل الى xml في Qt
 الإدخال والإخراج لبيانات الفئات التاريخ 04/07/2009 الإدخال والإخراج لبيانات الفئات
 

[3] البرامج الأولى

فى هذا الجزء سنقوم بإنشاء برامجنا الأولى

مثال بسيط

نبدأ بمثال بسيط لعرض نافذة على الشاشة

  1.  
  2. #include <QApplication>
  3. #include <QWidget>
  4.  
  5. int main(int argc, char *argv[])
  6. {
  7.     QApplication app(argc, argv);
  8.  
  9.     QWidget window;
  10.  
  11.     window.resize(250, 150);
  12.     window.setWindowTitle("Simple example");
  13.     window.show();
  14.  
  15.     return app.exec();
  16. }

  1.  #include <QApplication>
  2.  #include <QWidget>
  3.  

ضم الملفات الرأسية QApplication و QWidget
  1.  
  2.  QApplication app(argc, argv);


كائن التطبيق ، يجب ان يتواجد لكل برنامج إلا تطبيقات الكونسول
  1.  
  2.  QWidget window;


هذا هو الويدجت الرئيسى (النافذة)
  1.  
  2.  window.resize(250, 150);
  3.  window.setWindowTitle("Simple example");
  4.  window.show();


الطريقة resize تقوم بإعادة تحجيم النافذة الى 250 بكسل عرض و 150 ارتفاع

الطريقة setWindowTitle تقوم بتحديد العنوان الخاص بالنافذة

الطريقة show تقوم بعرض النافذة


  1.  
  2.  return app.exec();
  3.  

نبدأ حلقة الأحداث بإستخدام الطريقة exec





وضع النافذة بالمنتصف

اذا لم نموضع النافذة، سيقوم مدير النوافذ بتحديد المكان. فى مثالنا التالى سنقوم بتحديد مكان النافذة الى منتصف الشاشة
  1.  
  2. #include <QApplication>
  3. #include <QDesktopWidget>
  4. #include <QWidget>
  5.  
  6. int main(int argc, char *argv[])
  7. {
  8.  
  9.   int WIDTH = 250;
  10.   int HEIGHT = 150;
  11.  
  12.   int screenWidth;
  13.   int screenHeight;
  14.  
  15.   int x, y;
  16.  
  17.   QApplication app(argc, argv);
  18.  
  19.   QWidget window;
  20.  
  21.   QDesktopWidget *desktop = QApplication::desktop();
  22.  
  23.   screenWidth = desktop->width();
  24.   screenHeight = desktop->height(); 
  25.  
  26.   x = (screenWidth - WIDTH) / 2;
  27.   y = (screenHeight - HEIGHT) / 2;
  28.  
  29.   window.resize(WIDTH, HEIGHT);
  30.   window.move( x, y );
  31.   window.setWindowTitle("Center");
  32.   window.show();
  33.  
  34.   return app.exec();
  35. }



هناك العديد من احجام الشاشات وانواع الريزليوشن، لذا لوضع النافذة بالمنتصف يجب علينا تحديد عرض وارتفاع سطح المكتب. نستخدم لهذا الصف QDesktopWidget

  1.  QDesktopWidget *desktop = QApplication::desktop();
  2.  
  3.  screenWidth = desktop->width();
  4.  screenHeight = desktop->height(); 
  5.  


  1.  x = (screenWidth - WIDTH) / 2;
  2.  y = (screenHeight - HEIGHT) / 2;
  3.  

نحسب النقطة اعلى اليسار
  1.  
  2.  window.resize(WIDTH, HEIGHT);
  3.  window.move( x, y );



نعيد تحجيم النافذة ، وننقلها بإستخدام الطريقة move إلى المكان المحسوب.



عرض تلميح

فى هذا المثال سنشرح كيفية عرض تلميحات بإستخدام المكتبة Qt4


  1.  
  2. #include <QApplication>
  3. #include <QDesktopWidget>
  4. #include <QWidget>
  5.  
  6. int main(int argc, char *argv[])
  7. {
  8.  
  9.   int WIDTH = 250;
  10.   int HEIGHT = 150;
  11.  
  12.   int screenWidth;
  13.   int screenHeight;
  14.  
  15.   int x, y;
  16.  
  17.   QApplication app(argc, argv);  
  18.  
  19.   QWidget window;
  20.  
  21.   QDesktopWidget *desktop = QApplication::desktop();
  22.  
  23.   screenWidth = desktop->width();
  24.   screenHeight = desktop->height(); 
  25.  
  26.   x = (screenWidth - WIDTH) / 2;
  27.   y = (screenHeight - HEIGHT) / 2;
  28.  
  29.   window.resize(WIDTH, HEIGHT);
  30.   window.move( x, y );
  31.   window.setWindowTitle("ToolTip");
  32.   window.setToolTip("QWidget");
  33.   window.show();
  34.  
  35.   return app.exec();
  36. }


لتحديد التلميح نستخدم الطريقة setToolTip





ايكون التطبيق

هى تظهر فى اعلى يسار شريط العنوان وايضا فى شريط المهام.
  1.  
  2. #include <QApplication>
  3. #include <QDesktopWidget>
  4. #include <QWidget>
  5. #include <QIcon>
  6.  
  7. void center(QWidget &widget, int w, int h)
  8. {
  9.   int x, y;
  10.   int screenWidth;
  11.   int screenHeight;
  12.  
  13.   QDesktopWidget *desktop = QApplication::desktop();
  14.  
  15.   screenWidth = desktop->width();
  16.   screenHeight = desktop->height();
  17.  
  18.   x = (screenWidth - w) / 2;
  19.   y = (screenHeight - h) / 2;
  20.  
  21.   widget.move( x, y );
  22. }
  23.  
  24. int main(int argc, char *argv[])
  25. {
  26.  
  27.   int WIDTH = 250;
  28.   int HEIGHT = 150;
  29.  
  30.   QApplication app(argc, argv);
  31.  
  32.   QWidget window;
  33.  
  34.  
  35.   window.resize(WIDTH, HEIGHT);
  36.   center(window, WIDTH, HEIGHT);
  37.   window.setWindowTitle("icon");
  38.   window.setWindowIcon(QIcon("web.png"));
  39.   window.show();
  40.  
  41.   return app.exec();
  42. }


فى هذا المثال قمنا بنقل الكود اللازم لوضع النافذة بالمنتصف الى الطريقة center “قمنا بكتابتها"
  1.  
  2.  window.setWindowIcon(QIcon("web.png"));


لعرض ايكون، نستخدم الطريقة setWindowIcon والصف QIcon






Cursors

فى هذا المثال سنستعرض بعض المؤشرات اللتى يمكن لنا استخدامها فى تطبيقاتنا.

  1. #include <QApplication>
  2. #include <QDesktopWidget>
  3. #include <QWidget>
  4. #include <QFrame>
  5. #include <QGridLayout>
  6.  
  7.  
  8. class Cursors : public QWidget
  9. {
  10.  public:
  11.      Cursors(QWidget *parent = 0);
  12. };
  13.  
  14. void center(QWidget *widget, int w, int h)
  15. {
  16.   int x, y;
  17.   int screenWidth;
  18.   int screenHeight;
  19.  
  20.   QDesktopWidget *desktop = QApplication::desktop();
  21.  
  22.   screenWidth = desktop->width();
  23.   screenHeight = desktop->height();
  24.  
  25.   x = (screenWidth - w) / 2;
  26.   y = (screenHeight - h) / 2;
  27.  
  28.   widget->move( x, y );
  29. }
  30.  
  31. Cursors::Cursors(QWidget *parent)
  32.     : QWidget(parent)
  33. {
  34.   int WIDTH = 350;
  35.   int HEIGHT = 150;
  36.  
  37.   resize(WIDTH, HEIGHT);
  38.  
  39.   QFrame *frame1 = new QFrame(this);
  40.   frame1->setFrameStyle(QFrame::Box);
  41.   frame1->setCursor(Qt::SizeAllCursor);
  42.  
  43.   QFrame *frame2 = new QFrame(this);
  44.   frame2->setFrameStyle(QFrame::Box);
  45.   frame2->setCursor(Qt::WaitCursor);
  46.  
  47.   QFrame *frame3 = new QFrame(this);
  48.   frame3->setFrameStyle(QFrame::Box);
  49.   frame3->setCursor(Qt::PointingHandCursor);
  50.  
  51.  
  52.   QGridLayout *grid = new QGridLayout(this);
  53.   grid->addWidget(frame1, 0, 0);
  54.   grid->addWidget(frame2, 0, 1);
  55.   grid->addWidget(frame3, 0, 2);
  56.   setLayout(grid);
  57.  
  58.   center(this, WIDTH, HEIGHT);
  59.  
  60. }
  61.  
  62. int main(int argc, char *argv[])
  63. {
  64.   QApplication app(argc, argv); 
  65.  
  66.   Cursors window;
  67.  
  68.   window.setWindowTitle("cursors");
  69.   window.show();
  70.  
  71.   return app.exec();
  72. }
  73.  




فى هذا المثال، نستخدم 3 كائنات من الصف QFrame ، كل منها لها مؤشر معرف


  1.  
  2.  QFrame *frame1 = new QFrame(this);
  3.  frame1->setFrameStyle(QFrame::Box);
  4.  frame1->setCursor(Qt::SizeAllCursor);
  5.  

ماسبق يقوم بإنشاء الكائن من الصف QFrame ونستخدم الطريقة setFrameStyle لتحديد ال"ستايل/هيئة" له، ونقوم بتحديد المؤشر بإستخدام الطريقة setCursor
  1.  
  2.  QGridLayout *grid = new QGridLayout(this);
  3.  grid->addWidget(frame1, 0, 0);
  4.  grid->addWidget(frame2, 0, 1);
  5.  grid->addWidget(frame3, 0, 2);
  6.  setLayout(grid);


هذا سيقوم بتجميعهم، سنتحدث عن ذلك لاحقا فى فصل ادارة المخططات



زر


فى هذا المثال سنعرض زر على نافذة، وعند الضغط عليه سيتم غلق التطبيق.
  1.  
  2. #include <QApplication>
  3. #include <QDesktopWidget>
  4. #include <QWidget>
  5. #include <QPushButton>
  6.  
  7.  
  8. class MyButton : public QWidget
  9. {
  10.  public:
  11.      MyButton(QWidget *parent = 0);
  12. };
  13.  
  14. void center(QWidget *widget, int w, int h)
  15. {
  16.   int x, y;
  17.   int screenWidth;
  18.   int screenHeight;
  19.  
  20.   QDesktopWidget *desktop = QApplication::desktop();
  21.  
  22.   screenWidth = desktop->width();
  23.   screenHeight = desktop->height();
  24.  
  25.   x = (screenWidth - w) / 2;
  26.   y = (screenHeight - h) / 2;
  27.  
  28.   widget->move( x, y );
  29. }
  30.  
  31. MyButton::MyButton(QWidget *parent)
  32.     : QWidget(parent)
  33. {
  34.   int WIDTH = 250;
  35.   int HEIGHT = 150;
  36.  
  37.   setFixedSize(WIDTH, HEIGHT);
  38.  
  39.   QPushButton *quit = new QPushButton("Quit", this);
  40.   quit->setGeometry(50, 40, 75, 30);
  41.  
  42.   center(this, WIDTH, HEIGHT);
  43.  
  44.   connect(quit, SIGNAL(clicked()), qApp, SLOT(quit()));
  45. }
  46.  
  47.  
  48. int main(int argc, char *argv[])
  49. {
  50.   QApplication app(argc, argv);  
  51.  
  52.   MyButton window;
  53.  
  54.   window.setWindowTitle("button");
  55.   window.show();
  56.  
  57.   return app.exec();
  58. }
  59.  QPushButton *quit = new QPushButton("Quit", this);
  60.  quit->setGeometry(50, 40, 75, 30);
  61.  

هنا انشأنا الزر من الصف QPushButton وحددنا النص الظاهر عليها فى المشيد (او بإستخدام الطريقة setText) ونقم بعد ذلك يدويا بنقله الى المكان التالى x (س)=50 و y (ص) =40 بالبكسل، ونعيد تحجيمه الى 75 عرض و 30 ارتفاع


  1.  
  2.  connect(quit, SIGNAL(clicked()), qApp, SLOT(quit()));




عندما نضغط على الزر، ترسل إشارة clicked . والسلوت هى طريقة ستتفاعل معها، فى حالتنا هذه استخدمنا الطريقة quit وهى طريقة معرفة مسبقا لكائن التطبيق (qApp هو مؤشر يشير إليه)





الإتصال

سننهى هذه الجزئية بإيضاح كيف يمكن ان تتواصل الويدجتس مع بضعها، سنقسم الكود إلى 3 ملفات، للآن لم نستخدم سوا ملف واحد وذلك لصغر حجم الأمثلة.

communicate.h
  1.  
  2. #ifndef COMMUNICATE_H
  3. #define COMMUNICATE_H
  4.  
  5. #include <QWidget>
  6. #include <QApplication>
  7. #include <QPushButton>
  8. #include <QLabel>
  9.  
  10. class Communicate : public QWidget
  11. {
  12.   Q_OBJECT
  13.  
  14.   public:
  15.     Communicate(QWidget *parent = 0);
  16.  
  17.   private slots:
  18.     void OnPlus();
  19.     void OnMinus();
  20.  
  21.   private:
  22.     QLabel *label;
  23.  
  24. };
  25.  
  26. #endif
  27.  

هذا هو الملف الرأسى، عرفنا فيه 2 سلوت "طريقة للتفاعل مع اشارة" ، ونص ساكن label

communicate.cpp
  1.  
  2. #include "communicate.h"
  3. #include <QDesktopWidget>
  4.  
  5. void center(QWidget *widget, int w, int h)
  6. {
  7.   int x, y;
  8.   int screenWidth;
  9.   int screenHeight;
  10.  
  11.   QDesktopWidget *desktop = QApplication::desktop();
  12.  
  13.   screenWidth = desktop->width();
  14.   screenHeight = desktop->height();
  15.  
  16.   x = (screenWidth - w) / 2;
  17.   y = (screenHeight - h) / 2;
  18.  
  19.   widget->move( x, y );
  20. }
  21.  
  22.  
  23. Communicate::Communicate(QWidget *parent)
  24.     : QWidget(parent)
  25. {
  26.   int WIDTH = 350;
  27.   int HEIGHT = 190;
  28.  
  29.   resize(WIDTH, HEIGHT);
  30.  
  31.   QPushButton *plus = new QPushButton("+", this);
  32.   plus->setGeometry(50, 40, 75, 30);
  33.  
  34.   QPushButton *minus = new QPushButton("-", this);
  35.   minus->setGeometry(50, 100, 75, 30);
  36.  
  37.   label = new QLabel("0", this);
  38.   label->setGeometry(190, 80, 20, 30);
  39.  
  40.   connect(plus, SIGNAL(clicked()), this, SLOT(OnPlus()));
  41.   connect(minus, SIGNAL(clicked()), this, SLOT(OnMinus()));
  42.  
  43.  
  44.   center(this, WIDTH, HEIGHT);
  45.  
  46. }
  47.  
  48. void Communicate::OnPlus()
  49. {
  50.   int val = label->text().toInt();
  51.   val++;
  52.   label->setText(QString::number(val));
  53. }
  54.  
  55. void Communicate::OnMinus()
  56. {
  57.   int val = label->text().toInt();
  58.   val--;
  59.   label->setText(QString::number(val));
  60. }


لدينا زرين ونص ساكن، نقوم بزيادة وإنقاص الرقم الظاهر بإستخدام الزرين.


  1.  
  2.   connect(plus, SIGNAL(clicked()), this, SLOT(OnPlus()));
  3.   connect(minus, SIGNAL(clicked()), this, SLOT(OnMinus()));
  4.  

Here we connect the clicked() signals to the slots.
  1.  
  2. void Communicate::OnPlus()
  3. {
  4.   int val = label->text().toInt();
  5.   val++;
  6.   label->setText(QString::number(val));
  7. }
  8.  

فى الطريقة OnPlus نحدد القيمة الحالية الظاهرة على النص الساكن وذلك بإستخدام الطريق text وتحويلها الى عدد صحيح بإستخدام الطريقة toInt ونقوم بزيادة القيمة وإعادة تخزينها على الlabel بإستخدام الطريقة setText وذلك بعد تحويلها الى سلسلة نصية.



main.cpp
  1.  
  2. #include "communicate.h"
  3.  
  4. int main(int argc, char *argv[])
  5. {
  6.   QApplication app(argc, argv);
  7.  
  8.   Communicate window;
  9.  
  10.   window.setWindowTitle("Communicate");
  11.   window.show();
  12.  
  13.   return app.exec();
  14. }
  15.  

الملف الأساسى الذى يبدأ عنده التنفيذ


إسم الكاتب تاريخ الإضافة التقييم / المقيمين زيارات الدرس
StrikerX 21/12/2008 0 / 0 1370

الأكثر زيارة
 دليل تنصيب اطار عمل Qt ، حزمة MinGW ، بيئة التطوير QDevelop الزيارات 4282 دليل تنصيب اطار عمل Qt ، حزمة MinGW ، بيئة التطوير QDevelop
 اعداد وتنصيب Qt الزيارات 4068 اعداد وتنصيب Qt
 التطوير السريع للتطبيقات Rapid Application Development الزيارات 3762 التطوير السريع للتطبيقات Rapid Application Development
 دليل تنصيب اطار عمل Qt ، حزمة MinGW ، بيئة التطوير Eclipse الزيارات 3745 دليل تنصيب اطار عمل Qt ، حزمة MinGW ، بيئة التطوير Eclipse
 C++ In a Nutshell الزيارات 3151 C++ In a Nutshell
 

الأكثر تصويتـا
 اعداد وتنصيب Qt نتيجة التصويت 41 من 6 شخص اعداد وتنصيب Qt
 الدرس الاول : كتابة اول برنامج نتيجة التصويت 41 من 6 شخص الدرس الاول : كتابة اول برنامج
 تخطيط البرامج Program Layout نتيجة التصويت 40 من 6 شخص تخطيط البرامج Program Layout
 دوال المستوى العالي لبرمجة تطبيقات متعددة المسالك نتيجة التصويت 30 من 3 شخص دوال المستوى العالي لبرمجة تطبيقات متعددة المسالك
 التطوير السريع للتطبيقات Rapid Application Development نتيجة التصويت 30 من 5 شخص التطوير السريع للتطبيقات Rapid Application Development
 
 

سكربت story-script v1 برمجة bwady.com تطوير SudaNix