البرامج الأولى

فى هذا الجزء سنقوم بإنشاء برامجنا الأولى

مثال بسيط
نبدأ بمثال بسيط لعرض نافذة على الشاشة

#include <QApplication>
#include <QWidget>

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

QWidget window;

window.resize(250, 150);
window.setWindowTitle("Simple example");
window.show();

return app.exec();
}

#include <QApplication>
#include <QWidget>

ضم الملفات الرأسية QApplication و QWidget

QApplication app(argc, argv);

كائن التطبيق ، يجب ان يتواجد لكل برنامج إلا تطبيقات الكونسول

QWidget window;

هذا هو الويدجت الرئيسى (النافذة)

window.resize(250, 150);
window.setWindowTitle("Simple example");
window.show();

الطريقة resize تقوم بإعادة تحجيم النافذة الى 250 بكسل عرض و 150 ارتفاع
الطريقة setWindowTitle تقوم بتحديد العنوان الخاص بالنافذة
الطريقة show تقوم بعرض النافذة

return app.exec();

نبدأ حلقة الأحداث بإستخدام الطريقة exec

وضع النافذة بالمنتصف
اذا لم نموضع النافذة، سيقوم مدير النوافذ بتحديد المكان. فى مثالنا التالى سنقوم بتحديد مكان النافذة الى منتصف الشاشة

#include <QApplication>
#include <QDesktopWidget>
#include <QWidget>

int main(int argc, char *argv[])
{

int WIDTH = 250;
int HEIGHT = 150;

int screenWidth;
int screenHeight;

int x, y;

QApplication app(argc, argv);

QWidget window;

QDesktopWidget *desktop = QApplication::desktop();

screenWidth = desktop->width();
screenHeight = desktop->height();

x = (screenWidth - WIDTH) / 2;
y = (screenHeight - HEIGHT) / 2;

window.resize(WIDTH, HEIGHT);
window.move( x, y );
window.setWindowTitle("Center");
window.show();

return app.exec();
}

هناك العديد من احجام الشاشات وانواع الريزليوشن، لذا لوضع النافذة بالمنتصف يجب علينا تحديد عرض وارتفاع سطح المكتب. نستخدم لهذا الصف QDesktopWidget

QDesktopWidget *desktop = QApplication::desktop();

screenWidth = desktop->width();
screenHeight = desktop->height();

x = (screenWidth - WIDTH) / 2;
y = (screenHeight - HEIGHT) / 2;

نحسب النقطة اعلى اليسار

window.resize(WIDTH, HEIGHT);
window.move( x, y );

نعيد تحجيم النافذة ، وننقلها بإستخدام الطريقة move إلى المكان المحسوب.

عرض تلميح
فى هذا المثال سنشرح كيفية عرض تلميحات بإستخدام المكتبة Qt4

لتحديد التلميح نستخدم الطريقة setToolTip

ايكون التطبيق
هى تظهر فى اعلى يسار شريط العنوان وايضا فى شريط المهام.

#include <QApplication>
#include <QDesktopWidget>
#include <QWidget>
#include <QIcon>

void center(QWidget &widget, int w, int h)
{
int x, y;
int screenWidth;
int screenHeight;

QDesktopWidget *desktop = QApplication::desktop();

screenWidth = desktop->width();
screenHeight = desktop->height();

x = (screenWidth - w) / 2;
y = (screenHeight - h) / 2;

widget.move( x, y );
}

int main(int argc, char *argv[])
{

int WIDTH = 250;
int HEIGHT = 150;

QApplication app(argc, argv);

QWidget window;

window.resize(WIDTH, HEIGHT);
center(window, WIDTH, HEIGHT);
window.setWindowTitle("icon");
window.setWindowIcon(QIcon("web.png"));
window.show();

return app.exec();
}

فى هذا المثال قمنا بنقل الكود اللازم لوضع النافذة بالمنتصف الى الطريقة center “قمنا بكتابتها”

window.setWindowIcon(QIcon("web.png"));

