1. GUI Programming using NetBeans

2. What is a GUI ? GUI – Graphical User Interface The (visual) interface between humans and computers Ranging from command lines to ”Minority Report” – style GUI Why? Makes interfaces more intuitive – most humans don’t like command lines… SWC

3. GUI Programming Creating a proper GUI can be as important – and large – a task as creating the logic Quite a lot of topics in GUI programming – Human perception – Task analysis – User analysis – Actual programming SWC

4. Simple GUI - example SWC Text label Text Field (input) Pushbutton Text Field (output)

5. Elements in a GUI A GUI is usually composed by controls A control can be a – Text field (enabled, disabled) – Pushbutton (OK, Cancel,…) – List box (multiple items to choose from) – Check box (yes-or-no) – … Many types of GUI controls SWC

6. Starting simple… For now, we will limit ourselves to just a few GUI controls: – Text label – Text field – List – Check box – Pushbutton – Picture SWC

7. Text labels Probably the simplest control of all… Usually just used for adding ”static” text – text that does not change – to the GUI Such texts will typically be ”helper text” for other controls No code needed! SWC

8. Text labels SWC

9. Text field Two common purposes: – Allow the user to enter data as text – Display text data to the user A text field can be ”enabled” or ”disabled” – Enabled: Data can be entered – Disabled: Data can only be displayed At some point we need to set or extract the text from the text field SWC

10. Text field SWC

11. List box Essentially serves the same purpose as a text field – get text input from user However, in some situations we may only allow certain inputs, for instance members of a set of legal input When using a list control, the user can only select an item from the list SWC

12. List box SWC

13. Check box In some cases, the set of possible choices is limited to two options Often a case of either/or, or perhaps on/off A Checkbox can only be in two states; checked or unchecked Nice fit for binary choices SWC

14. Check box SWC

15. Pushbutton A pushbutton is usually used to start some kind of processing of data The ”input” is simply the user clicking on the pushbutton! Typical use: ”Now my input is ready, do something with it!” We all know the ”OK” button SWC

16. Pushbutton SWC

17. Picture Related to text labels – does not really have any functionality, but should be helpful for the user Increases ”recognisability” – the user can see that (s)he is at the right place When programming in NetBeans, a picture is just a special kind of text label… SWC

18. Picture SWC

19. GUI construction In general, we have two options when constructing a GUI – Build it ”by hand” using Swing API – Use the NetBeans GUI Builder Using the GUI Builder is usually much easier than hand-coding the GUI Does not give you complete control, however… SWC

20. GUI construction Swing is a class library for creating GUIs in Java Quite large… API: See package javax.swing in the Java documentation Tutorial:http://docs.oracle.com/javase/tutoria l/uiswing/components/index.htmlhttp://docs.oracle.com/javase/tutoria l/uiswing/components/index.html Most classes begin with ”J”… SWC

21. GUI construction If you wish to construct a GUI manually using Swing, you usually begin by creating a JFrame A JFrame object is essentially an empty window, into which you can add containers for GUI controls Typically, you add a JPanel to the frame – the JPanel object contains the actual GUI controls SWC

22. GUI construction public static void main(String[] args) { JFrame theFrame = new JFrame(); theFrame.setBounds(200, 200, 720, 450); theFrame.setVisible(true); JPanel thePanel = new JPanel(); theFrame.add(thePanel); } SWC

23. GUI construction On the JPanel object, various layout strategies can be used – Flow layout – left to right – Border layout – groups into areas – Grid layout – groups into a grid Border layout is default, and also most commonly used SWC

24. GUI construction Using border layout, the panel is divided into five areas – Center – North – South – East – West SWC

25. GUI construction If a control is put into an area, it will expand to fill out the area Good when resizing, but may look weird… If you need a finer level of control, put a panel inside a panel… …or maybe consider a different layout SWC

26. GUI construction public static void main(String[] args) { JFrame theFrame = new JFrame(); theFrame.setBounds(200, 200, 240, 150); theFrame.setVisible(true); JPanel thePanel = new JPanel(); thePanel.setLayout(new BorderLayout()); thePanel.add(new Button("Center"), BorderLayout.CENTER); theFrame.add(thePanel); } SWC

