سلسلة البرمجة الرسومية بواسطة باي كيوت PyQt4 للمبتدئين

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

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

إن كنت من مستخدمي جنو/لينوكس إستخدم مدير الحزم لتثبيت PyQt ، Qt، و محرر IDLE، أما بالنسبة لبايثون فأغلب الظن أنه مثبت مسبقا.

و إن كنت من مستخدمي ويندوز فقم بتحمل بايثون من هنا و باي كيوت من هنا.

في الوقت الذي تنتظر فيه إنتهاء التحميل، أفضل أن تحظر مشروبك المنبه المفضل لذيك أو تضع قطعة أو قطعتين من الشوكلاتة في فمك.

هنالك ملاحظة بسيطة و هي أن بايثون 2.6 و مكتبة PyQt المتوافقة معها يحصلان على تحديثات تصحيحية دورية بإستمرار لذلك إن أصبح رابط التحميل لا يعمل يكفي أن تزور صفحة التحميل لكل من بايثون و باي كيوت و تقوم بتحميلهما.

بعد التحميل، قم بتثبيت بايثون أولا ثم باي كيوت ثانيا.

جيد، إسترح قليلا فأنا أعرف أنك لا تعرف شيئا عنهما و لا حتى أنا، إلا بعض المفاهيم المبدئية. سنتعلم معا :)

1. بعد الإنتهاء من التثبيت قم بتشغيل Qt Designer و اختر إنشاء Dialog without Buttons، بعدها ستحصل على واجهة رسومية فارغة.


2. قم بسحب Line Edit فوق الواجهة، ثم قم بتغير خاصية الإسم objectName إلى value1 من خلال شريط/نافدة Property Editor كما في الصورة.

ملاحظة سريعة: Line Edit و كل الأشكال المتواجدة فوق Qt Designer تسمى في معجم المبرمجين بالكائنات أو كائن، و في باي كيوت تحديدا يسمى ب وِيجِدْ (Widget). لتسهيل هذه التدوينة سنسمي هذه الأشكال بالكائنات الرسومية.


3. الآن سنضيف كائنين رسوميين من نوع Line Edit على الواجهة، تماما مثلما في الصورة. ثم نسمي الثاني ب value2 في خاصية objectName و الثالث ب valresult في objectName كذلك.


الآن، من سيستخدم هذه الآلة الحاسبة؟ أنت أو أي مستخدم آخر. إذا فكيف له أن يعرف مالذي يجب أن يُكتب في السطر الأول و الثاني و الثالث؟ علينا بتقديم لفتة إلى المعلومة/مات المراد إدخالها.

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


5. الآن لا نرى مكتوبا إلى TextLabel و هذا ليفيد المستخدم بشيء. علينا كتابة نص دو معنى. لفعل ذلك قم بتغير خاصية text من شريط/نافدة Property Editor. النص الأول سيكون First Value و الثاني Second Value و الثالث Result، تماما كما في الصورة.


6. حان الوقت لإضافة الأزرار. قم سحب الكائن الرسومي Push Button على الواجهة. ثم قم بتغير إسمه من خلال خاصية objectName إلى c0. ثم بعد ذلك تغيير النص الذي يظهر للمستخدم من خلال خاصية text تماما كما في الصورة.


إن تساءلت كيف غيرت شكله إلى مربع، فما عليك إلا تمديده من خلال المربعات الصغيرة التي تظهر عند الجوانب بعد تحديد الزر بنقرة (mouse click)

7. ستكرر نفس العملية بالنسبة لباقي الأزرار التسع. حيث ستضيف الزر، ثم تغير إسم الكائن إلى c1, c2 و هكذا، ثم تغير نص كل زر إلى الرقم الذي يعبر عنه مثلا c1 مع 1 و c2 مع 2 و هكذا. ستكون النتيجة كما في الصورة التالية.


8. الآن سنضيف أزرار للوظائف. بحيث سنضيف:
زر ل "يساوي"، خاصية text هي = و خاصية objectName هي opequal
زر ل "الجمع"، خاصية text هي + و خاصية objectName هي opplus
زر ل "الطرح"، خاصية text هي - و خاصية objectName هي opminus
زر ل "الضرب"، خاصية text هي x و خاصية objectName هي opmulti
زر ل "القسمة"، خاصية text هي / و خاصية objectName هي opdiv
زر ل "الفاصلة"، خاصية text هي . و خاصية objectName هي opdot
زر ل "المسح"، خاصية text هي C و خاصية objectName هي opclear

تماما مثلما في الصورة.


إنتهينا من تصميم الواجهة الرسومية لآلتنا الحاسبة، الآن قم بحفظ الواجهة تحت إسم PyCalc.ui و سأكمل في تدوينة لاحقة.