Transcript
MATLAB 圖形使用者介面
程式設計簡介李俊德
2014/3/11
大綱
•範例 : Homework1_GUI
•The process of creating GUI
1. Designing the GUI
2. Laying out the GUI
3. Programming the GUI
• 財務工程與金融創新（ II ）作業 01
範例 : Homework1_GUI
範例 : Homework1_GUI
• demo
The process of creating GUI
1. Designing the GUI – design the GUI on paper
2. Laying out the GUI – placing the controls within the Layout Editor
3. Programming the GUI – writing the callbacks for the controls
Step 1: Design the UI
Step 1: Design the UI
Step 2: Laying out the GUI
1. Creating the layout
2. Set the GUI figure size
3. Add the components
4. Align the objects
5. Set properties for each components – string, tag, callback
- The tag property is also used to name the callback function.
6. Activate the GUI – main.fig, main.m
Step 2.1: Creating the layout
Step 2.1: Creating the layout
Component palette
GUIDE (GUI Development Environment)
Layout Area
GUIDE Tools Summary
• Layout Editor – Add and arrange objects in the figure window
• Alignment Tool – align objects with respect to each other.
• Property Inspector – inspect and set property values.
• Object Browser – observe a hierarchical list of the Handle Graphics objects.
• Menu Editor – create menus for the window menu bar and context menus for any component in your layout.
GUIDE Toolset
Step 2.2: Set the GUI figure size
Step 2.2: Set the GUI figure size
Component palette
Step 2.3: Add the components
Step 2.3: Add the components
Step 2.3: Add the components
Step 2.3: Add the components
Step 2.3: Add the components
Step 2.3: Add the components
Step 2.3: Add the components
Step 2.3: Add the components
• demo
Step 2.3: Add the components
Step 2.4: Align the objects
Step 2.4: Align the objects
1. 用滑鼠全選2. 按 Align Objects
Step 2.4: Align the objects
Vertical
Horizontal
Step 2.4: Align the objects
左邊對齊
Step 2.4: Align the objects
Step 2.4: Align the objects - finish
Step 2.5: Set properties for each components-Static Text
2. 按 Property Inspector
1. 點選一個 Static Text
Step 2.5: Set properties for each components-Static Text
3. 出現 Property Inspector 視窗
Step 2.5: Set properties for each components-Static Text
FontXX: 設定字型
Position: 設定位置、大小
String: 設定顯示文字
Tag: 設定標籤 ( 相當於學生名字 )
Step 2.5: Set properties for each components-Static Text
Step 2.5: Set properties for each components-Static Text
Step 2.5: Set properties for each components-Pop-up Menu
Step 2.5: Set properties for each components-Pop-up Menu
Step 2.5: Set properties for each components-Pop-up Menu
Step 2.5: Set properties for each components-Pop-up Menu
Step 2.5: Set properties for each components-Pop-up Menu
Step 2.5: Set properties for each components-Pop-up Menu
Step 2.5: Set properties for each components-Edit Text
Step 2.5: Set properties for each components-Edit Text
Step 2.5: Set properties for each components-Edit Text
Step 2.5: Set properties for each components-Edit Text
Step 2.5: Set properties for each components-Edit Text
Step 2.5: Set properties for each components-Push Button
Step 2.5: Set properties for each components-Push Button
Step 2.5: Set properties for each components-Push Button
Step 2.5: Set properties for each components-Push Button
Step 2.5: Set properties for each components-finish
Step 2.6: Activate the GUI
Step 2.6: Activate the GUI
Step 3: Programming the GUI
The application M-file:
• Initializes and launches the GUI.
• Contains the callback functions for all components in the GUI.
Windows Programming Concepts
• Event-driven (事件驅動 ) - mouse click, key stroke, button press
• Handle - each UI object has a ID number called handle.( 相當於學生學號 ) - get/set properties of a UI object through its ID number.
• Callback function - system call
caller: application callee: system
- callback function caller: systemcallee: application
顧客去商店買橘子。
發現橘子沒貨了。
顧客隔一陣子再去看貨到了沒。
主動者 = 顧客，被動者 = 商店
去商店買橘子。
店員在橘子到貨的時候通知顧客採取行動 ( 例 : 前來購買 ) 。
發現橘子沒貨了。
Callback
主動者 = 商店，被動者 = 顧客橘子到貨 = event商店通知顧客採取行動 ( 例 : 前來購買 ) = callback
Procedure
發生事件系統呼叫相關 callback函式
取得相關元件資訊
修改相關元件資訊
KeyPressKeyReleaseButtonDownButtonUpResize…
Popupmenu 中的字串Edit 元件中的數值
計算
PremiumEdit 中的數值
呼叫作業一的相關函式
1. 使用者選擇 Products 和Methods
2. 使用者輸入參數值
3. 使用者按下 Calculate 按鍵，發生 ButtonPress 事件4. 系統呼叫 main.m 中的 CalPushButton_CallBack() 函式5. CalPushButton_CallBack() 呼叫 calcluate() 函式6. calcluate() 函式根據 Product 和 Method 來呼叫作業一的相關函式( 例 :opp_cf.m) ，並將參數值傳入。
7.opp_cf.m 計算完結果後， calcluate() 函式將結果顯示在 PremiumEdit中。
4. 系統呼叫 main.m 中的 CalPushButton_CallBack() 函式
5. CalPushButton_CallBack() 呼叫 calcluate() 函式
呼叫 calculate()
使用者按下 Calculate 鍵後，系統呼叫CalPushButton_CallBack()函式
取得 product and method
取得參數值
6. calcluate() 函式根據 Product 和 Method 來呼叫作業一的相關函式 ( 例 :opp_cf.m) ，並將參數值傳入。
根據 product 和 method來決定要呼叫作業一的哪一個函式
執行作業一的函式
將結果顯示在PremiumEdit 中
7.opp_cf.m 計算完結果後， calcluate() 函式將結果顯示在PremiumEdit 中。
根據 product 和 method 來決定要呼叫作業一的哪一個函式
讀取元件的資訊
根據 tag 和 findobj() 來取得 ProductPopupmenu的 handle 值
根據 handle 值和 get() 取得 ProductPopupmenu 的字串
修改元件的資訊
根據 tag 和 findobj() 來取得 PremiumEdit 的handle 值
根據 handle 值和 set() 修改PremiumEdit 中的數值字串
Programming GUI
發生事件系統呼叫相關 callback函式
取得相關元件資訊
修改相關元件資訊
KeyPressKeyReleaseButtonDownButtonUpResize…
1.根據 tag 和 findobj()來取得元件的 handle值
2.根據 handle 值和 get()來讀取元件的資訊
計算
1.根據 tag 和 findobj()來取得元件的handle 值
2.根據 handle 值和set() 來設定元件的資訊
Review
•The process of creating GUI
1. Designing the GUI
2. Laying out the GUI
GUIDE
Set properties
3. Programming the GUI
Event
Callback function
Tag, findobj(), handle, get(), set()
For more information…
Product Help
入門介紹
詳細介紹
Thank you for your attention!
top related