عملي -3- واجهات متعددة

في مثالنا السابق قمنا بإنشاء واجهة رسومية simple_gui ،لنفرض أننا نريد أن يحوي برنامجنا أكثر من واجهة GUI .

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

تفعيل أكثر من واجهة رسومية  GUI بواسطة Run :

سنقوم بإنشاء واجهة جديدة للبرنامج السابق help.fig،ثم نقوم بتشغيل الواجهتين :

simple_gui  & help_gui 

بإستخدام تقنية Run  .

1- إنشاء الواجهة الجديدة،بإستخدام guide ،سنضيف إلى الواجهة الجديدة كائن واحد من نوع Static Text وتكبير مقاسه ليملأ الواجهة كاملة،ثم نضغط بزر الفأرة الأيمن على العنصر ،لنقوم بإضافة نص المساعدة إلى الـ String

تغيير بعض الخصائص لإضافة تأثيرات جميلة على العنصر،كتغيير لون الخلفية،ولون الكتابة .

ثم قم بحفظ الواجهة بإسم help_gui،وعند تجريب الواجهة help ،ستبدو هكذا :

الآن أصبح بإمكانك تشغيل واجهتين للبرنامج ،وذلك بإحدى الطريقتين:

- فتح الواجهتين في محرر Editor ،ثم Run لكل منهما .

- أو بكتابة الأسطر التالية:

simple_gui

help_gui

اصبح لدي واجهتين :)

العمل مع شرائح متعددة في الواجهة الرسومية الواحدة :

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

لحل هذه المشكلة علينا ان نقوم بالربط بين الواجهات وجعلها تتشارك محتوى البيانات،وهذا ماسنتعلمه في مستويات متقدمة في برمجة الواجهات الرسومية في دروس قادمة بإذن الله ،لكن يمكننا الآن حلها بطريقة بسيطة وسهلة ،وذلك بجمع محتويات الواجهتين في واجهة واحدة .

إليكم هذا المثال لتوضيح الفكرة :

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

1- قم بفتح واجهة رسومية جديدة بواسطة الـ GUIDE .

2- أضف إلى واجهتك panels ،نحتاج عنصرين منها ،ثم رتب الكائنات الخاصة بكل واجهة ،مع وضع التسمية المناسبة لكل منها ،بحيث تبدو واجهتك كما في الشكل : 

 3 - قم بحفظ واجهتك بإسم gui1.fig ،ثم إفتح ملف التعليمات البرمجية الخاص بواجهتك gui.m  في المحرر.
الآن عليك ان تقوم بثلاثة أمور :
- أولاً : إذهب إلى تابع الإفتتاح OpeningFcn callback وإجعل اللوحات السابقة panels غير مرئية (Visible off) ماعدا اللوحة الأولى ،أي في مثالنا هذا سنجعل panel1 مرئية ،ونخفي الثانية .

% --- Executes just before gui1 is made visible.

function gui1_OpeningFcn(hObject, eventdata, handles, varargin)

% This function has no output args, see OutputFcn.

% hObject    handle to figure

% eventdata  reserved - to be defined in a future version of MATLAB

% handles    structure with handles and user data (see GUIDATA)

% varargin   command line arguments to gui1 (see VARARGIN)

% Choose default command line output for gui1

handles.output = hObject;

set(handles.uipanel2,'Visible','Off')

% Update handles structure

guidata(hObject, handles);

- قم بإستدعاء تابع زر الضغط الاول  Next الموجود في الـ panel1 ،وقم ببرمجته بحيث عندما يضغط عليه المستخدم ،سيقوم بإخفاء الـ Panel1 وإظهار الـ Panel2 ،أي التحكم بخاصية الرؤية Visible.

function pushbutton1_Callback(hObject, eventdata, handles)

% hObject    handle to pushbutton1 (see GCBO)

% eventdata  reserved - to be defined in a future version of MATLAB

% handles    structure with handles and user data (see GUIDATA)

set(handles.uipanel2,'Visible','On');

set(handles.uipanel1,'Visible','Off');

 - كرر نفس الأمر مع زر الضغط الثاني  Back ،لكن بطريقة عكسية،حيث ستكون وظيفته عند النقر عليه أن يقوم بإظهار panel1  وإخفاء panel2  ،فيصبح تابعه كالتالي:

function pushbutton2_Callback(hObject, eventdata, handles)

% hObject    handle to pushbutton2 (see GCBO)

% eventdata  reserved - to be defined in a future version of MATLAB

% handles    structure with handles and user data (see GUIDATA)

set(handles.uipanel1,'Visible','On');

set(handles.uipanel2,'Visible','Off');

- إحفظ التغييرات ،وقم بتشغيل الواجهة ،أدخل بعض البيانات،وجرّب أزرار الضغط Next ,Back للإنتقال بين الشريحتين ، البيانات التي يتم إضافتها هي في واجهة واحدة ولذلك لن تضيع،والإنتقال بين الشريحتين يبدو وكأننا نستخدم واجهتين .

- الآن بعد أن تأكدت بأن كلا منهما يعمل بشكل جيد ،حان الوقت لتضع كل اللوحات panels التي لديك فوق بعضها البعض،لكن إذا قم بسحبها وإفلاتها فوق بعضها سيؤدي إلى تراكم الكائنات فوق بعضها وإختلاطها،لذلك لا تتبع هذه الطريقة ،بلإفعل ذلك بإستخدام الخواص ، إضغط على panel1 بزر الفأرة الأيمن وإختر Property Inspector ،ثم قم بتغيير قيمة Position  إجعلها مماثلة لقيمة الموضع position الخاص بالـ panel 1  ،وبذلك تتوضع اللوحات فوق بعضها.

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