1. 1 Intro to Programming & Algorithm Design GUI Copyright 2003 by Janson Industries This presentation can be viewed on line in a file named: ch11.IntrotoProg.GUI.ppt

2. Copyright 2014 by Janson Industries 2 Objectives n Explain u Event driven programming u Designing a GUI u Threads n Demonstrate u GUI components u How to code a GUI u Animation

3. Copyright 2014 by Janson Industries 3 GUI n What do you think of the command line interface? u That's why there are GUI's n Instead of commands and syntax, GUI's allow users to point and click on: u Icons u Buttons u Menu items

4. Copyright 2014 by Janson Industries 4 GUI n GUI's help to cut down on errors by only allowing valid input n Instead of letting users specify a value, user given u A menu of values u Checkboxes associated with values u A drop down list of values

5. Copyright 2014 by Janson Industries 5 Events n An event is when a user does something u Clicks, double clicks, right clicks, presses a key, etc. n Each GUI component is tied to an event handler (in Java a listener) n The listener "reacts" to an event u Of course, the programmer codes this "reaction" F Yep, sequence, selection and loops! n This type of programming is called event-driven

6. Copyright 2014 by Janson Industries 6 GUI Components n Labels: d isplay text n Text fields: accept and display text n Button: small square that when clicked, appears to go down n List box: a text field and a small button usually with an arrow head icon u Clicking the button results in the text field being expanded and a menu being displayed inside it

7. Copyright 2014 by Janson Industries 7 Components n Check box: label and a small square text field that can display a check mark n Option buttons: label and a small round text field that can display a black dot u Only one option button can be selected u Also called radio buttons or a check box group

8. Copyright 2014 by Janson Industries 8 Components n Have properties that are controlled with setters/getters n Common properties u Size u Location u Text F Font, size, foreground color, background color, alignment, etc.

9. Copyright 2014 by Janson Industries 9 Components n Most IDEs provide a drag/drop visual editor to define the GUI u Drag and drop the GUI components from a "tool box" u The IDE generates the code n Clicking on a component will display a list of all the properties values u Programmer can change the values and the IDE will generate the code

10. Copyright 2014 by Janson Industries 10 In RAD, components dragged and dropped from the palette

11. Copyright 2014 by Janson Industries 11 Property pane provides control over all properties values When component selected, resize handles allow you to control size

12. Copyright 2014 by Janson Industries 12 Events n Components react to different events u Clicking a label does nothing n Even if 2 components react to the same event they may react differently u Clicking a text field puts the cursor in the text field u Clicking a check box selects or deselects the check box

13. Copyright 2014 by Janson Industries 13 Designing a GUI n It should be predictable (follow standards) u Menu bars at top of screen u Standard icons n Using unusual icons or layouts will cause confusion u Users will make mistakes u May not use application

14. Copyright 2014 by Janson Industries 14 Designing a GUI n It should be pleasing to the eye u No weird color combinations u No distracting graphics n It should be easy to read u No fancy fonts or small size u Good contrast between text color and background color u Not too many components or options

15. Copyright 2014 by Janson Industries 15 Designing a GUI n Customizable u Users can drag components where they want them u Change color schemes u Suppress/add options or components n Forgiving u No dead ends u Help info u Easy navigation F Application index, search

16. Copyright 2014 by Janson Industries 16 Designing a GUI n GUI is only a means to an end n The GUI should make the user more productive u Enable users to specify the input and actions more efficiently n After all options specified, the real work of the application begins

17. Copyright 2014 by Janson Industries 17 Story Boards n Mock ups of the screens n Shows each individual screen and all of its components. Welcome to the Pizza Palace What would you like to order? Pizza Soda FinishedExit

18. Copyright 2014 by Janson Industries 18 Story Boards n In addition, create u Object dictionary u Interactivity diagram Pizza Order Size? ToppingsDouble Triple 6 inchPepperoni 12 inchHam 18 inchMushroom OrderExit

19. Copyright 2014 by Janson Industries 19 Object Dictionary n Will list each component and u Screens it appears on u Variables it can affect u Any methods/modules tied to Soda Order Size?Flavor? 12 oz Cola 20 oz Lemon/Lime 46 oz Cherry OrderExit

20. Copyright 2014 by Janson Industries Order Total The following items were ordered: # size item: ###.## For a total of: # soda(s) and # pizza(s) The order amount is $#,###.## 20 Story Boards PrintExit

