إعـــــــلان

تقليص
لا يوجد إعلان حتى الآن.

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

تقليص
X
تقليص
 
  • الصفحة لـ 1
  • تصفية - فلترة
  • الوقت
  • عرض
إلغاء تحديد الكل
مشاركات جديدة
السابق template التالي
  • #1

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

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

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

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

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

    شغل 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

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


    الكلمات الدلالية (Tags): لا يوجد
  • #2
    الان نبدأ بكتابة الكود

    اولا نحتاج ان نصرح 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

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



    اذا كان عندكم اي ملاحظات او استفسار لا تترددو

    تعليق

    • #3
      بارك الله فيك أخي الكريم,,

      درس رائع من إنسان أروع بكثير ,,

      مستني أحمل السلاك12 و أنا معاك بالتطبيق,,

      دمت سالما,,

      La vie est complexe car nous avons tous une partie réelle et une partie imaginaire....

      تعليق

      • #4
        شكـرا حبيبي علي الدرس الجميـل
        وان شاء الله مبرمجي السي++ يستفادوا منه
        التعديل الأخير تم بواسطة كريم عبد المجيد; الساعة 09-07-2008, 06:17 AM.

        تعليق

        • #5
          بارك الله فيك .. دروس قيمه
          GCS

          تعليق

          • #6
            يعطيك العافية
            :thumpsup_green: :thumpsup_green: :thumpsup_green:
            (Life Dream سابقاً)
            مستخدم لجنو/لينوكس( منذ 17 رمضان 1427)
            اوبنتوا في جهازي المحمول Sony Vaio S

            تعليق

            • #7
              مشكورين على المرور الجميل

              تعليق

              • #8
                السلام عليكم
                بارك الله فيك على الدرس الجميل.
                لي رجعة ان شاء الله.

                تعليق

                • #9
                  اهلا وسهلا بك اخي الكريم

                  ومرحبا بك في اي وقت

                  تعليق

                  • #10
                    والان سوف نعدل على المشروع السابق

                    وذلك باضافة زر حذف ليقوم بحذف اي عنصر محدد من القائمة

                    نبدأ اولا بتعديل النافذة mainwindow.ui من خلال QT Designer

                    لنستطيع التعديل على هذه النافذة يجب اولا ان نقوم بالغاء التنسيق

                    الذي طبقناه سابقا Lay Out Horizontally و Lay Out in Grid

                    كيف يتم ذلك؟

                    بواسطة أمر بسيط الا وهو Break lay out

                    الان نستطيع التعديل ونضيف زر جديد ونقوم بتعديل الخصائص
                    الاتية له:
                    objectName >>>>>> btRemove
                    text >>>>>>>>>> &Remove

                    الان نحدد كلا من btRemove و btAdd و edText
                    ثم نطبق الامر Lay Out Horizontally
                    سوف تحدد بمستطيل احمر

                    ثم نقوم بتحديد الكل ونطبق الامر Lay Out in Grid

                    و نعدل الحجم حتى تصبح بهذا الشكل



                    الان نحفظ التغييرات ثم نقوم بغلق Qt Designer

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

                    نبدأ مع ملف الراس mainwindowimpl.h Hedar file

                    نصرح declar عن الدالة الجديدة التي سنكتبها removeClicked

                    فنقوم باضافة السطر التالي

                    كود:
                    void removeClicked();
                    وهذا هو ملف mainwindowimpl.h بعد التعديل

                    كود:
                    #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();
    void removeClicked();
};
#endif
                    الان نربط حدث الضغط على زر btRemove بالدالة removeClicked

                    وذلك باضافة السطر التالي الى الملف mainwindowimpl.cpp

                    كود:
                     	connect(btRemove, SIGNAL(clicked()), this, SLOT(removeClicked()));
                    ثم نقوم بكتابة الدالة removeClicked في نفس الملف السابق

                    كود:
                    void MainWindowImpl::removeClicked()
{
  if( lbMyList->currentRow() > -1 )                 //This condition to make sure that there is at least one itme selected
    lbMyList->takeItem( lbMyList->currentRow() ); //Remove selected Items
}
                    ناتي الان الى شرح الدالة


                    كود:
                    if( lbMyList->currentRow() > -1 )
                    هذا السطر يختبر اذا كان هنالك عناصر محددة في القائمة
                    في حال في حال وجود عناصر محددة يتم تنفيذ الامر الاتي


                    كود:
                    lbMyList->takeItem( lbMyList->currentRow() );
                    هذا السطر لحذف العنصر المحدد من القائمة

                    وهذا هو ملف mainwindowimpl.cpp بعد اضافة التعديلات السابقة
                    عليه

                    كود:
                    #include "mainwindowimpl.h"
//
MainWindowImpl::MainWindowImpl( QWidget * parent, Qt::WFlags f) 
	: QMainWindow(parent, f)
{
	setupUi(this);
	connect(btAdd, SIGNAL(clicked()), this, SLOT(addClicked()));
 	connect(btRemove, SIGNAL(clicked()), this, SLOT(removeClicked()));
}
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
}

void MainWindowImpl::removeClicked()
{
  if( lbMyList->currentRow() > -1 )                 //This condition to make sure that there is at least one itme selected
    lbMyList->takeItem( lbMyList->currentRow() ); //Remove selected Items
}

//

                    تعليق

                    • #11
                      شرح رائع من عضو أروع
                      شكرا لك أخوي على الموضوع وبانتظار المزيد ...

                      تعليق

                      • #12
                        اهلا وسهلا بيك اخي Brave-Heart

                        نورت الموضوع وشكرا على المرور

                        تعليق

                        السابق template التالي
                        يعمل...
                        X