البداية مع Qt دروس بسيطة

الناقل : elmasry | الكاتب الأصلى : الاخير زمانه | المصدر : www.arabteam2000-forum.com

السلام عليكــم ورحمـة الله وبركاتــة

على بركة الله ابدء معكم دروس بسيطة لتعلم ال Qt .
طبعا المستوى مبتدئ ,, لأني انا مبتدئ.


اتمنى من الاعضاء الخبراء ان يتواجدوا هنا و ان يصححوا لي فأحتمال الخطأ وارد جدا.

الهدف من الموضوع ان نتعلم معا ..
وكل من لديه معلومة يضيفها.

بسم الله نبدأ.

يفترض انك منصب متطلبات العمل.
راجع الشرح هنا
http://qt-ar.org/lessons/show3.html

هذه هي واجهة ال QDevelop و التي سنعمل عليها

Resized to 51% (was 1280 x 800) - Click image to enlargeارفق صورة : monthly_11_2008/post-47438-1225732323.jpg


لتكوين مشروع جديد ، من قائمة Project اختر New Project ،
ثم أعطي المعلومات المطلوبة كما تشاء.

كالعادة ، البرنامج الاول سيكون Hello Qt

بعد تكوين المشروع لاحظ نافذت ال project explorer في يسار النافذة ،،
كما في الصورة

ارفق صورة : monthly_11_2008/post-47438-1225732369.jpg

هذه هي الملفات الاساسية للمشروع.

الان اضغط دبل كلك على الملف hello.ui .

سفتح لك ال Qt Designer
كما في الصورة.


Resized to 51% (was 1280 x 800) - Click image to enlargeارفق صورة : monthly_11_2008/post-47438-1225733035.jpg

اضغط على زر close .
سيظهر لك dialog يحوي على زر Ok , Cancel ،، قم بحذف هذه الازرار بواسطة مفتاح Del .

الان سيكون ال dialog فارغ،،

في الجهة اليسرى من الشاشة سيكون هناك ال Widget Box (يعني ال controls) التي ممكن ان تضيفها الى ال dialog .

سنضيف زر ، من القائمة اختر Push Button و قم بسحبة الى ال dialog


ارفق صورة : monthly_11_2008/post-47438-1225732481.jpg

غير حجم الزر كما تشاء ،
انا لدي كما في الصورة
ارفق صورة : monthly_11_2008/post-47438-1225732528.jpg

الان اضغط بالزر الايمن للماوس على الزر و اختار Change text

ارفق صورة : monthly_11_2008/post-47438-1225733091.jpg

واكتب Hello Qt

ثم مرة اخرى من القائمة اختر Change objectName وسمه HelloBtn ثم اضغط OK .

ارفق صورة : monthly_11_2008/post-47438-1225733143.jpg

الان اغلق ال Qt Designer ، سيطالبك بالخزن فأضغط نعم.
ستعود الى ال QDevelop .

الان افتح ملف الهيدر (لدي اسمه HelloDlg) واضف اليه الاسطر كما في الصورة

Resized to 72% (was 909 x 385) - Click image to enlargeارفق صورة : monthly_11_2008/post-47438-1225733191.jpg


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

الان انتقل الى ملف السورس (بواسطة ال Project Explorer)
واضف الاسطر كما في الصورة

Resized to 68% (was 967 x 309) - Click image to enlargeارفق صورة : monthly_11_2008/post-47438-1225733255.jpg


السطر الاول المضاف ،
هي الدالة المسؤولة عن ربط ال 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
والنتيجة .. كما في الصورة

ارفق صورة : monthly_11_2008/post-47438-1225733446.jpg


طيب .. الان سنضيف زر خروج للبرنامج ..
افتح مرة اخرى ال Qt Designer واضف زر جديد ليصبح البرنامج كما في الصورة

ارفق صورة : monthly_11_2008/post-47438-1225733484.jpg

اضغط بالزر الايمن للماوس على الزر الجديد و اختر Change objectName غيره الى exitButton ،،
الان سنتعلم طريقة ثانية للربط بواسطة ال Qt Designer بدل استخدام الكود (أي دالة connect)
من قائمة Edit اختر Edit Signals/Slots

ارفق صورة : monthly_11_2008/post-47438-1225733591.jpg

