בשעור הקודם יצרנו תבנית פרויקט ב Qt Creator לצורך תוכנית Qt ראשונה. בשעור זה נעבור על הקבצים ש Qt Creator יוצר אחד אחד כדי להבין איך בנוי פרויקט Qt ואיזה כלים Qt Creator מספק ליצירת ממשקים.

1. הקובץ main.cpp

הקובץ הראשי של הפרויקט הוא main.cpp וכך הוא נראה בתבנית שקיבלנו מ Qt Creator:

#include <QApplication>
#include "mainwindow.h"

int main(int argc, char **argv)
{
  QApplication app(argc, argv);

  MainWindow w;
  w.show();

  return app.exec();
}

הקובץ כולל מעט מאוד קוד. הוא יוצר מופע של המחלקה MainWindow, שהיא המחלקה הראשית בתוכנית, ומפעיל את הפונקציה show שלה. לאחר מכן מפעיל את המתודה exec שגורמת להצגת הממשק הגרפי והמתנה לאירועים מהמשתמש.

2. המחלקה Main Window

עיקר קוד התוכנית מופיע במחלקה MainWindow, היורשת ממחלקה בשם QMainWindow, שהיא בתורה יורשת ממחלקה בשם QWidget. באופן כללי זה רעיון טוב להשתמש במחלקה מותאמת אישית כדי לייצג מסך ביישום, ובהמשך נרחיב על QWidget ועל האפשרויות השונות לרשת ממנו.

בינתיים הכנסו לקובץ mainwindow.h וכשהסמן מורה על שם המחלקה QMainWindow לחצו F2. זה יעביר אתכם להגדרת המחלקה QMainWindow ותוכלו לעקוב אחר היררכית הירושה שלה. אפשרות נוספת היא ללחוץ על F1 ואז יפתח בצד ימין עמוד התיעוד של QMainWindow.

3. הטופס mainwindow.ui ומבנה קבצי ui

לחצו לחיצה כפולה על הקובץ mainwindow.ui ב Qt Creator כדי לעבור למצב עריכה גרפי של המסך שלנו. מסך העריכה שנפתח מחולק לפאנל שמאלי בו רשימת פקדים, פאנל ימני בו רשימת מאפיינים של הפקד הנבחר ופאנל מרכזי אליו אפשר לגרור פקדים.

גררו פקד Push Button ופקד Label אל הטופס וסדרו אותם אחד מתחת לשני. לאחר מכן לחצו על מקום ריק בטופס ואז בשורת הכפתורים שמעל הפאנל המרכזי לחצו על הכפתור עם אייקון של מספר קווים מאוזנים אחד מתחת לשני. אייקון זה מייצג סידור של הפקדים מלמעלה למטה. לאחר הלחיצה תיבת הטקסט אמורה לתפוס את רוב המסך והכפתור אמור להופיע מתחתיה ולתפוס שורה בודדת. נסו לקמפל ולהפעיל שוב את התוכנית ותראו את הממשק החדש שבניתם בפעולה.

נחזור לקוד כדי להבין איך מנגנון זה עובד. בתפריט הצד השמאלי לחצו על הטאב Edit. התוצאה היא פתיחה של הקובץ mainwindow.ui בחלון עריכה טקסטואלי, וכאן אנו רואים שהקובץ הוא בסך הכל קובץ XML וכלי העריכה הגרפי הוא בסך הכל ממשק להצגה ושינוי של פורמט זה. בשביל שתיאור המסך יהפוך מ XML לקוד Qt מפעיל אוטומטית כלי נוסף בשם uic. אפשר לראות את זה בטאב ״Compile Output״ בשורת הטאבים בתחתית המסך. הנה השורה הרלוונטית מתוכו:

/Users/ynonperek/Qt5.7.1/5.7/clang_64/bin/uic ../helloworld/mainwindow.ui -o ui_mainwindow.h

הכלי uic מופעל על קובץ ה ui והופך אותו לקובץ קוד בשם ui_mainwindow.h. נלך להציץ בקובץ זה לראות איך הוא בנוי. אפשרות אחת היא לפתוח אותו בחיפוש במערכת הקבצים, ואפשרות קלה יותר היא להכנס מ Qt Creator לקובץ mainwindow.h, להעביר את הסמן על השם Ui::MainWindow וללחוץ F2.

מה שנראה שם הוא הגדרת מחלקה בשם Ui_MainWindow הכוללת את כל הפקדים שהופיעו בקובץ ה ui והגדרה אוטומטית של שתי פונקציות: הפונקציה setupUi שכוללת קוד שמאתחל את כל הממשק, והפונקציה retranslateUi שניתן להפעילה באופן יזום אם וכאשר משתמש בוחר להחליף שפה במהלך ריצת התוכנית.

בחזרה לקובץ mainwindow.cpp ניתן לראות שבבנאי המחלקה מופיעה קריאה אוטומטית לפונקציה setupUi שעכשיו ראינו:

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
}

כל הפקדים שהגדרנו בקובץ ה ui הופכים לשדות מידע תחת המשתנה ui במחלקה MainWindow. הפונקציה setupUi היא שיוצרת אותם ולאחר שנוצרו אנחנו יכולים לגשת אליהם כמו למשתנים רגילים של המחלקה. הגישה העקיפה (דרך המשתנה ui) עוזרת לכתוב קוד מודולרי יותר.

חזרו למסך העריכה הגרפי ועדכנו את הטקסט על הכפתור שיהיה כתוב ״Click Here״ ואת הטקסט בתיבה שיהיה כתוב ״Total clicks: 0״.

4. עדכון הקוד והוספת מנגנון טיפול בלחיצות

דרך קלה להוסיף קוד טיפול בלחיצות היא להוסיף מתודה במחלקה MainWindow ולהגדיר שמתודה זו תופעל כל פעם שמשתמש לוחץ על הכפתור. הוסיפו לקובץ mainwindow.h בתוך הגדרת המחלקה את השורה:

void handleClick();

לאחר מכן הזיזו את הסמן למילה handleClick ולחצו Alt+Enter. מהתפריט שיופיע בחרו באפשרות הראשונה שהיא Add Definitions in mainwindow.cpp. באופן אוטומטי תועברו לקוד מימוש הפונקציה בקובץ mainwindow.cpp. בקוד הפונקציה רשמו את הטקסט:

void MainWindow::handleClick()
{
    QString text = QString("Total Clicks: %1").arg(++m_counter);
    ui->label->setText(text);
}

ובקובץ mainwindow.h הוסיפו את משתנה המחלקה החדש m_counter עם ערך התחלתי 0 לרשימת המשתנים במחלקה:

private:
    size_t m_counter = 0;
    Ui::MainWindow *ui;

השלב האחרון הדרוש כדי לגרום לקוד לעבוד הוא חיבור אירוע הלחיצה לקוד הטיפול. עדכנו את קוד הבנאי של MainWindow כך שיראה כך:

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    QObject::connect(ui->pushButton, &QPushButton::clicked,
                     this, &MainWindow::handleClick);
}

והפעילו את התוכנית. אם עשיתם הכל נכון תראו שכל לחיצה על הכפתור מעלה את המספר שמופיע בתיבת הטקסט שמעליו.

5. לגזור ולשמור: קיצורי מקלדת

F4 - switch source/header file F2 - go to definition under cursor F1 - open documentation for class under cursor Ctrl+K - magic move to file Alt+0 - toggle sidebar Ctrl+U - select block

כל הקיצורים: http://doc.qt.io/qtcreator/creator-keyboard-shortcuts.html