What does JFC stand for?

Transcription

1 IS4300 HCI No-Quiz What does JFC stad for?! Java Fudametal Classes! Java Foudatio Creator! Java Fried Chicke! Java Foudatio Classes! Java Framework Creator 1

2 No-Quiz What is pluggable look ad feel?! Swig compoets ca be plugged i to each other.! Swig compoets ca be embedded i each other.! Easy tailorig of idividual Swig compoets to look ad behave uiquely.! Easy switchig betwee Widows, Mac, ad other look ad feels! Library of Swig plug-is. Ethography Homework 4 2

3 Which desig priciples do GUIs support? 1. Feedback 2. Speak the User s Laguage 3. Clearly Marked Exits 4. Cosistecy 5. Prevet Errors 6. Miimize User Memory Load 7. Flexibility / Shortcuts 8. Simple Desig 9. Good Error Messages 10. Help ad Documetatio 11. Use Appropriate Affordaces 12. Visibility / Obviousess What s a GUI? Stadard Elemets of a GUI WIMP Widows Icos Meus Poiters 3

4 What is a Widget? Examples? The Macitosh 7 Butto Slider Pulldow meu Check box Radio buttos Text etry fields File pick/save These have become stadard 1984 WIMP Elemets i Swig: Widows 4

5 WIMP Elemets i Swig: Buttos WIMP Elemets i Swig: Meus 5

6 WIMP Elemets i Swig: Combo Box WIMP Elemets i Swig: Text Field / Area 6

7 WIMP Elemets i Swig: Labels WIMP Elemets i Swig: Tool tips 7

8 WIMP Elemets i Swig: Embedded Paels WIMP Elemets i Swig: Advaced 8

9 Pros ad Cos of Stadard Widget Sets? Pro: Collectio of good iteractio techiques that work well uiformity is good for usability Improves exteral cosistecy Cos: Sigificat stagatio Failig to customize iteractio techiques to tasks Efficiecy could be improved Example of o-stadard widget: Pie meus A circular pop-up meu oly agle of mouse motio couts Maya, Bleder, Grad Theft Auto V, Adroid Browser What are Fitts law properties? miimum distace to travel miimum required accuracy (depedet o # of optios) very fast (depedet o # of optios) 9

10 GUI Implemetatio Support Exercise Your egieers just developed a ew desktop computer, ad wat a moder GUI o it. They give you the followig primitives: drawpixel(x,y,color) readmousex(), readmousey(), readmousebutto(), readkey() What fuctioality do you eed? 10

11 UIMS UIMS Myers: Levels of Abstractio i UI Software Toolkit Widow Sys OS Hardware Applicatio UIMS Example: Labview Toolkit Widow Sys OS Hardware Applicatio 11

12 Myers Chapter Graphical User Iterface Programmig Why use GUI tools? Makes authorig easier & more ecoomical Improves quality Improves usability OOP ad Toolkit Widgets Why are they so well suited? Natural metaphor (direct maipulatio) Subclassig to create custom widgets Ecapsulatio (data & behavior) 12

13 OO Toolkit Cocepts #1 Specializatio via Subclassig java.lag.object java.awt.compoet java.awt.cotaier javax.swig.jcompoet javax.swig.text.jtextcompoet javax.swig.jtextfield javax.swig.jtextarea OO Toolkit Cocepts #2 Compositio Put together iteractive objects at larger scale tha atomic iteractors Cotaier objects 13

14 OO Toolkit Cocepts #3 Layout How a cotaier orgaizes its widgets withi itself. OO Toolkit Cocepts #4 Evet Hadlig 1. Whe aythig happes i the UI Mouse clicked, Widow moved, Key pressed, etc 2. Widowig System creates a record 3. The evet record i added to a UI evet queue 4. The applicatio (or toolkit) pulls evets from the queue ad acts o them i order 14

15 read-evaluatio loop repeat read-evet(myevet) case myevet.type type_1: do type_1 processig type_2: do type_2 processig... type_: do type_ processig ed case ed repeat otificatio-based public class MyWidow exteds JFrame { } public MyWidow() { JButto jbutto=ew JButto( OK ); jbutto.addactiolisteer( ew MyEvetHadler()); add(jbutto); } public class MyEvetHadler { public void actioperformed( ActioEvet e) { System.out.pritl("Hi mom!"); } 15

16 OO Toolkit Cocepts #5 Virtual toolkits & MVC Aka Cross-Platform Developmet Systems Provide a layer of abstractio above ative toolkit Two approaches: Map to ative widgets Provide ow widgets Model-View-Cotroller Architecture for Widgets View Display Model Cotroller Iputs 16

17 Swig Java GUI APIs AWT The origial ow mostly obsolete as a toolkit (evet hadlig mechaism still used i Swig) Used heavyweight compoets Swig (~1997) The curret(?) stadard. Native widow, but draws all widgets Pluggable look-ad-feel SWT (Stadard Widget Toolkit) Ope source widget toolkit. JavaFX Becomig ew stadard UI toolkit (?) 17

18 Pluggable Look-ad-Feel Java GTK+ Widows Mac Netbeas Projects Palette Navigator Visual Desig & Source Editors Properties 18

19 Group Exercise Project Teams Braistorm alterative mai screes for your project GUI Implemetatio Support Learig Objectives: Why GUIs? What is a GUI? Why is implemetatio support eeded? What kids of implemetatio support are available? Basic cocepts i OO GUI toolkit Basics of Java Swig Use Netbeas to Desig a GUI 19

20 Swig Homework I4 Create a Restaurat Orderig App Two JLabels, oe with a ico. Two JButtos, oe with a ico. Etc. a scree shot of your app ruig, together with a zip archive of your project directory to is4300f16@ Due i 1 week To do Read Desig I (Beyo Ch 5 & 9). Due Moday: P2 Requiremets Aalysis Start Homework I4 Swig & Netbeas 20