21. Copyright 2014 by Janson Industries 21 Designing a GUI n Each component is an object n Like all other objects, usually assigned to a variable u Considered the name of the GUI component

22. Copyright 2014 by Janson Industries 22 ObjectScreenVariablesMethods Label welcomeLblWelcomenone Label orderLblWelcomenone RadioButton pizzaRBWelcomenonegetItem() RadioButton sodaRBWelcomenonegetItem() Button finishedBtnWelcome sodaCtr, pizzaCtr, orderTotal calcTotals(orderedItems) Button exitBtnAllnonewindowClosing(Window Event) Label pizzaOrdLblPizzaOrdernone Label pizzaSizeLblPizzaOrdernone Label toppingsLblPizzaOrdernone RadioButton 6inRBPizzaOrderpizzanone RadioButton 12inRBPizzaOrderpizzanone RadioButton 18inRBPizzaOrderpizzanone Checkbox pepCBPizzaOrderselectedToppingsnone Checkbox hamCBPizzaOrderselectedToppingsnone Checkbox shroomCBPizzaOrderselectedToppingsnone RadioButton dblPepRBPizzaOrderselectedToppingsnone RadioButton dblHamRBPizzaOrderselectedToppingsnone RadioButton dblShroomRBPizzaOrderselectedToppingsnone RadioButton tplPepRBPizzaOrderselectedToppingsnone RadioButton tplHamRBPizzaOrderselectedToppingsnone RadioButton tplShroomRBPizzaOrderselectedToppingsnone Button orderPizzaBtnPizzaOrderpizzagetPizza()

23. Copyright 2014 by Janson Industries 23 ObjectScreenVariablesMethods Label sodaOrdLblSodaOrdernone Label sodaSizeLblSodaOrdernone Label sodaFlavorsLblSodaOrdernone RadioButton 12ozRBSodaOrdersodanone RadioButton 20ozRBSodaOrdersodanone RadioButton 46ozRBSodaOrdersodanone RadioButton colaRBSodaOrdersodanone RadioButton lemLimeRBSodaOrdersodanone RadioButton cherryRBSodaOrdersodanone Button orderSodaBtnSodaOrdersodagetSoda() Label ordTotLblOrderTotalnone Label itemsLblOrderTotalnone Label itemLbl1-10OrderTotalnone Label itemsTotLblOrderTotalnone Label itemsTotInfoLblOrderTotalnone Label ordAmountLblOrderTotalnone Button printBtnOrderTotalsodaprintReceipt() Object Dictionary

24. Copyright 2014 by Janson Industries 24 n Why bother? u Besides clearly defining each component F When changing a component, can easily find affected screens F Therefore can test more easily to see affect of the change Object Dictionary

25. Copyright 2014 by Janson Industries 25 n Show which screens call other screens n PizzaApp pretty simple Interactivity Diagram Welcome Soda Order Pizza Order Total

26. Copyright 2014 by Janson Industries 26 n As mentioned, GUI component properties must be specified u Size and location n For Java frames, must set visible property to true n For frame components, must add them to the frame n To react to actions, must define listeners and add to components GUI Java Example

27. Copyright 2014 by Janson Industries 27 So, to get our Frame as seen here, need a class that extends Frame and imports all the component classes