الان اضغط على زر Exit لاحظ ظهور سهم ، هذا معناه ان زر Exit سيمثل ال sender و حيث ما ستفلت الماوس سيمثل ال receiver ،،
افلت الماوس على أي جزء من ال Dialog

ارفق صورة : monthly_11_2008/post-47438-1225733642.jpg

لاحظ اول ما تفلت الماوس سيظهر لك dialog ، في الجهة اليسرى يظهر لك ال signals المتوفرة مع هذا ال widget و على الجهة اليمنى تظهر الوظائف المتوفرة (التي كنا نكتبها في ال slot)
ارفق صورة : monthly_11_2008/post-47438-1225733698.jpg

كما في الصورة ،
اولا اشر على ال check box الموجود في الاسفل ، من الجهة اليسرى اختر clicked و من الجهة اليمنى اختر close .
ثم اضغط ok .
الان اضغط على F3 للعودة للوضع الطبيعي ،،
طبعا لاحظ في الجهة اليمنى يوجد Signal/Slot Editor

طبعا لاحظ في الجهة اليمنى يوجد Signal/Slot Editor
Resized to 96% (was 679 x 289) - Click image to enlargeارفق صورة : monthly_11_2008/post-47438-1225734477.jpg


***

- من قائمة Form اختر Preview ، اذا اردت ان تشاهد ال Dialog الذي صممته.
- من قائمة Form اختر View Code لرؤية الكود الخاص بتكوين ال Dialog الذي صممته.

ارفق صورة : monthly_11_2008/post-47438-1225734597.jpg

لاحظ الدالة setupUi وهي الدالة التي يستدعيها البرنامج داخل ال constructor و الخاصة بتهيئة ال Dialog .
الان اغلق ال Qt Designer ثم قم ببناء البرنامج من جديد و نفذه.

انتهى الدرس.. التطبيق في المرفقات.

طبعا هذا مختصر جدا ولم اتطرق الى كثير من الامور لأني انا لا اعلمها.
لكن يمكن الذهاب الى

ارفق صورة : monthly_11_2008/post-47438-1225734664.jpg


لتجد فيه ضالتك.
مثلا انا ذكرت ال QMessageBox بأبسط صورها ، لكن في ال Assistant ستجد التفصيل و الانواع.

ملف مرفق  MyP1.rar (30.17كيلو )

الدرس الثاني..

سنعمل التطبيق التالي

ارفق صورة : monthly_11_2008/post-47438-1225802455.jpg

- كون مشروع جديد.
- افتح ال 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 ) .

ارفق صورة : monthly_11_2008/post-47438-1225802522.jpg


- اضغط على F4 للأنتقال الى Edit Signals/Slots
- اضف دالة الخروج الى زر Exit كما فعلنا في الدرس الاول

ارفق صورة : monthly_11_2008/post-47438-1225802559.jpg


الان سنضيف وظيفة زر Reset ،
اضغط على زر Reset واسحب الماوس و أفلته داخل ال Line Edit الاول

ارفق صورة : monthly_11_2008/post-47438-1225802587.jpg

من النافذة التي ستظهر اختر كما في الصورة

ارفق صورة : monthly_11_2008/post-47438-1225802618.jpg

الان مرة اخرى اختر زر Reset و اسحب الماوس لكن هذه المرة افلته داخل ال Line Edit الثاني وايضا اختر كما في الصورة التي في الاعلى.

و الصورة النهائية

Resized to 85% (was 768 x 274) - Click image to enlargeارفق صورة : monthly_11_2008/post-47438-1225802647.jpg


الان اغلق ال Qt Designer (و لا تنسى الخزن) للعودة الى ال QDevelop لأضافة الكود اللازم.

اولا ملف الهيدر اضف
Resized to 93% (was 704 x 351) - Click image to enlargeارفق صورة : monthly_11_2008/post-47438-1225802682.jpg


ثانيا ملف السورس اضف
Resized to 80% (was 810 x 383) - Click image to enlargeارفق صورة : monthly_11_2008/post-47438-1225802714.jpg


بالنسبة للكود المضاف هنا ،،
السطر الاول اضفته فقط لأريك امكانية التعامل مع ال Line Edit بواسطة الكود ،، ممكن عن طريق هذه الدالة setText ان نضع النص الذي نريده داخل ال Line Edit .
لاحظ اننا تعاملنا مع ال Line Edit عن طريق اسم ال objectName الذي أعطيناه اثناء مرحلة التصميم و ايضا استخدمنا ال -> لأن ال Line Edit معرف على انه pointer ،،
لو رأيت الكود الخاص ب Dialog خلال التصميم (كما ذكرت في الدرس الاول) ستلاحظ التعريف