27. Exercise time SWC

28. Text field Two common purposes: – Allow the user to enter data as text – Display text data to the user A text field can be ”enabled” or ”disabled” – Enabled: Data can be entered – Disabled: Data can only be displayed At some point we need to set or extract the text from the text field SWC

29. Text field JFrame theFrame = new JFrame(); theFrame.setBounds(200, 200, 300, 300); JPanel thePanel = new JPanel(); thePanel.setLayout(new BorderLayout()); JTextField theTextField = new JTextField(); thePanel.add(theTextField, BorderLayout.NORTH); theFrame.add(thePanel); theFrame.setVisible(true); SWC

30. Text field SWC Text field

31. Enabling a text field theTextField.setEditable(true); Disabling a text field theTextField.setEditable(false); Setting the text in a text field theTextField.setText("Greeting earthlings!"); Getting the text from a text field String s = theTextField.getText(); SWC

32. List box / Combo box A list (or combo) box enables the user to choose an option between many alternatives List box: User can only choose between specified alternatives Combo box: User can choose between specified alternatives, or specify choice manually (type it in) SWC

33. List box / Combo box Object[] choices = {"One", "Two", "Three", "Four"}; JComboBox theBox = new JComboBox(choices); theBox.setEditable(true); thePanel.add(theBox, BorderLayout.NORTH); SWC

34. List box / Combo box SWC Combo box (editable)

