تعليم البرمجة الرسومية في wxPython

• مقالة من تأليف Jan Bodnar
• المصدر http://zetcode.com/wxpython/
• ترجمة : حالياً بدري دركوش (Free_Programmer)
• قيد الإنشاء

هذا مدخل إلى wxPython وهو يعد من أكبر الشروحات المتوفرة على الإنترنت وأكثرها تقدما. وهو يناسب المبتدئين والمتوسطين.

قد ترغب في إلقاء نظرة على المقالات

• تعلم بايثون
• تعليم البرمجة الرسومية في PyQt4

التطبيق هو برنامج للكمبيوتر يقوم بمهمة معينة أو مجموعة من المهام . كمثال على التطبيق هو متصفح الويب و مشغل الوسائط و معالج النصوص . إن مصطلح أداة أو البرمجية خدمية يستخدم مع التطبيق الصغير أو البسيط و الذي يقوم بمهمة واحدة . ان برنامج cp في بيئة يونكس هو مثال على مثل هذه الأداة. كل هذه الأشياء تشكل ما يسمى برمجيات الحاسوب . أن مصطلح برمجيات الكمبيوتر هو الاسم الشائع لوصف نظام التشغيل و البيانات و برامج الكمبيوتر و التطبيقات و ملفات mp3 و ألعاب الكمبيوتر. إن التطبيقات ممكن أن تنشئ لأربع مجالات مختلفة.

أن برنامج تسوق على الإنترنت و الويكي و المدونات هي مثال على تطبيقات ويب شائعة . حيث يتم الوصول إليها عن طريق متصفح الويب. الأمثلة عن تطبيقات سطح المكتب تتضمن مثلاً Maya و Opera و المكتب المفتوح و Winamp. إن حوسبة المشاريع هي مجال محدد . حيث تكون التطبيقات في هذا المجال معقدة و كبيرة . أما التطبيقات التي كتبت للأجهزة المحمولة تتضمن كل البرامج التي طُورت من أجل أجهزة الجوال و أجهزة الاتصالات و أجهزة (PDA) و ما يشبهه.

لغات البرمجة

هنالك حالياً العديد من لغات البرمجة المنتشرة , إن القائمة التالية تعتمد على TIOBE جدول مجتمع المبرمجين . هذه الأرقام تعود إلى شهر مايو 2007 .

إن لغة البرمجة جافا هي لغة البرمجة الأكثر أستخداماً , ما يميز لغة البرمجة جافا انه بإمكانك كتابة تطبيقات للأجهزة المحمولة و برمجة العديد من التجهيزات و إنشاء تطبيقات المشاريع. ما يأتي في رابعاً هو كل تطبيق بُرمج باستخدام C/C++ , فهي تعتبر الاختيار الافتراضي لإنشاء أنظمة التشغيل و العديد من تطبيقات سطح المكتب , ان لغتي C/C++ هي أكثر لغات البرمجة استخداماً على مستوى النظام . أغلب تطبيقات سطح المكتب تم إنشائها باستخدام لغة سي بلس بلس . قد تكون مايكروسوفت أوفيس أو مايكروميديا فلاش أو أدوبي فوتوشوب أو ثري دي ماكس. بالإضافة إلى ذلك تسيطر هاتين اللغتين على مجال برمجة الألعاب .

على مستوى آخر , تسيطر لفة PHP على الويب , بينما تستخدم الجافا في المؤسسات الكبيرة فإن لغة PHP تستخد في الشركات الصغيرة و الأشخاص , تستخدم PHP لإنشاء تطبيقات ويب ديناميكية , فيجوال بيسك تستخدم بشكل أساسي في كـ RAD و التي تعني تطوير السريع للتطبيقات .

الآن , إن كلاً من بيرل و بايثون و روبي عي لغات سكربت , و لديها العديد من السمات المشتركة , فهي متنافسون متقاربون.

أما وقت لغو السي شارب لم يأتي بعد فقد كان من المخطط أن تكون لغة الضخمة التالية , أما الجافا السكريبت فهي لغة برمجة من جهة العميل و التي تعمل من خلال المنصفح , و تعتبر لغة واقعية ومسيطرة و ليس لديها أي منافس في مجالها.

إن لغة البرمجة بايثون لغة كتابة سكربتات ناجحة , تم تطويرها بداياً من قبل Guido van Rossum , تم اصدارها أول مرة سنة 1991 , لقد استوحيت البايثون من لغة البرمجة ABC و لغة هاسكل . و تعتبر لغة بايثون لغة عالية المستوى و عامة الاستخدام و متعددو المنصات و هي لغة مفسَرة . يفضل البعض أن يسميها لغة ديناميكية . و هي سهلة التعلم . بايثون تعتبر لغة بسيطة , أحدى مزاياها الأكثر وضوحا هي عدم استخدام الفاصلة المنقوطة أو الأقواس . تستخدم البايثون الفراغات في أول السطر (التثليم) عوضاً عن ذلك,أحدث نسخة من البايثون 2.5 و التي أطلقت في سبتمبر 2006 , اليوم لغة البايثون تطور من قبل مجموعة كبيرة من المتطوعين من جميع أنحاء العالم .

من أجل أنشاء واجهة رسومية للمستخدم يستطيع المبرمجون بلغة بايثون الاخنيار بيت ثلاثة خيارات جيدة . هي PyGTK و wxPython و PyQt . أما الأداة الأساسيو مع أدوات بايثون فهي TkInter. لكنها بطيئة و سيئة المظهر على كل المنصات و لم يتم تحديثها منذ عصور . و هي تعتمد أيضاً على Tcl (أي أن لغة tcl يجب أن تكون مضمنة) , و هو أمر غريب , جميع الأدوات سابقة الذكر أفضل منها , و لا يزال سراً لماذا لم تلغى منذ سنوات سابقة .

تعرف الـ wxPython على انها مجموعة أدواة تطوير البرامج تعمل على أكثر من منصة من أجل تطبيقات ذات واجهة رسومية , باستخدام wxPython يستطيع المطورون إنشاء تطبيقات لويندوز و ماك و العديد من أنظمة يونكس . نعنبر wxPython كغلاف لما يسمى wxWidgets و هي مكتبة سي بلس بلس متعددة المنصات متطورة . تتكون wxPython من خمس وحدات أساسية .

وحدة المتحكمات (Controls) و التي توفر الودجات (widgets) الشائعة الإستخدام في واجهات البرامج . مثل الأزرار (Button) أو شريط الأدوات (Toolbar) أو نوتبوك (Notebook) . إن الودجات تسمى متحكمات في نظام ويندوز. أما وحدة النواة (Core) فتتكون من الأصناف الأولية التي تستخدم في التطوير . هذه الأصناف تتضمن صتف الأغراض (Object class) و الذي يعتبر الأب لكل الأصناف , سايزر (Sizers) و التي تستخدم من أجل تنسيق الودجات و الأحداث و الأصناف الهندسية الأساسية مثل النقطة و المستطيل. أما واجهة الأداة التصويرية (Graphics Device Interface) أو (GDI) فهي مجموعة من الأصناف تستخدم للرسم ضمن الودجات . هذه الوحدة تحوي أصنافاً من أجل التعديل على الخطوط أو الألوان أو الفراشي أو الصور . أما وحدة المتفرقات (Misc) فهي تحوي مختلف الأصناف الأُخرى و و توابع الوحدات . هذه الأصناف تستخدم من أجل التسجيل (logging) أو إعداد التطبيق أو إعدادات النظام أو العمل مع الشاشة أة أداة تحكم الألعاب . الآن وحدة نوافذ (Windows) تتضمن العديد من النوافذ و التي تكون التطبيق . مثل صندوق الحوار و النافذة المتحركة و الإطار ..الخ .

إن API الخاص بـ wxPython هي مجموعة من الوظائف (functions) و الودجات (widgets) . الودجات هي كتل البناء الأساسية للواجهة التطبيق .في بيئة ويندوز الودجات تسمى متحكمات , نستطيع تقريباً أن نقسم الميرمجين إلى مجموعتين اثنين .فهم يبرمجون التطبيقات أو المكتبات (libraries) , تقنياً تعتبر wxPython كغطاء أو غلاف حول API واجهة المستخدم الرسومية المكتوبة بلغة سي بلس بلس (C++ GUI API) و التي تسمى wxWidgets . لذلك فهي ليست API محلية . أي أنها ليست مكتوبة بشكل مباشر بلغة البايثون , أن مكتبة الواجهة الرسومية المحلية الوحيدة المكتوبة من أجل لغة مفسرة و أعلمه أنا هي مكتبة Swing للغة الجافا .

في wxPython لدينا العديد من الودجات (وادجيت) , و لكن يمكننا أن نصنفها إلى مجموعات منطقية :

الودجات الأساسية

توفر هذه الودجات العملانية للودجات المشتقة . و تسمى (ancestors) الأسلاف و هي لا تستخدم عادةً بشكل مباشر.

ودجات المستوى الأعلى

هذه الودجات تتواجد بشكل مستقل عن بعضها الآخر .

الحاويات Containers

أما الحاويات فوظيفتها أن تحوي أو تستوعب الودجات الأُخرى .

الودجات الديناميكية

هذه الودجات يمكن التعديل عليها من قبل المستخدمين النهائيين .

الودجات الثابتة

هذه الودجات تظهر المعلومات و لا يمكن التعديل عليها من قبل المستخدم.

الودجات الأُخرى