ارفق صورة : monthly_11_2008/post-47438-1225802747.jpg

ثم بعد ذلك في دالة ال 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ارفق صورة : monthly_11_2008/post-47438-1225865425.jpg


من قائمة File اختر New ،
ثم اختر :
ارفق صورة : monthly_11_2008/post-47438-1225865461.jpg


ثم حدد الاسم و مكان الخزن

ارفق صورة : monthly_11_2008/post-47438-1225865504.jpg

ثم Next
من الواجهة التي ستظهر لا تختر شيئ لأننا لن نحتاج اليه فقط اضغط Next


ارفق صورة : monthly_11_2008/post-47438-1225865538.jpg
ثم من الواجهة التي ستظهر اختر QDialog كـ Base class

ارفق صورة : monthly_11_2008/post-47438-1225865578.jpg

،،
الان ستظهر لك ملفات البرنامج ،،
اضغط دبك كلك على dialog.ui ليفتح لك جزء التصميم ،،
و اضف 3 ازرار كما في الصورة

Resized to 85% (was 765 x 311) - Click image to enlargeارفق صورة : monthly_11_2008/post-47438-1225865606.jpg


و غير ال objectName لهم الى textButton,, intButton,, itemButton على التوالي.
انتقل الى ملف الهيدر و أضف الكود كما في الصورة:

Resized to 91% (was 717 x 503) - Click image to enlargeارفق صورة : monthly_11_2008/post-47438-1225865636.jpg


ثم في ملف السورس اضف
Resized to 87% (was 745 x 200) - Click image to enlargeارفق صورة : monthly_11_2008/post-47438-1225865679.jpg

ارفق صورة : monthly_11_2008/post-47438-1225865707.jpg


#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كيلو )

التطبيق البسيط الذي سنكونه
ارفق صورة : monthly_11_2008/post-47438-1225959487.jpg

أي سنتعامل ببساطة مع ال Check Box و ال Radio Button .

- كون مشروع جديد
- افتح ال Qt Designer وكون ال dialog كما في الصورة التي في الاعلى (اظن واضحة ولا تحتاج الى شرح)
- اضغط على زر Exit و من نافذة ال Property Editor احذف التأشير من امام خاصية ال enabled ليصبح الزر غير مفعل كما في الصورة التي بالاعلى.
- انتقل الى Edit Signals/Slots (اذا نسيت كيف .. اضغط على F4) واربط زر Exit مع دالة الخروج close


ارفق صورة : monthly_11_2008/post-47438-1225959564.jpg
غير ال 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ارفق صورة : monthly_11_2008/post-47438-1225959629.jpg


وفي ملف السورس كود

ارفق صورة : monthly_11_2008/post-47438-1225959707.jpg

بالنسبة لدالة ال Show نقوم بالتأكد لمعرفة أي ال radio button مختار لنظهر اسمه في Message Box ، نتأكد بأستخدام دالة isChecked() .

اما دالة EnabledExit ، فنفحص اذا كان ال ckeck box مؤشر نقوم بتفعيل زر الخروج ، وعندما نحذف التأشير يتم تعطيل زر الخروج.
طبعا هذه الدالة EnabledExit تتنفذ كلما اشرنا او حذفنا التأشير ، لأن في كل مرة سيتولد stateChanged والذي ربطناه مع دالتنا عن طريق دالة connect .


طبعا اعود و اكرر ..
هذه الدروس فقط لترشدك لأول الطريق ،، للمزيد اذهب الى Qt Assistant

و ابحث عن مثلا .. QCheckBox ،،
لتتعرف على جميع الدوال و الخصائص لهذا ال widget .

تحياتي
 
ملف مرفق(ملفات)
 
ملف مرفق  MyP3.rar (32.65كيلو )

على بركة الله .. مستمرين معكم

واجهة التطبيق الذي سنكونه ان شاء الله

ارفق صورة : monthly_11_2008/post-47438-1226070529.jpg

