تويت
بسم الله الرحمن الرحيم
في هذا الدرس سوف نصمم حاسبة بسيطة والكود تبعها موجود
مع الامثلة التي تاتي مع QT
لكن سوف نصممها تحت بيئة التطوير QDevelop من البداية
دون الرجوع للكود وسوف احاول اضافة بعض التعديلات عليها
نبدأ العمل بتشغيل QDevelop
وانشاء مشروع جديد وتعديل الخيارات مثل الموجود في الصورة
التالية
والان نبدأ التعديل على الفورم وذلك بالضغط على dialog.ui
حيث يبدا Qt Desginer بالعمل
نقوم بحذف جميع الـWidgets الموجودة في الفورم ثم نضيف
الاتي
TextLabel عدد ٥
spinBox عدد ٢
lcdNumber عدد ١
حتى يصبح الفورم بهذا الشكل
الان نعدل خصائص الـWidgets كالاتي
نبدأ مع TextLabel
نعدل خاصية alignment الى center لكل من الـHorzintal
والـVertical
نعدل نعدل الخاصية Text لكل الـTextLabel حتى يصبح الفورم
بهذا الشكل
والان نعدل خصائص spinBox
نعدل الـobjectName كالاتي
الاول sBox1
الثاني sBox2
ونعدل خاصية maximum لكل منهما الى ٩٩٩
ونعدل خاصية minimum لكل منهما الى -٩٩٩
الان نضيف بعض التعديلات على الفورم حتى يظهر بشكل جيد
نضيف Vertical spacer عدد ٤ فوق كل من + و = و lcdBox و Output
الان حدد كل من input 1 و sBox1 ثم اضغط على
Lay Out Vertically
وافعل ذلك مع كل Widgets فوق بعض
حتى يصبح الفورم بهذا الشكل
ثم ازل التحديد عن جميع الـWidgets واضغط على Lay Out in a Grid
وغير حجم الفورم ليصبح بهذا الشكل
الان احفظ العمل واغلق Qt Desginer
نرجع الان لـQDevelop
نبدأ الان بكتابة الكود
نبدأ اولا بالتصريحdeclare عن بعض الدوال
لفعل ذلك افتح الملف dialogimpl.h
وقم باضافة الاسطر الاتية له
فيصبح الملف بهذا الشكل
الان ناتي للملف dialogimpl.cpp
ونضيف الاسطر الاتية
وهي لربط تغير قيمة الـspinBox بالدالة التي تقوم بحساب ناتج الجمع
الان نقوم بكتابة الدالتين
عمل الدالتين متشابة
فهي تقوم بجمع قيمة spinBox الاول والثاني معا ثم تعرض
الناتج في lcdBox
وهذا هو ملف dialogimpl.cpp بعد اجراء التعديلات السابقة عليه
الان قم بعمل Build و Debug
وهذه هي الصورة النهائية للبرنامج
سوف اضيف على هذا البرنامج بعض التعديلات لاحقا ان شاء الله
في هذا الدرس سوف نصمم حاسبة بسيطة والكود تبعها موجود
مع الامثلة التي تاتي مع QT
لكن سوف نصممها تحت بيئة التطوير QDevelop من البداية
دون الرجوع للكود وسوف احاول اضافة بعض التعديلات عليها
نبدأ العمل بتشغيل QDevelop
وانشاء مشروع جديد وتعديل الخيارات مثل الموجود في الصورة
التالية
والان نبدأ التعديل على الفورم وذلك بالضغط على dialog.ui
حيث يبدا Qt Desginer بالعمل
نقوم بحذف جميع الـWidgets الموجودة في الفورم ثم نضيف
الاتي
TextLabel عدد ٥
spinBox عدد ٢
lcdNumber عدد ١
حتى يصبح الفورم بهذا الشكل
الان نعدل خصائص الـWidgets كالاتي
نبدأ مع TextLabel
نعدل خاصية alignment الى center لكل من الـHorzintal
والـVertical
نعدل نعدل الخاصية Text لكل الـTextLabel حتى يصبح الفورم
بهذا الشكل
والان نعدل خصائص spinBox
نعدل الـobjectName كالاتي
الاول sBox1
الثاني sBox2
ونعدل خاصية maximum لكل منهما الى ٩٩٩
ونعدل خاصية minimum لكل منهما الى -٩٩٩
الان نضيف بعض التعديلات على الفورم حتى يظهر بشكل جيد
نضيف Vertical spacer عدد ٤ فوق كل من + و = و lcdBox و Output
الان حدد كل من input 1 و sBox1 ثم اضغط على
Lay Out Vertically
وافعل ذلك مع كل Widgets فوق بعض
حتى يصبح الفورم بهذا الشكل
ثم ازل التحديد عن جميع الـWidgets واضغط على Lay Out in a Grid
وغير حجم الفورم ليصبح بهذا الشكل
الان احفظ العمل واغلق Qt Desginer
نرجع الان لـQDevelop
نبدأ الان بكتابة الكود
نبدأ اولا بالتصريحdeclare عن بعض الدوال
لفعل ذلك افتح الملف dialogimpl.h
وقم باضافة الاسطر الاتية له
كود:
void on_sBox1_valueChanged(int value);
void on_sBox2_valueChanged(int value);
كود:
#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 );
private slots:
void on_sBox1_valueChanged(int value);
void on_sBox2_valueChanged(int value);
};
#endif
ونضيف الاسطر الاتية
كود:
connect( sBox1, SIGNAL( valueChanged() ), this, SLOT( on_sBox1_valueChanged() ) ); connect( sBox2, SIGNAL( valueChanged() ), this, SLOT( on_sBox2_valueChanged() ) );
الان نقوم بكتابة الدالتين
كود:
void DialogImpl::on_sBox1_valueChanged(int value)
{
lcdNumber->display(QString::number(value + sBox2->value()));
}
void DialogImpl::on_sBox2_valueChanged(int value)
{
lcdNumber->display(QString::number(value + sBox1->value()));
}
فهي تقوم بجمع قيمة spinBox الاول والثاني معا ثم تعرض
الناتج في lcdBox
وهذا هو ملف dialogimpl.cpp بعد اجراء التعديلات السابقة عليه
كود:
#include "dialogimpl.h"
//
DialogImpl::DialogImpl( QWidget * parent, Qt::WFlags f)
: QDialog(parent, f)
{
setupUi(this);
connect( sBox1, SIGNAL( valueChanged() ), this, SLOT( on_sBox1_valueChanged() ) );
connect( sBox2, SIGNAL( valueChanged() ), this, SLOT( on_sBox2_valueChanged() ) );
}
//
void DialogImpl::on_sBox1_valueChanged(int value)
{
lcdNumber->display(QString::number(value + sBox2->value()));
}
void DialogImpl::on_sBox2_valueChanged(int value)
{
lcdNumber->display(QString::number(value + sBox1->value()));
}
//
وهذه هي الصورة النهائية للبرنامج
سوف اضيف على هذا البرنامج بعض التعديلات لاحقا ان شاء الله
تعليق