هذه الودجات تمثل شريط الحالة (statusbar) و شريط الأدوات (toolbar و شريط الأدوات (menubar) في التطبيق .

الوراثة Inheritance

هنالك علاقة معينة بين الودجات في wxPython , هذه العلاقة تتطور و تتوسع عن طريق الوراثة , إن الوراثة جزء هام جداً من البرمجة غرضية التوجه , إن الودجات تشكل هرمية و يمكن للودجات أن ترث عملانية أو وظائف من ودجات أُخرى . تسمى الأصناف القائمة بالأصناف الأساسية أو الأصناف الأباء أو الأسلاف . أما الودجات التي ترث فتسمى الودجات المشتقة أو الودجات الأبناء أو الأحفاد .إن المصطلحات مستعارة من علم الأحياء.

لنقل مثلاً أننا استخدمنا ودجة الزر (button) في تطبيقنا , أن الزر يرث من ثلاث أصناف أساسية . أقرب الأصناف هو صنف wx.Control . إن ودجة الزر نوع من النافذة الصغيرة , كل الودجات التي تظهر على الشاشة هي نوافذ , لذلك فهي ترث من صنف wx.Window . هتالك كائنات (opjects) خفية لا تظهر بشكل مباشر , مثل sizers و device context و local opject . هنالك أيضاً أيضاً أصتاف ظاهرة و لكنها ليست نوافذ مثل كائن اللون و كائن caret (مؤشر الكتابة) و كائن المؤشرة (cursor). ليس كل الودجات متحكمات , على سبيل المثال wx.Dialog ليست نوع من المتحكات , المتحكمات هي الودجات التي تتوضع فوق ودجات أُخرى تسمى الحاويات . لذلك لدينا صنف أساسي منفصل هو wx.Control.

كل النوافذ تستطيع أن نستجيب للأحداث , و كذلك تقوم ودجة الزر , عن طريق الضغط على الزر نقوم بتشغيل حدث wx.EVT_COMMAND_BUTTON_CLICKED . أن ودجة الزر ترث wx.EvtHandler عبر صنف wx.Window. كل ودجة تستجيب للأحداث يجب أن ترث من صنف wx.EvtHandler و في النهاية كل الكائنات و الأغراض ترث من صنف wx.Object و هو الأب لكل الأغراض في wxPython .

في هذا القسم سوف نريك كيف يتم تنصيب و إعداد مكتبة wxPython , إن العملية سهلة جداً مقدمة لك حسب نظام التشغيل المناسب.

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

هنالك خيارين أساسين هما :

• win32-unicode
• win32-ansi

عادة ما تكون نسخة اليونيكود هي الخير الأفضل حيث تدعم هذه النسخة اللغات غير الإنكليزية . يقوم برنامج التنصيب يإيجاد مفسر البايثون أتوماتيكياً , كل ما علينا فعله هو التأكد من أننا نوافق على الترخيص , هذا كل شيء !

هنالك أيضاً حزمة منفردة , و تسمى win32-docs-demos و التي تحوي عينات الأمثلة الشهيرة و التوثيق و الأمثلة . هذا موجه نحو المطورين . ملاحظة مفيدة بخصوص مفسر البايثون في ويندوز , إذا ضغطنا على ملف سكربت بايثون فستظهر نافذة سطر أوامر , هذا هو التصرف الإفتراضي و لكن يمكننا أن نغير ذلك عن طريق إسناد برامج البايثون إلى ملف python.exe .اضغط بزر المؤشرة اليمين على أيقونة البايثون , اختر خصائص (properties) اختر زر (change) , ثم اختر pythonw.exe و هو موجود في مسار تنصيب بايثون , على جهازي مثلاً هو C:\Program Files\Python25\pythonw.exe .

إن عملية التنصيب هنا حتى أسهل منها على ويندوز XP , أن أبونتو توزيعة لينوكس رائعة ,إن تنصيب wxPython سهل جدأ نقوم بالتنصيب باستخدام مدير الحزم ساينأبتك (Synaptic) , تجدها في القائمة System - Administration. نخنار حزمة wxPython و هي تسمى python-wxgtkx.x. يقوم مدير الحزم اتوماتيكياً بإختيار المتطلبات , نحدد الحزمة للتنصيب و نضغط على تطبيق أو Apply , سيقوم بتحميل مكتبة wxPython و تنصيبها على نظامك , الحزم في أبونتو حديثة تماماً , هنالك توزيعات لينوكس أُخرى قد تحوي حزماً أقدم , إن wxPython أداة تتطور بشدة , حتى نحصل على أحدث التحديثات قد نضطر إلى بناء wxPython من المصدر.

سنبدأ مع مثال بسيط جداً , إن سكربتنا الأول سوف يظهر نافذة صغيرة , لن تقوم بالمزيد. سنقوم بتحليل السكربن سطراً سطراً . و ها هو الكود :

#!/usr/bin/python
 
# simple.py
 
import wx
 
app = wx.App()
 
frame = wx.Frame(None, -1, 'simple.py')
frame.Show()
 
app.MainLoop()

#!/usr/bin/python
 
# simple.py

السطر الأول يستورد الوحدات wxPython الأساسية هو إشارة # يليه المسار إلى مفسر البايثون . السطر الثاني تعليق , و هو يحوي اسم السكربت .

import wx

هذا السطر يقوم بإستيراد وحدات wxPython الأساسية , أي الوحدات core و controls و gdi و misc و windows . تقنياً تعتبر wx كفضاء تسمية , لذلك كل الوظائف و الكائنات من الوحدات الأساسية ستبدأ بالبادئة .wx . السطر الثاني من الشفرة (ال.كود) سيقوم بإنشاء كائن التطبيق .

app = wx.App()

كل برنامج wxPython يجب أن يحوي كائن التطبيق واحد على الأقل.

frame = wx.Frame(None, -1, 'simple.py')
frame.Show()

هنا قمنا بإنشاء كائن wx.Frame , إن ودجة wx.Frame تعتبر ودجة حاوية مهمة لذلك سنقوم بالتحدث عن هذه الودجة بالتفصيل بعد قليل. إن ودجة wx.Frame هي الودجة الأب للودجات الأُخرى , و ليس لها أب , إذا لم نحدد أي متغير للأب فنحن نقول أنه ليس لهذه الودجة أب , فهي تعتبر ودجة عليع في هرمية الودجات . بعد أن ننشئ ودجة wx.Frame يجب أن نستدعي الوظيفة Show() حتى نظهرا على الشاشة .

app.MainLoop()

يقوم السطر الأخير بإدخالنا إلى الحلقة الأساسية (mainloop) , الحلقة الأساسية هي دورة لا نهائية , تقوم بإلتقاط و إرسال كل حدث يتواجد أثناء تشغيل تطبيقنا.

ذلك كان مثال بسيط جداً , بالرغم من هذه البساطة نستطيع القيام يالكثير بهذه النافذة , نستطيع تعديل أبعاد النافذة و ملئ النافذة و تصغير النافذة , هذه العملية العملانية (الوظيفة) تتطلب الكثير من الكود , لكن ذلك كله متوفر و مخبئ عن طريق أدوات wxPython , لا حاجة لإختراع العجلة من جديد .

نعتبر ودجة wx.Frame من هم الودجات في wxPython , فهي ودجة حاوية , وهذا يعني أنها تحوي ودجات أُخرى . في الحقيقة هي تستطيع أن تحوي أي نافذة ليست frame أو صندوق حوار (dialog ) . تتكون wx.Frame من شريط العنوان و الحدود و المنطقة الحاوية المركزية . إن شريط العنوان و الحدود تعتبر اختيارية و يمكن ازالتها عن طريق الخيارات المتعددة.

إن لودجة wx.Frame البنية التالية , كما نرى إن لها سبعة متغيرات , لا يوجد للمتغير الأول قيمة افتراضية بينما يوجد للستة الآخرين قيمة افتراضية, المتغريات الثلاث الأولى إلزامية بينما الأربعة الأخرى اختيارية.

  wx.Frame(wx.Window parent, int id=-1, string title='', wx.Point pos = wx.DefaultPosition, 
  wx.Size size = wx.DefaultSize, style = wx.DEFAULT_FRAME_STYLE, string name = "frame")

wx.DEFAULT_FRAME_STYLE is a set of default flags. wx.MINIMIZE_BOX | wx.MAXIMIZE_BOX | wx.RESIZE_BORDER | wx.SYSTEM_MENU | wx.CAPTION | wx.CLOSE_BOX | wx.CLIP_CHILDREN. عن طريق الجمع بين الأشكال المختلفة نستطيع الحصول أن نغير في شكل ودجة wx.Frame , في يلي مثال بسيط :

#!/usr/bin/python
 
# nominimizebox.py
 
import wx
 
app = wx.App()
window = wx.Frame(None, style=wx.MAXIMIZE_BOX | wx.RESIZE_BORDER 
	| wx.SYSTEM_MENU | wx.CAPTION |	 wx.CLOSE_BOX)
window.Show(True)
 
app.MainLoop()

في هذه المثال نريد أن نظهر النافذة بدون زر تكبير النافذة لذلك لم نقم بتحديد هذا المتغير ضمن متغيرات الشكل.

نستطيع ان نقوم بتحديد مساحة التطبيق بطريقتين 1- تحديد معامل المساحة فى المشيّد 2- استدعاء الطريقة SetSize

#!/usr/bin/python
 
# size.py
 
import wx
 
class Size(wx.Frame):
    def __init__(self, parent, id, title):
        wx.Frame.__init__(self, parent, id, title, size=(250, 200))
 
        self.Show(True)
 
 
app = wx.App()
Size(None, -1, 'Size')
app.MainLoop()

 wx.Frame.__init__(self, parent, id, title, size=(250, 200))

فى المشيد نحدد العرض الى 250بكسل والطول الى 200 بكسل

بطريقة مشابهة نستطيع ان نموضع التطبيق على الشاشة، افتراضيا توضع النافذة بأعلى يسار الشاشة ولكن يمكن ان يختلف هذا تبع للمنصة او مدير النوافذ. يستطيع المبرمج التحكم فى الموضوع برمجيا.. لقد رأينا المعامل pos سابقا فى المشيّد للودجت wx.Frameوعبر تقدييم قيم اخرى غير الأفتراضية نستطيع التحكم فى الموضع بأنفسنا.

يوجد العديد من الطرق لفعل هذا “القى قطعة نقود للإختيار:d”

#!/usr/bin/python
 
# move.py
 
import wx
 
class Move(wx.Frame):
    def __init__(self, parent, id, title):
        wx.Frame.__init__(self, parent, id, title)
 
        self.Move((800, 250))
        self.Show(True)
 
 
app = wx.App()
Move(None, -1, 'Move')
app.MainLoop()

There is one particular situation. We might want to display our window maximized. In this case, the window is positioned at (0, 0) and takes the whole screen. wxPython internally calculates the screen coordinates. To maximize our wx.Frame, we call the Maximize() method. If we want to center our application on the screen, wxPython has a handy method. The Centre() method simply centers the window on the screen. No need to calculate the width and the height of the screen. Simply call the method.

#!/usr/bin/python
 
# centre.py
 
import wx
 
class Centre(wx.Frame):
    def __init__(self, parent, id, title):
        wx.Frame.__init__(self, parent, id, title)
 
        self.Centre()
        self.Show(True)
 
app = wx.App()
Centre(None, -1, 'Centre')
app.MainLoop()

مهم ان نعرف كيف يمكن ان تتواصل الودجات سويا.. تابع المثال التالى

#!/usr/bin/python
 
# communicate.py
 
import wx
 
 
class LeftPanel(wx.Panel):
    def __init__(self, parent, id):
        wx.Panel.__init__(self, parent, id, style=wx.BORDER_SUNKEN)
 
        self.text = parent.GetParent().rightPanel.text
 
        button1 = wx.Button(self, -1, '+', (10, 10))
        button2 = wx.Button(self, -1, '-', (10, 60))
 
        self.Bind(wx.EVT_BUTTON, self.OnPlus, id=button1.GetId())
        self.Bind(wx.EVT_BUTTON, self.OnMinus, id=button2.GetId())
 
    def OnPlus(self, event):
        value = int(self.text.GetLabel())
        value = value + 1
        self.text.SetLabel(str(value))
 
    def OnMinus(self, event):
        value = int(self.text.GetLabel())
        value = value - 1
        self.text.SetLabel(str(value))
 
 
class RightPanel(wx.Panel):
    def __init__(self, parent, id):
        wx.Panel.__init__(self, parent, id, style=wx.BORDER_SUNKEN)
        self.text = wx.StaticText(self, -1, '0', (40, 60))
 
 
class Communicate(wx.Frame):
    def __init__(self, parent, id, title):
        wx.Frame.__init__(self, parent, id, title, size=(280, 200))
 
        panel = wx.Panel(self, -1)
        self.rightPanel = RightPanel(panel, -1)
 
        leftPanel = LeftPanel(panel, -1)
 
        hbox = wx.BoxSizer()
        hbox.Add(leftPanel, 1, wx.EXPAND | wx.ALL, 5)
        hbox.Add(self.rightPanel, 1, wx.EXPAND | wx.ALL, 5)
 
        panel.SetSizer(hbox) 
        self.Centre()
        self.Show(True)
 
app = wx.App()
Communicate(None, -1, 'widgets communicate')
app.MainLoop()

فى المثال لدينا 2 panels واحدة على اليسار (تحوى زرين) والأخرى على اليمين (تحوى نص ساكن static text) . والزرين سيغيران الرقم الظاهر على النص الساكن.. السؤال الآن هو كيف نحصل على مرجع “reference” للنص الساكن ؟

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

 panel = wx.Panel(self, -1)
 self.rightPanel = RightPanel(panel, -1)
 
 leftPanel = LeftPanel(panel, -1)

لاحظ ان ال panel اليمنى يجب ان تعرف قبل اليسرى.. لأننا عند انشاء اليسرى نبحث عن تعريف النص الساكن اللذى تم تعريفه فى اليمنى. فمنطقيا لا نستطيع الحصول على مرجع لودجت غير موجود بعد!

 self.text = parent.GetParent().rightPanel.text

الإجابة هنا.. كل ويدجت لديه معامل للأب وفى مثالنا الأب هو panel نضع عليها ال panel اليمنى واليسرى.. بإستدعاء الطريقة GetParent نحصل على مرجع لل frame اللتى تحوى مرجع للpanel اليمنى والتى تحوى مرجع للنص الساكن.

A menubar is one of the most visible parts of the GUI application. It is a group of commands located in various menus. While in console applications you had to remember all those arcane commands, here we have most of the commands grouped into logical parts. There are accepted standards that further reduce the amount of time spending to learn a new application. To implement a menubar in wxPython we need to have three things. A wx.MenuBar, a wx.Menu and a wx.MenuItem.

Creating a menubar in wxPython is very simple. Just a few lines of code.

#!/usr/bin/python
 
# simplemenu.py
 
import wx
 
class SimpleMenu(wx.Frame):
    def __init__(self, parent, id, title):
        wx.Frame.__init__(self, parent, id, title, size=(250, 150))
 
        menubar = wx.MenuBar()
        file = wx.Menu()
        file.Append(-1, 'Quit', 'Quit application')
        menubar.Append(file, '&File')
        self.SetMenuBar(menubar)
 
        self.Centre()
        self.Show(True)
 
app = wx.App()
SimpleMenu(None, -1, 'simple menu example')
app.MainLoop()

 menubar = wx.MenuBar()

First we create a menubar object.

 file = wx.Menu()

Next we create a menu object.

 file.Append(-1, 'Quit', 'Quit application')

We append a menu item into the menu object. The first parameter is the id of the menu item. The second parameter is the name of the menu item. The last parameter defines the short helpstring that is displayed on the statusbar, when the menu item is selected. Here we did not create a wx.MenuItem explicitely. It was created by the Append() method behind the scenes. Later on, we will create a wx.MenuItem manually.

 menubar.Append(file, '&File')
 self.SetMenuBar(menubar)

After that, we append a menu into the menubar. The &amp character creates an accelerator key. The character that follows the &amp is underlined. This way the menu is accessible via the alt + F shortcut. In the end, we call the SetMenuBar() method. This method belongs to the wx.Frame widget. It sets up the menubar.

Under Linux, we can create a dockable menubar. This feature is not commonly seen in applications. But similar thing can be seen on Mac OS. Mac users do not have a menubar in the toplevet application window. The menubar is implemented outside the main window.

#!/usr/bin/python
 
# dockable.py
 
import wx
 
class Dockable(wx.Frame):
    def __init__(self, parent, id, title):
        wx.Frame.__init__(self, parent, id, title)
 
        menubar = wx.MenuBar(wx.MB_DOCKABLE)
        file = wx.Menu()
        edit = wx.Menu()
        view = wx.Menu()
        insr = wx.Menu()
        form = wx.Menu()
        tool = wx.Menu()
        help = wx.Menu()
 
        menubar.Append(file, '&File')
        menubar.Append(edit, '&Edit')
        menubar.Append(view, '&View')
        menubar.Append(insr, '&Insert')
        menubar.Append(form, '&Format')
        menubar.Append(tool, '&Tools')
        menubar.Append(help, '&Help')
        self.SetMenuBar(menubar)
 
        self.Centre()
        self.Show(True)
 
app = wx.App()
Dockable(None, -1, 'Dockable menubar')
app.MainLoop()

 menubar = wx.MenuBar(wx.MB_DOCKABLE)

We create a dockable menubar by providing a wx.MB_DOCKABLE flag to the constructor.

In the next section we will further enhance our menu example. We will see, how we can add icons to our menus. Icons make our applications more visually attractive. Further, they help us understand the menu commands. We will see, how we can add shortcuts to our menus. Shortcuts are not a relict from the past. They enable us to work more quickly with our applications. One of the most widely used shortcut is the Ctrl + S one. There are not many people, that would not know the meaning of this shortcut. It is more handy to press this shortcut, than to move a mouse pointer to the menubar, click a File menu and select the Save commnand. Shortcuts are a productivity boost to most users.

We will also briely touch events.

#!/usr/bin/python
 
# menuexample.py
 
import wx
 
class MenuExample(wx.Frame):
    def __init__(self, parent, id, title):
        wx.Frame.__init__(self, parent, id, title, size=(250, 150))
 
        menubar = wx.MenuBar()
        file = wx.Menu()
        quit = wx.MenuItem(file, 1, '&Quit\tCtrl+Q')
        quit.SetBitmap(wx.Bitmap('icons/exit.png'))
        file.AppendItem(quit)
 
        self.Bind(wx.EVT_MENU, self.OnQuit, id=1)
 
        menubar.Append(file, '&File')
        self.SetMenuBar(menubar)
 
        self.Centre()
        self.Show(True)
 
    def OnQuit(self, event):
        self.Close()
 
app = wx.App()
MenuExample(None, -1, '')
app.MainLoop()

 quit = wx.MenuItem(file, 1, '&Quit\tCtrl+Q')
 quit.SetBitmap(wx.Bitmap('icons/exit.png'))
 file.AppendItem(quit)

If we want to add shortcuts and icons to our menus, we have to manually create a wx.MenuItem. So far we have created menuitems indirectly. The &amp character specifies an accelerator key. The following character is underlined. The actual shortcut is defined by the combination of characters. We have specified Ctrl + Q characters. So if we press Ctrl + Q, we close the application. We put a tab character between the &amp character and the shortcut. This way, we manage to put some space between them. To provide an icon for a menuitem, we call a SetBitmap() method. A manually created menuitem is appended to the menu by calling the AppendItem() method.

 self.Bind(wx.EVT_MENU, self.OnQuit, id=1)

If we select a quit menu item or press a keyboard shortcut, a wx.EVT_MENU event is generated. We bind an event handler to the event. The event handler is a method, that is being called. In our example, the OnQuit() method closes the application. There can be several menuitems, so we have to give a unique id to each of them. Working with events is very easy and straightforward in wxPython. We will talk about events in a separate chapter.

Each menu can also have a submenu. This way we can group similar commands into groups. For example we can place commands that hide/show various toolbars like personal bar, address bar, status bar or navigation bar into a submenu called toolbars. Within a menu, we can seperate commands with a separator. It is a simple line. It is common practice to separate commands like new, open, save from commands like print, print preview with a single separator. In our example we will see, how we can create submenus and menu separators.

#!/usr/bin/python
 
# submenu.py
 
import wx
 
ID_QUIT = 1
 
class SubmenuExample(wx.Frame):
    def __init__(self, parent, id, title):
        wx.Frame.__init__(self, parent, id, title, size=(350, 250))
 
        menubar = wx.MenuBar()
 
        file = wx.Menu()
        file.Append(-1, '&New')
        file.Append(-1, '&Open')
        file.Append(-1, '&Save')
        file.AppendSeparator()
 
        imp = wx.Menu()
        imp.Append(-1, 'Import newsfeed list...')
        imp.Append(-1, 'Import bookmarks...')
        imp.Append(-1, 'Import mail...')
 
        file.AppendMenu(-1, 'I&mport', imp)
 
        quit = wx.MenuItem(file, ID_QUIT, '&Quit\tCtrl+W')
        quit.SetBitmap(wx.Bitmap('icons/exit.png'))
        file.AppendItem(quit)
 
        self.Bind(wx.EVT_MENU, self.OnQuit, id=ID_QUIT)
 
        menubar.Append(file, '&File')
        self.SetMenuBar(menubar)
 
        self.Centre()
        self.Show(True)
 
    def OnQuit(self, event):
        self.Close()
 
app = wx.App()
SubmenuExample(None, -1, 'Submenu')
app.MainLoop()

 file.AppendSeparator()

A menu separator is appended with the AppendSeparator() method.

 imp = wx.Menu()
 imp.Append(-1, 'Import newsfeed list...')
 imp.Append(-1, 'Import bookmarks...')
 imp.Append(-1, 'Import mail...')
 
 file.AppendMenu(-1, 'I&mport', imp)

Creating a submenu is trivial. First, we create a menu. Then we append menu items. A submenu is created by calling the AppenMenu() on the menu object.

There are tree kinds of menu items.

• normal item
• check item
• radio item

#!/usr/bin/python
 
# checkmenuitem.py
 
import wx
 
ID_STAT = 1
ID_TOOL = 2
 
class CheckMenuItem(wx.Frame):
    def __init__(self, parent, id, title):
        wx.Frame.__init__(self, parent, id, title, size=(350, 250))
 
        menubar = wx.MenuBar()
        file = wx.Menu()
        view = wx.Menu()
        self.shst = view.Append(ID_STAT, 'Show statubar', 'Show Statusbar', kind=wx.ITEM_CHECK)
        self.shtl = view.Append(ID_TOOL, 'Show toolbar', 'Show Toolbar', kind=wx.ITEM_CHECK)
        view.Check(ID_STAT, True)
        view.Check(ID_TOOL, True)
 
        self.Bind(wx.EVT_MENU, self.ToggleStatusBar, id=ID_STAT)
        self.Bind(wx.EVT_MENU, self.ToggleToolBar, id=ID_TOOL)
 
        menubar.Append(file, '&File')
        menubar.Append(view, '&View')
        self.SetMenuBar(menubar)
 
        self.toolbar = self.CreateToolBar()
        self.toolbar.AddLabelTool(3, '', wx.Bitmap('icons/quit.png'))
        self.toolbar.Realize()
 
        self.statusbar = self.CreateStatusBar()
        self.Centre()
        self.Show(True)
 
    def ToggleStatusBar(self, event):
        if self.shst.IsChecked():
            self.statusbar.Show()
        else:
            self.statusbar.Hide()
 
    def ToggleToolBar(self, event):
        if self.shtl.IsChecked():
            self.toolbar.Show()
        else:
            self.toolbar.Hide()
 
app = wx.App()
CheckMenuItem(None, -1, 'check menu item')
app.MainLoop()

 self.shst = view.Append(ID_STAT, 'Show statubar', 'Show Statusbar', kind=wx.ITEM_CHECK)
 self.shtl = view.Append(ID_TOOL, 'Show toolbar', 'Show Toolbar', kind=wx.ITEM_CHECK)

If we want to append a check menu item, we set a kind parameter to wx.ITEM_CHECK. The default parameter is wx.ITEM_NORMAL. The Append() method returns a wx.MenuItem.

 view.Check(ID_STAT, True)
 view.Check(ID_TOOL, True)

When the application starts, both statusbar and toolbar are visible. So we check both menu items with the Check() method.

 def ToggleStatusBar(self, event):
     if self.shst.IsChecked():
         self.statusbar.Show()
     else:
         self.statusbar.Hide()

We show or hide the statusbar according to the state of the check menu item. We find out the state of the check menu item with the IsChecked() method. Same with toolbar.

It is a list of commands that appears under some context. For example, in a Firefox web browser, when we right click on a web page, we get a context menu. Here we can reload a page, go back or view page source. If we right click on a toolbar, we get another context menu for managing toolbars. Context menus are sometimes called popup menus.

#!/usr/bin/python
 
# contextmenu.py
 
import wx
 
 
class MyPopupMenu(wx.Menu):
    def __init__(self, parent):
        wx.Menu.__init__(self)
 
        self.parent = parent
 
        minimize = wx.MenuItem(self, wx.NewId(), 'Minimize')
        self.AppendItem(minimize)
        self.Bind(wx.EVT_MENU, self.OnMinimize, id=minimize.GetId())
 
        close = wx.MenuItem(self, wx.NewId(), 'Close')
        self.AppendItem(close)
        self.Bind(wx.EVT_MENU, self.OnClose, id=close.GetId())
 
 
    def OnMinimize(self, event):
        self.parent.Iconize()
 
    def OnClose(self, event):
        self.parent.Close()
 
 
class ContextMenu(wx.Frame):
    def __init__(self, parent, id, title):
        wx.Frame.__init__(self, parent, id, title, size=(250, 150))
 
        self.Bind(wx.EVT_RIGHT_DOWN, self.OnRightDown)
 
        self.Center()
        self.Show()
 
    def OnRightDown(self, event):
        self.PopupMenu(MyPopupMenu(self), event.GetPosition())
 
 
app = wx.App()
frame = ContextMenu(None, -1, 'context menu')
app.MainLoop()

 class MyPopupMenu(wx.Menu):
     def __init__(self, parent):
         wx.Menu.__init__(self)

We create a separate wx.Menu class. Here we define two commands. Close and minimize window.

 self.Bind(wx.EVT_RIGHT_DOWN, self.OnRightDown)

If we right click on the frame, we call the OnRightDown() method. For this, we use the wx.EVT_RIGHT_DOWN event binder.

 def OnRightDown(self, event):
     self.PopupMenu(MyPopupMenu(self), event.GetPosition())

In the OnRightDown() method, we call the PopupMenu() method. This method shows the context menu. The first parameter is the menu to be shown. The second parameter is the position, where the context menu appears. The context menus appear at the point of the mouse cursor. To get the actual mouse position, we call the GetPosition() menthod.

Menus group all commands that we can use in an application. Toolbars provide a quick access to the most frequently used commands.

 CreateToolBar(long style=-1, int winid=-1, String name=ToolBarNameStr)

To create a toolbar, we call the CreateToolBar() method of the frame widget.

#!/usr/bin/python
 
# simpletoolbar.py
 
import wx
 
class SimpleToolbar(wx.Frame):
    def __init__(self, parent, id, title):
        wx.Frame.__init__(self, parent, id, title, size=(300, 200))
 
        toolbar = self.CreateToolBar()
        toolbar.AddLabelTool(wx.ID_EXIT, '', wx.Bitmap('../icons/exit.png'))
	toolbar.Realize()
 
        self.Bind(wx.EVT_TOOL, self.OnExit, id=wx.ID_EXIT)
 
        self.Centre()
        self.Show(True)
 
    def OnExit(self, event):
        self.Close()
 
 
app = wx.App()
SimpleToolbar(None, -1, 'simple toolbar')
app.MainLoop()

 toolbar.AddLabelTool(wx.ID_EXIT, '', wx.Bitmap('../icons/exit.png'))

To create a toolbar button, we call the AddLabelTool() method.

 toolbar.Realize()

After we have put our items to the toolbar, we call the Realize() method. Calling this method is not obligatory on Linux. On windows it is.

 self.Bind(wx.EVT_TOOL, self.OnExit, id=wx.ID_EXIT)

To handle toolbar events, we use the wx.EVT_TOOL event binder.

If we want to create more than one toolbars, we must do it differently.

#!/usr/bin/python
 
# toolbars.py
 
import wx
 
class Toolbars(wx.Frame):
    def __init__(self, parent, id, title):
        wx.Frame.__init__(self, parent, id, title, size=(300, 200))
 
        vbox = wx.BoxSizer(wx.VERTICAL)
 
        toolbar1 = wx.ToolBar(self, -1)
        toolbar1.AddLabelTool(wx.ID_ANY, '', wx.Bitmap('../icons/new.png'))
        toolbar1.AddLabelTool(wx.ID_ANY, '', wx.Bitmap('../icons/open.png'))
        toolbar1.AddLabelTool(wx.ID_ANY, '', wx.Bitmap('../icons/save.png'))
        toolbar1.Realize()
 
        toolbar2 = wx.ToolBar(self, -1)
        toolbar2.AddLabelTool(wx.ID_EXIT, '', wx.Bitmap('../icons/exit.png'))
        toolbar2.Realize()
 
        vbox.Add(toolbar1, 0, wx.EXPAND)
        vbox.Add(toolbar2, 0, wx.EXPAND)
 
        self.Bind(wx.EVT_TOOL, self.OnExit, id=wx.ID_EXIT)
 
        self.SetSizer(vbox)
        self.Centre()
        self.Show(True)
 
    def OnExit(self, event):
        self.Close()
 
 
app = wx.App()
Toolbars(None, -1, 'toolbars')
app.MainLoop()

 toolbar1 = wx.ToolBar(self, -1)
 ...
 toolbar2 = wx.ToolBar(self, -1)

We create two toolbar objects. And put them into a vertical box.

Sometimes we need to create a vertical toolbar. Vertical toolbars are often seen in graphics applications like Inkscape or Xara Xtreme.

#!/usr/bin/python
 
# verticaltoolbar.py
 
import wx
 
class VerticalToolbar(wx.Frame):
    def __init__(self, parent, id, title):
        wx.Frame.__init__(self, parent, id, title, size=(240, 300))
 
        toolbar = self.CreateToolBar(wx.TB_VERTICAL)
        toolbar.AddLabelTool(wx.ID_ANY, '', wx.Bitmap('../icons/select.gif'))
        toolbar.AddLabelTool(wx.ID_ANY, '', wx.Bitmap('../icons/freehand.gif'))
        toolbar.AddLabelTool(wx.ID_ANY, '', wx.Bitmap('../icons/shapeed.gif'))
        toolbar.AddLabelTool(wx.ID_ANY, '', wx.Bitmap('../icons/pen.gif'))
        toolbar.AddLabelTool(wx.ID_ANY, '', wx.Bitmap('../icons/rectangle.gif'))
        toolbar.AddLabelTool(wx.ID_ANY, '', wx.Bitmap('../icons/ellipse.gif'))
        toolbar.AddLabelTool(wx.ID_ANY, '', wx.Bitmap('../icons/qs.gif'))
        toolbar.AddLabelTool(wx.ID_ANY, '', wx.Bitmap('../icons/text.gif'))
 
        toolbar.Realize()
 
 
        self.Centre()
        self.Show(True)
 
    def OnExit(self, event):
        self.Close()
 
 
app = wx.App()
VerticalToolbar(None, -1, 'vertical toolbar')
app.MainLoop()

 toolbar = self.CreateToolBar(wx.TB_VERTICAL)

Here we create a vertical toolbar.

 toolbar.AddLabelTool(wx.ID_ANY, '', wx.Bitmap('../icons/select.gif'))
 toolbar.AddLabelTool(wx.ID_ANY, '', wx.Bitmap('../icons/freehand.gif'))
 ...

I have borrowed icons from the Xara Xtreme graphics application.

In the following example, we will show, how we can enable and disable toolbar buttons. We will also see a separator line.

#!/usr/bin/python
 
# enabledisable.py
 
import wx
 
class EnableDisable(wx.Frame):
    def __init__(self, parent, id, title):
        wx.Frame.__init__(self, parent, id, title, size=(250, 150))
 
        self.count = 5
 
        self.toolbar = self.CreateToolBar()
        self.toolbar.AddLabelTool(wx.ID_UNDO, '', wx.Bitmap('../icons/undo.png'))
        self.toolbar.AddLabelTool(wx.ID_REDO, '', wx.Bitmap('../icons/redo.png'))
        self.toolbar.EnableTool(wx.ID_REDO, False)
        self.toolbar.AddSeparator()
        self.toolbar.AddLabelTool(wx.ID_EXIT, '', wx.Bitmap('../icons/exit.png'))
        self.toolbar.Realize()
 
        self.Bind(wx.EVT_TOOL, self.OnExit, id=wx.ID_EXIT)
        self.Bind(wx.EVT_TOOL, self.OnUndo, id=wx.ID_UNDO)
        self.Bind(wx.EVT_TOOL, self.OnRedo, id=wx.ID_REDO)
 
        self.Centre()
        self.Show(True)
 
    def OnUndo(self, event):
        if self.count > 1 and self.count <= 5:
            self.count = self.count - 1
 
        if self.count == 1:
            self.toolbar.EnableTool(wx.ID_UNDO, False)
 
        if self.count == 4:
            self.toolbar.EnableTool(wx.ID_REDO, True)
 
    def OnRedo(self, event):
        if self.count < 5 and self.count >= 1:
            self.count = self.count + 1
 
        if self.count == 5:
            self.toolbar.EnableTool(wx.ID_REDO, False)
 
        if self.count == 2:
            self.toolbar.EnableTool(wx.ID_UNDO, True)
 
    def OnExit(self, event):
        self.Close()
 
app = wx.App()
EnableDisable(None, -1, 'enable disable')
app.MainLoop()

In our example, we have three toolbar buttons. One button is for exiting the application. The other two buttons are undo and redo buttons. They simulate undo/redo functionality in an application. (for a real example, see tips and tricks) We have 4 changes. The undo and redo butons are disabled accordingly.

 self.toolbar.EnableTool(wx.ID_REDO, False)
 self.toolbar.AddSeparator()

In the beginning, the redo button is disabled. We do it by calling the EnableTool() method. We can create some logical groups within a toolbar. We can separate various groups of buttons by a small vertical line. To do this, we call the AddSeparator() method.

 def OnUndo(self, event):
     if self.count > 1 and self.count <= 5:
         self.count = self.count - 1
 
     if self.count == 1:
         self.toolbar.EnableTool(wx.ID_UNDO, False)
 
     if self.count == 4:
         self.toolbar.EnableTool(wx.ID_REDO, True)

We simulate undo and redo functionality. We have 4 changes. If there is nothing left to undo, the undo button is disabled. After undoing the first change, we enable the redo button. Same logic applies for the OnRedo() method.

</html>

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

نستطيع إدارتها بطريقين: الموقع المطلق أو استخدام احد صنوف التخطيط layout classes

وهي أن يحدد المبرمج مكان وحجم كل ودجة بوحدة بكسل، عند استخدامك للتحديد المطلق يجب ان تعلم عدة اشياء:

• عند اعادة تحجيم النافذة ، لا يغيّر مكان وحجم الودجة تبعا لذلك
• التطبيق قد يختلف شكله على المنصات المختلفة
• تغيّر الخطوط قد يفسد تصميم المخطط
• إذا قررت تغيّر المخطط، فإنك ستحتاج الى إعادة تنظيمه بالكامل وهو أمر ممل ويأخذ وقتا

فى مثالنا ننشئ هيكل لمحرر نصوص.. اذا قمنا بإعادة تحجيم النافذة.. سنجد ان مساحة الودجت wx.TextCtrl لاتتعدل كما نتوقع

#!/usr/bin/python
 
# absolute.py
 
import wx
 
class Absolute(wx.Frame):
    def __init__(self, parent, id, title):
        wx.Frame.__init__(self, parent, id, title, size=(250, 180))
        panel = wx.Panel(self, -1)
 
        menubar = wx.MenuBar()
        file = wx.Menu()
        edit = wx.Menu()
        help = wx.Menu()
 
        menubar.Append(file, '&File')
        menubar.Append(edit, '&Edit')
        menubar.Append(help, '&Help')
        self.SetMenuBar(menubar)
 
        wx.TextCtrl(panel, -1, pos=(-1, -1), size=(250, 150))
 
        self.Centre()
        self.Show(True)
 
app = wx.App(0)
Absolute(None, -1, '')
app.MainLoop()

 wx.TextCtrl(panel, -1, pos=(-1, -1), size=(250, 150))

نقوم بتحديد الموضع فى المشيدّ الخاص بالودجت wx.TextCtrl. فى حالتنا نقوم بتحديد الموقع الإفتراضى. العرض 250 بكسل والإرتفاع 150 بكسل

المحجمات تخاطب تلك المشكلات اللتى ذكرناها فى الموضع المطلق.ومنها:

• wx.BoxSizer
• wx.StaticBoxSizer
• wx.GridSizer
• wx.FlexGridSizer
• wx.GridBagSizer

#!/usr/bin/python
 
# sizer.py
 
import wx
 
class Sizer(wx.Frame):
    def __init__(self, parent, id, title):
        wx.Frame.__init__(self, parent, id, title, size=(250, 180))
 
        menubar = wx.MenuBar()
        file = wx.Menu()
        edit = wx.Menu()
        help = wx.Menu()
 
        menubar.Append(file, '&File')
        menubar.Append(edit, '&Edit')
        menubar.Append(help, '&Help')
        self.SetMenuBar(menubar)
 
        wx.TextCtrl(self, -1)
 
        self.Centre()
        self.Show(True)
 
app = wx.App(0)
Sizer(None, -1, '')
app.MainLoop()

حسنا، اتقول اننا لانرى المججمات فى المثال؟ همم ، هذا الكود مخادع قليلا. فى الواقع لقد وضعنا اداة wx.TextCtrl داخل wx.Frame -الذى يحوى محجّم داخلى- يسمح لنا بوضع ويدجت واحد فقط ليشغل كل المساحة داخل الحاوية wx.Frame

هذا المحجّم يسمح لنا بوضح عدة ويدجات فى صف او عمود. نستطيع ايضا ان نضيف محجّم داخل محجّم اخر مما يسمح لنا بإنشاء محططات معقدة جدا.

 box = wx.BoxSizer(integer orient)
 box.Add(wx.Window window, integer proportion=0, integer flag = 0, integer border = 0)

الإتجاة -orientation- ربما يكون رأسى wx.VERTICAL او افقى wx.HORIZONTAL واضافة الويدجات الى المحجم يتم عن طريق الطريقة Add -واللتى لفهمها سنحتاج القاء نظره على معاملاتها

معامل proportion بيحدد النسبة اللتى بناء عليها سيتم تقسيم المساحة. على فرض لدينا 3 ازرار بقيم 0و 1 و 2 لل proportion وسيتم اضافتهم لصندوق افقى الزر صاحب القيمة 0 لن يتم حدوث اى تغيير له فعند التغيير سيتغير صاحب القيمة 2 بضعف صاحب القيمة 1 فى الأفقى

مع المعامل flag نستطيع ان نحدد سلوك الويدجات داخل المحجّم. نستطيع تحديد الحدود بين الويدجات. نضيف بعض المساحة بين الويدجات -بالبكسل- ولتطبيق الحدود يجب ان نضيفها بالمعامل | ك wx.LEFT|wx.BOTTOM ونستطيع اختيار قيم من:

• wx.LEFT
• wx.RIGHT
• wx.BOTTOM
• wx.TOP
• wx.ALL

#!/usr/bin/python
 
# border.py
 
import wx
 
class Border(wx.Frame):
    def __init__(self, parent, id, title):
        wx.Frame.__init__(self, parent, id, title, size=(250, 200))
 
        panel = wx.Panel(self, -1)
        panel.SetBackgroundColour('#4f5049')
        vbox = wx.BoxSizer(wx.VERTICAL)
 
        midPan = wx.Panel(panel, -1)
        midPan.SetBackgroundColour('#ededed')
 
        vbox.Add(midPan, 1, wx.EXPAND | wx.ALL, 20)
        panel.SetSizer(vbox)
        self.Centre()
        self.Show(True)
 
app = wx.App()
Border(None, -1, '')
app.MainLoop()

vbox.Add(midPan, 1, wx.EXPAND | wx.ALL, 20)

فى المثال اضفنا حدود بمقدار 20 بكسل حول البانل midPan. وwx.ALL تطبق الحد على الأربع جوانب.

نستخدم wx.EXPAND حتى يأخذ الويدجت كل المساحة المخصصة له. اخيرا نستطيع تعريف المحاذاة للويدجات عن طريق :

• wx.ALIGN_LEFT
• wx.ALIGN_RIGHT
• wx.ALIGN_TOP
• wx.ALIGN_BOTTOM
• wx.ALIGN_CENTER_VERTICAL
• wx.ALIGN_CENTER_HORIZONTAL
• wx.ALIGN_CENTER

فى المثال التالى سنقدم بعض الأفكار الهامة.

#!/usr/bin/python
 
# gotoclass.py
 
import wx
 
class GoToClass(wx.Frame):
    def __init__(self, parent, id, title):
        wx.Frame.__init__(self, parent, id, title, size=(390, 350))
        panel = wx.Panel(self, -1)
 
        font = wx.SystemSettings_GetFont(wx.SYS_SYSTEM_FONT)
        font.SetPointSize(9)
 
        vbox = wx.BoxSizer(wx.VERTICAL)
 
        hbox1 = wx.BoxSizer(wx.HORIZONTAL)
        st1 = wx.StaticText(panel, -1, 'Class Name')
        st1.SetFont(font)
        hbox1.Add(st1, 0, wx.RIGHT, 8)
        tc = wx.TextCtrl(panel, -1)
        hbox1.Add(tc, 1)
        vbox.Add(hbox1, 0, wx.EXPAND | wx.LEFT | wx.RIGHT | wx.TOP, 10)
 
        vbox.Add((-1, 10))
 
        hbox2 = wx.BoxSizer(wx.HORIZONTAL)
        st2 = wx.StaticText(panel, -1, 'Matching Classes')
        st2.SetFont(font)
        hbox2.Add(st2, 0)
        vbox.Add(hbox2, 0, wx.LEFT | wx.TOP, 10)
 
        vbox.Add((-1, 10))
 
        hbox3 = wx.BoxSizer(wx.HORIZONTAL)
        tc2 = wx.TextCtrl(panel, -1, style=wx.TE_MULTILINE)
        hbox3.Add(tc2, 1, wx.EXPAND)
        vbox.Add(hbox3, 1, wx.LEFT | wx.RIGHT | wx.EXPAND, 10)
 
        vbox.Add((-1, 25))
 
        hbox4 = wx.BoxSizer(wx.HORIZONTAL)
        cb1 = wx.CheckBox(panel, -1, 'Case Sensitive')
        cb1.SetFont(font)
        hbox4.Add(cb1)
        cb2 = wx.CheckBox(panel, -1, 'Nested Classes')
        cb2.SetFont(font)
        hbox4.Add(cb2, 0, wx.LEFT, 10)
        cb3 = wx.CheckBox(panel, -1, 'Non-Project classes')
        cb3.SetFont(font)
        hbox4.Add(cb3, 0, wx.LEFT, 10)
        vbox.Add(hbox4, 0, wx.LEFT, 10)
 
        vbox.Add((-1, 25))
 
        hbox5 = wx.BoxSizer(wx.HORIZONTAL)
        btn1 = wx.Button(panel, -1, 'Ok', size=(70, 30))
        hbox5.Add(btn1, 0)
        btn2 = wx.Button(panel, -1, 'Close', size=(70, 30))
        hbox5.Add(btn2, 0, wx.LEFT | wx.BOTTOM , 5)
        vbox.Add(hbox5, 0, wx.ALIGN_RIGHT | wx.RIGHT, 10)
 
        panel.SetSizer(vbox)
        self.Centre()
        self.Show(True)
 
 
app = wx.App()
GoToClass(None, -1, 'Go To Class')
app.MainLoop()

المخطط مباشر. قمنا بإنشاء محجّم رأسى ووضعنا فيه 5 محجّمات افقية.

 font = wx.SystemSettings_GetFont(wx.SYS_SYSTEM_FONT)
 font.SetPointSize(9)

الخط الإفتراضى المستخدم 10 بكسل، قمت بتعديله ل 9 حتى يناسبنى اكثر

 vbox.Add(hbox3, 1, wx.LEFT | wx.RIGHT | wx.EXPAND, 10)
 
 vbox.Add((-1, 25))

نعلم اننا نستطيع التحكم فى المسافة بين الودجات بدمج المعامل flag بمعامل الحدود border

فى الطريقة Add نستطيع ان نحدد border واحد لكل الجوانب.. فى مثالنا اعطينا 10 بكسل لليسار واليمين.. ولكن لانستطيع اعطاء 25 للأسفل.. نستطيع استخدام الطريقة Add لإضافة ويدجات و“مسافات” ايضا!

vbox.Add(hbox5, 0, wx.ALIGN_RIGHT | wx.RIGHT, 10)

We place the two buttons on the right side of the window. How do we do it? Three things are important to achieve this. The proportion, the align flag and the wx.EXPAND flag. The proportion must be zero. The buttons should not change their size, when we resize our window. We must not specify wx.EXPAND flag. The buttons occopy only the area that has been alotted to it. And finally, we must specify the wx.ALIGN_RIGHT flag. The horizontal sizer spreads from the left side of the window to the right side. So if we specify wx.ALIGN_RIGHT flag, the buttons are placed to the right side. Exactly, as we wanted.

فى مثالنا سننشئ صندوق حوارى find/replace –من ذلك النوع اللذى قد تجده فى Eclipse IDE

#!/usr/bin/python
 
# Find/Replace Dialog
 
import wx
 
class FindReplace(wx.Dialog):
    def __init__(self, parent, id, title):
        wx.Dialog.__init__(self, parent, id, title, size=(255, 365))
 
        vbox_top = wx.BoxSizer(wx.VERTICAL)
        panel = wx.Panel(self, -1)
 
        vbox = wx.BoxSizer(wx.VERTICAL)
 
        # panel1
 
        panel1 = wx.Panel(panel, -1)
        grid1 = wx.GridSizer(2, 2)
        grid1.Add(wx.StaticText(panel1, -1, 'Find: ', (5, 5)), 0,  wx.ALIGN_CENTER_VERTICAL)
        grid1.Add(wx.ComboBox(panel1, -1, size=(120, -1)))
        grid1.Add(wx.StaticText(panel1, -1, 'Replace with: ', (5, 5)), 0, wx.ALIGN_CENTER_VERTICAL)
        grid1.Add(wx.ComboBox(panel1, -1, size=(120, -1)))
 
        panel1.SetSizer(grid1)
        vbox.Add(panel1, 0, wx.BOTTOM | wx.TOP, 9)
 
        # panel2
 
        panel2 = wx.Panel(panel, -1)
        hbox2 = wx.BoxSizer(wx.HORIZONTAL)
 
        sizer21 = wx.StaticBoxSizer(wx.StaticBox(panel2, -1, 'Direction'), orient=wx.VERTICAL)
        sizer21.Add(wx.RadioButton(panel2, -1, 'Forward', style=wx.RB_GROUP))
        sizer21.Add(wx.RadioButton(panel2, -1, 'Backward'))
        hbox2.Add(sizer21, 1, wx.RIGHT, 5)
 
        sizer22 = wx.StaticBoxSizer(wx.StaticBox(panel2, -1, 'Scope'), orient=wx.VERTICAL)
        # we must define wx.RB_GROUP style, otherwise all 4 RadioButtons would be mutually exclusive
        sizer22.Add(wx.RadioButton(panel2, -1, 'All', style=wx.RB_GROUP))
        sizer22.Add(wx.RadioButton(panel2, -1, 'Selected Lines'))
        hbox2.Add(sizer22, 1)
 
        panel2.SetSizer(hbox2)
        vbox.Add(panel2, 0, wx.BOTTOM, 9)
 
        # panel3
 
        panel3 = wx.Panel(panel, -1)
        sizer3 = wx.StaticBoxSizer(wx.StaticBox(panel3, -1, 'Options'), orient=wx.VERTICAL)
        vbox3 = wx.BoxSizer(wx.VERTICAL)
        grid = wx.GridSizer(3, 2, 0, 5)
        grid.Add(wx.CheckBox(panel3, -1, 'Case Sensitive'))
        grid.Add(wx.CheckBox(panel3, -1, 'Wrap Search'))
        grid.Add(wx.CheckBox(panel3, -1, 'Whole Word'))
        grid.Add(wx.CheckBox(panel3, -1, 'Incremental'))
        vbox3.Add(grid)
        vbox3.Add(wx.CheckBox(panel3, -1, 'Regular expressions'))
        sizer3.Add(vbox3, 0, wx.TOP, 4)
 
        panel3.SetSizer(sizer3)
        vbox.Add(panel3, 0, wx.BOTTOM, 15)
 
        # panel4
 
        panel4 = wx.Panel(panel, -1)
        sizer4 = wx.GridSizer(2, 2, 2, 2)
        sizer4.Add(wx.Button(panel4, -1, 'Find', size=(120, -1)))
        sizer4.Add(wx.Button(panel4, -1, 'Replace/Find', size=(120, -1)))
        sizer4.Add(wx.Button(panel4, -1, 'Replace', size=(120, -1)))
        sizer4.Add(wx.Button(panel4, -1, 'Replace All', size=(120, -1)))
 
        panel4.SetSizer(sizer4)
        vbox.Add(panel4, 0, wx.BOTTOM, 9)
 
        # panel5
 
        panel5 = wx.Panel(panel, -1)
        sizer5 = wx.BoxSizer(wx.HORIZONTAL)
        sizer5.Add((191, -1), 1, wx.EXPAND | wx.ALIGN_RIGHT)
        sizer5.Add(wx.Button(panel5, -1, 'Close', size=(50, -1)))
 
        panel5.SetSizer(sizer5)
        vbox.Add(panel5, 1, wx.BOTTOM, 9)
 
        vbox_top.Add(vbox, 1, wx.LEFT, 5)
        panel.SetSizer(vbox_top)
 
        self.Centre()
        self.ShowModal()
        self.Destroy()
 
 
app = wx.App()
FindReplace(None, -1, 'Find/Replace')
app.MainLoop()

(Remark for Windows users, put self.SetClientSize(panel.GetBestSize()) line before the ShowModal() method.)

قبل ان نكتب المخطط، يجب ان نعرف كيف سنحقق ذلك الهدف.. رسم مبسط للنافذة او الصندوق الحوار ربما يساعد. اذا نظرنا للصندوق الحوارى نجد اننا يمكن ان نقسمه ل 5 اقسام. زر close سيكون له panel منفصلة. كل من الأجزاء هو كائن فريد من wx.Panel ومعا يكون لدينا 6 كائنات من wx.Panel اولهم هى الأب التى ستحوى باقى ال 5

ال 5 سيقعو فى عمود واحد.. لذا الpanel الأب ستحوى محجّم رأسى. -بعيدا عن المحجّم الرأسى.. سنستخدم wx.GridSizer –سنشرحة فى القسم القادم- ليس هناك الكثير حوله لأنه مباشر جدا

 sizer4 = wx.GridSizer(2, 2, 2, 2)
 sizer4.Add(wx.Button(panel4, -1, 'Find', size=(120, -1)))
 sizer4.Add(wx.Button(panel4, -1, 'Replace/Find', size=(120, -1)))
 sizer4.Add(wx.Button(panel4, -1, 'Replace', size=(120, -1)))
 sizer4.Add(wx.Button(panel4, -1, 'Replace All', size=(120, -1)))

فى مثالنا wx.GridSizer مفيد جدا .. لدينا 4 ازرار على panel معينة ونريد تقسيمهم فى خلايا شبكة “صفوف واعمدة” كل من تلك الخلايا سيكون لها نفس المساحة والعرض

ذلك المجّم هو جدول -شبكة “صفوف وأعمدة”- كل خليه منه ذات حجم ثابت

 wx.GridSizer(int rows=1, int cols=0, int vgap=0, int hgap=0)

المشيد يأخذ عدد الصفوف والأعمدة والمسافات الرأسية والأفقية بين الخلايا

فى مثالنا ننشئ هيكل آلة حاسبة

#!/usr/bin/python
 
# gridsizer.py
 
import wx
 
class GridSizer(wx.Frame):
    def __init__(self, parent, id, title):
        wx.Frame.__init__(self, parent, id, title, size=(300, 250))
 
 
        menubar = wx.MenuBar()
        file = wx.Menu()
        file.Append(1, '&Quit', 'Exit Calculator')
        menubar.Append(file, '&File')
        self.SetMenuBar(menubar)
 
        self.Bind(wx.EVT_MENU, self.OnClose, id=1)
 
        sizer = wx.BoxSizer(wx.VERTICAL)
        self.display = wx.TextCtrl(self, -1, '',  style=wx.TE_RIGHT)
        sizer.Add(self.display, 0, wx.EXPAND | wx.TOP | wx.BOTTOM, 4)
        gs = wx.GridSizer(4, 4, 3, 3)
 
        gs.AddMany( [(wx.Button(self, -1, 'Cls'), 0, wx.EXPAND),
            (wx.Button(self, -1, 'Bck'), 0, wx.EXPAND),
            (wx.StaticText(self, -1, ''), 0, wx.EXPAND),
            (wx.Button(self, -1, 'Close'), 0, wx.EXPAND),
            (wx.Button(self, -1, '7'), 0, wx.EXPAND),
            (wx.Button(self, -1, '8'), 0, wx.EXPAND),
            (wx.Button(self, -1, '9'), 0, wx.EXPAND),
            (wx.Button(self, -1, '/'), 0, wx.EXPAND),
            (wx.Button(self, -1, '4'), 0, wx.EXPAND),
            (wx.Button(self, -1, '5'), 0, wx.EXPAND),
            (wx.Button(self, -1, '6'), 0, wx.EXPAND),
            (wx.Button(self, -1, '*'), 0, wx.EXPAND),
            (wx.Button(self, -1, '1'), 0, wx.EXPAND),
            (wx.Button(self, -1, '2'), 0, wx.EXPAND),
            (wx.Button(self, -1, '3'), 0, wx.EXPAND),
            (wx.Button(self, -1, '-'), 0, wx.EXPAND),
            (wx.Button(self, -1, '0'), 0, wx.EXPAND),
            (wx.Button(self, -1, '.'), 0, wx.EXPAND),
            (wx.Button(self, -1, '='), 0, wx.EXPAND),
            (wx.Button(self, -1, '+'), 0, wx.EXPAND) ])
 
        sizer.Add(gs, 1, wx.EXPAND)
        self.SetSizer(sizer)
        self.Centre()
        self.Show(True)
 
    def OnClose(self, event):
        self.Close()
 
app = wx.App()
GridSizer(None, -1, 'GridSizer')
app.MainLoop()

لاحظ كيف وضعنا مسافة بين Bck و Close .. قمنا بوضع wx.StaticText فارغ

فى مثالنا استخدمنا الطريقة AddMany –وهى طريقة مريحة لإضافة مجموعة من الودجات مرة واحدة.

 AddMany(list items)

الودجات توضع فى الجدول بالترتيب.. الصف الأول يملء اولا ثم الثانى.. الخ.

This sizer is similar to wx.GridSizer. It does also lay out it's widgets in a two dimensional table. It adds some flexibility to it. wx.GridSizer cells are of the same size. All cells in wx.FlexGridSizer have the same height in a row. All cells have the same width in a column. But all rows and columns are not necessarily the same height or width.

 wx.FlexGridSizer(int rows=1, int cols=0, int vgap=0, int hgap=0)

rows and cols specify the number of rows and columns in a sizer. vgap and hgap add some space between widgets in both directions.

Many times developers have to develop dialogs for data input and modification. I find wx.FlexGridSizer suitable for such a task. A developer can easily set up a dialog window with this sizer. It is also possible to accomplish this with wx.GridSizer, but it would not look nice, because of the constraint that each cell has the same size.

#!/usr/bin/python
 
# flexgridsizer.py
 
import wx
 
class FlexGridSizer(wx.Frame):
    def __init__(self, parent, id, title):
        wx.Frame.__init__(self, parent, id, title, size=(290, 250))
 
        panel = wx.Panel(self, -1)
 
        hbox = wx.BoxSizer(wx.HORIZONTAL)
 
        fgs = wx.FlexGridSizer(3, 2, 9, 25)
 
        title = wx.StaticText(panel, -1, 'Title')
        author = wx.StaticText(panel, -1, 'Author')
        review = wx.StaticText(panel, -1, 'Review')
 
        tc1 = wx.TextCtrl(panel, -1)
        tc2 = wx.TextCtrl(panel, -1)
        tc3 = wx.TextCtrl(panel, -1, style=wx.TE_MULTILINE)
 
        fgs.AddMany([(title), (tc1, 1, wx.EXPAND), (author), (tc2, 1, wx.EXPAND),
            (review, 1, wx.EXPAND), (tc3, 1, wx.EXPAND)])
 
        fgs.AddGrowableRow(2, 1)
        fgs.AddGrowableCol(1, 1)
 
        hbox.Add(fgs, 1, wx.ALL | wx.EXPAND, 15)
        panel.SetSizer(hbox)
 
        self.Centre()
        self.Show(True)
 
app = wx.App()
FlexGridSizer(None, -1, 'FlexGridSizer')
app.MainLoop()

 hbox = wx.BoxSizer(wx.HORIZONTAL)
 ...
 hbox.Add(fgs, 1, wx.ALL | wx.EXPAND, 15)

We create a horizontal box sizer in order to put some space (15px) around the table of widgets.

 fgs.AddMany([(title), (tc1, 1, wx.EXPAND), (author), (tc2, 1, wx.EXPAND),
      (review, 1, wx.EXPAND), (tc3, 1, wx.EXPAND)])

We add widgets to the sizer with the AddMany() method. Both wx.FlexGridSizer and wx.GridSizer share this method.

 fgs.AddGrowableRow(2, 1)
 fgs.AddGrowableCol(1, 1)

We make the third row and second column growable. This way we let the text controls grow, when the window is resized. The first two text controls will grow in horizontal direction, the third one will grow in both direction. We must not forget to make the widgets expandable (wx.EXPAND) in order to make it really work.

The most complicated sizer in wxPython. Many programmer find it difficult to use. This kind of sizer is not typical only for wxPython. We can find it in other toolkits as well. There is no magic in using this sizer. Even though it is more complicated, it is certainly not rocket science. All we have to do is to create several layouts with it. Find all the quirks. Play with it a bit. There are more difficult things in programming. Believe me.

This sizer enables explicit positioning of items. Items can also optionally span more than one row and/or column. wx.GridBagSizer has a simple constructor.

 wx.GridBagSizer(integer vgap, integer hgap)

The vertical and the horizontal gap defines the space in pixels used among all children. We add items to the grid with the Add() method.

 Add(self, item, tuple pos, tuple span=wx.DefaultSpan, integer flag=0, integer border=0, userData=None)

Item is a widget that you insert into the grid. pos specifies the position in the virtual grid. The topleft cell has pos of (0, 0). span is an optional spanning of the widget. e.g. span of (3, 2) spans a widget across 3 rows and 2 columns. flag and border were discussed earlier by wx.BoxSizer.

The items in the grid can change their size or keep the default size, when the window is resized. If you want your items to grow and shrink, you can use these two methods.

 AddGrowableRow(integer row)
 AddGrowableCol(integer col)

The first example is intentionally a very simple one. So that it could be easily understood. There is no need to be afraid of wx.GridBagSizer. Once you understand it's logic, it is quite simple to use it. In our example, we will create a rename dialog. It will have one wx.StaticText, one wx.TextCtrl and two wx.Button-s.

#!/usr/bin/python
 
# rename.py
 
import wx
 
class Rename(wx.Frame):
    def __init__(self, parent, id, title):
        wx.Frame.__init__(self, parent, id, title, size=(320, 130))
 
        panel = wx.Panel(self, -1)
        sizer = wx.GridBagSizer(4, 4)
 
        text = wx.StaticText(panel, -1, 'Rename To')
        sizer.Add(text, (0, 0), flag=wx.TOP | wx.LEFT | wx.BOTTOM, border=5)
 
        tc = wx.TextCtrl(panel, -1)
        sizer.Add(tc, (1, 0), (1, 5), wx.EXPAND | wx.LEFT | wx.RIGHT, 5)
 
        buttonOk = wx.Button(panel, -1, 'Ok', size=(90, 28))
        buttonClose = wx.Button(panel, -1, 'Close', size=(90, 28))
        sizer.Add(buttonOk, (3, 3))
        sizer.Add(buttonClose, (3, 4), flag=wx.RIGHT | wx.BOTTOM, border=5)
 
        sizer.AddGrowableCol(1)
        sizer.AddGrowableRow(2)
        panel.SetSizerAndFit(sizer)
        self.Centre()
        self.Show(True)
 
 
app = wx.App()
Rename(None, -1, 'Rename Dialog')
app.MainLoop()

We must look at the dialog window as a one big grid table.

 text = wx.StaticText(panel, -1, 'Rename To')
 sizer.Add(text, (0, 0), flag=wx.TOP | wx.LEFT | wx.BOTTOM, border=5)

The text 'Rename to' goes to the left upper corner. So we specify the (0, 0) position. Plus we add some space to the bottom, left and bottom.

 tc = wx.TextCtrl(panel, -1)
 sizer.Add(tc, (1, 0), (1, 5), wx.EXPAND | wx.LEFT | wx.RIGHT, 5)

The wx.TextCtrl goes to the beginning of the second row (1, 0). Remember, that we count from zero. It expands 1 row and 5 columns. (1, 5). Plus we put 5 pixels of space to the left and to the right of the widget.

 sizer.Add(buttonOk, (3, 3))
 sizer.Add(buttonClose, (3, 4), flag=wx.RIGHT | wx.BOTTOM, border=5)

We put two buttons into the fourth row. The third row is left empty, so that we have some space between the wx.TextCtrl and the buttons. We put the ok button into the fourth column and the close button into the fifth one. Notice that once we apply some space to one widget, it is applied to the whole row. That's why I did not specify bottom space for the ok button. A careful reader might notice, that we did not specify any space between the two buttons. e.g. we did not put any space to the right of the ok button, or to the right of the close button. In the constructor of the wx.GridBagSizer, we put some space between all widgets. So there is some space already.

 sizer.AddGrowableCol(1)
 sizer.AddGrowableRow(2)

The last thing we must do, is to make our dialog resizable. We make the second column and the third row growable. Now we can expand or shrink our window. Try to comment those two lines and see what happens.

The next example will be a bit more complicated. We will create an Open Resource window. This example will show a layout of a very handy dialog which you can find in Eclipse IDE.

#!/usr/bin/python
 
# openresource.py
 
import wx
 
class OpenResource(wx.Frame):
    def __init__(self, parent, id, title):
        wx.Frame.__init__(self, parent, id, title, size=(400, 500))
 
        panel = wx.Panel(self, -1)
        sizer = wx.GridBagSizer(4, 4)
 
        text1 = wx.StaticText(panel, -1, 'Select a resource to open')
        sizer.Add(text1, (0, 0), flag=wx.TOP | wx.LEFT | wx.BOTTOM, border=5)
 
        tc = wx.TextCtrl(panel, -1)
        sizer.Add(tc, (1, 0), (1, 3), wx.EXPAND | wx.LEFT | wx.RIGHT, 5)
 
        text2 = wx.StaticText(panel, -1, 'Matching resources')
        sizer.Add(text2, (2, 0), flag=wx.TOP | wx.LEFT | wx.BOTTOM, border=5)
 
        list1 = wx.ListBox(panel, -1, style=wx.LB_ALWAYS_SB)
        sizer.Add(list1, (3, 0), (5, 3), wx.EXPAND | wx.LEFT | wx.RIGHT, 5)
 
        text3 = wx.StaticText(panel, -1, 'In Folders')
        sizer.Add(text3, (8, 0), flag=wx.TOP | wx.LEFT | wx.BOTTOM, border=5)
 
        list2 = wx.ListBox(panel, -1, style=wx.LB_ALWAYS_SB)
        sizer.Add(list2, (9, 0), (3, 3), wx.EXPAND | wx.LEFT | wx.RIGHT, 5)
 
        cb = wx.CheckBox(panel, -1, 'Show derived resources')
        sizer.Add(cb, (12, 0), flag=wx.LEFT | wx.RIGHT, border=5)
 
        buttonOk = wx.Button(panel, -1, 'OK', size=(90, 28))
        buttonCancel = wx.Button(panel, -1, 'Cancel', size=(90, 28))
        sizer.Add(buttonOk, (14, 1))
        sizer.Add(buttonCancel, (14, 2), flag=wx.RIGHT | wx.BOTTOM, border=5)
 
        help = wx.BitmapButton(panel, -1, wx.Bitmap('icons/help16.png'), style=wx.NO_BORDER)
        sizer.Add(help, (14, 0), flag=wx.LEFT, border=5)
 
        sizer.AddGrowableCol(0)
        sizer.AddGrowableRow(3)
        sizer.AddGrowableRow(9)
        sizer.SetEmptyCellSize((5, 5))
        panel.SetSizer(sizer)
 
        self.Centre()
        self.Show(True)
 
app = wx.App()
OpenResource(None, -1, 'Open Resource')
app.MainLoop()

 sizer.AddGrowableRow(3)
 sizer.AddGrowableRow(9)

We want to have both wx.ListBox-es growable. So we make the first row of each wx.ListBox growable.

newclass.py example is a type of a window, that I found in JDeveloper. It is a dialog window for creating a new class in Java.

#!/usr/bin/python
 
# newclass.py
 
import wx
 
class NewClass(wx.Frame):
    def __init__(self, parent, id, title):
        wx.Frame.__init__(self, parent, id, title)
 
        panel = wx.Panel(self, -1)
        sizer = wx.GridBagSizer(0, 0)
 
        text1 = wx.StaticText(panel, -1, 'Java Class')
        sizer.Add(text1, (0, 0), flag=wx.TOP | wx.LEFT | wx.BOTTOM, border=15)
 
        icon = wx.StaticBitmap(panel, -1, wx.Bitmap('icons/exec.png'))
        sizer.Add(icon, (0, 4), flag=wx.LEFT,  border=45)
 
        line = wx.StaticLine(panel, -1 )
        sizer.Add(line, (1, 0), (1, 5), wx.TOP | wx.EXPAND, -15)
 
        text2 = wx.StaticText(panel, -1, 'Name')
        sizer.Add(text2, (2, 0), flag=wx.LEFT, border=10)
 
        tc1 = wx.TextCtrl(panel, -1, size=(-1, 30))
        sizer.Add(tc1, (2, 1), (1, 3), wx.TOP | wx.EXPAND, -5)
 
        text3 = wx.StaticText(panel, -1, 'Package')
        sizer.Add(text3, (3, 0), flag= wx.LEFT | wx.TOP, border=10)
 
        tc2 = wx.TextCtrl(panel, -1)
        sizer.Add(tc2, (3, 1), (1, 3), wx.TOP | wx.EXPAND, 5)
 
        button1 = wx.Button(panel, -1, 'Browse...', size=(-1, 30))
        sizer.Add(button1, (3, 4), (1, 1), wx.TOP | wx.LEFT | wx.RIGHT , 5)
 
        text4 = wx.StaticText(panel, -1, 'Extends')
        sizer.Add(text4, (4, 0), flag=wx.TOP | wx.LEFT, border=10)
 
        combo = wx.ComboBox(panel, -1, )
        sizer.Add(combo, (4, 1), (1, 3), wx.TOP | wx.EXPAND,  5)
 
        button2 = wx.Button(panel, -1, 'Browse...', size=(-1, 30))
        sizer.Add(button2, (4, 4), (1, 1), wx.TOP | wx.LEFT | wx.RIGHT , 5)
 
        sb = wx.StaticBox(panel, -1, 'Optional Attributes')
        boxsizer = wx.StaticBoxSizer(sb, wx.VERTICAL)
        boxsizer.Add(wx.CheckBox(panel, -1, 'Public'), 0, wx.LEFT | wx.TOP, 5)
        boxsizer.Add(wx.CheckBox(panel, -1, 'Generate Default Constructor'), 0,  wx.LEFT, 5)
        boxsizer.Add(wx.CheckBox(panel, -1, 'Generate Main Method'), 0, wx.LEFT | wx.BOTTOM, 5)
        sizer.Add(boxsizer, (5, 0), (1, 5), wx.EXPAND | wx.TOP | wx.LEFT | wx.RIGHT , 10)
        button3 = wx.Button(panel, -1, 'Help', size=(-1, 30))
        sizer.Add(button3, (7, 0), (1, 1),  wx.LEFT, 10)
 
        button4 = wx.Button(panel, -1, 'Ok', size=(-1, 30))
        sizer.Add(button4, (7, 3), (1, 1),  wx.LEFT, 10)
 
        button5 = wx.Button(panel, -1, 'Cancel', size=(-1, 30))
        sizer.Add(button5, (7, 4), (1, 1),  wx.LEFT | wx.BOTTOM | wx.RIGHT, 10)
 
        sizer.AddGrowableCol(2)
        sizer.Fit(self)
        panel.SetSizer(sizer)
        self.Centre()
        self.Show(True)
 
 
app = wx.App()
NewClass(None, -1, 'Create Java Class')
app.MainLoop()

 line = wx.StaticLine(panel, -1 )
 sizer.Add(line, (1, 0), (1, 5), wx.TOP | wx.EXPAND, -15)

Notice, that we have used negative number for setting the top border. We could use wx.BOTTOM with border 15. We would get the same result.

 icon = wx.StaticBitmap(panel, -1, wx.Bitmap('icons/exec.png'))
 sizer.Add(icon, (0, 4), flag=wx.LEFT,  border=45)

We put an wx.StaticBitmap into the first row of the grid. We place it on the right side of the row. By using images we can make our applications look better.

sizer.Fit(self)

We did not set the size of the window explicitly. If we call Fit() method, the size of the window will exactly cover all widgets available. Try to comment this line and see what happens.

</html>

الأحداث هى جزء هام في أي تطبيق رسومى، وهى تحدث من المستخدم او من النظام. عندما نستدعى MainLoop‎ يدخل التطبيق فى الحلقة الأساسية main loop. وهي بدورها تستخرج الأحداث وترسلها إلى الكائنات.

Events are integral part of every GUI application. All GUI applications are event-driven. An application reacts to different event types which are generated during its life. Events are generated mainly by the user of an application. But they can be generated by other means as well. e.g. internet connection, window manager, timer. So when we call MainLoop() method, our application waits for events to be generated. The MainLoop() method ends when we exit the application.

الحدث هو جزء من المعلومات على مستوى التطبيق حلقة الأحداث تنتظر لحدوث حدث او وصول رسالة للبرنامج ليتم معالجته التوزيع عملية بربط الأحداث بمعالجى الأحداث معالج الحدث هى طريقة نقوم بتعريفها للتفاعل مع حدوث حدث معين كائن الحدث هو كائن يرتبط بالحدث وغالبا هو نافذة نوع الحدث هو حدث فريد يتم توليده رابط الحدث هو كائن يقوم بربط الحدث بمعالج الحدث

فى الجزء التالى سنتكلم عن حدث بسيط هو حدث الإنتقال move

حدث الإنتقال move event ينتج عندما ننقل نافذة لموضع جديد وهو من النوع wx.MoveEvent ورابط الحدث له هو wx.EVT_MOVE

#!/usr/bin/python
 
# moveevent.py
 
import wx
 
class MoveEvent(wx.Frame):
    def __init__(self, parent, id, title):
        wx.Frame.__init__(self, parent, id, title, size=(250, 180))
 
        wx.StaticText(self, -1, 'x:', (10,10))
        wx.StaticText(self, -1, 'y:', (10,30))
        self.st1 = wx.StaticText(self, -1, '', (30, 10))
        self.st2 = wx.StaticText(self, -1, '', (30, 30))
 
        self.Bind(wx.EVT_MOVE, self.OnMove)
 
        self.Centre()
        self.Show(True)
 
    def OnMove(self, event):
        x, y = event.GetPosition()
        self.st1.SetLabel(str(x))
        self.st2.SetLabel(str(y))
 
 
app = wx.App()
MoveEvent(None, -1, 'move event')
app.MainLoop()

المثال يعرض الموضع الحالى للنافذة.

 self.Bind(wx.EVT_MOVE, self.OnMove)

Here we bind the wx.EVT_MOVE event binder to the OnMove() method.

 def OnMove(self, event):
     x, y = event.GetPosition()

المعامل event فى الطريقة OnMove هو كائن ينتمى لنوع حدث معين وفى حالتنا هذه هو wx.MoveEvent ويحمل هذا الكائن معلومات عن الحدث مثل الموضع وكائن الحدث –فى حالتنا هو wx.Frame– للحصول على الموضع الحالى نستدعى الطريقة GetPosition للحدث

العمل مع الأحداث مباشر فى wxPython ويتم على 3 خطوات

1- التعرف على اسم رابط الحدث wx.EVT_SIZE او wx.EVT_CLOSE ..الخ 2-انشاء معالج الحدث ليتم استدعاءه عند حدوث الحدث 3- ربط الحدث بمعالج الحدث

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

 Bind(event, handler, source=None, id=wx.ID_ANY, id2=wx.ID_ANY)

حيث: * ال event هو احد كائنات EVT_* لتحديد نوع الحدث * ال handler وهو المعالج للحدث * ال source للتفريق بين الحدث من الودجات المختلفة * ال id يستخدم عندما يكون لدينا عدة ازرار، عناصر قوائم .. الخ للتفريق بينهم

الطريقة Bind معرفة فى الصف EvtHandler وهو الصف اللذى ترث منه wx.Window لاحظ ان wx.Window هى الصف الأب لمعظم الويدجات

هناك ايضا عملية عكسية عن طريق الطريقة Unbind ولها نفس معاملات Bind

• event is one of EVT_* objects. It specifies the type of the event.
• handler is an object to be called. In other words, it is a method, that a programmer binds to an event.
• source parameter is used when we want to differentiate between the same event type from different widgets.
• id parameter is used, when we have multiple buttons, menu items etc. The id is used to differentiate among them.
• id2 is used when it is desirable to bind a handler to a range of ids, such as with EVT_MENU_RANGE.

Note that method Bind() is defined in class EvtHandler. It is the class, from which wx.Window inherits. wx.Window is a base class for most widgets in wxPython. There is also a reverse process. If we want to unbind a method from an event, we call the Unbind() method. It has the same paremeters as the above one.

فى بعض الأحيان نريد ايقاف معالجة حدث معين. يتم ذلك عن طريق استدعاء الطريقة Veto

#!/usr/bin/python
 
# veto.py
 
import wx
 
class Veto(wx.Frame):
    def __init__(self, parent, id, title):
        wx.Frame.__init__(self, parent, id, title, size=(250, 200))
 
 
        self.Bind(wx.EVT_CLOSE, self.OnClose)
 
        self.Centre()
        self.Show(True)
 
    def OnClose(self, event):
 
        dial = wx.MessageDialog(None, 'Are you sure to quit?', 'Question',
            wx.YES_NO | wx.NO_DEFAULT | wx.ICON_QUESTION)
        ret = dial.ShowModal()
        if ret == wx.ID_YES:
            self.Destroy()
        else:
            event.Veto()
 
 
app = wx.App()
Veto(None, -1, 'Veto')
app.MainLoop()

فى مثالنا نعالج حدث من النوع wx.CloseEvent ويحدث عندما نغلق النافذة سواء بالضغط على علامة X فى شريط العنوان او بأى طريقة اخرى. فى كثير من التطبيقات نرغب فى منع اغلاق النافذة بالخطأ. لذا يجب علينا القيام ببعض التعديلات ، وذلك عن طريق ربط الحدث wx.EVT_CLOSE

 dial = wx.MessageDialog(None, 'Are you sure to quit?', 'Question',
     wx.YES_NO | wx.NO_DEFAULT | wx.ICON_QUESTION)
 ret = dial.ShowModal()

عند محاولة الإغلاق نعرض صندوق استفهامى

 if ret == wx.ID_YES:
     self.Destroy()
 else:
     event.Veto()

وبناء على القيمة العائدة نحدد اما ان ندمر النافذة او نوقف معالجة الحدث.

لاحظ لإعلاق النافذةيجب علينا استدعاء Destroy

لاحظ ان بإستدعاء الطريقة Close سندخل فى حلقة لانهائية :)

