[شرح] مشروع تطبيقي لتعلم Qt باستخدام QDevelop

المساهمات : 114 تاريخ التسجيل : 28/11/2008

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

هذا الدرس هو عبارة عن ترجمه "مع بعض التغيير"

لهذا الرابط اضغط هنا

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

شغل QDevelop

من قائمة مشروع project اختر مشروع جديد new project

تاتي لك نافذة انشاء مشروع جديد New project creation

تحت Template
اختر تطبيق مع نافذة رئيسية Application With Main Window

تحت الخصائص properties
اكتب اسم المشروع Project name وليكن مثلا myfirst
وحدد المسار لحفظ المشروع Location

تحت الاصدارة Version
اختر Debug Version

بالنسبة لباقي الخيارات اتركها كما هي واضغط ok

سوف ينشيء البرنامج جميع الملفات اللازمة

اختبار المشروع
من قائمة build اختر build
ما الهدف من هذه الخطوة؟
الهدف منها هو اختبار ان بيئة التطوير QDevelop تعمل بشكل
سليم ولا توجد اي مشكلة في التثبيت

نصيحة: عند عمل اي تغيير بالبرنامج اعمل build لكي تتجنب تراكم
الاخطاء.

بعد الانتهاء من البناء build لاحظ المخرجات اسفل البنامج

يجب ان تكون Build finished without errorكل ما تعمل build ركز على هذه المخرجات وتاكد انه لا يوجد اي خطأ

الان من القائمة Debug اضغط على Debug

سوف تحصل على الواجهه الرئيسية لمشروعك

تستطيع اغلاقها الان بالضغط على x

او من خلال QDevelop ومن قائمة Debug اضغط على stop

الان وبعد ان تاكدنا من خلو البرنامج من الاخطاء

نبدأ بتصميم الواجهه لبرنامجنا

الان من نافذة متصفح المشروع project expiorer

وتحت نوافذ Dialogs

اضغط ضغطتين مزدوجة على ui/mainwindow.ui

سوف يبدأ Qt Designer

نحتاج اولا الى جعل Qt Designer في نافذه واحدة بدلا من عدة نوافذ

تستطيع عمل ذلك كالاتيEdit>User Interface Mode>Docked Window

الان اصبح Qt Designer اكثر تنظيما واكثر سهوله

وتستطيع الان التعديل على الواجهه الرئيسية لمشروعك

بالطبع لقد انشأ لنا QDevelop الواجهه الرئيسية وقائمة فارغة وشريط
الحالة

لانحتاج للقوائم ولا شريط الحالة في برنامجنا هذا فيمكنك حذفها بالضغط عليها بزر الفارة الايمن ثم حذف

الان نحتاج الى وضع بعض الـWidget لنافذة برنامجنا الا وهي
LineEdit و ListWidget و PushButton

مصطلح widget يطلق على كل العناصر مثل مربع النص وغيرها
من العناصر التي نستطيع وضعها على النافذة.

فكرة البرنامج هي ان المستخدم يكتب مايريده في مربع النص
ثم يضغط على الزر فيتم اضافة النص الى القائمة

مثل ما تشوف الان ان برنامجنا غير مرتب ويحتاج الى بعض التعديل حدد كلا منLineEdit و PushButton

ومن ثم اضغط على ايقونة Lay Out Horizontally

سوف تحدد داخل مستطيل احمر

الان نحدد هذا المستطيل الاحمر مع ListWidget

ونضغط على Lay Out in Grid

الان نعدل حجم النافذة والـwidgets
لتصبح كما في هذا الشكل

الان نحتاج الى تعديل بعض الخصائص للـwidgets

حددPushButton ومن نافذة الخصائص غير الاتي
غير objectName منPushButton الى btAdd
وغير text من PushButton الى Add&

والان غير الـObjectName
لـLineEdit اجعله edText
ولـListWidget اجعله lbMyList

اذا لم يعجبك تصميم النافذة او الاسماء التي اخترتها عدله لما
ترتاح له خصوصا بالنسبة لاسماء الـWidgets اجعل الاسماء
سهله لك.

الان اعمل حفظ save واغلق Qt Desiger

الان رجعنا لنافذة QDevelop

اول شي نعمله هو كومبايل حتى نتاكد من خلو المشروع من الاخطاء

المساهمات : 114 تاريخ التسجيل : 28/11/2008

الان نبدأ بكتابة الكود

اولا نحتاج ان نصرح declare عن الدالة في ملف

الراس header file

فيجب ان نضيف السطر التالي

اقتباس :

void addClicked();

فيصبح الملف هكذا

اقتباس :

#ifndef MAINWINDOWIMPL_H
#define MAINWINDOWIMPL_H
//
#include "ui_mainwindow.h"
//
class MainWindowImpl : public QMainWindow, public Ui::MainWindow
{
Q_OBJECT
public:
MainWindowImpl( QWidget * parent = 0, Qt::WFlags f = 0 );
private slots:
void addClicked();
};
#endif

ويجب ان نربط حدث الضغط على الزر add بالدالة

addclicked

يكون الربط باضافة الكود التالي في ملف cpp للنافذة
الرئيسية

اقتباس :

connect(btAdd, SIGNAL(clicked()), this, SLOT(addClicked()));

الان نكتب الدالة addclicked

وهي كالاتي

اقتباس :

void MainWindowImpl::addClicked()
{
if(edText->text() == "") // If there is no text then exit this function
{
return;
}
lbMyList->addItem(edText->text()); // Add the text typed to the list
edText->setText(""); // erase the text from the box they typed in
edText->setFocus(); // set the focus back to the LineEdit from the button
}

ناتي الان لشرح الدالة خطوة بخطوة

اقتباس :

if(edText->text() == "") // If there is no text then exit this function
{
return;
}

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

اقتباس :

lbMyList->addItem(edText->text());

هذا الكود يضيف النص المكتوب في مربع النص الى
القائمة mylist

اقتباس :

edText->setText("");

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

اقتباس :

edText->setFocus();

وضيفة هذا الكود هي ارجاع المؤشر الى مربع النص حتى
نبدأ الكتابة من جديد

وهذا ملف mainwindowimpl.cpp بعد التعديلات التي
اجريناها عليه

اقتباس :

#include "mainwindowimpl.h"
//
MainWindowImpl::MainWindowImpl( QWidget * parent, Qt::WFlags f)
: QMainWindow(parent, f)
{
setupUi(this);
connect(btAdd, SIGNAL(clicked()), this, SLOT(addClicked()));
}
void MainWindowImpl::addClicked()
{
if(edText->text() == "") // If there is no text then exit this function
{
return;
}
lbMyList->addItem(edText->text()); // Add the text typed to the list
edText->setText(""); // erase the text from the box they typed in
edText->setFocus(); // set the focus back to the LineEdit from the button
}
//

والان تستطيع عملBuild و Debug

وتختبر برنامجك الاول مع QDevelop

وهذي الصورة النهائية للبرنامج وهو يعمل بشكل جيد