واجـهـات الــمـسـتـخـدم الـرسـومـيـة : إنشاء الواجهة

تـصـمـيـم الـواجـهـات الـرسـومـية بـرمـجـيـاً

Graphic User Interface

إنشاء GUI

نوضح فيما يلي كيف يمكنك كتابة البرنامج النصي الذي ينشئ البرنامج النصي الذي واجهة المستخدم GUI الموضحة في الشكل المبين .

إن كافة الكائنات الموجودة في البرنامج المبينة تم التعرف عليها في الدرس الأول , إن واجهة المثال تتضمن :

- جملة محاور axes.

- قائمة منبثقة pop-up menu تسرد مجموعات مختلفة من المعطيات و التي تقابل توابع في MATLAB هي sine , membrane , peaks.

- نص استاتيكي من أجل وضع تسمية للقائمة المنبثقة.

- ثلاثة أزرار ضغط تعطي ثلاثة أنواع مختلفة من الأشكال contour , mesh , surface.

من أجل استخدام هذا المثال (GUI) فإن المستخدم يختار مجموعة من المعطيات من القائمة المنبثقة , وعندها فإنه ينقر أحد من أزرار ضغط نوع الرسم , إن النقر على الزر يشمل تنفيذ الاستدعاء الذي يرسم المعطيات المختارة ضمن جملة المحاور.

أهـم الـتـوابـع المسـتـخـدمة

يوفر برنامج الماتلاب مجموعة من التوابع لإنشاء وبناء واجهات المستخدم الرسومية. يوضح الجدول التالي أهم التوابع التي تحتاجها لبناء المثال المدروس.

الـتـابـع	الـوصـف
Align	يحاذي محاور و عناصر التحكم لواجهة المستخدم
Axes	ينشئ عناصر محاور
Figure	ينشئ عناصر الشكل حيث أن GUI هي عنصر شكل
Movegui	يحرك شكل GUI إلى مكان محدد على الشاشة
Uicontrol	ينشئ عناصر التحكم بواجهة المستخدم مثل أزرار الضغط , نص ستاتيكي , و القوائم المنبثقة

3.7 إنـشـاء مـلـف MATLAB لواجهة المستخدم الرسومية

ابدأ بإنشاء و بناء ملف M-file للواجهة المدروسة .

1. على موجه MATLAB , اكتب edit فيقوم الماتلاب بفتح المحرر.

2. اكتب التعليمات التالية. تعليمة التابع هذه هي السطر الأول من الملف function simple_gui .

3. أضف هذه التعليقات إلى ملف MATLAB بعد تعليمة التابع. سوف تُعرض هذه التعليقات في سطر الأمر استجابة للأمر help. و يجب أن تتبع بسطر فارغ.

function simple_gui_test

% SIMPLE_GUI Select a data set from the pop-up menu, then

% click one of the plot-type push buttons. clicking the button

% plots the selected data in the axes

end

نحتاج هنا لكتابة التعلمية end بسبب أن المثال مكتوب باستخدام التوابع المتداخلة (nested functions).

4. خزن الملف على مجلدك الحالي أو في المكان الذي فيه مسار ملفات MATLAB الخاصة بك. الخطوة التالية ستكون تخطيط الواجهة GUI البسيطة .

تـخـطـيـط GUI
يتم تخطيط واجهة المستخدم الرسومية على مرحلتين :

- بناء الشكل .

- إضافة المكونات.

- بناء الشكل (تـصـمـيـم الـواجـهـة) :
في برنامج الماتلاب , فإن الواجهة عبارة عن شكل. و بالتالي فإن الخطوة الأولى هي أن تنشئ الشكل و نوضعه على الشاشة. إنها أيضاً تجعل GUI غير مرئية و لذا فإن مستخدم GUI لا يستطيع أن يرى المكونات المضافة أو المهيأة. عندما يتم إضافة جميع المكونات على الواجهة و تكون مهيأة , فإن المثال سيجعلها مرئية.

% Initialize and hide the GUI as it is being consructed.

f=figure('Visible','off','Position',[360,500,450,285]);

و يمكن تغيير لون خلفية الواجهة بكتابة :

f=figure('Visible','off','Position',[360,500,450,285],'Color',[0.1 0.2 0.6]);

لو أردنا وضع أسماء نختارها نحن لتكون مناسبة أكثر لمحتوى الواجهة الرسومية أو لتحمل اسم التطبيق , يمكن ببساطة كتابة :

f=figure('Visible','off','Position',[360,500,450,285],'Color',[0.1 0.2 0.6],'Name','Demo Design');

لو أردنا التخلص من التسمية التلقائية التي تضيفها الواجهة نكتب و ببساطة :

f=figure('Visible','off','Position',[360,500,450,285],'Color',[0.1 0.2 0.6],'Name','Demo Design','NumberTitle','off');

وبالنتيجة نحصل على الواجهة :

لو أردنا تعطيل صلاحية تغيير حجم الشاشة نكتب :

