Transcript GUI Programming using NetBeans

GUI Programming
using NetBeans
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
2
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
3
GUI construction
RHS – SOC
4
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
5
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
6
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
7
GUI construction
• Using border layout,
the panel is divided
into five areas
– Center
– North
– South
– East
– West
RHS – SOC
8
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
9
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
10
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
11
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
12
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
13
Text field
Text
field
RHS – SOC
14
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();
RHS – SOC
15
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
16
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
17
List box / Combo box
Combo box
(editable)
RHS – SOC
18
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();
RHS – SOC
19
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
20
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
21
Check boxes
RHS – SOC
22
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();
RHS – SOC
23
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
24
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
25
Radio buttons
RHS – SOC
26
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();
RHS – SOC
27
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
28
Exercises
• Try out create an application 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 documentation)
RHS – SOC
29
The concept of events
• On the inside (code), GUI
code has a very different
structure than ”usual” code
• Usual code is driven by conditions and various control
structures (if, while,…)
• GUI code is driven by events
RHS – SOC
30
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
31
The concept of events
RHS – SOC
32
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
33
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
34
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
35
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
36
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
37
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
38
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
39
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
40