لعرض ايكون، نستخدم الطريقة setWindowIcon والصف QIcon

Cursors
فى هذا المثال سنستعرض بعض المؤشرات اللتى يمكن لنا استخدامها فى تطبيقاتنا.

#include <QApplication>
#include <QDesktopWidget>
#include <QWidget>
#include <QFrame>
#include <QGridLayout>

class Cursors : public QWidget
{
public:
Cursors(QWidget *parent = 0);
};

void center(QWidget *widget, int w, int h)
{
int x, y;
int screenWidth;
int screenHeight;

QDesktopWidget *desktop = QApplication::desktop();

screenWidth = desktop->width();
screenHeight = desktop->height();

x = (screenWidth - w) / 2;
y = (screenHeight - h) / 2;

widget->move( x, y );
}

Cursors::Cursors(QWidget *parent)
: QWidget(parent)
{
int WIDTH = 350;
int HEIGHT = 150;

resize(WIDTH, HEIGHT);

QFrame *frame1 = new QFrame(this);
frame1->setFrameStyle(QFrame::Box);
frame1->setCursor(Qt::SizeAllCursor);

QFrame *frame2 = new QFrame(this);
frame2->setFrameStyle(QFrame::Box);
frame2->setCursor(Qt::WaitCursor);

QFrame *frame3 = new QFrame(this);
frame3->setFrameStyle(QFrame::Box);
frame3->setCursor(Qt::PointingHandCursor);

QGridLayout *grid = new QGridLayout(this);
grid->addWidget(frame1, 0, 0);
grid->addWidget(frame2, 0, 1);
grid->addWidget(frame3, 0, 2);
setLayout(grid);

center(this, WIDTH, HEIGHT);

}

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

Cursors window;

window.setWindowTitle("cursors");
window.show();

return app.exec();
}

فى هذا المثال، نستخدم 3 كائنات من الصف QFrame ، كل منها لها مؤشر معرف

QFrame *frame1 = new QFrame(this);
frame1->setFrameStyle(QFrame::Box);
frame1->setCursor(Qt::SizeAllCursor);

ماسبق يقوم بإنشاء الكائن من الصف QFrame ونستخدم الطريقة setFrameStyle لتحديد ال”ستايل/هيئة” له، ونقوم بتحديد المؤشر بإستخدام الطريقة setCursor

QGridLayout *grid = new QGridLayout(this);
grid->addWidget(frame1, 0, 0);
grid->addWidget(frame2, 0, 1);
grid->addWidget(frame3, 0, 2);
setLayout(grid);

هذا سيقوم بتجميعهم، سنتحدث عن ذلك لاحقا فى فصل ادارة المخططات

زر
فى هذا المثال سنعرض زر على نافذة، وعند الضغط عليه سيتم غلق التطبيق.

#include <QApplication>
#include <QDesktopWidget>
#include <QWidget>
#include <QPushButton>

class MyButton : public QWidget
{
public:
MyButton(QWidget *parent = 0);
};

void center(QWidget *widget, int w, int h)
{
int x, y;
int screenWidth;
int screenHeight;

QDesktopWidget *desktop = QApplication::desktop();

screenWidth = desktop->width();
screenHeight = desktop->height();

x = (screenWidth - w) / 2;
y = (screenHeight - h) / 2;

widget->move( x, y );
}

MyButton::MyButton(QWidget *parent)
: QWidget(parent)
{
int WIDTH = 250;
int HEIGHT = 150;

setFixedSize(WIDTH, HEIGHT);

QPushButton *quit = new QPushButton("Quit", this);
quit->setGeometry(50, 40, 75, 30);

center(this, WIDTH, HEIGHT);

connect(quit, SIGNAL(clicked()), qApp, SLOT(quit()));
}

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

MyButton window;

window.setWindowTitle("button");
window.show();

return app.exec();
}
QPushButton *quit = new QPushButton("Quit", this);
quit->setGeometry(50, 40, 75, 30);

