1. ‫‪Ruby/Qt tutorial‬‬
‫كدا انهينا ‪ RubyGnome‬و ‪ wxRuby‬نستكمل رحلتنا مع ‪Ruby/Qt‬‬
‫‪ Qt‬هى اداة تطوير تطبيقات ‪ toolkit‬كانت مملوكة لشركة ‪ trolltech‬حتى استحوذت عليها ‪Nokia‬‬
‫من مميزاتها انها عابرة للنظم ‪Cross­Platform‬‬
‫تنقسم ‪ Qt‬للعديد من الوحدات‬
‫--اعجوبة 4‪pyqt‬‬
‫الوحدة ‪ QtCore‬تحتوي الوظائف المركزية غير الرسومية. تستخدم هذه الوحدة في التعامل مع الوقت‬
‫والملفات والدلة )المجلدات( وأنواع البيانات المختلفة والسيالت ‪ streams‬وروابط ‪ URL‬وأنواع الملفات‬
‫‪ MIME‬والعمليات ‪.processes and threads‬‬
‫الوحدة ‪ QtGui‬فتحتوي على المكونات الرسومية وما يتعلق يها من صنوف. وتشتمل على سبيل المثال‬
‫على الزرار والنوافذ وأشرطة الدوات والحالة والزلقات والصور النقصية واللوان والخطوط …إلخ.‬
‫الوحدة ‪ QtSVG‬بها الصنوف اللزمة لعرض محتويات ملفات ‪ .SVG‬وهي لغة وصفية للرسومات المتجهية‬
‫ثنائية البعاد والتطبيقات الرسومية ب ‪XML‬‬
‫الوحدة ‪ QtOpenGL‬تستخدم لتوليد رسومات ثلثة البعاد أو ثنائية باستخدام مكتبة ‪ .OpenGL‬مما يمكننا‬
‫من دمج ‪ Qt‬مع ‪ OpenGL‬دون عناء.‬
‫الوحدة ‪ QtNetwork‬تحتوي على الصنوف اللزمة لبرمجة الشبكات. هذه الصنوف تسمح بكتابة برامج‬
‫خوادم ‪ severs‬أو مخدومات ‪ clients‬لبروتوكولت ‪ TCP/IP‬و ‪ .UDP‬مما يجعل برمجية الشبكات أسهل‬
‫وقابل للنقل لمنصات أخرى.‬
‫الصنوف في الوحدة ‪ QtXml‬للعمل على ملفات ‪ .xml‬هذه الوحدة تقدم تطبيق ل ‪ SAX‬و ‪.DOM‬‬
‫الوحدة ‪ QtSql‬تقدم صنوف التعامل مع قواعد البيانات.‬
‫--اخر القتباس‬

2. ‫البرنامج الول‬
‫عرضلنا ويدجت عليها ‪ title‬مكتوب عليه ‪ !Hello, QtRuby‬وبمساحة 003 عرض و 002 ارتفاع‬
‫1- ضيف ال 4‪ Qt‬لساحة العمل‬
‫"4‪require "Qt‬‬
‫2- انشئ ‪ application object‬ليعبر عن التطبيق )لحظ هو ‪ application‬واحد فقط الذى يتم انشائه(عن‬
‫طريق‬
‫‪Qt::Application.new‬‬
‫كالتالى‬
‫)‪app=Qt::Application.new(ARGV‬‬
‫بيتم تجهيزه بال ‪ ARGV‬اللى هتتباصى للبرنامج‬
‫3- انشئ الويدجت بإستخدام ال ‪Widget class‬‬
‫‪w=Qt::Widget.new‬‬
‫4- حدد ال ‪ title‬بإستخدام الميثود ‪ setWindowTitle‬الموجودة بال ‪w object‬‬
‫"!‪w.setWindowTitle "Hello, QtRuby‬‬
‫5- اعمل اعادة تحديد للمساحة بإستخدام الميثود ‪ resize‬الموجودة بال ‪w object‬‬
‫‪w.resize(300, 200) #width, height‬‬
‫6- اظهر ال ‪widget‬‬
‫‪w.show‬‬
‫7- نفذ ال ‪ application‬بإستخدام ال ‪ exec method‬الموجود بال ‪app object‬‬
‫‪app.exec‬‬
‫رائع جدا بس مش هو دا اللى عايزينه احنا عايزين نكتب ب إسلوب *افضل*‬
‫انشئ ‪ class‬بإسم ‪ MyWidget‬فى ‪ my_widget.rb‬على فرض ان ال ‪ entry point‬للبرنامج هتكون دائما‬
‫‪main.rb‬‬
‫‪class MyWidget < Qt::Widget‬‬
‫‪ def initialize‬‬
‫)(‪ super‬‬
‫‪ init_comp‬‬
‫‪ end‬‬

3.
end
..‫ على الويدجت او الفورم الخ‬components ‫ دى هتكون الميثود المسئولة عن تجهيز ال‬init_comp ‫ال‬
‫وفى المثال هنا معرفة كالتالى‬
def init_comp
setWindowTitle('Hello, World!')
#resize(200, 300) #w, h
setGeometry(300, 300, 250, 150) #x, y, w, h
setToolTip("Simple Widget")
setWindowIcon(Qt::Icon.new('icons/apps/preferences­desktop­remote­desktop')) #Set Icon..
end
setToolTip ‫ و‬setWindowIcon ‫ و‬setGeometry ‫فى حاجات جديدة وهما‬
.setGeometry(x, y, w, h)
.setToolTip
tooltip ‫لعرض‬
‫ ايضا‬markup ‫تقدر تحط فيها‬
.setWindowIcon
‫ لتحديد ايكون على الويدجت‬Icon object ‫وبتاخد‬
‫سهل مش كدا؟؟‬

4. ‫عايزين ننشئ حاجة مشابهه لكدا‬
‫تمام ويدجت وعليه ‪ button‬مكتوب عليه ‪!Click Me‬‬
‫اوكى تمام هنحتاج نتكلم الول عن الستراتيجى بتاعتنا‬
‫اول الويدجت بأبسط صورة عبارة عن مستطيل كدا‬
‫محتاجين نضيف ليه حاجة اسمها ‪ Layout‬لنقدر نضيف اى ويدجتس اخرى جواه )اسلوب مشهور جدا(‬
‫ال ‪ Layout‬دا عبارة عن صندوق داخلى جوا الويدجت الصلى‬

5. ‫ممكن يشمل ‪ Layouts‬اخرى وممكن يشمل فى نفس الوقت كنترولز )راجع جزئية ال ‪ RubyGnome‬‬
‫بخصوص ال ‪(Hbox, Vbox‬‬
‫المهم فى عندنا اكتر من نوع لل ‪ Layout‬فى افقى وفى رأسى.. الفقى بيتم فيه اضافة الويدجتس/اللي‬
‫اوتس بصورة افقيه والرأسى بيتم إضافتهم بصورة رأسية..‬
‫مثل اللى داخل الويدجت دا الفقى‬
‫وعند إضافة كنترولز بيتم التحجيم وتجهيز مكان جديد للضافة مثل‬
‫اما الرأسى فبيتم الضافة رأسيا كما فى الصورة التالية مثل‬

6. Vbox ‫ بيكون‬Main ‫ داخلية بس ال‬Layouts ‫ الرئيسى هو رأسى وبعمل جواه‬Layout ‫انا ديما بعتبر ان ال‬
‫تعالى نجرب مثال على الضافة الرأسية‬
def init_comp
setWindowTitle('Hello, World!')
#resize(200, 300) #w, h
setGeometry(300, 300, 250, 150) #x, y, w, h
setToolTip("Simple Widget")
setWindowIcon(Qt::Icon.new('icons/apps/preferences­desktop­remote­desktop')) #Set Icon..
vlay=Qt::VBoxLayout.new
#add 5 buttons vertically!
(1..5).each { |i|
vlay.addWidget(Qt::PushButton.new(i.to_s))
}
setLayout(vlay)
end
VboxLayout class ‫ رأسى إستخدام‬Layout ‫لنشاء‬
text ‫ وباصى للمشيد ال‬PushButton class ‫ استخدم‬push button ‫لنشاء‬
addWidget ‫ استخدم‬layout ‫لضافة ويدجت معين ل‬

7. setLayout ‫ الساسى استخدم‬Layout ‫لتحديد ال‬
‫طب لو افقى ؟ تقدر تطبق نفس السابق كالتالى‬
vlay=Qt::VBoxLayout.new
hlay=Qt::HBoxLayout.new {|lay|
(6..10).each{|i|
lay.addWidget(Qt::PushButton.new(i.to_s))
}
vlay.addLayout(lay)
addLayout ‫ معين استخدم الميثود‬layout ‫ ل‬Layout ‫لضافة‬
‫طب لو عايزين نضيف التنين بنفس الوقت ال 5 الرأسى وال 5 الفقى ؟‬
‫التصميم‬

8. def init_comp
setWindowTitle('Hello, World!')
#resize(200, 300) #w, h
setGeometry(300, 300, 250, 150) #x, y, w, h
setToolTip("Simple Widget")
setWindowIcon(Qt::Icon.new('icons/apps/preferences­desktop­remote­desktop')) #Set Icon..
mainlayout=Qt::VBoxLayout.new
vlay=Qt::VBoxLayout.new {|lay|
(1..5).each { |i|
lay.addWidget(Qt::PushButton.new(i.to_s))
}
mainlayout.addLayout(lay)
}
hlay=Qt::HBoxLayout.new {|lay|
(6..10).each{|i|
lay.addWidget(Qt::PushButton.new(i.to_s))
}
mainlayout.addLayout(lay)
}
setLayout(mainlayout)
end
Hello World ‫مثال‬
SIGNAL/SLOT ‫اول لكدا لزم نتكلم عن تكنيك ال‬

9. ‫ هى إشارة بتتبعت من وإلى‬signal ‫ال‬
‫ هى ال هاندلر زى مابنقول او الميثود اللى هيتم تنفيذها حين وصول الشارة من اوبجكت معين‬slot ‫ال‬
‫ ليه كذا سيجنال ممكن يرسلها )بناء على التفاعل مع المستخدم او تغير فى الحالة( زى‬button ‫مثال ال‬
‫ صح؟هيتم ارسالها إلى مين؟‬clicked
‫ يتم تنفيذها حين الضغط فالمستخدم لو‬slot ‫ تمام لو مش اتحددت‬button ‫الى ال ويدجت اللى فيه ال‬
‫ يعنى‬handler ‫ او‬method ‫ضغط من هنا لمليون سنة قدام مش هيحصل تغيير فكل اللى عليك تنشئ‬
..‫ دى‬SIGNAL ‫ دى فيتم تنفيذها كل مرة تتبعت ال‬SIGNAL ‫ وتربطها بال‬SLOT ‫وتعرفها على انها‬
‫هنشوف حال فى المثال دا‬
class MyWidget < Qt::Widget
slots 'onBtnClickMeClicked()'
def initialize
super()
@times=0
init_comp
end
def init_comp
setWindowTitle('Hello, World!')
#resize(200, 300) #w, h
setGeometry(300, 300, 250, 150) #x, y, w, h
setToolTip("Simple Widget")
vlay=Qt::VBoxLayout.new
#Add a button..
@btnclickme=Qt::PushButton.new("Hi")
connect(@btnclickme, SIGNAL('clicked()'), SLOT('onBtnClickMeClicked()'))
vlay.addWidget(@btnclickme)
setLayout(vlay)
end
def onBtnClickMeClicked
Qt::MessageBox::information(self, "Hello!", "Welcome to Qt!")

10. end
‫لحظ السطر‬
slots 'onBtnClickMeClicked()'
SLOTs ‫هنا بنعرف مصفوفة من الميثودز اللى عايزينها يتم اعتبارهم‬
‫ دا بإنه الساسى للويدجت‬layout ‫ وحددنا ال‬layout ‫ وضفناه لل‬button ‫ رأسى وضفنا ليه‬layout ‫انشأنا‬
‫ كالتالى‬slot onBtnClickMeClicked ‫ تحديدا بال‬btnclickme@ ‫ المرسل من ال‬clicked ‫ربطنا الحدث‬
connect(@btnclickme, SIGNAL('clicked()'), SLOT('onBtnClickMeClicked()'))
‫ معرفة كالتالى‬onBtnClickMeClicked ‫ال‬
def onBtnClickMeClicked
Qt::MessageBox::information(self, "Hello!", "Welcome to Qt!")
end
‫ هى بوينتر‬self ‫ و‬Welcome to Qt ‫! وفى المحتوى مكتوب‬Hello ‫ مكتوب‬title ‫بتعرض لينا رسالة فى ال‬
‫للب‬
Click Me ‫المثال الشهير‬
‫بعد الضغط 6 مرات‬
‫الفكرة العامة ان يبقة عندنا متغير نحسب فيه عدد الضغطات ودى نقدر نحسبها بإننا نتتبع كل ضغطة‬
‫ معين‬label ‫ وبعد كدا نعدل التكست على‬button ‫تتم على ال‬
class MyWidget < Qt::Widget
slots 'onBtnClickMeClicked()'
def initialize
super()
@times=0

11. init_comp
end
def init_comp
setWindowTitle('Click Me!')
#resize(200, 300) #w, h
setGeometry(300, 300, 250, 150) #x, y, w, h
setToolTip("Simple Widget")
vlay=Qt::VBoxLayout.new
#Add counter label..
@lblcounter=Qt::Label.new
vlay.addWidget(@lblcounter)
#Add a button..
@btnclickme=Qt::PushButton.new("Click Me!")
connect(@btnclickme, SIGNAL('clicked()'), SLOT('onBtnClickMeClicked()'))
vlay.addWidget(@btnclickme)
setLayout(vlay)
end
def onBtnClickMeClicked()
@times += 1 #Inc times.
updateCounterLabel
end
private
def updateCounterLabel
@lblcounter.setText("Clicked: #{@times}")
end
end
‫ لنحسب عدد الضغطات‬times@ ‫وايضا عرفنا متغير‬
‫ بتاعتنا‬widgets ‫ رأسى لنضع فيه ال‬layout ‫انشأنا‬
vlay=Qt::VBoxLayout.new
‫ وضفناهم ليه‬label, button ‫انشأنا ال‬
@lblcounter=Qt::Label.new
vlay.addWidget(@lblcounter)
#Add a button..
@btnclickme=Qt::PushButton.new("Click Me!")
vlay.addWidget(@btnclickme)
‫ كالتالى‬slot onBtnClickMeClicked ‫ تحديدا بال‬btnclickme@ ‫ المرسل من ال‬clicked ‫ربطنا الحدث‬
connect(@btnclickme, SIGNAL('clicked()'), SLOT('onBtnClickMeClicked()'))
‫ الساسى للبرنامج‬layout ‫حددنا ال‬

12. setLayout(vlay)
‫ بقة‬slot ‫تمام تعريف ال‬
def onBtnClickMeClicked
@times += 1 #Inc times.
updateCounterLabel
end
‫ بإستدعاء‬label ‫ بمقدار 1 عند كل استدعاء وعمل تحديث لل‬times@ ‫هتقوم بزيادة المتغير‬
‫ المعرفة كالتالى‬updateCounterLabel
private
def updateCounterLabel
@lblcounter.setText("Clicked: #{@times}")
end
‫ تم انشائهم كالتالى‬spinner ‫ وعندنا‬slider ‫هنا عندنا‬
slider=Qt::Slider.new(Qt::Horizontal)
slider.setRange(0, 100)
spinner=Qt::SpinBox.new
spinner.setRange(0, 100)
‫ وبتاخد معاملين قيمة صغرى وقيمة كبرى‬setRange ‫تم تحديد مداهم بإستخدام ال‬
‫ ممكن يكون افقى او رأسى ودى بتحددها من خلل المشيد بتحديد التجاه من خلل‬slider ‫لحظ ال‬
Qt::Vertical ‫ او‬Qt::Horizontal
‫ بإستخدام ال‬spinner ‫ بإنها تحدث القيمة دى على ال‬slider ‫نربط حدوث اى تغيير فى القيمة الخاصة بال‬
valueChanged, setValue
connect(slider, SIGNAL('valueChanged(int)'), spinner, SLOT('setValue(int)'))
‫ كالتالى‬slider ‫ بتحديث القيمة على ال‬spinner ‫ونفس الشئ نربط اى تغيير فى القيمة الخاصة بال‬
connect(spinner, SIGNAL('valueChanged(int)'), slider, SLOT('setValue(int)'))
layout ‫نضيفهم لل‬
vlay.addWidget(slider)
vlay.addWidget(spinner)
‫ الساسى‬layout ‫نحدد ال‬
setLayout(vlay)

13. ‫‪Menus/ToolBars‬‬
‫تمام برامج كتير بتعرض وظايفها على صورة منيو واهم الوظايف فيها على صورة ‪ toolbar‬مثل اى‬
‫تكست اديتور‬
‫تمام ‪ Qt‬بتنتهج اسلوب للتعامل اسمه ال ‪ actions‬ال ‪ action‬بيعبر عن اى ‪ item‬ظاهر فى منيو او فى‬
‫تولبار بيسمى ‪ action‬ال ‪ action‬دا ليه عدة وظايف مثل صورة عليه.. اختصار.. نص مساعدة!‬
‫فى المثال القادم هننشئ حاجة مشابهه لكدا‬

14. ‫ وتولبار‬menu 2 ‫عندنا‬
actions ‫اول خطوة انشاء ال‬
newaction=Qt::Action.new(Qt::Icon.new('actions/document­new.png'),"New",self)
#set shortcut
newaction.setShortcut("Ctrl+N")
newaction.setStatusTip("Create a new file.")
connect(newaction, SIGNAL("triggered()"), SLOT("onNew()"))
openaction=Qt::Action.new(Qt::Icon.new('actions/document­open.png'),"Open",self)
#set shortcut
openaction.setShortcut("Ctrl+O")
openaction.setStatusTip("Open a file")
connect(openaction, SIGNAL("triggered()"), SLOT("onOpen()"))
copyaction=Qt::Action.new(Qt::Icon.new('actions/edit­copy.png'),"Copy",self)
#set shortcut
copyaction.setShortcut("Ctrl+C")
copyaction.setStatusTip("Copy")
connect(copyaction, SIGNAL("triggered()"), SLOT("onCopy()"))
cutaction=Qt::Action.new(Qt::Icon.new('actions/edit­cut.png'),"Cut",self)
#set shortcut
cutaction.setShortcut("Ctrl+X")
cutaction.setStatusTip("Cut")
connect(cutaction, SIGNAL("triggered()"), SLOT("onCut()"))
exitaction=Qt::Action.new("Exit", self)
exitaction.setStatusTip("Exit..")
connect(exitaction, SIGNAL('triggered()'), $qApp, SLOT('closeAllWindows()'))
‫كلهم متشابهين عشان كدا هنشرح اول واحدة واخر واحدة‬
newaction=Qt::Action.new(Qt::Icon.new('actions/document­new.png'),"New",self)
#set shortcut
newaction.setShortcut("Ctrl+N")
newaction.setStatusTip("Create a new file.")

15. connect(newaction, SIGNAL("triggered()"), SLOT("onNew()"))
‫ المشيد الخاص بيه بياخد 3 معاملت الول عبارة عن اليكون‬Action class ‫ استخدم‬Action ‫لنشاء ال‬
‫والتانى التسكت والتالت هو النافذة اللى بينتمى ليها‬
action object ‫ الموجود بال‬setShortcut ‫ استخدم‬Shortcut ‫لتحديد ال‬
action object ‫ الموجودة بال‬setStatusTip ‫ استخدم‬status tip ‫لتحديد ال‬
connections ‫ ودى هى اللى بنربطها فى حال انشاء ال‬triggered ‫ المسماه ب‬SGINAL ‫ ليه ال‬action ‫وال‬
exitaction=Qt::Action.new("Exit", self)
exitaction.setStatusTip("Exit..")
connect(exitaction, SIGNAL('triggered()'), $qApp, SLOT('closeAllWindows()'))
‫ بالتكست فقط والنافذة الب‬Action ‫نفس السابقة انشأنا‬
status tip ‫حددنا ال‬
qApp$ ‫ الخاصة بال‬SLOT closeAllWindows ‫ بال‬action ‫ الصادرة من ال‬triggered signal ‫اخيرا ربطنا ال‬
...application object ‫ ؟ متغير عام بيشير لل‬qApp$ ‫ماهو ال‬
‫ معرفة مسبقا لغلق كل النوافذ ومن ثم غلق البلكيشن‬SLOT ‫ هى‬closeAllWindows ‫ال‬
‫ فى الويدجت‬statusbar ‫ عند اول استدعاء ليها هتقوم بإظهار ال‬statusBar
‫إضافة منيو‬
mbar=menuBar #fetch it.
filemenu=mbar.addMenu("&File")
filemenu.addAction(newaction)
filemenu.addAction(openaction)
filemenu.addSeparator
filemenu.addAction(exitaction)
editmenu=mbar.addMenu("&Edit")
editmenu.addAction(copyaction)
editmenu.addAction(cutaction)
..‫ ميثود او تقدر تستخدمها مباشرة فى كل مرة حسب راحتك‬menuBar ‫اول خد رفرنس من ال‬
menuBar object ‫ الموجودة بال‬addMenu. ‫لنشاء منيو استخدم‬
‫ اللى جهزته مسبقا‬action ‫ وباصي ليها ال‬addAction ‫ لمنيو معينة استخدم‬action ‫لضافة‬
addSeparator. ‫ استخدم‬separator ‫لضافة‬
menu object ‫ من ال‬addMenu. ‫لضافة منيو داخلية استخدم‬
‫التعامل مع التولبار‬
‫ مع‬addToolBar ‫ او كدا استخدم‬file menu ‫لضافة جزء جديد بالتولبار بيعبر عن منطقة معينة مثل ال‬
(‫ بين عناصر المناطق‬separator ‫اسم المنطقة )لحظ بين كل استدعاء ليها هيتم انشاء‬
toolbar object ‫ الموجودة بال‬addAction ‫ ليها استخدم‬actions ‫لضافة‬
fbar=addToolBar('file') #Toolbar for file menu items..
fbar.addAction(newaction)
fbar.addAction(openaction)

16. ebar=addToolBar("edit") #Toolbar for edit menu items..
ebar.addAction(copyaction)
ebar.addAction(cutaction)
‫كود المثال‬
class MyWindow < Qt::MainWindow
slots 'onNew()', 'onOpen()', 'onCopy()', 'onCut()'
def initialize
super()
init_comp
end
def init_comp
setWindowTitle('Hello, World!')
#resize(200, 300) #w, h
setGeometry(300, 300, 250, 150) #x, y, w, h
setToolTip("Simple Widget")
newaction=Qt::Action.new(Qt::Icon.new('actions/document­new.png'),"New",self)
#set shortcut
newaction.setShortcut("Ctrl+N")
newaction.setStatusTip("Create a new file.")
connect(newaction, SIGNAL("triggered()"), SLOT("onNew()"))
openaction=Qt::Action.new(Qt::Icon.new('actions/document­open.png'),"Open",self)
#set shortcut
openaction.setShortcut("Ctrl+O")
openaction.setStatusTip("Open a file")
connect(openaction, SIGNAL("triggered()"), SLOT("onOpen()"))
copyaction=Qt::Action.new(Qt::Icon.new('actions/edit­copy.png'),"Copy",self)
#set shortcut
copyaction.setShortcut("Ctrl+C")
copyaction.setStatusTip("Copy")
connect(copyaction, SIGNAL("triggered()"), SLOT("onCopy()"))
cutaction=Qt::Action.new(Qt::Icon.new('actions/edit­cut.png'),"Cut",self)
#set shortcut
cutaction.setShortcut("Ctrl+X")
cutaction.setStatusTip("Cut")
connect(cutaction, SIGNAL("triggered()"), SLOT("onCut()"))
exitaction=Qt::Action.new("Exit", self)

17. exitaction.setStatusTip("Exit..")
connect(exitaction, SIGNAL('triggered()'), $qApp, SLOT('closeAllWindows()'))
statusBar #Show up the statusBar..
#Add to the main menubar and a toolbar..
mbar=menuBar #fetch it.
filemenu=mbar.addMenu("&File")
filemenu.addAction(newaction)
filemenu.addAction(openaction)
filemenu.addSeparator
filemenu.addAction(exitaction)
editmenu=mbar.addMenu("&Edit")
editmenu.addAction(copyaction)
editmenu.addAction(cutaction)
fbar=addToolBar('file') #Toolbar for file menu items..
fbar.addAction(newaction)
fbar.addAction(openaction)
ebar=addToolBar("edit")
ebar.addAction(copyaction)
ebar.addAction(cutaction)
end
def onNew
puts "New action!"
end
def onOpen
puts "Open action!"
end
def onCopy
puts "Copy action!"
end
def onCut
puts "Cut action!"
end

18. ‫‪end‬‬
‫ال ‪Dialogs‬‬
‫التعامل مع ال ‪ Dialogs‬كتير سهل مع ال ‪ Qt‬فهنشرح المثال الموجود بال ‪standard dialogs‬‬
‫‪QinputDialog‬‬
‫هو كلس بيسهل التعامل مع المستخدم واخذ قيمة معينة منه سواء ‪Integer, Double, Text, Item‬‬
‫‪getInteger‬‬
‫التعريف العام ليها‬
‫ ‪int getInteger ( QWidget * parent, const QString & title, const QString & label, int value = 0, int‬‬
‫ = ‪minValue = ­2147483647, int maxValue = 2147483647, int step = 1, bool * ok = 0, Qt::WindowFlags f‬‬
‫) 0‬
‫اول معامل مع النافذة الب‬
‫الثانى هو عنوان الديالوج‬
‫الثالث هو الرسالة‬
‫الرابع هو القيمة المختارة‬
‫الخامس اقل قيمة‬

19. ‫السادس اكبر قيمة‬
‫السابع مقدار الزيادة‬
‫الثامن هو مؤشر للمتغير اللى هيتم تخزين فيه ناتج تعامل المستخدم مع الديالوج‬
‫التاسع هو ال ‪) WindowFlags‬يستحسن مراجعة ال ‪ enum‬من ال ‪(Qt Assistant‬‬
‫التعامل من خلل روبى‬
‫)(‪ def setInteger‬‬
‫‪ ok = Qt::Boolean.new‬‬
‫,)")(‪ i = Qt::InputDialog.getInteger(self, tr("Qt::InputDialog.getInteger‬‬
‫)‪ tr("Percentage:"), 25, 0, 100, 1, ok‬‬
‫‪ if ok‬‬
‫)‪ @integerLabel.text = tr("%d%" % i‬‬
‫‪ end‬‬
‫‪ end‬‬
‫لحظ انشأنا ‪ok‬من النوع ‪ Qt::Boolean‬ليتم مباصاته لل ‪ getInteger‬لحساب قيمة التفاعل مع المستخدم‬
‫استدعينا الديالوج من خلل ال ‪ static getInteger‬واخدت معاملت زى ماذكرنا الب والعنوان والرسالة‬
‫والقيمة المختارة والقيمة الصغرى والقيمة الكبرى ومقدار الزيادة ومتغير ‪ ok‬ليتم وضع ناتج التفاعل فيه‬
‫فى حال ان ال ‪ ok‬دا قيمته اعيدت ب ‪ true‬هيتم وضع تكست على ‪ label‬مسمى @‪integerLabel‬‬
‫‪getDouble‬‬
‫نفس تعريف سابقتها ولكن بتعمل ريترن ب ‪double‬‬
‫,0 = ‪ double getDouble ( QWidget * parent, const QString & title, const QString & label, double value‬‬
‫,0 = ‪ double minValue = ­2147483647, double maxValue = 2147483647, int decimals = 1, bool * ok‬‬
‫0 = ‪( Qt::WindowFlags f‬‬
‫اول معامل مع النافذة الب‬
‫الثانى هو عنوان الديالوج‬
‫الثالث هو الرسالة‬
‫الرابع هو القيمة المختارة‬
‫الخامس اقل قيمة‬

20. ‫السادس اكبر قيمة‬
‫السابع مقدار الزيادة‬
‫الثامن هو مؤشر للمتغير اللى هيتم تخزين فيه ناتج تعامل المستخدم مع الديالوج‬
‫التاسع هو ال ‪) WindowFlags‬يستحسن مراجعة ال ‪ enum‬من ال ‪(Qt Assistant‬‬
‫التعامل من خلل روبى‬
‫)(‪ def setDouble‬‬
‫‪ ok = Qt::Boolean.new‬‬
‫,)")(‪ d = Qt::InputDialog.getDouble(self, tr("Qt::InputDialog.getDouble‬‬
‫)‪ tr("Amount:"), 37.56, ­10000, 10000, 2, ok‬‬
‫‪ if ok‬‬
‫‪ @doubleLabel.text = "$%f" % d‬‬
‫‪ end‬‬
‫‪ end‬‬
‫استدعينا الديالوج من خلل ال ‪ static getDouble‬واخدت معاملت زى ماذكرنا الب والعنوان والرسالة‬
‫والقيمة المختارة والقيمة الصغرى والقيمة الكبرى ومقدار الزيادة ومتغير ‪ ok‬ليتم وضع ناتج التفاعل فيه‬
‫فى حال ان ال ‪ ok‬دا قيمته اعيدت ب ‪ true‬هيتم وضع تكست على ‪ label‬مسمى @‪doubleLabel‬‬
‫‪getItem‬‬
‫ & ‪QString getItem ( QWidget * parent, const QString & title, const QString & label, const QStringList‬‬
‫) 0 = ‪list, int current = 0, bool editable = true, bool * ok = 0, Qt::WindowFlags f‬‬
‫‪ :parent‬هو الب‬
‫‪ :title‬العنوان‬
‫‪ :label‬الرسالة‬
‫‪ :list‬الختيارات المتاحة‬
‫‪ :current‬رقم الختيار الحالى )اللى هيتم عرضه( ‪index‬‬
‫‪ :editable‬هل المستخدم يقدر يكتب فى مكان الختيار او ل‬
‫‪ :ok‬مؤشر للريترن‬
‫يفضل مراجعة ال ‪ WindowFlags‬مع ال ‪Qt Assistant‬‬

21. ‫التعامل من خلل روبى‬
def setItem()
items = []
items << tr("Spring") << tr("Summer") << tr("Fall") << tr("Winter")
ok = Qt::Boolean.new
item = Qt::InputDialog.getItem(self, tr("Qt::InputDialog.getItem()"),
tr("Season:"), items, 2, false, ok)
if ok && !item.nil?
@itemLabel.text = item
end
end
‫ مثل ونحط فيها القيم‬items ‫ بإسم‬list ‫بننشئ‬
‫ ونباصى ليها رفرنس للب والعنوان ومحتوى الرسالة‬static getItem ‫ونستدعى الديالوج بإستخدام ال‬
‫والختيارات والختيار المنشط و سماحية الكتابة ورفرنس لناتج التفاعل‬
‫ بحيث انه يظهر‬itemLabel@ ‫نختبر العائد من التفاعل والقيم اللى اختارها المستخدم وبناء عليها هنعدل‬
... ‫الختيار‬
getText
‫معرفة كالتالى‬
QString getText ( QWidget * parent, const QString & title, const QString & label,
QLineEdit::EchoMode mode = QLineEdit::Normal, const QString & text = QString(), bool * ok = 0,
Qt::WindowFlags f = 0 )
‫ من المستخدم‬string ‫ميثود بتحصل على‬
‫: الب‬parent
‫: العنوان‬title
‫: محتوى الرسالة‬label
‫ المستخدم اهمهم‬echo mode ‫: بيعبر عن ال‬mode
Normal: ‫عرض الحروف جميعا‬
NoEcho: ‫عدم العرض‬

22. Password: ‫إستبدال الحروف بنجوم‬
LineEdit ‫: هو النص الفتراضى الموجود بال‬text
‫: ناتج التفاعل مع المستخدم‬ok
‫التعامل من خلل روبى‬
def setText()
ok = Qt::Boolean.new
text = Qt::InputDialog.getText(self, tr("Qt::InputDialog.getText()"),
tr("User name:"), Qt::LineEdit::Normal,
Qt::Dir::home().dirName(), ok)
if ok && !text.nil?
@textLabel.text = text
end
end
ColorDialog
static getColor ‫هو كلس بيسهل علينا الحصول على لون معين من اختيار المستخدم ودا من خلل ال‬
‫المعرفة كالتالى‬
QColor getColor ( const QColor & initial = Qt::white, QWidget * parent = 0 )
(‫ )الب‬parent ‫ وبينتمى الديالوج ل‬initial ‫بتعرض ديالوج فيه الختيار الولى‬
‫ ميثود‬color.isValid ‫ فللختبار استخدم‬invalid ‫ هيتم اعادة‬cancel ‫لو المستخدم ضغط‬
‫الستخدام من خلل روبى‬

23. def setColor()
color = Qt::ColorDialog.getColor(Qt::Color.new(Qt::green), self)
if color.isValid()
@colorLabel.text = color.name
end
end
self ‫هنا انشأنا ديالوج بإختيار افتراضى هو اللون الخضر ورفرنس للب‬
color = Qt::ColorDialog.getColor(Qt::Color.new(Qt::green), self)
‫ الخاص بيه‬name ‫ هيتم عرض ال‬valid ‫ او ل لو‬isValid ‫بنختبر هل اللون‬
‫للحصول على نسبة الخضر والحمر والزرق استخدم‬
.red
.green
,blue
FontDialog
getFont

24. ‫فى الواقع الميثود دى معرفة اكثر من مرة ‪ overloaded‬فإحنا هناخد دى‬
‫) 0 = ‪QFont getFont ( bool * ok, const QFont & initial, QWidget * parent‬‬
‫هنا ‪ ok‬بتعبر عن ناتج التفاعل مع المستخدم‬
‫‪ :initial‬الفونت اللى هيتم وضعه كبداية‬
‫‪ :parent‬النافذة الب‬
‫او تقدر تستدعيه كالتالى‬
‫) 0 = ‪QFont getFont ( bool * ok, QWidget * parent‬‬
‫وهيتم وضع ال ‪ font‬الفتراضى للبلكيشن ك ‪initial‬‬
‫التعامل مع روبى‬
‫)(‪ def setFont‬‬
‫‪ ok = Qt::Boolean.new‬‬
‫)‪ font = Qt::FontDialog.getFont(ok, Qt::Font.new(@fontLabel.text), self‬‬
‫‪ if ok‬‬
‫)(‪ @fontLabel.text = font.key‬‬
‫‪ end‬‬
‫‪ end‬‬
‫‪ ok‬متغير ليعبر عن الحالة‬
‫نعمل ‪ run‬للديالوج بإستخدام ال ‪ static getFont‬واللى هتاخد ‪ ok‬و ‪ Font Object‬ليعبر عن الفونت الولى‬
‫وهنا بدل مانكتب التعريف ناخده مباشرة من ‪ fontLabel‬و ‪ self‬رفرنس للب‬
‫اختبر ال ‪ok‬‬

25. ‫او تقدر تستخدمه كما ذكرنا بالعلى‬
def setFont()
ok = Qt::Boolean.new
font = Qt::FontDialog.getFont(ok, self)
if ok
@fontLabel.text = font.key()
end
end
FileDialog
‫كلس بيتيح ليك بسهولة امكانية اختيار ملفات او مجلدات‬
getDir
QString getExistingDirectory ( QWidget * parent = 0, const QString & caption = QString(), const
QString & dir = QString(), Options options = ShowDirsOnly )
‫للحصول على مجلد موجود من قبل‬
‫: النافذة الب‬parent
caption ‫ ال‬caption
‫: الفولدر اللى هيتم البدأ منه‬dir
‫: مجموعة من الوبشنز الفتراضى عرض الفولدرات فقط‬options
‫اهمهم‬
ShowDirsOnly, DontResolveSymLinks
...‫ وهى بيتم حلها افتراضيا‬symlinks ‫لمنع حل ال‬
‫التعامل من خلل روبى‬

26. def setExistingDirectory()
directory = Qt::FileDialog.getExistingDirectory(self,
tr("Qt::FileDialog.getExistingDirectory()"),
@directoryLabel.text,
Qt::FileDialog::DontResolveSymlinks |
Qt::FileDialog::ShowDirsOnly)
if !directory.nil?
@directoryLabel.text = directory
end
end
.getOpenFileName
‫لختيار ملف واحد‬
QString getOpenFileName ( QWidget * parent = 0, const QString & caption = QString(), const
QString & dir = QString(), const QString & filter = QString(), QString * selectedFilter = 0, Options
options = 0 )
‫: الب‬parent
caption ‫: ال‬caption
‫: محل البداية‬dir
‫: الفيلتر اللى هيتم بناء عليه عرض الملفات‬filter
‫: الفلتر المختار‬selectedFiler
DirsOnly ‫: مشابه لسابقتها ماعدا ال‬Options ‫ال‬
‫التعامل من خلل روبى‬

27. def setOpenFileName()
fileName = Qt::FileDialog.getOpenFileName(self,
tr("Qt::FileDialog.getOpenFileName()"),
@openFileNameLabel.text,
tr("All Files (*);;Text Files (*.txt)"))
if !fileName.nil?
@openFileNameLabel.text = fileName
end
end
‫ قد يكون فيه تكست او ل فهى محطوطة بالمثال لتتبع اخر اختيار وهكذا‬openFileLabel.text@ ‫لحظ ال‬
‫فى باقى المثلة‬
‫ والملف الساسى والفلتر‬caption ‫ وباصينا ال‬static getOpenFileName ‫عمل رن للديالوج بإستخدام ال‬
‫لحظ الفلتر مكتوب كالتالى‬
"All Files (*);;Text Files (*.txt)"
* ‫ ودى كل الفايلت‬All Files ‫هيقدم اختيارين‬
txt.* ‫ مع‬match ‫ ودى كل الفايلت اللى بتعمل‬text Files ‫و‬
;; ‫لحظ بتفصل بين كل واحد بإستخدام‬
.getOpenFileNames
QStringList getOpenFileNames ( QWidget * parent = 0, const QString & caption = QString(), const
QString & dir = QString(), const QString & filter = QString(), QString * selectedFilter = 0, Options
options = 0 )
‫لختيار اكتر من ملف‬

28. def setOpenFileNames()
files = Qt::FileDialog.getOpenFileNames(
self, tr("Qt::FileDialog.getOpenFileNames()"),
@openFilesPath,
tr("All Files (*);;Text Files (*.txt)"))
if files.length != 0
@openFilesPath = files[0]
@openFileNamesLabel.text = "[%s]" % files.join(", ")
end
end
.getSaveFileName
‫لحفظ ملف معين‬
QString getSaveFileName ( QWidget * parent = 0, const QString & caption = QString(), const QString
& dir = QString(), const QString & filter = QString(), QString * selectedFilter = 0, Options options = 0
)

29. ‫كسابقاتها ولكنها للحفظ وليست لفتح ملف/ات‬
def setSaveFileName()
fileName = Qt::FileDialog.getSaveFileName(self,
tr("Qt::FileDialog.getSaveFileName()"),
@saveFileNameLabel.text,
tr("All Files (*);;Text Files (*.txt)"))
if !fileName.nil?
@saveFileNameLabel.text = fileName
end
end
QmessageBox
MessageBox ‫فى 4 مستويات لل‬
‫ ودى للسؤال‬Question -1
‫ لعلم بشئ معين‬Information -2
‫ تحذير‬Warning -3
‫ حرج‬Critical -4
QmessageIcon
‫لعرض ايكون مخصصة‬

30. QMessageBox::NoIcon 0
QMessageBox::Question 4
QMessageBox::Information 1
QMessageBox::Warning 2
QMessageBox::Critical 3
‫اهم الزراير‬
QMessageBox::Ok ‫ زر‬OK
QMessageBox::Open ‫ زر‬Open
QMessageBox::Save ‫ زر‬Save
QMessageBox::Cancel ‫ زر‬Cancel
QMessageBox::Close ‫ زر‬Close
QMessageBox::Discard ‫ زر‬Discard
QMessageBox::Apply ‫ زر‬Apply
QMessageBox::Reset ‫ زر‬Reset
QMessageBox::RestoreDefaults ‫ زر‬Restore Defaults
QMessageBox::Help ‫ زر‬Help
QMessageBox::SaveAll ‫ زر‬Save All
QMessageBox::Yes ‫ زر‬Yes
QMessageBox::YesToAll ‫ زر‬Yes to all
QMessageBox::No ‫ زر‬No
QMessageBox::NoToAll ‫ زر‬No to all
QMessageBox::Abort ‫ زر‬Abort
QMessageBox::Retry ‫ زر‬Retry
QMessageBox::Ignore ‫ زر‬Ignore
‫اهم الميثودز‬
‫ملحوظة فى كل المثلة التالية‬
‫: النافذة الب‬parent
‫: ال عنوان‬title
‫: محتوى الرسالة‬text
(‫: تجميعة الزرار الموضوعة على الديالوج )سبق ذكرها فى الجدول السابق‬buttons
‫: الزر الفتراضى‬defaultButton

31. void aboutQt ( QWidget * parent, const QString & title = QString() )
About Qt ‫لعرض ديالوج‬
StandardButton critical ( QWidget * parent, const QString & title, const QString & text,
StandardButtons buttons = Ok, StandardButton defaultButton = NoButton )
Critical ‫لعرض رسالة‬
def criticalMessage()
reply = Qt::MessageBox::critical(self, tr("Qt::MessageBox.showCritical()"),
@message,
Qt::MessageBox::Abort,
Qt::MessageBox::Retry,
Qt::MessageBox::Ignore)
if reply == Qt::MessageBox::Abort
@criticalLabel.text = tr("Abort")
elsif reply == Qt::MessageBox::Retry
@criticalLabel.text = tr("Retry")
else
@criticalLabel.text = tr("Ignore")
end
end
StandardButton information ( QWidget * parent, const QString & title, const QString & text,
StandardButtons buttons = Ok, StandardButton defaultButton = NoButton )
‫لعرض رسالة معلومات‬
def informationMessage()

32. Qt::MessageBox::information(self, tr("Qt::MessageBox.showInformation()"), @message)
@informationLabel.text = tr("Closed with OK or Esc")
end
StandardButton question ( QWidget * parent, const QString & title, const QString & text,
StandardButtons buttons = Ok, StandardButton defaultButton = NoButton )
‫لعرض سؤال‬
def questionMessage()
reply = Qt::MessageBox.question(self, tr("Qt::MessageBox.showQuestion()"),
@message,
Qt::MessageBox::Yes,
Qt::MessageBox::No,
Qt::MessageBox::Cancel)
if reply == Qt::MessageBox::Yes
@questionLabel.text = tr("Yes")
elsif reply == Qt::MessageBox::No
@questionLabel.text = tr("No")
else
@questionLabel.text = tr("Cancel")
end
end
StandardButton warning ( QWidget * parent, const QString & title, const QString & text,
StandardButtons buttons = Ok, StandardButton defaultButton = NoButton )
‫لعرض تحذير‬
def warningMessage()
reply = Qt::MessageBox.warning(self, tr("Qt::MessageBox.showWarning()"),
@message,
tr("Save &Again"),
tr("&Continue"))
if reply == 0
@warningLabel.text = tr("Save Again")
else
@warningLabel.text = tr("Continue")
end
end
Tab

33. general, permissions, applications ‫ بإسم‬tabs 3 ‫هنا فى الصورة السابقة عندنا‬
‫ كل واحد فى ويدجت معين وتقدر تحدد هتعرض مين‬layout 3 ‫الفكرة العامة ان يبقة عندك‬
‫ من السابقين‬tab ‫هتنشئ 3 كلسات كل واحد فيهم بيعبر عن‬
class GeneralTab < Qt::Widget
#Code omitted
end
class PermissionsTab < Qt::Widget
#Code omitted..
end
class ApplicationsTab < Qt::Widget
#Code omitted..
end
...‫ هو الديفولت‬general tab ‫3 دول وفيه ال‬tabs ‫اوكى نبدأ بالتصميم للديالوج بتاعنا اللى فيه ال‬
class TabDialog < Qt::Dialog
def initialize(fileName, parent = nil)
super(parent)
fileInfo = Qt::FileInfo.new(fileName)
@tabWidget = Qt::TabWidget.new
@tabWidget.addTab(GeneralTab.new(fileInfo), tr("General"))
@tabWidget.addTab(PermissionsTab.new(fileInfo), tr("Permissions"))

34. @tabWidget.addTab(ApplicationsTab.new(fileInfo), tr("Applications"))
okButton = Qt::PushButton.new(tr("OK"))
cancelButton = Qt::PushButton.new(tr("Cancel"))
connect(okButton, SIGNAL('clicked()'), self, SLOT('accept()'))
connect(cancelButton, SIGNAL('clicked()'), self, SLOT('reject()'))
buttonLayout = Qt::HBoxLayout.new do |b|
b.addStretch(1)
b.addWidget(okButton)
b.addWidget(cancelButton)
end
self.layout = Qt::VBoxLayout.new do |m|
m.addWidget(@tabWidget)
m.addLayout(buttonLayout)
end
self.windowTitle = tr("Tab Dialog")
end
end
..‫ دا متغير عشان نباصيه لكل كلس السابقين عشان يكون ليه دور ولو بسيط حتى‬fileinfo ‫ال‬
addTab ‫ بإستخدام‬tabs ‫ وضيف ال‬TabWidget.new ‫ بإستخدام‬tab widget ‫انشئ‬
@tabWidget = Qt::TabWidget.new
@tabWidget.addTab(GeneralTab.new(fileInfo), tr("General"))
@tabWidget.addTab(PermissionsTab.new(fileInfo), tr("Permissions"))
@tabWidget.addTab(ApplicationsTab.new(fileInfo), tr("Applications"))
.. General ‫لحظ ان هنا هيبقة الديفولت هو ال‬
‫ لنهم مرصوصين افقى‬hboxlayout ‫ بإستخدام‬OK, CANCEL ‫ ال‬buttons ‫اخيرا نضيف ال‬
buttonLayout = Qt::HBoxLayout.new do |b|
b.addStretch(1)
b.addWidget(okButton)
b.addWidget(cancelButton)
end
buttons layout ‫ وال‬tab widget ‫ وضيف فيه ال‬VboxLayout ‫انشئ‬
self.layout = Qt::VBoxLayout.new do |m|
m.addWidget(@tabWidget)
m.addLayout(buttonLayout)
end

35. General Tab ‫تصميم ال‬
File Name ­> Label
fileNameEdit­> LineEdit
pathLabel­> Label
pathValueLabel ­> Label
sizeLabel­> Label
sizeValueLabel­>Label
lastReadLabel­>Label
lastReadValueLabel­>Label
lastModLabel­>Label
lastModValueLabel­>Label
VBox Layout ‫وتم رصهم رأسيا بإستخدام‬
class GeneralTab < Qt::Widget
def initialize(fileInfo, parent = nil)
super(parent)
fileNameLabel = Qt::Label.new(tr("File Name:"))
fileNameEdit = Qt::LineEdit.new(fileInfo.fileName())
pathLabel = Qt::Label.new(tr("Path:"))
pathValueLabel = Qt::Label.new(fileInfo.absoluteFilePath())
pathValueLabel.frameStyle = Qt::Frame::Panel | Qt::Frame::Sunken
sizeLabel = Qt::Label.new(tr("Size:"))
size = fileInfo.size()/1024
sizeValueLabel = Qt::Label.new("%d K" % size)
sizeValueLabel.frameStyle = Qt::Frame::Panel | Qt::Frame::Sunken
lastReadLabel = Qt::Label.new(tr("Last Read:"))
lastReadValueLabel = Qt::Label.new(fileInfo.lastRead().toString())

36. lastReadValueLabel.frameStyle = Qt::Frame::Panel | Qt::Frame::Sunken
lastModLabel = Qt::Label.new(tr("Last Modified:"))
lastModValueLabel = Qt::Label.new(fileInfo.lastModified().toString())
lastModValueLabel.frameStyle = Qt::Frame::Panel | Qt::Frame::Sunken
self.layout = Qt::VBoxLayout.new do |m|
m.addWidget(fileNameLabel)
m.addWidget(fileNameEdit)
m.addWidget(pathLabel)
m.addWidget(pathValueLabel)
m.addWidget(sizeLabel)
m.addWidget(sizeValueLabel)
m.addWidget(lastReadLabel)
m.addWidget(lastReadValueLabel)
m.addWidget(lastModLabel)
m.addWidget(lastModValueLabel)
m.addStretch(1)
end
end
end
Permissions Tab ‫تصميم ال‬
‫ مرصوصين رأسيا‬ownership ‫ و‬permissions ‫ بإسم‬groupbox 2 ‫فى‬
‫ مرصوصين رأسيا‬check boxes 3 ‫ بتشمل‬permissions ‫ال‬
‫ ليها ومرصوصين رأسيا‬LineEdit ‫ ول‬label group ‫ و‬LineEdit ‫ و‬label owner ‫ بتشمل‬ownership ‫ال‬
class PermissionsTab < Qt::Widget
def initialize(fileInfo, parent = nil)
super(parent)
permissionsGroup = Qt::GroupBox.new(tr("Permissions"))

37. readable = Qt::CheckBox.new(tr("Readable"))
if fileInfo.readable?
readable.checked = true
end
writable = Qt::CheckBox.new(tr("Writable"))
if fileInfo.writable?
writable.checked = true
end
executable = Qt::CheckBox.new(tr("Executable"))
if fileInfo.executable?
executable.checked = true
end
ownerGroup = Qt::GroupBox.new(tr("Ownership"))
ownerLabel = Qt::Label.new(tr("Owner"))
ownerValueLabel = Qt::Label.new(fileInfo.owner())
ownerValueLabel.frameStyle = Qt::Frame::Panel | Qt::Frame::Sunken
groupLabel = Qt::Label.new(tr("Group"))
groupValueLabel = Qt::Label.new(fileInfo.group())
groupValueLabel.frameStyle = Qt::Frame::Panel | Qt::Frame::Sunken
permissionsGroup.layout = Qt::VBoxLayout.new do |p|
p.addWidget(readable)
p.addWidget(writable)
p.addWidget(executable)
end
ownerGroup.layout = Qt::VBoxLayout.new do |o|
o.addWidget(ownerLabel)
o.addWidget(ownerValueLabel)
o.addWidget(groupLabel)
o.addWidget(groupValueLabel)
end
self.layout = Qt::VBoxLayout.new do |m|
m.addWidget(permissionsGroup)
m.addWidget(ownerGroup)
m.addStretch(1)
end
end
end

38. Applications Tab ‫تصميم ال‬
topLabel­> Label, text (Open with)
applicationsListBox ­> ListWidget, 30 Applications
alwaysCheckBox ­>CheckBox
VBoxLayout ‫ومرصوصين رأسيا بإستخدام‬
class ApplicationsTab < Qt::Widget
def initialize(fileInfo, parent = nil)
super(parent)
topLabel = Qt::Label.new(tr("Open with:"))
applicationsListBox = Qt::ListWidget.new
applications = []
(1..30).each do |i|
applications.push tr("Application %d" % i)
end
applicationsListBox.insertItems(0, applications)
if fileInfo.suffix.nil?
alwaysCheckBox = Qt::CheckBox.new(tr("Always use this application to " +
"open this type of file"))
else
alwaysCheckBox = Qt::CheckBox.new(tr("Always use this application to " +
"open files with the extension '%s'" % fileInfo.suffix()))
end
self.layout = Qt::VBoxLayout.new do |l|
l.addWidget(topLabel)
l.addWidget(applicationsListBox)
l.addWidget(alwaysCheckBox)
end

39. ‫‪ end‬‬
‫‪end‬‬
‫لحظ ان كل ال ‪ Tabs‬اخدت ‪ fileInfo‬فى المشيد الخاص بيها )راجع اول فقرة(‬
‫‪ConfigDialog‬‬
‫الخطوة القادمة تصميم ديالوج مشابه لدا‬
‫الفكرة كلها اننا عندنا جزئين جزء فيه ‪ List‬كل عناصرها على صورة ‪ Icons‬والجزء التانى فيه‬
‫‪ StackedWidget‬ودا مشابه لل ‪ Tab‬ولكن غير ظاهر وبيشمل ويدجتس ايضا الفكرة هنا اننا هنربط التغيير‬
‫فى العنصر المختار من ال ‪ List‬بنفس الترتيب على ال ‪ StackedWidget‬ليتم اظهاره‬
‫تمام الول هننشئ الصفحات دى‬
‫تصميم ال ‪config page‬‬
‫تصميمها بسيط مجرد ‪ groupbox‬فيها ‪ label‬و ‪ combobox‬فيها عدة عناصر وهما مرصوصين افقيا وال‬

40. ‫ مرصوص بصورة رأسية‬group box
class ConfigurationPage < Qt::Widget
def initialize(parent = nil)
super(parent)
configGroup = Qt::GroupBox.new(tr("Server configuration"))
serverLabel = Qt::Label.new(tr("Server:"))
serverCombo = Qt::ComboBox.new do |c|
c.addItem(tr("Trolltech (Australia)"))
c.addItem(tr("Trolltech (Norway)"))
c.addItem(tr("Trolltech (People's Republic of China)"))
c.addItem(tr("Trolltech (USA)"))
end
serverLayout = Qt::HBoxLayout.new do |s|
s.addWidget(serverLabel)
s.addWidget(serverCombo)
end
configGroup.layout = Qt::VBoxLayout.new do |c|
c.addLayout(serverLayout)
end
self.layout = Qt::VBoxLayout.new do |m|
m.addWidget(configGroup)
m.addStretch(1)
end
end
end
..object ‫ الموجودة بال‬addItem ‫ استخدم‬comboBox ‫لضافة عنصر إلى‬
update page ‫تصميم ال‬

41. button ‫ مرصوصة رأسيا مع‬groupbox ‫تصميمها مباشر جدا‬
(‫ فى المثال‬gridlayout ‫ )هنشرح ال‬grid ‫ العناصر مرصوصة فى‬groupbox ‫وداخل ال‬
class UpdatePage < Qt::Widget
def initialize(parent = nil)
super(parent)
packagesGroup = Qt::GroupBox.new(tr("Look for packages"))
nameLabel = Qt::Label.new(tr("Name:"))
nameEdit = Qt::LineEdit.new
dateLabel = Qt::Label.new(tr("Released after:"))
dateEdit = Qt::DateTimeEdit.new(Qt::Date.currentDate())
releasesCheckBox = Qt::CheckBox.new(tr("Releases"))
upgradesCheckBox = Qt::CheckBox.new(tr("Upgrades"))
hitsSpinBox = Qt::SpinBox.new do |h|
h.prefix = tr("Return up to ")
h.suffix = tr(" results")
h.specialValueText = tr("Return only the first result")
h.minimum = 1
h.maximum = 100
h.singleStep = 10
end
startQueryButton = Qt::PushButton.new(tr("Start query"))
packagesGroup.layout = Qt::GridLayout.new do |p|
p.addWidget(nameLabel, 0, 0)
p.addWidget(nameEdit, 0, 1)

42. p.addWidget(dateLabel, 1, 0)
p.addWidget(dateEdit, 1, 1)
p.addWidget(releasesCheckBox, 2, 0)
p.addWidget(upgradesCheckBox, 3, 0)
p.addWidget(hitsSpinBox, 4, 0, 1, 2)
end
self.layout = Qt::VBoxLayout.new do |m|
m.addWidget(packagesGroup)
m.addSpacing(12)
m.addWidget(startQueryButton)
m.addStretch(1)
end
end
end
GroupBox class ‫ وحددنا ال تكست الظاهر عليها بإستخدام المشيد لل‬groupbox ‫1- انشأنا ال‬
packagesGroup = Qt::GroupBox.new(tr("Look for packages"))
Name LineEdit ‫ وال‬Name Label ‫2- انشأنا ال‬
nameLabel = Qt::Label.new(tr("Name:"))
nameEdit = Qt::LineEdit.new
DataTime Edit ‫ و ال‬Date label ‫3- انشأنا ال‬
dateLabel = Qt::Label.new(tr("Released after:"))
dateEdit = Qt::DateTimeEdit.new(Qt::Date.currentDate())
‫ وبتباصى التكست الظاهر جمب الصندوق فى‬CheckBox class ‫ بإستخدام ال‬Check Boxes ‫4- انشأنا ال‬
‫المشيد ليه‬
releasesCheckBox = Qt::CheckBox.new(tr("Releases"))
upgradesCheckBox = Qt::CheckBox.new(tr("Upgrades"))
SpinBox ‫5- انشأنا ال‬
hitsSpinBox = Qt::SpinBox.new do |h|
h.prefix = tr("Return up to ")
h.suffix = tr(" results")
h.specialValueText = tr("Return only the first result")
h.minimum = 1
h.maximum = 100
h.singleStep = 10
end
‫ هو ماقبل القيمة الظاهرة‬prefix ‫ال‬
‫ هو مابعد القيمة الظاهرة‬suffix ‫ال‬
‫ تقدر تظهره عن اصغر قيمة مقبولة‬string ‫ هو‬specialValueText ‫ال‬
‫ اصغر قيمة مقبولة‬minimum ‫ال‬
‫ اكبر قيمة مقبولة‬maximum ‫ال‬

43. ‫ مقدار الزيادة عند كل ضغطة‬singleStep ‫ال‬
GridLayout ‫نيجى لجزئية ال‬
packagesGroup.layout = Qt::GridLayout.new do |p|
p.addWidget(nameLabel, 0, 0)
p.addWidget(nameEdit, 0, 1)
p.addWidget(dateLabel, 1, 0)
p.addWidget(dateEdit, 1, 1)
p.addWidget(releasesCheckBox, 2, 0)
p.addWidget(upgradesCheckBox, 3, 0)
p.addWidget(hitsSpinBox, 4, 0, 1, 2)
end
‫ بيسمحلك تضيف الويدجتس‬GridLayout ‫ وال‬packagesGroup ‫ داخل ال‬GridLayout ‫هنا بنقول ان فى‬
0 ‫ حاجة مشابهه لجدول وكل مافيها خليا بيبدأ من اعلى اليسار ودى بتبقة الخلية فى الصف‬grid ‫فى‬
0 ‫والعمود‬
‫مثل هنا دا عبارة عن 3 صفوف و 5 اعمدة‬
(overloaded ‫ )هتلقيها‬addWidget ‫ استخدم‬grid ‫للضافة داخل‬
addWidget(widget, row, col)
addWidget(row, col, rospan, col, colspan)
‫حيث‬
‫: رقم الصف‬row
‫: رقم العمود‬col
row span ‫: ال‬rowspan
colspan ‫: ال‬colspan

44. query page ‫تصميم ال‬
‫ مرصوصين رأسيا‬button ‫ و‬groupbox 2 ‫هى عبارة عن‬
‫ مرصوصين رأسيا داخلها‬check boxes 3 ‫ تشمل‬groupbox ‫اول‬
ListWidget ‫الثانية بتشمل‬
class QueryPage < Qt::Widget
def initialize(parent = nil)
super(parent)
updateGroup = Qt::GroupBox.new(tr("Package selection"))
systemCheckBox = Qt::CheckBox.new(tr("Update system"))
appsCheckBox = Qt::CheckBox.new(tr("Update applications"))
docsCheckBox = Qt::CheckBox.new(tr("Update documentation"))
packageGroup = Qt::GroupBox.new(tr("Existing packages"))
packageList = Qt::ListWidget.new
qtItem = Qt::ListWidgetItem.new(packageList)
qtItem.text = tr("Qt")
qsaItem = Qt::ListWidgetItem.new(packageList)
qsaItem.text = tr("QSA")
teamBuilderItem = Qt::ListWidgetItem.new(packageList)
teamBuilderItem.text = tr("Teambuilder")
startUpdateButton = Qt::PushButton.new(tr("Start update"))
updateGroup.layout = Qt::VBoxLayout.new do |u|
u.addWidget(systemCheckBox)
u.addWidget(appsCheckBox)
u.addWidget(docsCheckBox)
end

45.
packageGroup.layout = Qt::VBoxLayout.new do |p|
p.addWidget(packageList)
end
self.layout = Qt::VBoxLayout.new do |m|
m.addWidget(updateGroup)
m.addWidget(packageGroup)
m.addSpacing(12)
m.addWidget(startUpdateButton)
m.addStretch(1)
end
end
end
List ‫لحظ لضافة عنصر جديد لل‬
packageList = Qt::ListWidget.new
qtItem = Qt::ListWidgetItem.new(packageList)
qtItem.text = tr("Qt")
qsaItem = Qt::ListWidgetItem.new(packageList)
qsaItem.text = tr("QSA")
teamBuilderItem = Qt::ListWidgetItem.new(packageList)
teamBuilderItem.text = tr("Teambuilder")
packagesList ‫ بإسم‬ListWidget ‫هنا انشأنا ال‬
‫ اللى هيكون‬listWidget object ‫ ونباصى للمشيد ال‬ListWidgetItem ‫ولنشاء عنصر داخلها بنستخدم‬
=text ‫جواها.. وبعد كدا قم بتحديد التكست الظاهر من خلل ال‬
pages.rb
lass ConfigurationPage < Qt::Widget
def initialize(parent = nil)
super(parent)
configGroup = Qt::GroupBox.new(tr("Server configuration"))
serverLabel = Qt::Label.new(tr("Server:"))
serverCombo = Qt::ComboBox.new do |c|
c.addItem(tr("Trolltech (Australia)"))
c.addItem(tr("Trolltech (Norway)"))
c.addItem(tr("Trolltech (People's Republic of China)"))
c.addItem(tr("Trolltech (USA)"))
end
serverLayout = Qt::HBoxLayout.new do |s|

46. s.addWidget(serverLabel)
s.addWidget(serverCombo)
end
configGroup.layout = Qt::VBoxLayout.new do |c|
c.addLayout(serverLayout)
end
self.layout = Qt::VBoxLayout.new do |m|
m.addWidget(configGroup)
m.addStretch(1)
end
end
end
class QueryPage < Qt::Widget
def initialize(parent = nil)
super(parent)
updateGroup = Qt::GroupBox.new(tr("Package selection"))
systemCheckBox = Qt::CheckBox.new(tr("Update system"))
appsCheckBox = Qt::CheckBox.new(tr("Update applications"))
docsCheckBox = Qt::CheckBox.new(tr("Update documentation"))
packageGroup = Qt::GroupBox.new(tr("Existing packages"))
packageList = Qt::ListWidget.new
qtItem = Qt::ListWidgetItem.new(packageList)
qtItem.text = tr("Qt")
qsaItem = Qt::ListWidgetItem.new(packageList)
qsaItem.text = tr("QSA")
teamBuilderItem = Qt::ListWidgetItem.new(packageList)
teamBuilderItem.text = tr("Teambuilder")
startUpdateButton = Qt::PushButton.new(tr("Start update"))
updateGroup.layout = Qt::VBoxLayout.new do |u|
u.addWidget(systemCheckBox)
u.addWidget(appsCheckBox)
u.addWidget(docsCheckBox)
end
packageGroup.layout = Qt::VBoxLayout.new do |p|
p.addWidget(packageList)
end

47. self.layout = Qt::VBoxLayout.new do |m|
m.addWidget(updateGroup)
m.addWidget(packageGroup)
m.addSpacing(12)
m.addWidget(startUpdateButton)
m.addStretch(1)
end
end
end
class UpdatePage < Qt::Widget
def initialize(parent = nil)
super(parent)
packagesGroup = Qt::GroupBox.new(tr("Look for packages"))
nameLabel = Qt::Label.new(tr("Name:"))
nameEdit = Qt::LineEdit.new
dateLabel = Qt::Label.new(tr("Released after:"))
dateEdit = Qt::DateTimeEdit.new(Qt::Date.currentDate())
releasesCheckBox = Qt::CheckBox.new(tr("Releases"))
upgradesCheckBox = Qt::CheckBox.new(tr("Upgrades"))
hitsSpinBox = Qt::SpinBox.new do |h|
h.prefix = tr("Return up to ")
h.suffix = tr(" results")
h.specialValueText = tr("Return only the first result")
h.minimum = 1
h.maximum = 100
h.singleStep = 10
end
startQueryButton = Qt::PushButton.new(tr("Start query"))
packagesGroup.layout = Qt::GridLayout.new do |p|
p.addWidget(nameLabel, 0, 0)
p.addWidget(nameEdit, 0, 1)
p.addWidget(dateLabel, 1, 0)
p.addWidget(dateEdit, 1, 1)
p.addWidget(releasesCheckBox, 2, 0)
p.addWidget(upgradesCheckBox, 3, 0)
p.addWidget(hitsSpinBox, 4, 0, 1, 0)
end

48. self.layout = Qt::VBoxLayout.new do |m|
m.addWidget(packagesGroup)
m.addSpacing(12)
m.addWidget(startQueryButton)
m.addStretch(1)
end
end
end
‫ بقة‬Config Dialog ‫نيجى لل‬
configdialog
require 'pages.rb'
class ConfigDialog < Qt::Dialog
slots 'changePage(QListWidgetItem*, QListWidgetItem*)'
def initialize()
super
@contentsWidget = Qt::ListWidget.new do |c|
c.viewMode = Qt::ListView::IconMode
c.iconSize = Qt::Size.new(96, 84)
c.movement = Qt::ListView::Static
c.maximumWidth = 128
c.spacing = 12
end
@pagesWidget = Qt::StackedWidget.new do |p|
p.addWidget(ConfigurationPage.new)
p.addWidget(UpdatePage.new)
p.addWidget(QueryPage.new)
end
closeButton = Qt::PushButton.new(tr("Close"))
createIcons()
@contentsWidget.currentRow = 0
connect(closeButton, SIGNAL('clicked()'), self, SLOT('close()'))
horizontalLayout = Qt::HBoxLayout.new do |h|
h.addWidget(@contentsWidget)
h.addWidget(@pagesWidget, 1)
end

49. buttonsLayout = Qt::HBoxLayout.new do |b|
b.addStretch(1)
b.addWidget(closeButton)
end
self.layout = Qt::VBoxLayout.new do |m|
m.addLayout(horizontalLayout)
m.addStretch(1)
m.addSpacing(12)
m.addLayout(buttonsLayout)
end
self.windowTitle = tr("Config Dialog")
end
def createIcons
configButton = Qt::ListWidgetItem.new(@contentsWidget) do |c|
c.icon = Qt::Icon.new("images/config.png")
c.text = tr("Configuration")
c.textAlignment = Qt::AlignHCenter
c.flags = Qt::ItemIsSelectable | Qt::ItemIsEnabled
end
updateButton = Qt::ListWidgetItem.new(@contentsWidget) do |u|
u.icon = Qt::Icon.new("images/update.png")
u.text = tr("Update")
u.textAlignment = Qt::AlignHCenter
u.flags = Qt::ItemIsSelectable | Qt::ItemIsEnabled
end
queryButton = Qt::ListWidgetItem.new(@contentsWidget) do |q|
q.icon = Qt::Icon.new("images/query.png")
q.text = tr("Query")
q.textAlignment = Qt::AlignHCenter
q.flags = Qt::ItemIsSelectable | Qt::ItemIsEnabled
end
connect(@contentsWidget,
SIGNAL('currentItemChanged(QListWidgetItem*, QListWidgetItem*)'),
self, SLOT('changePage(QListWidgetItem*, QListWidgetItem*)'))
end
def changePage(current, previous)
if current.nil?
current = previous
end

50. @pagesWidget.currentIndex = @contentsWidget.row(current)
end
end
‫تمام الموضوع بسيط هنعلق على اجزاء منه فقط‬
(List ‫ )ال‬Content Widget ‫1- انشاء ال‬
@contentsWidget = Qt::ListWidget.new do |c|
c.viewMode = Qt::ListView::IconMode
c.iconSize = Qt::Size.new(96, 84)
c.movement = Qt::ListView::Static
c.maximumWidth = 128
c.spacing = 12
end
‫ ليتم عرض ايكونز وحددنا حجم‬IconMode ‫ هيكون‬viewMode ‫حددنا فيها عدة خصائص اهمها ان ال‬
iconSize ‫اليكون بإستخدام‬
‫ بتاعنا اللى تحدثنا عنه من قبل‬StackedWidget object ‫2- عملنا ال‬
@pagesWidget = Qt::StackedWidget.new do |p|
p.addWidget(ConfigurationPage.new)
p.addWidget(UpdatePage.new)
p.addWidget(QueryPage.new)
end
!‫( اللى كتبناها قبل كدا‬widgets (pages ‫وضفناله كل ال‬
‫ الخاص بأرقام‬ListWidget ‫ )هى ميثود مسئولة عن مل ال‬createIcons ‫ واستدعاء‬button ‫3- انشاء ال‬
(‫الصفحات‬
closeButton = Qt::PushButton.new(tr("Close"))
createIcons()
‫ لول عنصر‬contentsWidget ‫4- تحديد المكان الحالى فى ال‬
@contentsWidget.currentRow = 0
slot clos ‫ بال‬closeButton ‫ الخاصة بال‬clicked signal ‫ربط ال‬
connect(closeButton, SIGNAL('clicked()'), self, SLOT('close()'))
createIcons ‫ عادى جدا ولكن عايزين نطلع على‬Layouts ‫5- إضافة ال‬
def createIcons
configButton = Qt::ListWidgetItem.new(@contentsWidget) do |c|
c.icon = Qt::Icon.new("images/config.png")
c.text = tr("Configuration")
c.textAlignment = Qt::AlignHCenter
c.flags = Qt::ItemIsSelectable | Qt::ItemIsEnabled
end

51. #code omitted...
end
ListWidgetItem ‫ للمشيد الخاص ب‬List ‫ زى ماتعلمنا بإننا نباصي ال‬List ‫ فى الل‬Item ‫1-بننشئ‬
Icon object ‫ المستخدمة بإننا نباصي‬icon ‫2- نحدد ال‬
=text. ‫ بإستخدام‬icon ‫ الظاهر مع ال‬text ‫3-نحدد ال‬
=textAlignment ‫4- نحدد المحاذاةبإستخدام‬
=flags ‫ بالقابلية للختيار والتاحة للمستخدم بإستخدام‬flags ‫5- نحدد ال‬
....‫وهكذا مع باقى العناصر‬
‫اخيرا ننفذ الفكرة اللى قلناها فى بداية المثال‬
connect(@contentsWidget,
SIGNAL('currentItemChanged(QListWidgetItem*, QListWidgetItem*)'),
self, SLOT('changePage(QListWidgetItem*, QlistWidgetItem*)'))
‫ احنا‬SLOT ‫ ب‬currentItemChanged ‫ الخاصة بتغير الختيار‬contentsWidget ‫ القادمة من‬signal ‫نربط ال‬
changePage ‫هنعرفها بإسم‬
def changePage(current, previous)
if current.nil?
current = previous
end
@pagesWidget.currentIndex = @contentsWidget.row(current)
end
(: ‫وبس كدا‬
Simple SDI Application

52. statusbar ‫ و‬text Edit ‫ بسيط فيه منيو وتولبار و‬Text Editor ‫هننشئ‬
application ‫ اللى هيدعمها ال‬slots ‫اول ال‬
slots 'newFile()',
'open()',
'save()',
'saveAs()',
'about()',
'documentWasModified()'
‫ هتتنفذ عند محاولة انشاء ملف فارغ‬newFile
‫ عند محاولة فتح ملف‬open
‫ عند الحفظ‬save, save as
‫ عن البرنامج‬about ‫ عند محاولة عرض‬about
‫ عند حدوث اى تعديل‬documentWasModified
attr_reader :curFile
@@sequenceNumber = 0
‫ الحالى‬file ‫: بيعبر عن ال‬curFile
‫ بيعبر عن رقم تلقائى ياخده الملف الجديد‬class variable ‫: عبارة عن‬sequenceNumber@@
def initialize(fileName = "")
super()
init()
if fileName.empty?
setCurrentFile("")
else
loadFile(fileName)
end
end
‫ بتجهز البلكيشن‬init
def init()
setAttribute(Qt::WA_DeleteOnClose)
@isUntitled = true
@textEdit = Qt::TextEdit.new
setCentralWidget(@textEdit)
createActions()
createMenus()
createToolBars()
createStatusBar()
readSettings()
connect(@textEdit.document(), SIGNAL('contentsChanged()'),
self, SLOT('documentWasModified()'))