السلام عليكــم ورحمـة الله وبركاتــة
على بركة الله ابدء معكم دروس بسيطة لتعلم ال Qt .
طبعا المستوى مبتدئ ,, لأني انا مبتدئ.
اتمنى من الاعضاء الخبراء ان يتواجدوا هنا و ان يصححوا لي فأحتمال الخطأ وارد جدا.
الهدف من الموضوع ان نتعلم معا ..
وكل من لديه معلومة يضيفها.
بسم الله نبدأ.
يفترض انك منصب متطلبات العمل.
راجع الشرح هنا
http://qt-ar.org/lessons/show3.html
هذه هي واجهة ال QDevelop و التي سنعمل عليها
Resized to 51% (was 1280 x 800) - Click image to enlarge
لتكوين مشروع جديد ، من قائمة Project اختر New Project ،
ثم أعطي المعلومات المطلوبة كما تشاء.
كالعادة ، البرنامج الاول سيكون Hello Qt
بعد تكوين المشروع لاحظ نافذت ال project explorer في يسار النافذة ،،
كما في الصورة
هذه هي الملفات الاساسية للمشروع.
الان اضغط دبل كلك على الملف hello.ui .
سفتح لك ال Qt Designer
كما في الصورة.
Resized to 51% (was 1280 x 800) - Click image to enlarge
اضغط على زر close .
سيظهر لك dialog يحوي على زر Ok , Cancel ،، قم بحذف هذه الازرار بواسطة مفتاح Del .
الان سيكون ال dialog فارغ،،
في الجهة اليسرى من الشاشة سيكون هناك ال Widget Box (يعني ال controls) التي ممكن ان تضيفها الى ال dialog .
سنضيف زر ، من القائمة اختر Push Button و قم بسحبة الى ال dialog
غير حجم الزر كما تشاء ،
انا لدي كما في الصورة
الان اضغط بالزر الايمن للماوس على الزر و اختار Change text
واكتب Hello Qt
ثم مرة اخرى من القائمة اختر Change objectName وسمه HelloBtn ثم اضغط OK .
الان اغلق ال Qt Designer ، سيطالبك بالخزن فأضغط نعم.
ستعود الى ال QDevelop .
الان افتح ملف الهيدر (لدي اسمه HelloDlg) واضف اليه الاسطر كما في الصورة
Resized to 72% (was 909 x 385) - Click image to enlarge
السطر المضاف الاول واضح هو الهيدر فايل الخاص ب MessageBox و ذلك لأننا سنستعملها في برنامجنا لاحقا.
السطر المضاف الثاني هو الدالة التي ستتنفذ عن الضغط على الزر.
الان انتقل الى ملف السورس (بواسطة ال Project Explorer)
واضف الاسطر كما في الصورة
Resized to 68% (was 967 x 309) - Click image to enlarge
السطر الاول المضاف ،
هي الدالة المسؤولة عن ربط ال Widget (control) مع العمل الذي تريد ان تقوم به.
للتوضيح اكثر (هذا من الكتب )
** Cplusplus GUI Programming with Qt4 (2nd Edition).chm
The connect() statement looks like this:
connect(sender, SIGNAL(signal), receiver, SLOT(slot));
where sender and receiver are pointers to QObjects and where signal and slot are function signatures without parameter names. The SIGNAL() and SLOT() macros essentially convert their argument to a string.
** No.Starch.Press.The.Book.of.Qt.4.The.Art.of.Building.Qt.Applications.Jul.2007
The first two arguments specify the object sending the signal and the signal that we want to bind to the receiving slot. The last two arguments specify the object that is the recipient of the signal, and the receiving slot.
الاسطر المضافة الثانية هي الوظيفة التي ستنفذ عند الضغط على الزر.
الان من قائمة Build اختر Build
ثم من قائمة Debug اختر Start Program
والنتيجة .. كما في الصورة
طيب .. الان سنضيف زر خروج للبرنامج ..
افتح مرة اخرى ال Qt Designer واضف زر جديد ليصبح البرنامج كما في الصورة
اضغط بالزر الايمن للماوس على الزر الجديد و اختر Change objectName غيره الى exitButton ،،
الان سنتعلم طريقة ثانية للربط بواسطة ال Qt Designer بدل استخدام الكود (أي دالة connect)
من قائمة Edit اختر Edit Signals/Slots
الان اضغط على زر Exit لاحظ ظهور سهم ، هذا معناه ان زر Exit سيمثل ال sender و حيث ما ستفلت الماوس سيمثل ال receiver ،،
افلت الماوس على أي جزء من ال Dialog
لاحظ اول ما تفلت الماوس سيظهر لك dialog ، في الجهة اليسرى يظهر لك ال signals المتوفرة مع هذا ال widget و على الجهة اليمنى تظهر الوظائف المتوفرة (التي كنا نكتبها في ال slot)
كما في الصورة ،
اولا اشر على ال check box الموجود في الاسفل ، من الجهة اليسرى اختر clicked و من الجهة اليمنى اختر close .
ثم اضغط ok .
الان اضغط على F3 للعودة للوضع الطبيعي ،،
طبعا لاحظ في الجهة اليمنى يوجد Signal/Slot Editor
طبعا لاحظ في الجهة اليمنى يوجد Signal/Slot Editor
Resized to 96% (was 679 x 289) - Click image to enlarge
***
- من قائمة Form اختر Preview ، اذا اردت ان تشاهد ال Dialog الذي صممته.
- من قائمة Form اختر View Code لرؤية الكود الخاص بتكوين ال Dialog الذي صممته.
لاحظ الدالة setupUi وهي الدالة التي يستدعيها البرنامج داخل ال constructor و الخاصة بتهيئة ال Dialog .
الان اغلق ال Qt Designer ثم قم ببناء البرنامج من جديد و نفذه.
انتهى الدرس.. التطبيق في المرفقات.
طبعا هذا مختصر جدا ولم اتطرق الى كثير من الامور لأني انا لا اعلمها.
لكن يمكن الذهاب الى
لتجد فيه ضالتك.
مثلا انا ذكرت ال QMessageBox بأبسط صورها ، لكن في ال Assistant ستجد التفصيل و الانواع.
MyP1.rar (30.17كيلو )
الدرس الثاني..
سنعمل التطبيق التالي
- كون مشروع جديد.
- افتح ال Qt Designer وكون التطبيق كما في الشكل ، أي اضف :
3 Buttons
2 Labels
2 Line Edit
- اضغط بالزر الايمن على ال label الاول و اختر Change plain text و غيره الى Name ، ونفس الشيء مع ال label الثاني وغيره الى Password .
- غير اسماء ال buttons كما في الصورة التي في الاعلى ثم غير ال objectName الى showButton و resetButton و exitButton على التوالي.
- غير ال objectName لل Line Edit الى txtName للأول و txtPass للثاني.
- الان اختر ال line edit الثاني (الخاص بكلمة المرور) و غير خاصية ال echoMode الى password (غير الخاصية من نافذت ال Property Editor ) .
- اضغط على F4 للأنتقال الى Edit Signals/Slots
- اضف دالة الخروج الى زر Exit كما فعلنا في الدرس الاول
الان سنضيف وظيفة زر Reset ،
اضغط على زر Reset واسحب الماوس و أفلته داخل ال Line Edit الاول
من النافذة التي ستظهر اختر كما في الصورة
الان مرة اخرى اختر زر Reset و اسحب الماوس لكن هذه المرة افلته داخل ال Line Edit الثاني وايضا اختر كما في الصورة التي في الاعلى.
و الصورة النهائية
Resized to 85% (was 768 x 274) - Click image to enlarge
الان اغلق ال Qt Designer (و لا تنسى الخزن) للعودة الى ال QDevelop لأضافة الكود اللازم.
اولا ملف الهيدر اضف
Resized to 93% (was 704 x 351) - Click image to enlarge
ثانيا ملف السورس اضف
Resized to 80% (was 810 x 383) - Click image to enlarge
بالنسبة للكود المضاف هنا ،،
السطر الاول اضفته فقط لأريك امكانية التعامل مع ال Line Edit بواسطة الكود ،، ممكن عن طريق هذه الدالة setText ان نضع النص الذي نريده داخل ال Line Edit .
لاحظ اننا تعاملنا مع ال Line Edit عن طريق اسم ال objectName الذي أعطيناه اثناء مرحلة التصميم و ايضا استخدمنا ال -> لأن ال Line Edit معرف على انه pointer ،،
لو رأيت الكود الخاص ب Dialog خلال التصميم (كما ذكرت في الدرس الاول) ستلاحظ التعريف
ثم بعد ذلك في دالة ال Show قمنا بأسترجاع النص المكتوب عن طريق الدالة text ،
ثم العرض في MessageBox .
ونفذ البرنامج.
التطبيق في المرفقات ..
ملف مرفق(ملفات)
MyP2.rar (33.16كيلو )
نكمل مع درس صغير .. عالماشي ..
راح نستخدم Qt Creator في عمل تطبيق بسيط ،،
راح نطبق بعض الطرق في ادخال القيم من كتاب Foundations of Qt Development .
هذه هي واجهة ال Qt Creator
Resized to 63% (was 1030 x 729) - Click image to enlarge
من قائمة File اختر New ،
ثم اختر :
ثم حدد الاسم و مكان الخزن
ثم Next
من الواجهة التي ستظهر لا تختر شيئ لأننا لن نحتاج اليه فقط اضغط Next
ثم من الواجهة التي ستظهر اختر QDialog كـ Base class
،،
الان ستظهر لك ملفات البرنامج ،،
اضغط دبك كلك على dialog.ui ليفتح لك جزء التصميم ،،
و اضف 3 ازرار كما في الصورة
Resized to 85% (was 765 x 311) - Click image to enlarge
و غير ال objectName لهم الى textButton,, intButton,, itemButton على التوالي.
انتقل الى ملف الهيدر و أضف الكود كما في الصورة:
Resized to 91% (was 717 x 503) - Click image to enlarge
ثم في ملف السورس اضف
Resized to 87% (was 745 x 200) - Click image to enlarge
#include "dialog.h"
Dialog::Dialog(QWidget *parent, Qt::WFlags flags)
: QDialog(parent, flags)
{
ui.setupUi(this);
connect(ui.textButton ,SIGNAL(clicked()), this , SLOT(InputText()));
connect(ui.intButton,SIGNAL(clicked()), this , SLOT(InputNum()));
connect(ui.itemButton ,SIGNAL(clicked()), this , SLOT(ChooseItem()));
}
Dialog::~Dialog()
{
}
void Dialog::InputText()
{
bool ok;
QString text = QInputDialog::getText(
this,
tr("string"),
tr("Enter your name:"),
QLineEdit::Normal,
tr("Alingsas"),
&ok);
if ( ok && !text.isEmpty())
QMessageBox::information(this,"Input", " Hello " + text);
}
void Dialog::InputNum()
{
bool ok;
QStringList items;
items << tr("foo") << tr("Bar") << tr("Baz");
QString item = QInputDialog::getItem(
this,
tr("Item"),
tr("Pick an item:"),
items,
0,
false,
&ok);
if ( ok && !item.isEmpty())
QMessageBox::information(this,"Input", item);
}
void Dialog::ChooseItem()
{
bool ok;
int value = QInputDialog::getInteger(
this,
tr("Integer"),
tr("Enter an angle."),
90,
0,
360,
1,
&ok);
if(ok)
QMessageBox::information(this,"Input",QString::number(value));
}
نفذ البرنامج و ستفهم الكود :PP
بسيط لا يحتاج لشرح
ملف مرفق(ملفات)
MyP.rar (513.1كيلو )
التطبيق البسيط الذي سنكونه
أي سنتعامل ببساطة مع ال Check Box و ال Radio Button .
- كون مشروع جديد
- افتح ال Qt Designer وكون ال dialog كما في الصورة التي في الاعلى (اظن واضحة ولا تحتاج الى شرح)
- اضغط على زر Exit و من نافذة ال Property Editor احذف التأشير من امام خاصية ال enabled ليصبح الزر غير مفعل كما في الصورة التي بالاعلى.
- انتقل الى Edit Signals/Slots (اذا نسيت كيف .. اضغط على F4) واربط زر Exit مع دالة الخروج close
غير ال objectName لل widget كالآتي
Radio button 1 --> rdoMale
Radio button 2 --> rdoFemale
Show button --> showButton
Exit button --> exitButton
الان اخزن البرنامج و عد الى QDevelop لأضافة الكود اللازم.
في ملف الهيدر اضف
Resized to 90% (was 723 x 316) - Click image to enlarge
وفي ملف السورس كود
بالنسبة لدالة ال Show نقوم بالتأكد لمعرفة أي ال radio button مختار لنظهر اسمه في Message Box ، نتأكد بأستخدام دالة isChecked() .
اما دالة EnabledExit ، فنفحص اذا كان ال ckeck box مؤشر نقوم بتفعيل زر الخروج ، وعندما نحذف التأشير يتم تعطيل زر الخروج.
طبعا هذه الدالة EnabledExit تتنفذ كلما اشرنا او حذفنا التأشير ، لأن في كل مرة سيتولد stateChanged والذي ربطناه مع دالتنا عن طريق دالة connect .
طبعا اعود و اكرر ..
هذه الدروس فقط لترشدك لأول الطريق ،، للمزيد اذهب الى Qt Assistant
و ابحث عن مثلا .. QCheckBox ،،
لتتعرف على جميع الدوال و الخصائص لهذا ال widget .
تحياتي
ملف مرفق(ملفات)
MyP3.rar (32.65كيلو )
على بركة الله .. مستمرين معكم
واجهة التطبيق الذي سنكونه ان شاء الله
التطبيق بسيط كالعادة ،،
سيكون لدينا List Widget (و هي ال list التي ستحوي على ال items) .
سيكون لدينا Line Edit لأدخال قيمة item المضاف ،
وايضا ثلاث ازرار ، واحد للأضافة واخر لحذف عنصر معين و زر لمسح جميع العناصر.
- كون مشروع جديد وافتح ال Qt Designer وكون التطبيق كما في الصورة التي في الاعلى.
- انتقل الى edit Signals/Slots واضغط بالماوس على زر delete all واسحب الماوس و افلته داخل ال ListWidget .
ومن النافذة التي ستظهر حدد .. كما في الصورة
هذه الدالة ستقوم بمسح جميع العناصر من داخل ال list .
الان اخزن البرنامج وعد الى QDevelop لأضافة الكود اللازم.
في ملف الهيدر
و في ملف السورس
Resized to 85% (was 763 x 374) - Click image to enlarge
اول سطرين اضافة دالة connect ،، صارت قديمة !!!
في دالة AddItem نأخذ ما مكتوب في ال Line Edit ونضيفة الى ال list ،،
في دالة ال DeleteItem نقوم بحذف العنصر المؤشر علية بالماوس.
التطبيق في المرفقات.
ملف مرفق(ملفات)
MyP4.rar (31.38كيلو )
نكمل بعون الله ،،
سنتعلم كيفية فتح ال common dialog بصورة بسيطة (فقط طريقة العرض) على ان نطبق هذا الدرس لاحقا في درس متقدم ان شاء الله ،، في عمل Editor بسيط او عمل برنامج بسيط لعرض الصور ..
طبعا ال common dialog هي موجودة في اغلب البرامج ،، عندما تختار open لفتح ملف معين ، او save لخزن ملف معين وهكذا.
نبدأ بالتطبيق ،
كون مشروع جديد وانتقل الى ال Designer واضف 5 ازرار كما في الصورة:
اخزن وانتقل الى ال QDevelop لأضافة الكود اللازم.
في ملف الهيدر اضف
و ملف السورس سيكون كالاتي:
#include "commonDlg.h"
//
CommonDlg::CommonDlg( QWidget * parent, Qt::WFlags f)
: QDialog(parent, f)
{
setupUi(this);
connect(openButton,SIGNAL(clicked()), this , SLOT(Open()));
connect(saveButton,SIGNAL(clicked()), this , SLOT(Save()));
connect(opnDirButton ,SIGNAL(clicked()), this , SLOT(OpenDir()));
connect(colorButton,SIGNAL(clicked()), this , SLOT(SetColor()));
connect(fontButton,SIGNAL(clicked()), this , SLOT(SetFont()));
}
//
void CommonDlg::Open()
{
QString filename = QFileDialog::getOpenFileName( this,
tr("Open Document"),
QDir::currentPath(),
tr("Document files (*.doc *.rtf);; All files(*.*)"));
if (!filename.isNull())
QMessageBox::information(this , "Open ",filename);
}
void CommonDlg::Save()
{
QString filename = QFileDialog::getSaveFileName( this,
tr("Save Document"),
QDir::currentPath(),
tr("Documents (*.doc)"));
}
void CommonDlg::OpenDir()
{
QString filename = QFileDialog::getExistingDirectory( this,
tr("Select a Directory"),
QDir::currentPath());
if (!filename.isNull())
QMessageBox::information(this , "Open Dir ",filename);
}
void CommonDlg::SetColor()
{
QColor color = QColorDialog::getColor(
Qt::yellow,
this );
if (color.isValid() )
{
}
}
void CommonDlg::SetFont()
{
bool ok;
QFont font = QFontDialog::getFont(
&ok,
QFont ( " Arial", 18 ),
this,
tr("Pick a font"));
if(ok)
{
}
}
طبعا الامر واضح وبسيط ،
فقط استدعاء الدالة المسؤولة عن عرض ال dialog.
مستقبلا ان شاء الله سنتعلم كيف يمكن ان نستفاد من هذه ال dialogs في تطبيق عملي.
اذا قدر الله لنا الاستمرار.
ملف مرفق(ملفات)
MyP7.rar (31.38كيلو )
التطبيق هذه المرة سيكون عبارة عن الة حاسبة بسيطة بأربع عمليات
الجديد هو التعامل مع ال Combo Box
وهو الذي سيحوي على اسماء العمليات.
- كون مشروع جديد و انتقل الى ال Qt Designer .
- اضف 2 labels ,, 2 Line Edit ,, ComboBox ,, Push Button
- اضغط بالزر الايمن على ال combo box و اختر Edit Items
من النافذة التي ستظهر اضغط على علامة + لأضافة عنصر جديد ،، اضف اربع عناصر كما في الصورة
اخزن البرنامج وانتقل الى QDevelop ..
في ملف الهيدر اضف ..
وفي ملف السورس
اضف الكود
Resized to 79% (was 826 x 427) - Click image to enlarge
void DialogCalc::calcResult()
{
long Num1,Num2;
Num1 = txtNum1->text().toLong();
Num2 = txtNum2->text().toLong();
if(comboBox->itemText(comboBox->currentIndex()) =="Add")
QMessageBox::information(this ,"Result",QString::number(Num1 + Num2));
else
if(comboBox->itemText(comboBox->currentIndex()) =="Sub")
QMessageBox::information(this ,"Result",QString::number(Num1 - Num2));
else
if(comboBox->itemText(comboBox->currentIndex()) =="Mul")
QMessageBox::information(this ,"Result",QString::number(Num1 * Num2));
else
if(comboBox->itemText(comboBox->currentIndex()) =="Div")
QMessageBox::information(this ,"Result",QString::number(Num1 / Num2));
}
في هذه الدالة ،، اولا نحول القيمة المدخلة من string الى قيمة عددية عن طريق استخدام الدالة toLong() ،
من ال Assistant ،، هذه الدالة
long QString::toLong ( bool * ok = 0, int base = 10 ) const
Returns the string converted to a long using base base, which is 10 by default and must be between 2 and 36, or 0. Returns 0 if the conversion fails.
If a conversion error occurs, *ok is set to false; otherwise *ok is set to true.
If base is 0, the C language convention is used: If the string begins with "0x", base 16 is used; if the string begins with "0", base 8 is used; otherwise, base 10 is used.
Example:
QString str = "FF";
bool ok;
long hex = str.toLong(&ok, 16); // hex == 255, ok == true
long dec = str.toLong(&ok, 10); // dec == 0, ok == false
ثم بعد ذلك نحدد أي عملية مختارة و على اساسها نقوم اما بالجمع او الطرح او ...
وعندما نعرض القيمة نعيد تحويلها الى string ثم نعرضها ب MessageBox ،،
التحويل الى string عن طريق QString::numbe .
ملف مرفق(ملفات)
MyP5.rar (37.35كيلو )
في هذا الدرس سنكون برنامج يحوي Main Window و سنضيف Text Edit ، وايضا سنتعلم كيفية التعامل مع ال menu واضافة Toolbar .
كون مشروع جديد ، لكن هذه المرة من الواجهة التي تظهر اختر Application with Main Window
.
انتقل الى ال Qt Designer
ومن قائمة ال Widgets اضف Text Edit و غير حجمه كما في الصورة
لاحظ في اعلى النافذة يوجد Type Here ، وهذه لأضافة عناصر ال Menu ،
اضغط دبل كلك على مكان Type Here و اكتب File ثم اضغط Enter ، اضف عنصرين لهذه القائمة هما Open و Exit كما في الصورة.
لاحظ ايضا في الجهة اليمنى من ال Qt Designer يوجد نافذة Action Editor للتعامل مع القوائم.
(اذا لم تكن موجودة يمكنك اظهارها بأختيارها من قائمة Tools)
Resized to 65% (was 1004 x 564) - Click image to enlarge
الان لأضافة Toolbar اضغط بزر الماوس الايمن في اسفل النافذة على الشريط و اختر من القائمة Add Tool Bar
كما في الصورة
سيضاف شريط جديد اعلى النافذة (اسفل القائمة)
الان من ال Action Editor هناك عمود اسمه ToolTip من خلاله اختر Open واضغط عليه بالماوس واسحبه و أفلته داخل ال Toolbar الجديد الذي كونته.
Resized to 65% (was 1012 x 576) - Click image to enlarge
لاحظ كيف سيضاف اختيار Open الى ال Toolbar
اترك ال Qt Designer كما هي واذهب الى ال QDevelop
ومن نافذة ال Project Explorer
اضغط كلك يمين على اسم المشروع واختر Add New Item
ومن النافذة التي ستظهر اختر Resources
سيضاف فايل جديد للمشروع اكتب بداخله كما في الصورة
طبعا هذا الهدف من وراءه اننا سنضيف ايقونة للبرنامج ، مكان الصورة هي في مجلد اسمه images موجود مع ملفات البرنامج (قد كونته مسبقا وهو يحوي على الصورة بداخلة ، أي يجب ان تكون المجلد قبل عمل هذه الخطوة ، وهو موجود في المرفقات ضمن البرنامج يمكنك نقله من هناك)
Resized to 78% (was 840 x 153) - Click image to enlarge
الان نرجع ال Qt Designer ،
نذهب الى نافذة Action Editor ونضغط دبل كلك على actionOpen
ستظهر لنا النافذة التالية ، نختر منها علامة النقاط (...) ، - أي الذي يمثل زر Browse –
ومن النافذة التي ستظهر نختر Edit Resources (علامة القلم)
ومن النافذة التي ستظهر نختار Open Resource File
Resized to 95% (was 687 x 352) - Click image to enlarge
ونقوم بتحديد ملف ال resource الذي قمنا بتكوينه من خلال ال QDevelop قبل قليل .
لا حظ كيف اضيف الملف
Resized to 95% (was 684 x 351) - Click image to enlarge
ثم اضغط على ok و ok و ok !!
والنتيجة ، لاحظ كيف اضيف الايقون الى ال Toolbar بدل كلمة open .
يمكنك ان تشاهد الشكل النهائي للنافذة بالذهاب الى قائمة Form واختيار Preview
الان اغلق ال Qt Designer وارجع الى ال QDevelop
في نلف الهيدر اضف
في ملف السورس اضف
Resized to 80% (was 812 x 334) - Click image to enlarge
في دالة ال Open سنقوم بفتح ملف و عرض محتواه داخل ال Text Edit
We use the QIODevice::Text flag so that the editor can cope with the differences between Unix and Windows with respect to text files. Unix uses just a line feed (\n) to separate lines, whereas Windows in addition requires the control character for a carriage return (\r\n). Qt classes are internally based on Unix conventions wherever possible, which is why QTextEdit only works with line feeds, and so we have QFile remove all the carriage returns when it opens a text file on Windows platforms by specifying QIODevice::Text.
Now the readAll() method reads the entire contents of the file into a QByteArray. We could import this directly into the textWidget, using setPlainText(), but we do not knowthe encoding format of the files. QByteArray contains the text in its 8-bit encoding, while QString uses 16-bit Unicode characters. In Windows, text files are normally saved in UTF-8 format. This mirrors the Unicode characters in 8-bits, and is compatible to ASCII encoding. In Linux, text files are available either as UTF-8 or in country-specific encoding, such as ISO Latin 1 (also known as ISO 8859-1). For the sake of simplicity, this application assumes that files are always encoded in UTF-8 and therefore converts the text contents using QString::fromUtf8() into a QString.
(.The.Art.of.Building.Qt.Applications.)
ملف مرفق(ملفات)
MyP8.rar (60.75كيلو )