هنا انشأنا الزر من الصف QPushButton وحددنا النص الظاهر عليها فى المشيد (او بإستخدام الطريقة setText) ونقم بعد ذلك يدويا بنقله الى المكان التالى x (س)=50 و y (ص) =40 بالبكسل، ونعيد تحجيمه الى 75 عرض و 30 ارتفاع

connect(quit, SIGNAL(clicked()), qApp, SLOT(quit()));

عندما نضغط على الزر، ترسل إشارة clicked . والسلوت هى طريقة ستتفاعل معها، فى حالتنا هذه استخدمنا الطريقة quit وهى طريقة معرفة مسبقا لكائن التطبيق (qApp هو مؤشر يشير إليه)

الإتصال
سننهى هذه الجزئية بإيضاح كيف يمكن ان تتواصل الويدجتس مع بضعها، سنقسم الكود إلى 3 ملفات، للآن لم نستخدم سوا ملف واحد وذلك لصغر حجم الأمثلة.

communicate.h

#ifndef COMMUNICATE_H
#define COMMUNICATE_H

#include <QWidget>
#include <QApplication>
#include <QPushButton>
#include <QLabel>

class Communicate : public QWidget
{
Q_OBJECT

public:
Communicate(QWidget *parent = 0);

private slots:
void OnPlus();
void OnMinus();

private:
QLabel *label;

};

#endif

هذا هو الملف الرأسى، عرفنا فيه 2 سلوت “طريقة للتفاعل مع اشارة” ، ونص ساكن label

communicate.cpp

#include "communicate.h"
#include <QDesktopWidget>

void center(QWidget *widget, int w, int h)
{
int x, y;
int screenWidth;
int screenHeight;

QDesktopWidget *desktop = QApplication::desktop();

screenWidth = desktop->width();
screenHeight = desktop->height();

x = (screenWidth - w) / 2;
y = (screenHeight - h) / 2;

widget->move( x, y );
}

Communicate::Communicate(QWidget *parent)
: QWidget(parent)
{
int WIDTH = 350;
int HEIGHT = 190;

resize(WIDTH, HEIGHT);

QPushButton *plus = new QPushButton("+", this);
plus->setGeometry(50, 40, 75, 30);

QPushButton *minus = new QPushButton("-", this);
minus->setGeometry(50, 100, 75, 30);

label = new QLabel("0", this);
label->setGeometry(190, 80, 20, 30);

connect(plus, SIGNAL(clicked()), this, SLOT(OnPlus()));
connect(minus, SIGNAL(clicked()), this, SLOT(OnMinus()));

center(this, WIDTH, HEIGHT);

}

void Communicate::OnPlus()
{
int val = label->text().toInt();
val++;
label->setText(QString::number(val));
}

void Communicate::OnMinus()
{
int val = label->text().toInt();
val--;
label->setText(QString::number(val));
}

لدينا زرين ونص ساكن، نقوم بزيادة وإنقاص الرقم الظاهر بإستخدام الزرين.

connect(plus, SIGNAL(clicked()), this, SLOT(OnPlus()));
connect(minus, SIGNAL(clicked()), this, SLOT(OnMinus()));

Here we connect the clicked() signals to the slots.

void Communicate::OnPlus()
{
int val = label->text().toInt();
val++;
label->setText(QString::number(val));
}

فى الطريقة OnPlus نحدد القيمة الحالية الظاهرة على النص الساكن وذلك بإستخدام الطريق text وتحويلها الى عدد صحيح بإستخدام الطريقة toInt ونقوم بزيادة القيمة وإعادة تخزينها على الlabel بإستخدام الطريقة setText وذلك بعد تحويلها الى سلسلة نصية.

main.cpp

#include "communicate.h"

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

Communicate window;

window.setWindowTitle("Communicate");
window.show();

return app.exec();
}

الملف الأساسى الذى يبدأ عنده التنفيذ

623 مشاهدة

هذا الموضوع كتب بواسطة StrikerX في الأربعاء، 2 سبتمبر 2009 على 6:43 ص في صنف الدروس, دروس Qt من zetcode.

مواضيع مشابهة

الأرشيف

صنف