هناك نوعين من الأحداث، احداث اساسية او اولية واحداث الأوامر وبيختلفا فى عملية الإنتشار

*انتشار الحدث* انتقال الأحداث من الأبناء للأباء ثم للأجداد.. الخ الأحداث الأوليه لاتنتشر بعكس احداث الأوامر. على سبيل المثال الحدث wx.CloseEvent هو حدث اولى لاينتشر.. ليس منطقيا ان ينتشر هذا الأحدث للأباء اليس كذلك ؟

افتراضيا، عند معالجة حدث ما فإنه يتوقف عن الإنتشار، ولإكمال عملية الإنتشار يجب استدعاء الطريقة Skip

#!/usr/bin/python
 
# propagate.py
 
import wx
 
 
class MyPanel(wx.Panel):
    def __init__(self, parent, id):
        wx.Panel.__init__(self, parent, id)
 
        self.Bind(wx.EVT_BUTTON, self.OnClicked)
 
    def OnClicked(self, event):
        print 'event reached panel class'
        event.Skip()
 
 
class MyButton(wx.Button):
    def __init__(self, parent, id, label, pos):
        wx.Button.__init__(self, parent, id, label, pos)
 
        self.Bind(wx.EVT_BUTTON, self.OnClicked)
 
    def OnClicked(self, event):
        print 'event reached button class'
        event.Skip()
 
 
