Widget Toolkits CS MVC

Transcription

1 Widget Toolkits 1 CS MVC

2 Widget toolkits Also called widget libraries or GUI toolkits or GUI APIs Software bundled with a window manager, operating system, development language, hardware platform Defines a set of GUI components for programmers Examples: buttons, drop-down menus, sliders, progress bars, lists, scrollbars, tab panes, file selection dialogs, etc. Programmers access these GUI components via an application programming interface (API) 2

3 Event-driven programming Widget toolkits use event-driven programming model Reactive systems User action program response Most of the time the program sits around doing nothing Widget toolkits supports a mechanism for mapping user action on widget to appropriate application code to handle that action i.e. event handling mechanisms that we ve discussed 3

4 Review: Lightweight vs. Heavyweight Lightweight widgets BWS/OS provides a top-level window Widget toolkit draws its own widgets and is responsible for mapping events to widgets Examples: Java Swing, JQuery UI, Windows WPF Heavyweight widgets Each widget is its own window (i.e. every control is essentially a window) OS provides a hierarchical windowing system for all widgets across all applications Widget toolkit wraps OS widgets for programming language This allows the BWS to dispatch events to a specific widget Examples: nested X Windows, Java s AWT, standard HTML form widgets, Windows MFC 4 CS 349 S13 - Widgets

5 Widget Toolkit Design Goals 1. Complete Complete set of widgets and functionality Goal: GUI designers have everything they need 2. Consistent User: Look and Feel is consistent across components Developer: Consistent usage paradigms 3. Customizable Developer can reasonably extend functionality to meet particular needs of application Meeting these requirements encourages reuse 5

6 Completeness The Macintosh 7 (Dix, Finlay, Abowd, Beale, 1998) Button Slider Pull-down menu Check box Radio button Text entry / edit fields File open / save Java Swing has many more widgets 6

7 Completeness SwingSet Demo Shows lots of different widgets with lots of variations Can easily view source code To run: Download jar from course web site java cp SwingSet2.jar SwingSet2 7

8 Consistency Facilitate learning by: Common look and feel Using Widgets appropriately Look: consistent visual appearance Feel: consistent and expected behaviour Consistency helps users anticipate how the interface will react, and promotes easier discoverability of features. 8

9 Consistency: Name that Look

10 Consistency: Using Widgets Appropriately People expect widgets to behave in certain ways Off The Record (OTR) messaging study by Stedman et al. Question: How do you authenticate this buddy? Answer: Right-click on the label at bottom left! 10

11 Customizable Two common strategies: 1. Properties e.g. change colour, font, orientation, text formatter, 2. Factor out behaviour (Pluggable Behaviour) Responding to an action: ActionListener Swing s UIManager for changing look and feel JTable example 11

12 Summary Widgets are a fundamental building block of modern GUIs. MVC is used in individual widgets as well as the application as a whole. Widget toolkits or libraries need to be complete, consistent, and customizable. 12

13 Wrapping Up Layout Beginning UI Design

14 Other Widget Toolkits Many widget toolkits don t have layout managers In C# many times individuals hand code layouts or fix window size Thoughts on this? Strategy Pattern Imagine programming with toolkit which does not have any Layout Manager; what could you do? One solution: Absolute position in percentage plus AlgorithmInterface calculates optimal location?

15 Creating UIs Using XML Many programming languages use XML to create UIs Rationale (from Android UI programming tutorial): It enables you to better separate the presentation of your application from the code that controls its behavior. Your UI descriptions are external to your application code, which means that you can modify or adapt it without having to modify your source code and recompile. Declaring the layout in XML makes it easier to visualize the structure of your UI, so it's easier to debug problems. Problem I see Android context needs to be considered (config doesn t change) Many xml-based layouts use absolute positioning, relative positioning, etc. A lot of burden on programmer to maintain Always, always, always think strategy (and composite) when dealing with layout

16 Javascript Layout Absolute or Relative layout Basically fixed layout process Why does this work?

17 Strategy and Composite