1 / 45

Chapter 2: GUI API

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

fredjones
Download Presentation

Chapter 2: GUI API

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Chapter 2: GUI API Chapter 2

  2. GUI API • Software Library • Support Event Driven Programming • Front end – for users and • Back end – for us programmers • Via GUI Elements Chapter 2

  3. GUI Application – Front end • Building the front end: GUI Element Layout Chapter 2

  4. GUI Element • Elements for interacting with users • E.g., A Window: for containing buttons and mouse • E.g., Buttons for user to click-on Chapter 2

  5. 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, shows depressed (or change color) • Semantically meaningful: A button that behaves like a real button: • clicked and something will happen Chapter 2

  6. GUI Application – Back end • “responding” to the front-end GUI Elements Chapter 2

  7. GUI Elements: Programmer perspective • Unique ID: • To identify the element (in programming 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 Chapter 2

  8. 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 program representing the front-end GUI elements Chapter 2

  9. 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 the application state) • Register event services • Complete solution! • But … how to implement this solution? • GUI API! Chapter 2

  10. 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 functions • Inheritance override Chapter 2

  11. GUI API Example: MFC • Front end: Resource Editor • Integrated in Visual Studio IDE Chapter 2

  12. MFC: Back end GUI Elements Chapter 2

  13. MFC/VS: Implementation Files Chapter 2

  14. MFC/VS: files • TutorialApp: This is the application • TutorialDlg: The main dialog window • This is a GUI 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

  15. Tutorial 2.1: • CTutorialApp: 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() • When redraw is necessary • BEGIN_MESAGE_MAP • For overriding event services Chapter 2

  16. Tutorial: 2.1 … .rc file Chapter 2

  17. Tutorial 2.2: • Application State: • An integer (count) • Events: • React to click on Add button • React to click on Quit button Chapter 2

  18. Tutorial 2.2: Implementation Chapter 2

  19. Tutorial 2.2: backend • The CTutorialDlg class Chapter 2

  20. Tutorial 2.2: CTutorialDlg.cpp • System initialization • Control Variable/GUI element assocation • DDX_Text links • GUI element (IDC_ECHO_AREA) • control variable (m_EchoText) • Button event registration: Chapter 2

  21. Tutorial 2.2: button event service • UpdateData() • Ture: stream 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

  22. Tutorial 2.3: Slider Bar Chapter 2

  23. Tutorial 2.3: warning … • MFC Resource editor slider bar workflow • DO NOT double click on the slider bar icon to activate event service! • Do enable: OnHScroll() and OnVScroll() Chapter 2

  24. Tutorial 2.3: CTutorialDlg class • A1: Control variables for echo • B1: Control variables for slider bars • C1: Slider bar service routines Chapter 2

  25. Tutorial 2.3: CTutorialDlg implementation (1) • System Initialization • Control variables/GUI element association Chapter 2

  26. Tutorial 2.3: CTutorialDlg implementation (2) • Slider Event Function Registration • Slider event service routine (H-Scroll) Chapter 2

  27. 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 GUI elements! Chapter 2

  28. 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

  29. Tutorial 2.4: implementation (2) • System Initialization • Control variable/GUI element association • Event service registrations Chapter 2

  30. Tutorial 2.4: implementation (3) • Event Service routines Chapter 2

  31. 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

  32. Tutorial 2.5: Implementation(1) • System initialization (addition to 2.4): • Control variables/GUI element association: • Check box event service registration: Chapter 2

  33. Tutorial 2.5: Implementation(2) • Event service routines: Chapter 2

  34. Tutorial 2.5: events • Single threaded application! • Timer event: once every second • When timer fires, our application 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

  35. Tutorial 2.6: Slider with Echo • MFC Slider bar shortcomings: • No text echo • Integer only support • Our class: CSliderCtrlWithEcho • Default behavior: always text echo • Support floating point Chapter 2

  36. Slider with Echo • Subclass from MFC: CSliderBar class • To use this class: Chapter 2

  37. Tutorial 2.6: using slider with echo void CTutorialDlg::OnTimer(UINT nIDEvent) { m_Seconds++; if (m_TimerCtrlSliders) { // Get ready to decrease the sliders ... 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

  38. Notes on: Slider with Echo • No need special update • Updates the text field by default • Poll/Set only when needed • Floating point: • 100K unique values defined between min/max Chapter 2

  39. 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

  40. Tutorial 2.8: Sub window • Window as container of GUI-elements Chapter 2

  41. Tutorial 2.8: front end Chapter 2

  42. Tutorial 2.8: backend • ReplaceDialogControl() • Place a CDialog onto a “placeholder” • Sub window • As a logical container for related GUI-elements Chapter 2

  43. Tutorial 2.8: GUI data type … Chapter 2

  44. Tutorial 2.8: using the data type • A RadiusControl 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

  45. Showing CircleRadiusControls • Placing the CCircleRadiusControls into our application window: • At application initialization … Chapter 2

More Related