Chapter 2- GUI API.ppt

1、Chapter 2,Chapter 2: GUI API,Chapter 2,GUI API,Software Library Support Event Driven Programming Front end for users and Back end for us programmers Via GUI Elements,Chapter 2,GUI Application Front end,Building the front end: GUI Element Layout,Chapter 2,GUI Element,Elements for interacting with use

2、rs E.g., A Window: for containing buttons and mouse E.g., Buttons for user to click-on,Chapter 2,GUI Elements: User Perspective,Virtual IO devices For users to express their wishes (to our applications) Relate to past experiences Visually pleasing: icons that looks like a real button 3D looking, sho

3、ws depressed (or change color) Semantically meaningful: A button that behaves like a real button: clicked and something will happen,Chapter 2,GUI Application Back end,“responding” to the front-end GUI Elements,Chapter 2,GUI Elements: Programmer perspective,Unique ID: To identify the element (in prog

4、ramming code) Behavior: Default: e.g., check-box shows a check-mark Customizable: e.g., check-box disappears after checked Semantic State Information: E.g., check box: checked (true) or not checked (false) E.g., slider bar: has a current value We must worry about how to access this information,Chapt

5、er 2,GUI Elements: Programmer perspective continue,Abstraction representation: our program interacts with data type E.g., CButton, CSliderBar Event Service Registration How to register for events and services E.g., when clicked on checked box, call this function Control Variables: Variables in our p

6、rogram representing the front-end GUI elements,Chapter 2,Relation to previous lecture:,Previously: Event driven programming Application State (persistent variables) Design Workflow (events) User intuitive actions to change the application state With Workflows Design event service routines (to update

7、 the application state) Register event services Complete solution! But how to implement this solution? GUI API!,Chapter 2,GUI API: must support ,Front end design: GUI builder Backend: Control variables Mechanism for linking GUI element to control variables Event Service Registrations Call back funct

8、ions Inheritance override,Chapter 2,GUI API Example: MFC,Front end: Resource Editor Integrated in Visual Studio IDE,Chapter 2,MFC: Back end GUI Elements,Chapter 2,MFC/VS: Implementation Files,Chapter 2,MFC/VS: files,TutorialApp: This is the application TutorialDlg: The main dialog window This is a G

9、UI element! (One instance of this object defined in TutorialApp) .rc: For GUI Builder (Resource editor) Text file, can open with text editor .vcproj, .sln: VS IDE files .sui, .ncb: VS IDE scratch files .ico and rc2: icons for the app DEBUIG/Release: build results,Chapter 2,Tutorial 2.1:,CTutorialApp

10、: is the application dlg the application window A instance of CTutorialDlg defined in CTutorialApp:InitInstance() Is the control variable for our application window CTutorialDlg:OnInitDialog() SystemInitialization() for Creating application state Registration of event handlers CTutorialDlg:OnPaint()

11、 When redraw is necessary BEGIN_MESAGE_MAP For overriding event services,Chapter 2,Tutorial: 2.1 .rc file,Chapter 2,Tutorial 2.2:,Application State: An integer (count) Events: React to click on Add button React to click on Quit button,Chapter 2,Tutorial 2.2: Implementation,Chapter 2,Tutorial 2.2: ba

12、ckend,The CTutorialDlg class,Chapter 2,Tutorial 2.2: CTutorialDlg.cpp,System initializationControl Variable/GUI element assocationDDX_Text links GUI element (IDC_ECHO_AREA) control variable (m_EchoText)Button event registration:,Chapter 2,Tutorial 2.2: button event service,UpdateData() Ture: stream

13、GUI element state to control variable False: push control variable value to GUI element In this case: push m_EchoText to IDD_ECHO_AREA,Chapter 2,Tutorial 2.3: Slider Bar,Chapter 2,Tutorial 2.3: warning ,MFC Resource editor slider bar workflow DO NOT double click on the slider bar icon to activate ev

14、ent service! Do enable: OnHScroll() and OnVScroll(),Chapter 2,Tutorial 2.3: CTutorialDlg class,A1: Control variables for echo B1: Control variables for slider bars C1: Slider bar service routines,Chapter 2,Tutorial 2.3: CTutorialDlg implementation (1),Control variables/GUI element association,System

15、 Initialization,Chapter 2,Tutorial 2.3: CTutorialDlg implementation (2),Slider event service routine (H-Scroll),Slider Event Function Registration,Chapter 2,Tutorial 2.4: Timer and Mouse,Timer: alarm clock for ourselves Mouse: Buttons: Left/Middle/Right Down event Up event Move NO explicit front end

16、 GUI elements!,Chapter 2,Tutorial 2.4: implementation (1),A1: to count timer B1: mouse and timer echo C1: Timer/alarm service routine D1: Mouse service routines,Chapter 2,Tutorial 2.4: implementation (2),System Initialization,Control variable/GUI element association,Event service registrations,Chapt

17、er 2,Tutorial 2.4: implementation (3),Event Service routines,Chapter 2,Tutorial 2.5: Input/Output GUI Elements,Sliders: control by application if checked Check Box: uncheck by application when sliders reach the end New implementation support (from 2.4),Chapter 2,Tutorial 2.5: Implementation(1),Syste

18、m initialization (addition to 2.4):,Control variables/GUI element association:,Check box event service registration:,Chapter 2,Tutorial 2.5: Implementation(2),Event service routines:,Chapter 2,Tutorial 2.5: events,Single threaded application! Timer event: once every second When timer fires, our appl

19、ication will be servicing the timer User _cannot_ trigger event during timer service! Check box: Front end: a check box/mark Back end: bool (no need for special service),Chapter 2,Tutorial 2.6: Slider with Echo,MFC Slider bar shortcomings: No text echo Integer only support Our class: CSliderCtrlWith

20、Echo Default behavior: always text echo Support floating point,Chapter 2,Slider with Echo,Subclass from MFC: CSliderBar class To use this class:,Chapter 2,Tutorial 2.6: using slider with echo,void CTutorialDlg:OnTimer(UINT nIDEvent) m_Seconds+;if (m_TimerCtrlSliders) / Get ready to decrease the slid

21、ers .float hvalue = m_HSliderBar.GetSliderValue();if (hvalue 0) m_HSliderBar.SetSliderValue(hvalue-1);float vvalue = m_VSliderBar.GetSliderValue();if (vvalue 0) m_VSliderBar.SetSliderValue(vvalue-1); .,Chapter 2,Notes on: Slider with Echo,No need special update Updates the text field by default Poll

22、/Set only when needed Floating point: 100K unique values defined between min/max,Chapter 2,Tutorial 2.7: Software Library,Compile into a .lib file IDE Search path must be set Include file location (in stdafx.h) Dependency Compile vs. Link Debug vs. Release,Chapter 2,Tutorial 2.8: Sub window,Window a

23、s container of GUI-elements,Chapter 2,Tutorial 2.8: front end,Chapter 2,Tutorial 2.8: backend,ReplaceDialogControl() Place a CDialog onto a “placeholder” Sub window As a logical container for related GUI-elements,Chapter 2,Tutorial 2.8: GUI data type ,Chapter 2,Tutorial 2.8: using the data type,A Ra

24、diusControl GUI in main window Implementation: an instance of CCircleRadiusControls in CTutorialDlg,CCircleRadiusControls our own GUI data type No icon representation Will not show unless we force it!,Chapter 2,Showing CircleRadiusControls,Placing the CCircleRadiusControls into our application window: At application initialization ,