عملي -1- تخطيط واجهة رسومية بسيطة

في هذا القسم ...

"فتح واجهة رسومية جديدة في الـ GUIDE " "ضبط قياس النافذة" "إضافة العناصر إلى الواجهة الرسومية" "حفظ الواجهة"

تمرين عملي :
سنقوم بإعداد الواجهة الرسومية البسيطة التالية :

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

إبدأ العمل بفتح الـ guide   ، وذلك بكتابة guide في الـ commandwindow ،ستظهر لك النافذة GUIDE Quick Start كالتي تبدو بالشكل التالي :

قم بإختيار  Blank GUI (Default)  ،ثم OK  ، ليفتح لك عندها محرر تخطيط الواجهة  الرسومية

 يمكنك تغيير طريقة عرض الأدوات الموجودة في لوحة الأدوات على يسار الـ guide   ،حيث إن إعدادات خصائص الـ guide تتيح لك عرض هذه الادوات مع أسماء الأدوات فقط أو مجرد أيقونتها .

لتغيير طريقة العرض : إختر  Preferencesمن القائمة File ، ثم إختر Guide > Show names in component palette

ضبط حجم نافذة الواجهة الرسومية GUI في الـ GUIDE :

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

إضافة العناصر (المكونات) إلى الواجهة الرسومية  :

- قم بإضافة 3 أزرار ضغطpush button  إلى واجهتك،وذلك بإختيار الأداة push button  من لوح الأدوات الموجود على يسار المحرر،ثم السحب (إلى المساحة اامخططة كالشبكة) والإفلات ،قم بإضافة الثلاثة أزرار بنفس الطريقة.

- أيضاً قم بإضافة العناصر التالية :

1. نص ستاتيكي  static text
2. قائمة منسدلة  pop-uo menu
3. محاور axes

رتبهم وأعد تحجيمهم لتبدو الواجهة  كما في الشكل :

محاذاة المكونات :

- إذا كان لديك عدة مكونات متشابهة بالحجم،وتريد أن تجلعها تقع على إستقامة واحدة أو ترتيب معين ،بإمكانك إستخدام أداة المحاذاة لإعادة ترتيب تلك المكونات .- لمحاذاة أزرار الضغط الثلاثة السابقة :

• قم بتحديد أزرار الضغط الثلاثة ،وذلك بالضغط على Ctrl والنقر عليهم واحد تلو الآخر،فيتم تحديدهم جميعاً.
• ثم قم بإختيار Align Objects  من القائمة Tools .
• قم بالتغيير في إعدادات أداة المحاذاة ،حتى تبدو الأزرار كما في الشكل التالي :

1. - محاذاة لليسار أو للوسط في الإتجاه الأفقي.
2. المسافة الفاصلة بين زر وآخر 20 pixels  في الإتجاه العمودي .

إضغط OK ،واجهتك الرسومية GUI الآن ستبدو هكذا :

إضافة نص إلى المكونات:

عند إنشاء المكونات(زر ضغط،قائمة منسدلة،نص ستاتيكي)،يتم وضع تسمية إفتراضية لكل مكون،وتكون التسمية مثلا: Push Button 1 ،بإمكانك تغيير إسم الكائن لإسم خاص بواجهتك بحيث يوضح وظيفته .

لتغيير التسمية :

قم بفتح Inspector وذلك بالنقر نقراً مزدوجاً على الكائن،أو بالنقر بزر الفأرة الأيمن وإختيار Property Inspector من القائمة المنسدلة

وهنا قم بتغيير قيمة الحقل String لتغيير تسمية الكائن.

كما نستخدم String أيضاً لإضافة الخيارات التي تحويها القائمة المنسدلة pop-up menu

في مثالنا هذا : قم بإضافة الخيارات التالية في الـ string:
Peaks ,Membrance and Since.

حفظ الواجهة الرسومية GUI التي صممتها :

وكما ذكرنا سابقاً بأنه عندما تقوم بحفظ واجهتك الرسومية،GUIDE سيقوم بتوليد ملفين: FIG-file and a code file.
1- لحفظ وتشغيل واجهتك ،قم بالنقر على Run من قائمة الأدوات Tools.

2- ستظهر لك الرسالة التالية ، إضغط  Yes للمتابعة .

Guide سيفتح لك مربع الحوار Save as ،قم بوضع تسمية للملف،وتحديد المسار الذي تود حفظ واجهتك فيه.

3- إذا كان هذا المجلد الذي إخترته لحفظ واجهتك فيه،غير موجود في مسارات المجلدات الموجودة في الماتلاب MATLAB path  ،سيظهر لك مربع الحوار التالي، ليعطيك خيار تغيير مسار المجلد،أو لإضافة هذا المجلد إلى MATLAB path .

4- guide سيقوم بحفظ الملفين لواجهتك : simple_gui.fig والملف   simple_gui.m ،ويقوم بتشغيل الواجهة وفتح ملف التعليمات البرمجية code file .

ملاحظة : يمكنك تشغيل واجهتك بدون فتح الـ guide ، وذلك بأن تكتب في command window مباشرة إسم واجهتك :
simple_gui
أو run simple_gui

ستظهر الواجهة التالية :  

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