P P Programming With Programming With i i Wi h Wi h Graphical - PDF document

10/15/2007 P P Programming With Programming With i i Wi h Wi h Graphical User Interfaces Graphical User Interfaces No Experience Required! No Experience Required! Online at: Online at: http://www.alternitz.com/ http://www.alternitz.com/ CCSC2007/ CCSC2007/ 1

10/15/2007 Programming With Graphical Programming With Graphical User Interfaces User Interfaces Presented by Michael Michael Panitz Panitz Presented by Cascadia Cascadia Community College Community College Based on materials created by Kelvin Sung Kelvin Sung University of Washington, Bothell Based on materials created by University of Washington, Bothell Java Tutorial by Ruth Anderson Ruth Anderson Java Tutorial by University of Washington, Seattle University of Washington, Seattle C++ tutorial created by William C++ tutorial created by William Frankhouser y Frankhouser C# tutorial created by Ethan C# tutorial created by Ethan Verrall Verrall (Dr. Sung’s (Dr. Sung’s students) University of Washington, Bothell students) University of Washington, Bothell Credits Credits � All quotes are from Kelvin All quotes are from Kelvin Sung’s Sung’s book book, , “Essential Concepts for Building Interactive “E Essential Concepts for Building Interactive E i l C i l C f f B ildi B ildi I I i i Computer Graphics Applications Computer Graphics Applications”, ”, which will be which will be available for purchase starting soon available for purchase starting soon 2

10/15/2007 Goal of the tutorial Goal of the tutorial � Understand the underlying concepts, and Understand the underlying concepts, and become comfortable with 1 GUI API become comfortable with 1 GUI API � GUI API: Your choice of Java (Swing), C++ GUI API: Your choice of Java (Swing), C++ (MFC), or C# ( (MFC), or C# (WinForms WinForms) ) � GUI == “Graphical User Interface” GUI == “Graphical User Interface” � API == “Application Programming Interface” API == “Application Programming Interface” pp pp g g g g � Understand the principles of modern, Understand the principles of modern, event event- -driven, GUI driven, GUI- -based, based, interactive programming interactive programming What is a GUI- What is a GUI -based app? based app? � “a collection of routines that are driven by “a collection of routines that are driven by asynchronous, external events” asynchronous, external events” y y , , � Ex: user presses a keyboard button, or the user clicks on Ex: user presses a keyboard button, or the user clicks on a button with the mouse, or a timer goes off, etc a button with the mouse, or a timer goes off, etc � The routines are organized around GUI elements The routines are organized around GUI elements � Ex: Clicking on the onscreen representation of a button Ex: Clicking on the onscreen representation of a button runs the routine for that button’s “button clicked” event runs the routine for that button’s “button clicked” event � It is (normally) possible to reuse your event handlers (by It is (normally) possible to reuse your event handlers (by parameterizing parameterizing them) them) � Thus, the routines are often called “event handlers” Thus, the routines are often called “event handlers” � In Windows, elements are called In Windows, elements are called controls controls , on Unix/X11, , on Unix/X11, elements are called widgets elements are called widgets 3

10/15/2007 Attributes of a good GUI: Attributes of a good GUI: User’s Perspective User’s Perspective � Visually Pleasing Visually Pleasing � Semantically Meaningful Semantically Meaningful � Elements have obvious meaning Elements have obvious meaning � Elements’ (re)actions support that meaning Elements’ (re)actions support that meaning � Ex: When a button has been clicked, but the mouse Ex: When a button has been clicked, but the mouse button has not yet been released, the button’s picture button has not yet been released, the button’s picture looks ‘depressed’, like a real button would looks ‘depressed’, like a real button would Attributes of a good GUI: Attributes of a good GUI: Programmer’s Perspective Programmer’s Perspective 1. 1. Service to allow registration of Event Handling Service to allow registration of Event Handling routines routines routines routines 2. 2. GUI elements provide useful default behavior GUI elements provide useful default behavior Ex: ‘depress when clicked’ animation, without Ex: ‘depress when clicked’ animation, without � programmer doing any work programmer doing any work 3. GUI elements can be customized 3. GUI elements can be customized Ex: I want Ex: I want this this button to button to also also change colors when change colors when � depressed (then revert to normal color when the depressed (then revert to normal color when the user releases the mouse button) user releases the mouse button) Ex: Custom event handling routines Ex: Custom event handling routines � 4

