1. GUI Programming using NetBeans

2. GUI construction
We have previously talked about elements in a (simple) GUI
Frames, Panes and Dialogs
Text fields
Lists and Combo boxes
Check and Radio buttons
We now look more closely at how to use GUI controls in an application
RHS – SOC

3. 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…
RHS – SOC

4. GUI construction
RHS – SOC

5. GUI construction
If you wish to construct a GUI manually, 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 will add a JPanel to the frame – the JPanel object will contain the actual GUI controls
RHS – SOC

6. 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); }
RHS – SOC

7. 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
RHS – SOC

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

9. 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
RHS – SOC

10. 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); }
RHS – SOC

11. Exercises
Try out create an application which looks like the picture to the right, without using the GUI Builder.
That is, create it only by using the Swing API methods as shown in the presentation.
Remember that you can put panels within panels…
RHS – SOC

12. 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
RHS – SOC

13. 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);
RHS – SOC

14. Text field
Text field
RHS – SOC

15. Text field Enabling a text field Disabling 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();
RHS – SOC

16. 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)
RHS – SOC

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

18. List box / Combo box
Combo box (editable)
RHS – SOC

19. List box / Combo box Enabling a Combo box Disabling 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();
RHS – SOC

20. 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
RHS – SOC

21. 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);
RHS – SOC

22. Check boxes
RHS – SOC

23. Check boxes Enabling a Check box Disabling 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();
RHS – SOC

24. 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
RHS – SOC

25. 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);
RHS – SOC

26. Radio buttons
RHS – SOC

27. Radio buttons Enabling a Radio button Disabling 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();
RHS – SOC

28. 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
RHS – SOC

29. Exercises
Try out create an applica-tion which looks like the picture to the right, without using the GUI Builder.
Only one radio button should be selected at all times
Font for a control can be set using the setFont method (see the docu-mentation)
RHS – SOC

30. 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
RHS – SOC

31. 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
RHS – SOC

32. The concept of events
RHS – SOC

33. 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!
RHS – SOC

34. 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
RHS – SOC

35. 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
RHS – SOC

36. 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
RHS – SOC

37. 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);
RHS – SOC

38. 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
Pressing ”OK” means: ”Now my input is ready, do something with it!”
RHS – SOC

39. Wrapping up GUI programming is somewhat difficult and tedious
Unless you need something special, use the NetBeans GUI Builder!
Always nice to know what does on under the hood…
You can – to some degree – mix manual coding and using the GUI Builder
RHS – SOC

40. Exercises
Try out create an application which looks like the picture to the right, without using the GUI Builder.
Create event listeners for the buttons, that print the texts:
”Brrr” for Arctic and Antarctic
”Puhh” for America and Asia
”Wet!” for Atlantic
You should not write more than three event listeners!
RHS – SOC