35. List box / Combo box Enabling a Combo box theBox.setEditable(true); Disabling a Combo box theBox.setEditable(false); Setting the selection in a Combo box theBox.setSelectedItem(”Three"); Getting the selection from a Combo box String s = (String)theBox.getSelectedItem(); SWC

36. Check boxes In some cases, the set of possible choices is limited to two options Often a case of either/or, or perhaps on/off A Check box can only be in two states; checked or unchecked Nice fit for binary choices SWC

37. Check boxes JCheckBox theBBox = new JCheckBox("Bold"); JCheckBox theIBox = new JCheckBox("Italic"); JCheckBox theUBox = new JCheckBox("Underline"); thePanel.add(theBBox,BorderLayout.WEST); thePanel.add(theIBox,BorderLayout.NORTH); thePanel.add(theUBox,BorderLayout.EAST); SWC

38. Check boxes SWC

39. Check boxes Enabling a Check box theCBox.setEnabled(true); Disabling a Check box theCBox.setEnabled(false); Setting the selection in a Check box theCBox.setSelected(isSelected); Getting the selection from a Check box boolean isSelected = theCBox.isSelected(); SWC

40. Radio buttons If the number of choices is few, and they are mutually exclusive, use a group of Radio buttons Only one button in a group of Radio buttons can be selected SWC

41. Radio buttons JRadioButton small = new JRadioButton("Small"); JRadioButton medium = new JRadioButton("Medium"); JRadioButton large = new JRadioButton("Large"); ButtonGroup theGroup = new ButtonGroup(); theGroup.add(small); theGroup.add(medium); theGroup.add(large); JPanel theRadioPanel = new JPanel(); theRadioPanel.setLayout(new FlowLayout()); theRadioPanel.add(small); theRadioPanel.add(medium); theRadioPanel.add(large); thePanel.add(theRadioPanel, BorderLayout.NORTH); SWC

42. Radio buttons SWC

43. Radio buttons Enabling a Radio button theRB.setEnabled(true); Disabling a Radio button theRB.setEnabled(false); Setting the selection in a Radio button theRB.setSelected(isSelected); Getting the selection from a Radio button boolean isSelected = theRB.isSelected(); SWC

44. Radio buttons Note that even though only one Radio button in a group can be selected, we must call isSelected() until we find it… Putting Radio buttons in a group does not make them appear grouped visually SWC

45. Exercise time SWC

46. Menus Pull-down menu is a classic choice for choosing between options that have a hierarchical structure – menus form a hierarchy Usually only one main menu in an application; possible choices may vary depending on current circumstances SWC

47. Menus Swing menu classes: JMenuBar – the actual menu bar, attached to a frame window JMenu – an element in the menu bar, with other menus or menu items in it. JMenuItem – a specific choice, with no sub- choices SWC

48. Menus ”A menu bar contains menus” ”A menu contains other menus and menu items” ”A menu item just contains itself” SWC

49. Menus SWC

50. Menus How to create a menu bar – Create a JMenuBar object JMenuBar theMenuBar = new JMenuBar(); – Add all relevant menus to the menu bar – Attach the menu bar to the main frame of the application frame.setJMenuBar(theMenuBar); SWC

51. Menus How to add menus to the menu bar – Create relevant menus, like JMenu borrowerMenu = new JMenu(”Borrower”); – Add other menus or menu item to the menu – Add the menu to the menu bar theMenuBar.add(borrowerMenu); SWC

52. Menus How to add other (sub)menus to a menu – Create relevant menus, like JMenu borrowerManageMenu = new JMenu(”Manage Borrower”); – Add other menus or menu item to the menu – Add the menu to the relevant menu borrowerMenu.add(borrowerManageMenu); SWC

53. Menus How to add menu items to a menu – Create relevant menu items, like JMenuItem borrowerDeleteMenuItem = new JMenuItem(”Delete Borrower”); – Add the menu item to the relevant menu borrowerManageMenu.add(borrowerDelete MenuItem); SWC

54. Menus You can do some more ”fun” – and maybe even useful – things with menus: – Add images – Define accelerator keys – Use controls in menus (radio buttons, check boxes,…) Explore the documentation, but only use features that are indeed useful… SWC

55. Exercise time SWC

56. The concept of events On the inside (code), GUI code has a very different structure than ”usual” code Usual code is driven by con- ditions and various control structures (if, while,…) GUI code is driven by events SWC

57. The concept of events Execution of GUI code is much more unpredictable than for usual code We cannot predict – or dictate – what the user does, so we must always handle any possible action the user can do A user action related to the GUI is called an event SWC

58. The concept of events Almost all actions the user performs will ”trigger” an event for us to handle – Moving the mouse – Clicking on a button – Writing text in a text box – ….and so on There are hundreds of possible events! SWC

59. The concept of events SWC

60. The concept of events Fortunately, is it optional to respond to an event We only need to do so, if we want any special action to happen If that is the case, we must write an event handler for that particular event SWC

61. Relevant events Unless we need more sophisticated behavior, we only need to handle two types of events – Choosing a menu item – Clicking on a push button In both cases, we must create an object which can listen for events from the control in question SWC

62. Relevant events An event listener class must implement a …Listener interface (there are several) From pushbuttons and menu items, we get ”action events”, so a listener class must implement the ActionListener interface This interface has a single method: actionPerformed SWC

63. Relevant events public class MyListener implements ActionListener { public void actionPerformed(ActionEvent event) { System.out.println("Button clicked"); } } private ActionListener theListener; theListener = new MyListener();... JButton theButton = new JButton("Click Me!"); theButton.addActionListener(theListener); SWC

64. Relevant events A very common dialog construction: – Add an ”OK” button – In the event listener for the button Retrieve data from the relevant controls Process the data Close the dialog (maybe) Pressing ”OK” means: ”Now my input is ready, do something with it!” SWC

65. Exercise time SWC

66. GUI Development in NetBeans Manual GUI programming is somewhat difficult and tedious Unless you need something special, use the NetBeans GUI Builder! Enables you to ”drag-and-drop” controls into a pane, create event handler methods almost automatically, etc. SWC

67. GUI Development in NetBeans We will often start out by creating a ”main” frame for the application This frame could be called e.g. AppFrame This frame will only contain a menu, to open other – use-case specific – frames Could e.g. also contain a logo, but should not contain controls as such SWC

68. GUI Development in NetBeans SWC Choose New | JFrame Form

69. GUI Development in NetBeans SWC Name, etc as usual…

70. GUI Development in NetBeans SWC Graphical view of frame Palette of controls Frame properties

71. GUI Development in NetBeans SWC You can switch between ”Design” view and ”Source” view

72. GUI Development in NetBeans SWC

73. GUI Development in NetBeans SWC

74. GUI Development in NetBeans Looks somewhat confusing at first… Good news is: You can literaly drag controls onto the frame, move them around, adjust their size, alignment, etc. Code that implements your ”design” is automatically generated! SWC

75. GUI Development in NetBeans Once we add a control, we can – Give the variable representing the control a suitable name – Graphically move, resize, etc. the control – Set various properties for the control – Also, we can add event handlers to a control While all this goes on, Java code is being generated for us

76. GUI Development in NetBeans SWC Choosing this will generate an (empty) event handler method

77. GUI Development in NetBeans SWC As said, fill in the code to execute when the button is clicked!

78. SWC GUI Development in NetBeans Once we add the event handler, it cannot be removed! However, we can always change the code In a sense, the event handler is always there; we just make it visible… In general, we are not allowed to change the automatically generated code

79. SWC GUI Development in NetBeans Simplistic GUIs often work as follows: – Fill in data in the controls – Press the OK button – Data is ”dealt with” (sent to a handler, etc.) The only code we need to write is the event handler for pressing the OK button In the event handler, data is retrieved from the other controls

80. SWC GUI Development in NetBeans

81. SWC GUI Development in NetBeans

82. RHS – SOC82 GUI Development in NetBeans private void jButtonDoneActionPerformed( java.awt.event.ActionEvent evt) { String name = jTextFieldName.getText(); String job = jListJob.getSelectedValue().toString(); boolean isMale = jCheckBoxMale.isSelected(); String gender; if (isMale) gender = "Male"; else gender = "Female"; String announce = name + ", " + gender + ", " + job; JOptionPane.showMessageDialog(null, announce); }

83. Exercise time SWC

84. GUI Development guide No two applications will need the same GUI…..but a typical 1. or 2.semester application will usually follow a certain pattern SWC

85. GUI Development guide What should the application be able to do…? – Probably some generic tasks (Quit, Help,…) – General data management (Load, Save,…) – Implement use cases! – Uses cases often fall in groups according to their purposes (maybe a Customer-related group, a Boat-related group, etc.) SWC

86. GUI Development guide The set of tasks can be used to outline a menu structure, like e.g. – File (Load, Save, Quit,…) – Customer (Register, Delete, View All, …) – Boat (Register, Delete, View All) – Rental (Create, Delete, View All,…) SWC

87. GUI Development guide Create a main frame for the application, and add a menu bar with proper menus Do this using the Net- Beans GUI builder SWC

88. GUI Development guide Create an event handler for each menu item, create and display the proper frame in the event handler private void jMenuItemRegisterBoatActionPerformed (java.awt.event.ActionEvent evt) { JFrame theRegBoatFrame = new RegisterBoatFrame(); theRegBoatFrame.setVisible(true); } SWC

89. GUI Development guide Create frames with controls for each of the Use Cases, again using the GUI builder Remember to give the control variables proper names SWC

90. GUI Development guide In each Use Case – specific frame, retrieve data from controls, do e.g. conversions and validation if needed, and forward data to business logic The above is usually done when the user clicks an ”OK”/”Register”/”Done” button SWC

91. GUI Development guide Create an event handler for the button, and do data retrieval, conversion, validation and forwarding in the event handler private void jButtonRegisterBoatActionPerformed (java.awt.event.ActionEvent evt) { // Retrieve data from controls, etc.. } SWC

92. GUI Development guide Remember that even though the code for a frame is auto-generated, you can still e.g. add instance fields to the class and parameters to the constructor SWC

93. GUI Development guide Typical use: Give a reference to the ”System” class to the frame in its constructor, so it can be used for calling a proper method in the ”System” class with the retrieved data SWC

94. GUI Development guide // Code in red added manually public class RegisterBoatFrame extends javax.swing.JFrame { private BoatRentalSystem theSystem; public RegisterBoatFrame(BoatRentalSystem theSystem) { this.theSystem = theSystem; initComponents(); }... SWC

95. GUI Development guide private void jButtonRegisterBoatActionPerformed (java.awt.event.ActionEvent evt) { // Retrieve data from controls, etc.. theSystem.registerBoat(...); } SWC GUI App. System Handler