10/15/2007 Attributes of a good GUI: Attributes of a good GUI: Programmer’s Perspective Programmer’s Perspective 4. 4. GUI elements maintain useful state information GUI elements maintain useful state information Ex: slider bar remembers where the thumb is Ex: slider bar remembers where the thumb is Ex: slider bar remembers where the ‘thumb’ is Ex: slider bar remembers where the ‘thumb’ is � � The application’s core logic can poll the element for this The application’s core logic can poll the element for this � info info 5. 5. GUI Elements each have a unique ID GUI Elements each have a unique ID So that our application’s core logic can access the GUI So that our application’s core logic can access the GUI � elements elements 6. 6 6. GUI f GUI framework provides a easy to use, but GUI framework provides a easy to use, but GUI f k k id id t t b t b t sophisticated, set of types for control variables sophisticated, set of types for control variables In Object Oriented programming, this would be a set of In Object Oriented programming, this would be a set of � classes, so that one can make use of the Button class’s full- classes, so that one can make use of the Button class’s full - featured, yet easy to use, functionality featured, yet easy to use, functionality How to create a GUI app How to create a GUI app 1. 1. Layout the front Layout the front- -end end Old School: map stuff out on graph paper, then Old S h Old S h Old School: map stuff out on graph paper, then l l ff ff h h h h � hand hand- -code all the GUI elements code all the GUI elements Current: Use a GUI builder program that presents Current: Use a GUI builder program that presents � you with a ‘view of your program’, that allows you you with a ‘view of your program’, that allows you to ‘draw’ the buttons, check boxes, etc, etc directly to ‘draw’ the buttons, check boxes, etc, etc directly onto your window(s) onto your window(s) 2. 2. Connect the front- Connect the front -end to the back end to the back- -end end Linkage: external modules compiled in at link Linkage: external modules compiled in at link- -time, time, � vs. the IDE modifying the same files as the vs. the IDE modifying the same files as the programmer programmer 5

10/15/2007 Structuring a GUI App Structuring a GUI App � Front Front- -end: an event is triggered end: an event is triggered (user clicks a button, timer (user clicks a button, timer goes off, etc), causing the corresponding event handler causing the corresponding event handler i i h h di di h h dl dl goes off, etc), to run to run � Event handler then causes the core/internal Event handler then causes the core/internal application state to be changed application state to be changed � The application’s core logic will then adjusts any � The application s core logic will then adjusts any The application’s core logic will then adjusts any The application s core logic will then adjusts any relevant GUI elements (in order to represent the relevant GUI elements (in order to represent the current state of the application visually) current state of the application visually) Now: Onto Language Now: Onto Language- -Specific Specific Tutorials!! Tutorials!! 6

10/15/2007 #1: Demystifying Files #1: Demystifying Files � C#2005: ‘split files’ C#2005: ‘split files’ thingee thingee � All: Major idea of All: Major idea of subclassing subclassing an existing an existing (window/frame/dialog) class (window/frame/dialog) class � E.g.: overriding virtual methods E.g.: overriding virtual methods � C++: Semi C++ S C++ S C++: Semi-interesting MFC transition from i i i interesting MFC transition from i i i MFC MFC i i i i f f procedural procedural- -land to OO land to OO- -land land #2: Control Variables, App State #2: Control Variables, App State � Count & display the number of times that a Count & display the number of times that a b button has been clicked button has been clicked b h h b b li k d li k d 7