GUI Programming using NetBeans

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 Text label Text Field (input) Text Field (output) Pushbutton SWC

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/tutorial/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 Text field SWC

31. Text field • 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 Combo box (editable) SWC

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