f=figure('Visible','off','Position',[360,500,450,285],'Color',[0.1 0.2 0.6],'Name','Demo Design','NumberTitle','off','Resize','off');

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

SCREENSIZE=get(0,'ScreenSize')

f=figure('Visible','off','Position',[SCREENSIZE(1) SCREENSIZE(2) SCREENSIZE(3) SCREENSIZE(4)],'Color',[0.1 0.2 0.6],'Name','Demo Design','NumberTitle','off','Resize','off');

إن طلب تابع figure يستخدم زوجي قيمة/خاصية property/value. إن خاصية Position عبارة عن شعاع رباعي العناصر (4-element) يحدد مكان GUI على الشاشة و أبعادها : ]المسافة من اليسار , المسافة من الأسفل , الارتفاع, العرض[. الواحدات الافتراضية هي البيكسل pixels.

ويمكن للمبرمج إضافة عدة تعديلات أخرى على الواجهة الرسومية عبر إدراج خاصيات أخرى. و يبين الجدول التالي أهم الخصائص و وظيفة كل منها .

الوظيفة	الخاصية
تعديل لون الواجهة	Color
إبقاء أو حذف شريط المهام	Menubar
تسمية الواجهة الرسومية	Name
تعديل ترقيم الواجهة	Numbertitle
تحديد الواجهة الأم	Parent
تحديد المكان و المقاييس	Position
صلاحية تعديل حجم الشاشة	Resize
تحديد المؤشر	Tag
إبقاء أو حذف شريط الأدوات	Toolbar
بيانات المستخدم	Userdata
إظهار أو إخفاء الواجهة	Visible

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

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

1. أضف أزرار الضغط الثلاثة إلى واجهتك بإضافة هذه التعليمات إلى الملف M-file وذلك بعد طلب التابع figure.

% Construct the components.

hsurf = uicontrol('style','pushbutton','String','Surf','Position',[315,220,70,25]);

hmesh = uicontrol('style','pushbutton','String','Mesh','Position',[315,180,70,25]);

hcontour = uicontrol('style','pushbutton','String','countour','Position',[315,135,70,25]);

تستخدم هذه التعليمات التابع uicontrol لإنشاء أزرار الضغط. كل تعليمة تستخدم سلسلة من الأزواج قيمة/خاصية propert/value لتعريف زر الضغط. ويوضح الجدول و يصف أهم الخصائص مع العلم أنه في كل طلب يتم استرجاع مقبض المكونة التي تم إنشاؤها.

الـخـاصـيـة	الـوصـف
Style	في المثال , pushbutton تحدد المكون كزر ضغط
String	نحدد الاسم الذي سيظهر على كل زر ضغط.
Position	تستخدم شعاع رباعي العناصر لتحديد مكان كل زر ضغط ضمن GUI وقياسه , و الواحدات الافتراضية هي البيكسل.
Parent	تحديد الواجهة الأم
Backgroundcolor	تحديد لون الخلفية
Tag	تحديد المؤشر
FontWeight	تحديد نوع الكتابة
Callback	الاستدعاء , تحديد اسم الدالة التي نريد استدعائها لتنفيذ السطور البرمجية المطلوبة عن الضغط على الكائن
Interruptible	التعطيل , توفر إمكانية تعطيل الوظيفة المسندة للمكون , كما يوحي إسمها.
Value	تحديد القيمة

2. أضف القائمة المنبثقة و عنوانها إلى واجهتك بإضافة هذه التعليمات إلى الملف M-file و ذلك بعد تعريفات زر الضغط.

hpopup=uicontrol('style','popupmenu','String',{'Peaks','Membrane','Sine'},'Position',[300,50,100,25]);

htext=uicontrol('style','text','String','Select Data','Position',[325,90,60,15]);

من أجل القائمة المنبثقة فإن خاصية String تستخدم مصفوفة خلية لتحدد الأجزاء الثلاثة من القائمة المنبثقة : Sinc , Membrane , Peaks . أما بالنسبة للنص الستاتيكي فإنه يستخدم لعنونة القائمة المنبثقة. إن خاصية String لهذا النص تخبر مستخدم GUI ليختار معطيات Select Data. الوحدات الافتراضية لهذه المكونات هي البيكسل.

3. أضف المحاور إلى GUI وذلك بإضافة التعليمة التالية إلى الملف M-file. اضبط خاصية Units على البيكسل بحيث انها تملك نفس واحدات المكونات الاخرى.

ha=axes('Units' , 'pixels' , 'Position',[50,60,200,185]);

4. حاذي جميع المكونات ما عدا المحاور حول مركزها وذلك بالتعليمة التالية , أضفها إلى الملف M-file بعد كل تعريفات المكونات :

align([hsurf,hmesh,hcontour,htext,hpopup],'Center','None');

5. اجعل واجهتك GUI مرئية هذا الأمر بعد أمر المحاذاة :

set(f,'Visible','on')

6. بهذا الشكل سيكون ملف M-file كما يلي :

function simple_gui