التطبيق بسيط كالعادة ،،
سيكون لدينا List Widget (و هي ال list التي ستحوي على ال items) .
سيكون لدينا Line Edit لأدخال قيمة item المضاف ،
وايضا ثلاث ازرار ، واحد للأضافة واخر لحذف عنصر معين و زر لمسح جميع العناصر.

- كون مشروع جديد وافتح ال Qt Designer وكون التطبيق كما في الصورة التي في الاعلى.
- انتقل الى edit Signals/Slots واضغط بالماوس على زر delete all واسحب الماوس و افلته داخل ال ListWidget .

ارفق صورة : monthly_11_2008/post-47438-1226070562.jpg

ومن النافذة التي ستظهر حدد .. كما في الصورة

ارفق صورة : monthly_11_2008/post-47438-1226070608.jpg

هذه الدالة ستقوم بمسح جميع العناصر من داخل ال list .

الان اخزن البرنامج وعد الى QDevelop لأضافة الكود اللازم.
في ملف الهيدر


ارفق صورة : monthly_11_2008/post-47438-1226070635.jpg
و في ملف السورس

Resized to 85% (was 763 x 374) - Click image to enlargeارفق صورة : monthly_11_2008/post-47438-1226070663.jpg


اول سطرين اضافة دالة connect ،، صارت قديمة !!!

في دالة AddItem نأخذ ما مكتوب في ال Line Edit ونضيفة الى ال list ،،
في دالة ال DeleteItem نقوم بحذف العنصر المؤشر علية بالماوس.


التطبيق في المرفقات.
 
ملف مرفق(ملفات)
 
ملف مرفق  MyP4.rar (31.38كيلو )

نكمل بعون الله ،،
سنتعلم كيفية فتح ال common dialog بصورة بسيطة (فقط طريقة العرض) على ان نطبق هذا الدرس لاحقا في درس متقدم ان شاء الله ،، في عمل Editor بسيط او عمل برنامج بسيط لعرض الصور ..

طبعا ال common dialog هي موجودة في اغلب البرامج ،، عندما تختار open لفتح ملف معين ، او save لخزن ملف معين وهكذا.

نبدأ بالتطبيق ،
كون مشروع جديد وانتقل الى ال Designer واضف 5 ازرار كما في الصورة:

ارفق صورة : monthly_11_2008/post-47438-1226413696.jpg


اخزن وانتقل الى ال QDevelop لأضافة الكود اللازم.


في ملف الهيدر اضف

ارفق صورة : monthly_11_2008/post-47438-1226413728.jpg

و ملف السورس سيكون كالاتي:

#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كيلو )

التطبيق هذه المرة سيكون عبارة عن الة حاسبة بسيطة بأربع عمليات
ارفق صورة : monthly_11_2008/post-47438-1226414706.jpg
الجديد هو التعامل مع ال Combo Box
وهو الذي سيحوي على اسماء العمليات.

- كون مشروع جديد و انتقل الى ال Qt Designer .
- اضف 2 labels ,, 2 Line Edit ,, ComboBox ,, Push Button
- اضغط بالزر الايمن على ال combo box و اختر Edit Items


ارفق صورة : monthly_11_2008/post-47438-1226414727.jpg
من النافذة التي ستظهر اضغط على علامة + لأضافة عنصر جديد ،، اضف اربع عناصر كما في الصورة


ارفق صورة : monthly_11_2008/post-47438-1226414738.jpg
اخزن البرنامج وانتقل الى QDevelop ..
في ملف الهيدر اضف ..


ارفق صورة : monthly_11_2008/post-47438-1226414749.jpg
وفي ملف السورس

اضف الكود

Resized to 79% (was 826 x 427) - Click image to enlargeارفق صورة : monthly_11_2008/post-47438-1226414763.jpg


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
.
ارفق صورة : monthly_11_2008/post-47438-1226815744.jpg

انتقل الى ال Qt Designer
ومن قائمة ال Widgets اضف Text Edit و غير حجمه كما في الصورة

ارفق صورة : monthly_11_2008/post-47438-1226815783.jpg

لاحظ في اعلى النافذة يوجد Type Here ، وهذه لأضافة عناصر ال Menu ،
اضغط دبل كلك على مكان Type Here و اكتب File ثم اضغط Enter ، اضف عنصرين لهذه القائمة هما Open و Exit كما في الصورة.

