تويت
السلام عليكم ورحمة الله وبركاته
في هذا الدرس سوف نصمم برنامج باستخدام بيئة التطوير QDevelop
والهدف من هذا البرنامج هو تعلم تصميم واجهة البرنامج
وتعلم كيفية ربط الـwidgets بالكود البرمجي
نبدا اولا بتشغيل برنامج QDevelop وننشئ مشروع جديد
من قائمة مشروع project اختر مشروع جديد new project
تاتي نافذة انشاء مشروع جديد New Project Creation
كما في الصورة السابقة تحتاج الى كتابة اسم للمشروع ووتحديد المسار وتحديد اصدارة البرنامج ونوع الواجهه. الان وبعد الضغط
على ok سوف يتم انشاء الملفات:
dialogimpl.cpp و dialogimpl.h و main.cpp و dialog.ui
نبدأ بتصميم واجهة البرنامج وذلك بالضغط على dialog.ui ضغطتين
مزدوجة بزر الفارة الايسر.
سوف يبدأ Qt Designer بالعمل وقد تم انشاء نافذة بزرين
ok and cancel احذف كل شي داخل هذه النافذة ونبدأ بتحريرها
من البداية
فنحتاج الى اضافة الـWidgets الاتية:
PushButton عدد ٤
TextLabel عدد ٣
spinBox عدد ٢
CheckBox عدد ١
comboBox عدد ١
textEdit عدد ١
الان نبدأ بتغيير خصائص الـWidgets السابقة
نبدأ مع PushButtons
PushButton رقم ١
غير objectName الى btBrowse
غير text الى ..Browse
PushButton رقم ٢
غير objectName الى btDoSomething
غير text الى Do Something
PushButton رقم ٣
غير objectName الى btClear
غير text الى Clear
PushButton رقم ٤
غير objectName الى btAbout
غير text الى About
الانTextLabel
TextLabel رقم ١
غير objectName الى labelFile
غير text الى File
TextLabel رقم 2
غير objectName الى labelNumber1
غير text الى Number 1
TextLabel رقم 2
غير objectName الى labelNumber2
غير text الى Number 2
الان CheckBox
غير text الى Yes or No
الان comboBox
اضغط عليه بزر الفاره الايمن واختر من القائمة المنبثقة
Edit Items
واكتب مايحلو لك من اسماء المهم انك تملأ القائمه.
الان يجب ان نرتب النافذه ولا نترك الـWidgets مبعثره بذلك الشكل
حدد كل الـWidgets التي تاتي على مستوى واحد واضغط
Lay Out Horizontally حتى تصبح بمثل هذا الشكل
الان وبدون ان تحدد اي widgets اضغط على Lay Out in Grid
الان وبعد ان انتهينا من تصميم النافذة احفظ العمل واغلق
Qt Designer
الان نرجع الى QDevelop ونبدأ بكتابة الكود
نبدأ اولا بالتصريحdeclare عن بعض الدوال
افتح الملف dialogimpl.h
وتحتاج الى اضافة الاسطر الاتية
فيصبح الملف كالاتي
الان نحتاج ان نربط حدث الضغط على الزر بالكود
فنضيف الاسطر الاتية في الملف dialogimpl.cpp
ونحتاج ايضا الى اضافة هذا السطر
وذلك لاننا استخدمنا بعض النوافذ الجاهزة مثل QFileDialog
و QMessageBox
الان نكتب الدالة getPath
الان ناتي الى شرح الدالة السابقة
في هذا السطر قمنا بتعريف متغير من نوع QString متغير نصي
هنا يتم عرض نافذة فتح ملف وعندما يختار المستخدم ملف
يتم التعرف على مساره ويحفظ في المتغير path
لمزيد من المعلومات عن QFileDialog class راجع الرابط التالي
اضغط هنا
هنا يتم اسناد قيمة المتغير path الى مربع النص او بمعنى اخر
يتم عرض قيمة المتغير path في مربع النص lineEdit
الان نكتب الدالة doSomething
ناتي الان الى شرح الدالة السابقة
هنا قمنا بتعريف متغيرات من انواع مختلفه
int عددي
Qt::CheckState هذا المتغير يصف حالة checkBox
وهناك ثلاث حالات وهي
Qt::Unchecked هذا في حال لم يتم التحديد
Qt::Checked هذا في حال التحديد
Qt::PartiallyChecked هذا في حال تحديد البعض
ولمزيد من المعلومات عن هذا المتغير راجع الرابط التالي
اضغط هنا
والمتغير الاخير QString عددي
هنا قمنا باضافة "لاحظ انني قلت اضافة ولم اقل اسناد اي انه سوف يتم الاضافه الى مربع النص ولن يتم مسح ما ادخل سابقا" سطر الى مربع النص textEdit
هنا قمنا باسناد قيمة كلا من spinBox1 و spinBox2 الى value1
و value2 على التوالي
هنا قمنا باضافة سطرين جديدين الى مربع النص
يحتوي السطر الاول على الجملة "Number 1 value: " مع قيمة
المتغير value2 والسطر الثاني نفس الفكرة لكن للمتغير الثاني
هنا اسندنا حالة checkBox للمتغير state
سهل للغاية اسناد نص للمتغير النصي
هنا شرط يختبر قيمة المتغير state اذا كانت تساوي Qt::Checked
سوف يتم اضافة yes الى المتغير str فتصبح قيمة المتغير
Checkbox says: yes
اذا لم يتحقق الشرط سوف يتم اضافة no الى المتغير str
فتصبح قيمته Checkbox says: no
هنا يتم اضافة قيمة المتغير str الى مربع النص textEdit
هنا سوف يتم اضافة سطر الى مربع النص textEdit
يحتوي هذا السطر على الجمله ComboBox current text:
مع النص المحدد في comboBox
هنا سوف يتم اضافة سطر الى مربع النص textEdit
يحتوي هذا السطر على الجمله ComboBox current item:
مع رقم النص المحدد في comboBox
الان نكتب الدالة clear
سهله للغاية تحتوي على سطر واحد يقوم بمسح مربع النص
الان نكتب الدالة about
هذه الدالة تقوم بعرض مربع رسالة
لمزيد من المعلومات عن QMessageBox Class اضغط هنا
وهذا هو ملف dialogimpl.cpp بعد اجراء الاضافات السابقة عليه
وهذا هو البرنامج بشكله النهائي يعمل على اتم وجه
المراجع:
http://sector.ynet.sk/qt4-tutorial/m...plication.html
http://doc.trolltech.com
اتمنى لكم الافادة واي ملاحظة او استفسار انا موجود
في هذا الدرس سوف نصمم برنامج باستخدام بيئة التطوير QDevelop
والهدف من هذا البرنامج هو تعلم تصميم واجهة البرنامج
وتعلم كيفية ربط الـwidgets بالكود البرمجي
نبدا اولا بتشغيل برنامج QDevelop وننشئ مشروع جديد
من قائمة مشروع project اختر مشروع جديد new project
تاتي نافذة انشاء مشروع جديد New Project Creation
كما في الصورة السابقة تحتاج الى كتابة اسم للمشروع ووتحديد المسار وتحديد اصدارة البرنامج ونوع الواجهه. الان وبعد الضغط
على ok سوف يتم انشاء الملفات:
dialogimpl.cpp و dialogimpl.h و main.cpp و dialog.ui
نبدأ بتصميم واجهة البرنامج وذلك بالضغط على dialog.ui ضغطتين
مزدوجة بزر الفارة الايسر.
سوف يبدأ Qt Designer بالعمل وقد تم انشاء نافذة بزرين
ok and cancel احذف كل شي داخل هذه النافذة ونبدأ بتحريرها
من البداية
فنحتاج الى اضافة الـWidgets الاتية:
PushButton عدد ٤
TextLabel عدد ٣
spinBox عدد ٢
CheckBox عدد ١
comboBox عدد ١
textEdit عدد ١
الان نبدأ بتغيير خصائص الـWidgets السابقة
نبدأ مع PushButtons
PushButton رقم ١
غير objectName الى btBrowse
غير text الى ..Browse
PushButton رقم ٢
غير objectName الى btDoSomething
غير text الى Do Something
PushButton رقم ٣
غير objectName الى btClear
غير text الى Clear
PushButton رقم ٤
غير objectName الى btAbout
غير text الى About
الانTextLabel
TextLabel رقم ١
غير objectName الى labelFile
غير text الى File
TextLabel رقم 2
غير objectName الى labelNumber1
غير text الى Number 1
TextLabel رقم 2
غير objectName الى labelNumber2
غير text الى Number 2
الان CheckBox
غير text الى Yes or No
الان comboBox
اضغط عليه بزر الفاره الايمن واختر من القائمة المنبثقة
Edit Items
واكتب مايحلو لك من اسماء المهم انك تملأ القائمه.
الان يجب ان نرتب النافذه ولا نترك الـWidgets مبعثره بذلك الشكل
حدد كل الـWidgets التي تاتي على مستوى واحد واضغط
Lay Out Horizontally حتى تصبح بمثل هذا الشكل
الان وبدون ان تحدد اي widgets اضغط على Lay Out in Grid
الان وبعد ان انتهينا من تصميم النافذة احفظ العمل واغلق
Qt Designer
الان نرجع الى QDevelop ونبدأ بكتابة الكود
نبدأ اولا بالتصريحdeclare عن بعض الدوال
افتح الملف dialogimpl.h
وتحتاج الى اضافة الاسطر الاتية
كود:
public slots:
void getPath();
void doSomething();
void clear();
void about();
كود:
#ifndef DIALOGIMPL_H
#define DIALOGIMPL_H
//
#include "ui_dialog.h"
//
class DialogImpl : public QDialog, public Ui::Dialog
{
Q_OBJECT
public:
DialogImpl( QWidget * parent = 0, Qt::WFlags f = 0 );
public slots:
void getPath();
void doSomething();
void clear();
void about();
private slots:
};
#endif
فنضيف الاسطر الاتية في الملف dialogimpl.cpp
كود:
connect( btBrowse, SIGNAL( clicked() ), this, SLOT( getPath() ) );
connect( btDoSomething, SIGNAL( clicked() ), this, SLOT( doSomething() ) );
connect( btClear, SIGNAL( clicked() ), this, SLOT( clear() ) );
connect( btAbout, SIGNAL( clicked() ), this, SLOT( about() ) );
كود:
#include <QtGui>
و QMessageBox
الان نكتب الدالة getPath
كود:
void DialogImpl::getPath()
{
QString path;
path = QFileDialog::getOpenFileName(
this,
"Choose a file to open",
QString::null,
QString::null);
lineEdit->setText( path );
}
كود:
QString path;
كود:
path = QFileDialog::getOpenFileName(
this,
"Choose a file to open",
QString::null,
QString::null);
يتم التعرف على مساره ويحفظ في المتغير path
لمزيد من المعلومات عن QFileDialog class راجع الرابط التالي
اضغط هنا
كود:
lineEdit->setText( path );
يتم عرض قيمة المتغير path في مربع النص lineEdit
الان نكتب الدالة doSomething
كود:
void DialogImpl::doSomething()
{
int value1, value2;
Qt::CheckState state;
QString str;
textEdit->append( "Path to file: " + lineEdit->text() );
value1 = spinBox1->value();
value2 = spinBox2->value();
textEdit->append( "Number 1 value: " + QString::number(value1) );
textEdit->append( "Number 2 value: " + QString::number(value2) );
state = checkBox->checkState();
str = "Checkbox says: ";
if ( state == Qt::Checked ) str += "yes";
else str += "no";
textEdit->append( str );
textEdit->append( "ComboBox current text: " + comboBox->currentText() );
textEdit->append( "ComboBox current item: " + QString::number(comboBox->currentIndex()) );
}
كود:
int value1, value2;
Qt::CheckState state;
QString str;
int عددي
Qt::CheckState هذا المتغير يصف حالة checkBox
وهناك ثلاث حالات وهي
Qt::Unchecked هذا في حال لم يتم التحديد
Qt::Checked هذا في حال التحديد
Qt::PartiallyChecked هذا في حال تحديد البعض
ولمزيد من المعلومات عن هذا المتغير راجع الرابط التالي
اضغط هنا
والمتغير الاخير QString عددي
كود:
textEdit->append( "Path to file: " + lineEdit->text() );
كود:
value1 = spinBox1->value();
value2 = spinBox2->value();
و value2 على التوالي
كود:
textEdit->append( "Number 1 value: " + QString::number(value1) );
textEdit->append( "Number 2 value: " + QString::number(value2) );
يحتوي السطر الاول على الجملة "Number 1 value: " مع قيمة
المتغير value2 والسطر الثاني نفس الفكرة لكن للمتغير الثاني
كود:
state = checkBox->checkState();
كود:
str = "Checkbox says: ";
كود:
if ( state == Qt::Checked ) str += "yes";
else str += "no";
سوف يتم اضافة yes الى المتغير str فتصبح قيمة المتغير
Checkbox says: yes
اذا لم يتحقق الشرط سوف يتم اضافة no الى المتغير str
فتصبح قيمته Checkbox says: no
كود:
textEdit->append( str );
كود:
textEdit->append( "ComboBox current text: " + comboBox->currentText() );
يحتوي هذا السطر على الجمله ComboBox current text:
مع النص المحدد في comboBox
كود:
textEdit->append( "ComboBox current item: " + QString::number(comboBox->currentIndex()) );
يحتوي هذا السطر على الجمله ComboBox current item:
مع رقم النص المحدد في comboBox
الان نكتب الدالة clear
كود:
void DialogImpl::clear()
{
textEdit->clear();
}
الان نكتب الدالة about
كود:
void DialogImpl::about()
{
QMessageBox::about(this,"About myQtApp",
"This app was coded for educational purposes.\n"
"Number 1 is: " + QString::number(spinBox1->value()) + "\n\n"
"Bye.\n");
}
لمزيد من المعلومات عن QMessageBox Class اضغط هنا
وهذا هو ملف dialogimpl.cpp بعد اجراء الاضافات السابقة عليه
كود:
#include "dialogimpl.h"
#include <QtGui>
//
DialogImpl::DialogImpl( QWidget * parent, Qt::WFlags f)
: QDialog(parent, f)
{
setupUi(this);
connect( btBrowse, SIGNAL( clicked() ), this, SLOT( getPath() ) );
connect( btDoSomething, SIGNAL( clicked() ), this, SLOT( doSomething() ) );
connect( btClear, SIGNAL( clicked() ), this, SLOT( clear() ) );
connect( btAbout, SIGNAL( clicked() ), this, SLOT( about() ) );
}
void DialogImpl::getPath()
{
QString path;
path = QFileDialog::getOpenFileName(
this,
"Choose a file to open",
QString::null,
QString::null);
lineEdit->setText( path );
}
void DialogImpl::doSomething()
{
int value1, value2;
Qt::CheckState state;
QString str;
textEdit->append( "Path to file: " + lineEdit->text() );
value1 = spinBox1->value();
value2 = spinBox2->value();
textEdit->append( "Number 1 value: " + QString::number(value1) );
textEdit->append( "Number 2 value: " + QString::number(value2) );
state = checkBox->checkState();
str = "Checkbox says: ";
if ( state == Qt::Checked ) str += "yes";
else str += "no";
textEdit->append( str );
textEdit->append( "ComboBox current text: " + comboBox->currentText() );
textEdit->append( "ComboBox current item: " + QString::number(comboBox->currentIndex()) );
}
void DialogImpl::clear()
{
textEdit->clear();
}
void DialogImpl::about()
{
QMessageBox::about(this,"About myQtApp",
"This app was coded for educational purposes.\n"
"Number 1 is: " + QString::number(spinBox1->value()) + "\n\n"
"Bye.\n");
}
//
المراجع:
http://sector.ynet.sk/qt4-tutorial/m...plication.html
http://doc.trolltech.com
اتمنى لكم الافادة واي ملاحظة او استفسار انا موجود
تعليق