class Propagate(wx.Frame):
    def __init__(self, parent, id, title):
        wx.Frame.__init__(self, parent, id, title, size=(250, 150))
 
        panel = MyPanel(self, -1)
 
        MyButton(panel, -1, 'Ok', (15, 15))
 
        self.Bind(wx.EVT_BUTTON, self.OnClicked)
 
        self.Centre()
        self.Show(True)
 
    def OnClicked(self, event):
        print 'event reached frame class'
        event.Skip()
 
 
app = wx.App()
Propagate(None, -1, 'Propagate')
app.MainLoop()

فى مثالنا لدينا زر على بانل موضوعة على frame

قمنا بتعريف معالج لكل الودجات

 event reached button class
 event reached panel class
 event reached frame class

لتفهم هذا، عندما نضغط على الزر فإن الحدث ينتقل من الزر الى البانل ثم الى ال frame

جرب حذف بعض استدعاءات Skip ولاحظ ماذا سيحدث

Window identifiers are integers that uniquely determine the window identity in the event system. There are three ways to create window id's.

• let the system automatically create an id
• use standard identifiers
• create your own id

Each widget has an id parameter. This is a unique number in the event system. If we work with multiple widgets, we must differantiate among them.

 wx.Button(parent, -1)
 wx.Button(parent, wx.ID_ANY)