ارفق صورة : monthly_11_2008/post-47438-1226815819.jpg

لاحظ ايضا في الجهة اليمنى من ال Qt Designer يوجد نافذة Action Editor للتعامل مع القوائم.
(اذا لم تكن موجودة يمكنك اظهارها بأختيارها من قائمة Tools)

Resized to 65% (was 1004 x 564) - Click image to enlargeارفق صورة : monthly_11_2008/post-47438-1226815869.jpg


الان لأضافة Toolbar اضغط بزر الماوس الايمن في اسفل النافذة على الشريط و اختر من القائمة Add Tool Bar
كما في الصورة

ارفق صورة : monthly_11_2008/post-47438-1226815936.jpg

سيضاف شريط جديد اعلى النافذة (اسفل القائمة)
الان من ال Action Editor هناك عمود اسمه ToolTip من خلاله اختر Open واضغط عليه بالماوس واسحبه و أفلته داخل ال Toolbar الجديد الذي كونته.

Resized to 65% (was 1012 x 576) - Click image to enlargeارفق صورة : monthly_11_2008/post-47438-1226815980.jpg


لاحظ كيف سيضاف اختيار Open الى ال Toolbar


ارفق صورة : monthly_11_2008/post-47438-1226816014.jpg

اترك ال Qt Designer كما هي واذهب الى ال QDevelop
ومن نافذة ال Project Explorer
اضغط كلك يمين على اسم المشروع واختر Add New Item


ارفق صورة : monthly_11_2008/post-47438-1226816059.jpg

ومن النافذة التي ستظهر اختر Resources

ارفق صورة : monthly_11_2008/post-47438-1226816094.jpg

سيضاف فايل جديد للمشروع اكتب بداخله كما في الصورة


ارفق صورة : monthly_11_2008/post-47438-1226816142.jpg

طبعا هذا الهدف من وراءه اننا سنضيف ايقونة للبرنامج ، مكان الصورة هي في مجلد اسمه images موجود مع ملفات البرنامج (قد كونته مسبقا وهو يحوي على الصورة بداخلة ، أي يجب ان تكون المجلد قبل عمل هذه الخطوة ، وهو موجود في المرفقات ضمن البرنامج يمكنك نقله من هناك)
Resized to 78% (was 840 x 153) - Click image to enlargeارفق صورة : monthly_11_2008/post-47438-1226816178.jpg



الان نرجع ال Qt Designer ،
نذهب الى نافذة Action Editor ونضغط دبل كلك على actionOpen

ارفق صورة : monthly_11_2008/post-47438-1226816224.jpg

ستظهر لنا النافذة التالية ، نختر منها علامة النقاط (...) ، - أي الذي يمثل زر Browse –

ارفق صورة : monthly_11_2008/post-47438-1226816269.jpg

ومن النافذة التي ستظهر نختر Edit Resources (علامة القلم)

ارفق صورة : monthly_11_2008/post-47438-1226816312.jpg

ومن النافذة التي ستظهر نختار Open Resource File
Resized to 95% (was 687 x 352) - Click image to enlargeارفق صورة : monthly_11_2008/post-47438-1226816353.jpg


ونقوم بتحديد ملف ال resource الذي قمنا بتكوينه من خلال ال QDevelop قبل قليل .


ارفق صورة : monthly_11_2008/post-47438-1226816388.jpg

لا حظ كيف اضيف الملف

Resized to 95% (was 684 x 351) - Click image to enlargeارفق صورة : monthly_11_2008/post-47438-1226816422.jpg

ثم اضغط على ok و ok و ok !!

والنتيجة ، لاحظ كيف اضيف الايقون الى ال Toolbar بدل كلمة open .

ارفق صورة : monthly_11_2008/post-47438-1226816462.jpg

يمكنك ان تشاهد الشكل النهائي للنافذة بالذهاب الى قائمة Form واختيار Preview

ارفق صورة : monthly_11_2008/post-47438-1226816496.jpg


الان اغلق ال Qt Designer وارجع الى ال QDevelop

في نلف الهيدر اضف


ارفق صورة : monthly_11_2008/post-47438-1226816611.jpg

في ملف السورس اضف

Resized to 80% (was 812 x 334) - Click image to enlargeارفق صورة : monthly_11_2008/post-47438-1226816635.jpg




في دالة ال 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كيلو )