28. Copyright 2014 by Janson Industries 28 GUI Java Example import java.awt.Frame; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.awt.event.ItemEvent; import java.awt.event.ItemListener; import java.awt.event.WindowEvent; import java.awt.event.WindowListener; import java.awt.CheckboxGroup; import java.awt.Rectangle; import java.awt.Label; import java.awt.Font; import java.awt.Checkbox; import java.awt.Dimension; import java.awt.Point; import java.awt.Button; public class Welcome extends Frame implements ActionListener, WindowListener, ItemListener {

29. Copyright 2014 by Janson Industries this.setLayout(null); this.setTitle("Frame"); this.setBounds(new Rectangle(100, 100, 700, 500)); this.setVisible(true); 29 GUI Java Example private Label welcomeLbl = null; private Label orderLbl = null; private Checkbox pizzaRB = null; private Checkbox sodaRB = null; private Button exitBtn = null; private Button finishedBtn = null; private CheckboxGroup itemCBG = new CheckboxGroup(); Create variables for the GUI components Where did the names come from? Set some frame properties

30. Copyright 2014 by Janson Industries 30 GUI Java Example orderLbl = new Label(); orderLbl.setFont(new Font("Verdana", Font.PLAIN, 28)); orderLbl.setSize(new Dimension(377, 39)); orderLbl.setLocation(new Point(161, 148)); orderLbl.setText("What would you like to order?"); welcomeLbl = new Label(); welcomeLbl.setBounds(new Rectangle(5, 56, 689, 39)); welcomeLbl.setFont(new Font("Verdana", Font.PLAIN, 36)); welcomeLbl.setAlignment(Label.CENTER); welcomeLbl.setText("Welcome to the Pizza Palace"); Create the label objects and set their properties

31. Copyright 2014 by Janson Industries 31 GUI Java Example private Checkbox getPizzaRB() { if (pizzaRB == null) { pizzaRB = new Checkbox(); pizzaRB.setBounds(new Rectangle(295, 240, 89, 23)); pizzaRB.setFont(new Font("Verdana", Font.PLAIN, 24)); pizzaRB.setLabel(" Pizza"); pizzaRB.setCheckboxGroup(itemCBG); } return pizzaRB; } private Checkbox getSodaRB() { if (sodaRB == null) { sodaRB = new Checkbox(); sodaRB.setLabel(" Soda"); sodaRB.setSize(new Dimension(89, 23)); sodaRB.setLocation(new Point(295, 282)); sodaRB.setFont(new Font("Verdana", Font.PLAIN, 24)); sodaRB.setCheckboxGroup(itemCBG); } return sodaRB; } For more complicated objects, create a separate method

32. Copyright 2014 by Janson Industries 32 GUI Java Example private Button getExitBtn() { if (exitBtn == null) { exitBtn = new Button(); exitBtn.setBounds(new Rectangle(601, 457, 58, 23)); exitBtn.setLabel("Exit"); } return exitBtn; } private Button getFinishedBtn() { if (finishedBtn == null) { finishedBtn = new Button(); finishedBtn.setBounds(new Rectangle(510, 457, 58, 23)); finishedBtn.setLabel("Finished"); } return finishedBtn; }

33. Copyright 2014 by Janson Industries 33 GUI Java Example this.add(welcomeLbl, null); this.add(orderLbl, null); this.add(getPizzaRB(), null); this.add(getSodaRB(), null); this.add(getExitBtn(), null); this.add(getFinishedBtn(), null); Must add all the components to the frame Frame will look good but only problem is that it doesn't do anything You can click all you want but none of the components are "enabled" Need listeners!

34. Copyright 2014 by Janson Industries 34 n Lots of different types u WindowListener u ItemListener u ActionListener n Can create a separate class and define it as a listener n Or simply have the frame implement the listener interface u That's what we did Java Listeners public class Welcome extends Frame implements ActionListener, WindowListener, ItemListener {

35. Copyright 2014 by Janson Industries 35 n Each listener requires at least one method be coded in the "implementing class" u When an event occurs the associated method will be called n ActionListener requires actionPerformed method Java Listeners public void actionPerformed(ActionEvent e) { System.exit(0); }

36. Copyright 2014 by Janson Industries 36 n Must tie listener to a component n WindowListener requires seven methods to be coded Java Listeners private Button getExitBtn() { if (exitBtn == null) { exitBtn = new Button(); exitBtn.setBounds(new Rectangle(601, 457, 58, 23)); exitBtn.setLabel("Exit"); exitBtn.addActionListener(this); } return exitBtn; }

37. Copyright 2014 by Janson Industries 37 n Of course, they all don't have to do something Java Listeners public void windowActivated(WindowEvent e) { } public void windowClosed(WindowEvent e) { } public void windowClosing(WindowEvent e) { this.dispose(); } public void windowDeactivated(WindowEvent e) { } public void windowDeiconified(WindowEvent e) { } public void windowIconified(WindowEvent e) { } public void windowOpened(WindowEvent e) { }

38. Copyright 2014 by Janson Industries 38 n The ItemListener poses a special problem u Going to be tied to 2 components n When itemStateChanged (the associated method) invoked u Needs to figure out which radio button was clicked n Easiest way: check each radio buttons state Java Listeners

39. Copyright 2014 by Janson Industries public void itemStateChanged(ItemEvent e) { if (pizzaRB.getState()) { new PizzaOrder(); } else if (sodaRB.getState()) { new SodaOrder(); } 39 n First have to add listener to the radio buttons n Then code itemStateChanged Java Listeners pizzaRB.addItemListener(this); sodaRB.addItemListener(this);

40. Copyright 2014 by Janson Industries 40 Java Listeners n Must compile PizzaOrder and SodaOrder before Welcome

41. Copyright 2014 by Janson Industries 41 When Welcome displayed, Close Window and Exit button should work

42. Copyright 2014 by Janson Industries 42 Clicking Pizza Radio Button...

43. Copyright 2014 by Janson Industries 43 Clicking Soda Radio Button...

44. Copyright 2014 by Janson Industries 44 n How could the PizzaApp GUI be improved? u More efficient? u More functions? F Let user specify total number of pizzas and sodas on welcome screen F Display shopping cart of items F Allow editing of items from shopping cart and order total screen GUI Improvements

45. Copyright 2014 by Janson Industries 45 n Sunflower Floral Designs customers can order u Floral arrangement ($25) u Cut flowers ($15) u Corsage ($10) n Choose flower type: u Roses (extra $5) u Daisies u Chrysanthemums u Irises GUI Exercise

46. Copyright 2014 by Janson Industries 46 n Customer clicks Order Now button and the price of the order is displayed n Create: u Story Board u Interactivity program u Object dictionary n Given the solutions the pseudocode would be…. GUI Exercise Answer1 Answer2 Answer3

47. Copyright 2014 by Janson Industries 47 Class Screen1 Public Module Screen1() setSizePosition(600, 330, 100, 100) Declare Label labelSunflower = New Label() labelSunflower.setPositionSize(150, 40, 300, 23) labelSunflower.setText("Sunflower Floral Designs") labelSunflower.setFont(Verdana", 24) Declare Label labelDesign = New Label() labelDesign. setPositionSize(31, 85, 85, 23) labelDesign.setText("Design") labelDesign.setFont(new Font ("Verdana", 24) Declare Label labelFlower = New Label() labelFlower.setPositionSize(332, 85, 85, 23) labelFlower.setText("Flower") labelFlower.setFont("Verdana", 24) Pseudocode Module main() Declare Screen1 screen = New Screen1() screen.display() End Module Pgm that gets the app rolling Define the component properties

48. Copyright 2014 by Janson Industries 48 Pseudocode Declare RadioButton radioButtonFloral = New RadioButton() radioButtonFloral.setPositionSize(31, 136, 232, 23) radioButtonFloral.setText ("Floral Arrangement") radioButtonFloral.setFont("Verdana", 24) Declare RadioButton radioButtonCut = New RadioButton() radioButtonCut.setPositionSize(31, 172, 232, 23) radioButtonCut.setText (“Cut Flowers") radioButtonCut.setFont("Verdana", 24) Declare RadioButton radioButtonCorsage = New RadioButton() radioButtonCorsage.setPositionSize(31, 208, 232, 23) radioButtonCorsage.setText ("Corsage") radioButtonCorsage.setFont("Verdana", 24) Declare RadioButton radioButtonRoses = New RadioButton() radioButtonRoses.setPositionSize(332, 136, 202, 23) radioButtonRoses.setText ("Roses") radioButtonRoses.setFont("Verdana", 24) Declare RadioButton radioButtonDaisies = New RadioButton() radioButtonDaisies.setPositionSize(332, 172, 202, 23) radioButtonDaisies.setText ("Daisies") radioButtonDaisies.setFont("Verdana", 24)

49. Copyright 2014 by Janson Industries 49 Declare RadioButton radioChrisanthemums = New RadioButton() radioButtonChrisanthemums.setPositionSize(332, 208, 202, 23) radioButtonChrisanthemums.setText ("Chrisanthemums") radioButtonChrisanthemums.setFont("Verdana", 24) Declare RadioButton radioButtonIrises = New RadioButton() radioButtonIrises.setPositionSize (332, 244, 202, 23) radioButtonIrises.setText ("Irises") radioButtonIrises.setFont("Verdana", 24) Declare Button orderButton = New Button() orderButton.setPositionSize(504, 293, 80, 23) orderButton.setText("Order Now") orderButton.registerListener(orderRoutine()) add(labelSunflower) add(labelDesign) add(radioButtonFloral) add(radioButtonCut) add(radioButtonCorsage) add(labelFlower) add(radioButtonRoses) add(radioButtonDaises) add(radioButtonChrisanthemums) add(radioButtonIrises) add(orderButton) End Module PseudoCode Tie the listener to a component and specify the module to execute

50. Copyright 2014 by Janson Industries 50 PseudoCode Public Module orderRoutine() Declare Integer FLORAL_AMT = 25, CUT_AMT = 15, CORSAGE_AMT = 10, ROSE_AMT = 5, totalPrice If radioButtonFloral.getChecked() Then totalPrice = FLORAL_AMT Else If radioButtonCut.getChecked() Then totalPrice = CUT_AMT Else If radioButtonCorsage.getChecked() Then totalPrice = CORSAGE_AMT End If If radioButtonRoses.getChecked() Then totalPrice = totalPrice + ROSE_AMT End If Declare Screen2 screen = new Screen2() screen.display(totalPrice) remove() End Module End Class

51. Copyright 2014 by Janson Industries 51 Class Screen2 Public Module Screen2(Integer price) setSizePosition(600, 275, 100, 100) Declare Label labelSunflower = New Label() labelSunflower.setPositionSize(150, 40, 300, 23) labelSunflower.setText("Sunflower Floral Designs") labelSunflower.setFont(Verdana", 24) Declare Label labelPrice = New Label() labelPrice.setPositionSize(125, 225, 85, 23) labelPrice.setText("Price of your order:") labelPrice.setFont("Verdana", 24) Declare Label labelPriceAmt = New Label() labelPriceAmt.setPositionSize(375, 85, 85, 23) labelPriceAmt.setText(“$“, price) labelPriceAmt.setFont("Verdana", 24) Declare Button ExitButton = New Button() exitButton.setPositionSize(504, 239, 80, 23) exitButton.setText(“Exit") exitButton.registerListener(exitRoutine()) PseudoCode

52. Copyright 2014 by Janson Industries 52 add(RadioButtonDaises) add(RadioButtonChrisanthemums) add(RadioButtonIrises) add(exitButton) End Module Public Module exitRoutine() remove() End Module End Class Pseudocode

53. Copyright 2014 by Janson Industries 53 Animation n Used sparingly in applications u Very popular on the web, especially in ads n Really just a series of still pictures displayed rapidly u Gives the illusion of motion n Like GUI components, animation must specify location as x and y coordinates of still pictures

54. Copyright 2014 by Janson Industries 54 Animation n Then slightly modify the image and redisplay n Most languages come with predefined graphics classes that make this easier n But can be done without special graphics classes u Do need several new classes in java F i.e. Runnable interface

55. Copyright 2014 by Janson Industries 55 Java Animation public void update() { if (fontSize <50) { fontSize = fontSize + 1; urgentMsgLbl.setFont(new Font("Arial", Font.PLAIN, fontSize)); } else { sleepInterval = 1000; if (showLabel) { urgentMsgLbl.setForeground(Color.RED); showLabel = false;} else { urgentMsgLbl.setForeground(Color.WHITE); showLabel = true;} } n Assuming this is in a loop, what do you think this does?

56. Copyright 2014 by Janson Industries 56 Java Animation n Download UrgentMsg.java, compile and run to see what update does n Animation can be a resource hog n Slows down the application n Multithreading can be used to help with this

57. Copyright 2014 by Janson Industries 57 Thread n Set of instructions that are executed u In old days, all computers were single-threaded u First job submitted, first job executed u All other jobs wait for first job to finish F Problems? What if first job is payroll and runs for 3 hours All other work on hold

58. Copyright 2014 by Janson Industries 58 Thread n Computers nowadays will switch between threads/tasks u If first program waiting for file data, CPU works on different program/thread n Computers are so fast, users/apps don't even notice the lack of attention n Many languages allow a programmer to define threads within a single program

59. Copyright 2014 by Janson Industries 59 Thread n So animation can run and user can still click buttons n Need a Thread variable and object n Programmer can make the thread wait for a certain number of milliseconds (thousandths of a second) Thread thread; thread = new Thread(this); thread.start(); thread.sleep(sleepInterval);

60. Copyright 2014 by Janson Industries 60 Thread n Invoking the thread start() method causes the JVM to invoke the run() method n run() issues the repaint command u Which runs the paint() method n paint() runs update() n update() is the method that changes the size and color

61. Copyright 2014 by Janson Industries 61 Thread and Animation n To see another example of animation and threads u Download and run BouncingBall

62. Copyright 2014 by Janson Industries 62 Points to Remember n GUI's should make the user more efficient n GUI's help to cut down on errors by only allowing valid input n Listeners are tied to GUI components and react to events n Story boards and interactivity diagrams are used to design a GUI

63. Copyright 2014 by Janson Industries 63 Points to Remember n Animation can be used to enhance a GUI n Animation is often resource intensive so it should be run in a separate thread