If we provide -1 or wx.ID_ANY for the id parameter, we let the wxPython automatically create an id for us. The automatically created id's are always negative, whereas user specified id's must always be positive. We usually use this option when we do not need to change the widget state. For example a static text, that will never be changed during the life of the application. We can still get the id, if we want. There is a method GetId(), which will determine the id for us.

#!/usr/bin/python
 
# automaticids.py
 
import wx
 
class AuIds(wx.Frame):
    def __init__(self, parent, id, title):
        wx.Frame.__init__(self, parent, id, title, size=(170, 100))
 
        panel = wx.Panel(self, -1)
        exit = wx.Button(panel, -1, 'Exit', (10, 10))
 
        self.Bind(wx.EVT_BUTTON,  self.OnExit, id=exit.GetId())
 
        self.Centre()
        self.Show(True)
 
    def OnExit(self, event):
        self.Close()
 
 
app = wx.App()
AuIds(None, -1, '')
app.MainLoop()

In this example, we do not care about the actual id value.

 self.Bind(wx.EVT_BUTTON,  self.OnExit, id=exit.GetId())

We get the automatically generated id by calling the GetId() method.

Standard identifiers should be used whenever possible. The identifiers can provide some standard graphics or behaviour on some platforms.

#!/usr/bin/python
 
