GUI Programming using NetBeans

SWING API

RHS – SOC 2

GUI construction

• Elements in a (simple) GUI– Frames, Panes and Dialogs– Text fields– Lists and Combo boxes– Check and Radio buttons

• 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 constructionpublic 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 fieldJFrame 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 fieldtheTextField.setEditable(true);

• Disabling a text fieldtheTextField.setEditable(false);

• Setting the text in a text fieldtheTextField.setText("Greeting

earthlings!");

• Getting the text from a text fieldString 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 boxtheBox.setEditable(true);

• Disabling a Combo boxtheBox.setEditable(false);

• Setting the selection in a Combo boxtheBox.setSelectedItem(”Three");

• Getting the selection from a Combo boxString 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 boxtheCBox.setEnabled(true);

• Disabling a Check boxtheCBox.setEnabled(false);

• Setting the selection in a Check boxtheCBox.setSelected(isSelected);

• Getting the selection from a Check boxboolean 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 buttontheRB.setEnabled(true);

• Disabling a Radio buttontheRB.setEnabled(false);

• Setting the selection in a Radio buttontheRB.setSelected(isSelected);

• Getting the selection from a Radio buttonboolean 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 eventspublic 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!