GUI Programming using NetBeans

farrightSoftware and s/w Development

Aug 15, 2012 (4 years and 11 months ago)

360 views

GUI Programming

using NetBeans

RHS


SOC

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

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);

}

GUI construction

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



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



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



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



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!