# identifiers.py
 
import wx
 
class Identifiers(wx.Frame):
    def __init__(self, parent, id, title):
        wx.Frame.__init__(self, parent, id, title, size=(200, 150))
 
        panel = wx.Panel(self, -1)
        grid = wx.GridSizer(3, 2)
 
        grid.AddMany([(wx.Button(panel, wx.ID_CANCEL), 0, wx.TOP | wx.LEFT, 9),
            (wx.Button(panel, wx.ID_DELETE), 0, wx.TOP, 9),
            (wx.Button(panel, wx.ID_SAVE), 0, wx.LEFT, 9),
            (wx.Button(panel, wx.ID_EXIT)),
            (wx.Button(panel, wx.ID_STOP), 0, wx.LEFT, 9),
            (wx.Button(panel, wx.ID_NEW))])
 
 
        self.Bind(wx.EVT_BUTTON, self.OnQuit, id=wx.ID_EXIT)
 
        panel.SetSizer(grid)
        self.Centre()
        self.Show(True)
 
    def OnQuit(self, event):
        self.Close()
 
app = wx.App()
Identifiers(None, -1, '')
app.MainLoop()

In our example we use standard identifiers on buttons. On linux, the buttons have small icons.

The last option is to use own identifiers. We define our own global ids.

The focus indicates the currently selected widget in application. The text entered from the keyboard or pasted from the clipboard is sent to the widget, which has the focus. There are two event types concerning focus. The wx.EVT_SET_FOCUS event, which is generated when a widget receives focus. The wx.EVT_KILL_FOCUS is generated, when the widget looses focus. The focus is changed by clicking or by a keybord key. Usually Tab/Shift+Tab.

