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

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

تصميم برنامج تحت بيئة التطوير QDevelop

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

  • تصميم برنامج تحت بيئة التطوير QDevelop

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

    في هذا الدرس سوف نصمم برنامج باستخدام بيئة التطوير 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>
    وذلك لاننا استخدمنا بعض النوافذ الجاهزة مثل QFileDialog
    و 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;
    في هذا السطر قمنا بتعريف متغير من نوع QString متغير نصي

    كود:
        path = QFileDialog::getOpenFileName(
            this,
            "Choose a file to open",
            QString::null,
            QString::null);
    هنا يتم عرض نافذة فتح ملف وعندما يختار المستخدم ملف
    يتم التعرف على مساره ويحفظ في المتغير path

    لمزيد من المعلومات عن QFileDialog class راجع الرابط التالي
    اضغط هنا

    كود:
    lineEdit->setText( path );
    هنا يتم اسناد قيمة المتغير 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() );
    هنا قمنا باضافة "لاحظ انني قلت اضافة ولم اقل اسناد اي انه سوف يتم الاضافه الى مربع النص ولن يتم مسح ما ادخل سابقا" سطر الى مربع النص textEdit

    كود:
        value1 = spinBox1->value();
        value2 = spinBox2->value();
    هنا قمنا باسناد قيمة كلا من spinBox1 و spinBox2 الى value1
    و value2 على التوالي

    كود:
        textEdit->append( "Number 1 value: " + QString::number(value1) );
        textEdit->append( "Number 2 value: " + QString::number(value2) );
    هنا قمنا باضافة سطرين جديدين الى مربع النص
    يحتوي السطر الاول على الجملة "Number 1 value: " مع قيمة
    المتغير value2 والسطر الثاني نفس الفكرة لكن للمتغير الثاني

    كود:
        state = checkBox->checkState();
    هنا اسندنا حالة checkBox للمتغير state

    كود:
        str = "Checkbox says: ";
    سهل للغاية اسناد نص للمتغير النصي

    كود:
        if ( state == Qt::Checked ) str += "yes"; 
        else str += "no";
    هنا شرط يختبر قيمة المتغير state اذا كانت تساوي Qt::Checked
    سوف يتم اضافة yes الى المتغير str فتصبح قيمة المتغير
    Checkbox says: yes
    اذا لم يتحقق الشرط سوف يتم اضافة no الى المتغير str
    فتصبح قيمته Checkbox says: no

    كود:
        textEdit->append( str );
    هنا يتم اضافة قيمة المتغير str الى مربع النص textEdit

    كود:
        textEdit->append( "ComboBox current text: " + comboBox->currentText() );
    هنا سوف يتم اضافة سطر الى مربع النص textEdit
    يحتوي هذا السطر على الجمله ComboBox current text:
    مع النص المحدد في comboBox

    كود:
        textEdit->append( "ComboBox current item: " + QString::number(comboBox->currentIndex()) );
    هنا سوف يتم اضافة سطر الى مربع النص textEdit
    يحتوي هذا السطر على الجمله 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

    اتمنى لكم الافادة واي ملاحظة او استفسار انا موجود

  • #2
    السلام عليكم أخي الكريم

    ماشاء الله عليك دروس قيمة تقدما لنا,, نشكرك جزيل الشكر

    واصل التميز,,

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

    تعليق


    • #3
      اهلا بك اخي AmiZya

      نورت الموضوع بمرورك

      تعليق


      • #4
        السلام عليكم
        و الله عمل رائع .. بارك الله فيك.. ارجو المواصلة و ان شاء الله سألتحق بك لاحقا .
        بارك الله فيك..
        ^_^

        تعليق


        • #5
          اهلا بك اخي fakir

          ومشكور على مرورك ومرحبا بك في اي وقت

          تعليق


          • #6
            شكـرا اخي علي الدروس القيمـه واستمر فنحن معك

            تعليق


            • #7
              مرحبا بك اخي Mutati0N

              وشكرا على مرورك الجميل

              تعليق


              • #8
                بارك الله فيك ... وجعله في ميزان حسانتك .. تابع .. ونحن معاك ان شاء الله ..
                GCS

                تعليق


                • #9
                  اخي cpu

                  شكرا على المرور الجميل

                  تعليق


                  • #10
                    فعلا درس ممتع وجميل وطريقتك يا اخى ما شاء الله سلسه وجميله
                    SЄČURiTY TЄΛM
                    MyBlog

                    تعليق


                    • #11
                      اخي ĐΓ.ĐΣΓmλnn

                      شكرا على مرورك الجميل

                      تعليق


                      • #12
                        مشكوووووووووور على المجهود
                        درس مفيد جدا ،،

                        تحياااااااااتي.

                        تعليق


                        • #13
                          بارك الله فيك

                          تعليق


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

                            تعليق


                            • #15
                              machkooooooooor..........Akhiiiiiii....

                              تعليق

                              يعمل...
                              X