1Fall 2004 6.831 UI Design and Implementation 1 Fall 2004 6.831 UI Design and Implementation 2 Source: UI Hall of ShameFall 2004 6.831 UI Design and Implementation 3 Source: UI Hall of ShameFall 2004 6.831 UI Design and Implementation 4 Widgets Toolkit layering Look-and-feel2Fall 2004 6.831 UI Design and Implementation 5 Reusable user interface components Also called controls, interactors, gizmos, gadgets Widget is a view + controller Embedded model Application data must be copied into the widget Changes must be copied out Linked model Application provides model satisfying an interface Enables data-bound widgets, e.g. a table showing thousands of database rows, or a combo box with thousands of choicesFall 2004 6.831 UI Design and Implementation 6 !"#" Advantages Reuse of development effort Coding, testing, debugging, maintenance Iteration and evaluation External consistency Disadvantages Constrain designers thinking Encourage menu & forms style, rather than richer direct manipulation style May be used inappropriatelyFall 2004 6.831 UI Design and Implementation 7$% Cheese sandwich delivery Bread (choose one): white, wheat, rye Cheese (choose one or more): swiss, cheddar, provolone, american, brie, goudda Toasted: yes or no Deliver to MIT building (choose one): Baker, EC, Next, Simmons, Stata, Fall 2004 6.831 UI Design and Implementation 8 &&'# N radio buttons N mutually-exclusive toggle buttons Drop-down list Single-selection listbox3Fall 2004 6.831 UI Design and Implementation 9 &&(# Checkbox Toggle buttonFall 2004 6.831 UI Design and Implementation 10 )&&'# N checkboxes N toggle buttons Multiple-selection listbox 2 listboxesFall 2004 6.831 UI Design and Implementation 11 # " Menubar menu item Toolbar button Context menu item Keyboard shortcut Push button Hyperlink Action object (aka command) Tooltips on mouseover Enable/disableFall 2004 6.831 UI Design and Implementation 12 "* + "," Mutually-exclusive panes Tabbed panes Listbox + pane Multiple content panes Splitters Scrolling content Scroll panes Paging buttons4Fall 2004 6.831 UI Design and Implementation 13 - Modal dialog box Modeless dialog box Sidebar SheetFall 2004 6.831 UI Design and Implementation 14Fall 2004 6.831 UI Design and Implementation 15 User interface toolkit consists of: Components (view hierarchy) Stroke drawing Pixel model Input handling Widgets (often) Automatic layoutFall 2004 6.831 UI Design and Implementation 16$% MS Win Swing HTMLcomponents windows JComponents elementsstrokes GDI Graphics -- (none)pixels bitmaps Image inlined imagesinput messages listeners Javascript event-> window proc handlerswidgets button, menu, JButton, JMenu, form controlstextbox, & links5Fall 2004 6.831 UI Design and Implementation 17" MotifXLibAthena QtGTK+Fall 2004 6.831 UI Design and Implementation 18#&! " MS WindowsAWTsubArcticMotifXLibSwingMac OSFall 2004 6.831 UI Design and Implementation 19#&! . . AWT, HTML Use native widgets, but only those common to all platforms Tree widget available on MS Win but not X, so AWT doesnt provide it Very consistent with other platform apps, because it uses the same codejava.awt.List MSWin ListpeerFall 2004 6.831 UI Design and Implementation 20#&! * " Swing, Amulet Reimplement all widgets Not constrained by least common denominator Consistent behavior for application across platforms6Fall 2004 6.831 UI Design and Implementation 21! /&"& Swing also reimplements platform look-and-feeljavax.swing.JList ListUIdelegatepaintingMetalListUI WindowsListUIinstall components & listenersFall 2004 6.831 UI Design and Implementation 22#&! . SWT Use native widgets where available Reimplement missing native
View Full Document
Unlocking...