#!/usr/bin/python
 
# focusevent.py
 
import wx
 
 
class MyWindow(wx.Panel):
    def __init__(self, parent):
        wx.Panel.__init__(self, parent, -1)
 
        self.color = '#b3b3b3'
 
        self.Bind(wx.EVT_PAINT, self.OnPaint)
        self.Bind(wx.EVT_SIZE, self.OnSize)
        self.Bind(wx.EVT_SET_FOCUS, self.OnSetFocus)
        self.Bind(wx.EVT_KILL_FOCUS, self.OnKillFocus)
 
    def OnPaint(self, event):
        dc = wx.PaintDC(self)
 
        dc.SetPen(wx.Pen(self.color))
        x, y = self.GetSize()
        dc.DrawRectangle(0, 0, x, y)
 
    def OnSize(self, event):
        self.Refresh()
 
    def OnSetFocus(self, event):
        self.color = '#0099f7'
        self.Refresh()
 
    def OnKillFocus(self, event):
        self.color = '#b3b3b3'
        self.Refresh()
 
class FocusEvent(wx.Frame):
    def __init__(self, parent, id, title):
        wx.Frame.__init__(self, parent, id, title, size=(350, 250))
 
        grid = wx.GridSizer(2, 2, 10, 10)
        grid.AddMany([(MyWindow(self), 1, wx.EXPAND|wx.TOP|wx.LEFT,9),
            (MyWindow(self), 1, wx.EXPAND|wx.TOP|wx.RIGHT, 9), 
            (MyWindow(self), 1, wx.EXPAND|wx.BOTTOM|wx.LEFT, 9), 
            (MyWindow(self), 1, wx.EXPAND|wx.BOTTOM|wx.RIGHT, 9)])
 
 
        self.SetSizer(grid)
        self.Centre()
        self.Show(True)
 
app = wx.App()
FocusEvent(None, -1, 'focus event')
app.MainLoop()

In our example, we have four panels. The panel with focus is highlighted.

The following code is an example of a wx.ScrollWinEvent. This event is generated, when we click on a built in Scrollbar. Built-in Scrollbar is activated with the SetScrollbar() method call. For stand-alone Scrollbars, there is another event type, namely wx.ScrollEvent.

#!/usr/bin/python
 
# myscrollwinevent.py
 
import wx
 
class ScrollWinEvent(wx.Frame):
    def __init__(self, parent, id, title):
        wx.Frame.__init__(self, parent, id, title)
        panel = wx.Panel(self, -1)
        self.st = wx.StaticText(panel, -1, '0', (30,0))
        panel.Bind(wx.EVT_SCROLLWIN, self.OnScroll)
        panel.SetScrollbar(wx.VERTICAL, 0, 6, 50);
        self.Centre()
        self.Show(True)
 
    def OnScroll(self, evt):
        y = evt.GetPosition()
        self.st.SetLabel(str(y))
 
app = wx.App()
ScrollWinEvent(None, -1, 'scrollwinevent.py')
app.MainLoop()