Graphical User Interfaces

1
Graphical User Interfaces GUI
2
Graphical User Interface

• Commonly pronounced GUI GOO-EE

• A GUI presents a pictorial interface to a program

• GUIs are built from components (widgets).

• The classes for creating components are in the
  javax.swing and java.awt packages

3
Basic GUI Components
CheckBox
Textfield
List
4
Basic GUI components
Label An area where non-editable text is
displayed.
Button An area that triggers an event when
clicked.
Text field An area in which the use inputs data
from the keyboard.
5
Basic GUI components
Checkbox A button that can be toggled on or
off.
Which languages do you know?
6
Basic GUI components
ButtonGroup A group of boxes (buttons) where
only one option can be
selected at a time.
Your age group
7
Basic GUI components
List An area where a list of items is displayed.
8
Basic GUI components
Frame A container in which components can be
placed.
9
A portion of the javax.swing hierarchy
Object
java.awt.Component
java.awt.Container
javax.swing.JComponent
javax.swing.JComponent
JChoice
JList
JButton
JLabel
JCheckbox
JPanel
Window
JTextField
Frame
10
Label

• Provides an area where a single line of text is
  displayed

• The text is read-only. It cannot be modified.

• Some Constructors

public JLabel ( ) -- constructs an
empty label public JLabel( String s ) --
constructs a label that displays the
text s
11
Create an Application that displays the label
Hello Java class
12
Create an Application that displays the label
Hello Java class
import javax.swing. import java.awt. public
class DemoLabel extends JFrame // a subclass
of Frames private JLabel label1
// label to add to the Frame public
DemoLabel( ) Container con
getContentPane( ) // holds the
components for a Frame
con.setLayout( new FlowLayout( ) ) //
policy for positioning components
label1 new JLabel("Hello Java class") //
create the label con.add(label1)
// add
the label to the Frame
setSize(400,400)
// set the size of the Frame
public static void main(String args )
DemoLabel d new
DemoLabel( ) d.setVisible(true)

13
Output of DemoLabel program
14
Text Field

• Provides a single-line area that receives user
  input from
• the keyboard.

• The text (data) can then be used by the program

• Some Constructors

JTextField( ) -- constructs an
empty text field JTextField(int col ) -- a
text field with col columns JTextField(String s)
-- a text field displaying the string s
15
Create an program that prompts for a first name
and last name. Use labels for the prompt and text
fields for the user to type the names.
16
import javax.swing. import java.awt. public
class DemoTextField extends JFrame // a
subclass of JFrame private JTextField
firstField, lastField // textfields to appear
on Frame private JLabel firstLabel,
lastLabel // labels to appear on Frame
public DemoTextField( ) Container
con getContentPane( ) // holds the
components for the Frame
con.setLayout( new FlowLayout( ) ) // policy
for positioning firstLabel new
JLabel("First name ") // create label for
firstname con.add(firstLabel)
// add label for
firstname to Frame firstField new
JTextField(25) // create
textfield to store firstname
con.add(firstField)
// add textfield for firstname to
Frame lastLabel new JLabel("Last
name ") // create label for lastname
con.add(lastLabel)
// add label for lastname to
Frame lastField new JTextField(25)
// create label to store
lastname con.add(lastField)
// add label for
lastname for Frame setSize(400,400)
public static void main(String
args) DemoTextField dt new
DemoTextField( )
dt.setVisible(true)
Create a program that prompts for a first name
and last name. Use labels for the prompt and text
fields for the user to type the names.
17
Output of DemoTextField
18
Button

• A component a user clicks to trigger an action

• Some Constructors

JButton( ) -- constructs a
button with no label JButton(String s) --
constructs a button with the label s

19
Write an application that includes three buttons
20
import javax.swing. import java.awt. public
class DemoButton extends JFrame private
JButton whatsnew, whatscool, netsearch
private JTextField site private JLabel
siteLabel public DemoButton( )
Container con getContentPane( )
con.setLayout( new FlowLayout( ) )
siteLabel new JLabel("Net site") // create
and add net site label
con.add(siteLabel)
site new JTextField(30) //
create and add site textfield
con.add(site) whatsnew new
JButton("WhatsNew?") // create and add
button con.add(whatsnew)
whatscool new JButton("Whats Cool?") //
create and add button
con.add(whatscool) netsearch
new JButton("Net Search") // create and
add button con.add(netsearch)
setSize(400,400)
public static void main(String args)
DemoButton db new DemoButton()
db.setVisible(true)
Write an application that includes three buttons
21
Check boxes and Button Groups

• The class Checkbox is used to create checkbox
• and radio buttons

• Some Constructors

JCheckbox ( ) -- checkbox
with no label. The
checkbox is off JCheckbox(St
ring label) -- a checkbox with the
specified label.
22
Prompt a user to check his/her favorite computer
languages.
23
import javax.swing. import java.awt. public
class DemoButton extends JFrame private
JButton whatsnew, whatscool, netsearch
private JTextField site private JLabel
siteLabel public DemoButton( )
Container con getContentPane( )
con.setLayout( new FlowLayout( ) )
siteLabel new JLabel("Net site")
con.add(siteLabel) site new
JTextField(30) con.add(site)
whatsnew new JButton("WhatsNew?")
con.add(whatsnew) whatscool
new JButton("Whats Cool?")
con.add(whatscool) netsearch new
JButton("Net Search")
con.add(netsearch) setSize(400,400)
public static void main(String
args) DemoButton db new
DemoButton() db.setVisible(true)

Prompt a user to check his/her favorite computer
languages.
24
Button Group

• A group of buttons where only one button in the
  group may be
• selected

• The class ButtonGroup is used to create a group
  for a set
• of buttons.
• Ex. ButtonGroup colors new ButtonGroup( )

• Create the radio button and add them to the
  group.
• Ex. JCheckBox color1, color2,
  color3
• color1 new
  JCheckBox(black)
• color2 new
  JCheckBox(green)
• color3 new
  JCheckBox(yellow)
• colors.add( color1)
• colors.add( color2)
• colors.add( color3)

25
Use a button group to get a users age group
26
import javax.swing. import java.awt. public
class DemoButtonGroup extends JFrame
private JCheckBox g1,g2,g3,g4,g5,g6 private
ButtonGroup agegroup private JLabel
question public DemoButtonGroup( )
Container con getContentPane( )
con.setLayout( new FlowLayout( ) )
question new JLabel("What is your age
group?") con.add(question) g1
new JCheckBox("Less than 12")
con.add(g1) g2 new
JCheckBox("Between 13 and 30")
con.add(g2) g3 new
JCheckBox("Between 31 and 60")
con.add(g3) g4 new
JCheckBox("More than 60") con.add(g4)
agegroup new ButtonGroup( )
agegroup.add(g1) agegroup.add(g2)
agegroup.add(g3) agegroup.add(g4)
setSize(400,400) public
static void main(String args)
DemoButtonGroup dg new DemoButtonGroup()
dg.setVisible(true)
Use a button group to get a users age group
27
(No Transcript)
28
Output of ButtonGroup Demo program
29
Laying out components

• Two ways

Layout Manager defines an arrangement for
the components in
a container
Absolute positioning programmer defines ltx,ygt
position for the
component
30
Layout Managers

• The java.awt package has several layout managers
  
• for arranging components in a container.

Flow Layout Border Layout Grid Layout Card
Layout Grid Bag Layout

• You can even create your own layout manager

31
Absolute Positioning

• You can place a component at a specific ltx,ygt
  position

• Method

- choose not to use a Layout Manager setLayout(
null )
- position components with the method
setBounds setBounds(int x, int y, int width,
int height)
32
Create a GUI that has a name prompt at the top of
the screen and two buttons at the bottom.
33
import javax.swing. import java.awt. public
class DemoAbsPosition extends JFrame private
JLabel prompt private JTextField name
private JButton ok, cancel public
DemoAbsPosition() Container con
getContentPane( ) con.setLayout( null )
// set layout to null for
absolute positioning prompt new
JLabel("Name") prompt.setBounds(100,50,40
,30) // specify position for prompt label
con.add(prompt) name new
JTextField() name.setBounds(150,50,80,30)
// specify position for name textfield
con.add(name) ok new
JButton("OK") ok.setBounds(75,200,80,30)
// specify position for ok button
con.add(ok) cancel new
JButton("CANCEL") cancel.setBounds(180,20
0,80,30) // specify position for cancel
button con.add(cancel)
setSize(400,400) public static void
main(String args) DemoAbsPosition
da new DemoAbsPosition()
da.setVisible(true)
Create a GUI that has a name prompt at the top of
the screen and two buttons at the bottom.
34
Creating GUIs with Eclipse

• Two ways
• Create GUI like any other program. Create a class
  as a subclass JFrame. Write code to create and
  add componments
• Use a GUI builder Jigloo
• Jigloo is a GUI Builder for Eclipse. It
  uses a drag-and-drop interface to help you build
  GUIs and writes the Java code automatically

35
Building a GUI with Jigloo
Once youre in a Project, create a GUI Form by
choosing New -gt Other
36
Building a GUI with Jigloo
In the Select Wizard, choose GUI Forms -gt Swing
-gt JFrame
37
Building a GUI with Jigloo
Choose a name for your Class
38
Building a GUI with Jigloo
What appears next is the Jigloo interface,
showing the JFrame you created. The jigloo
interface is divided into a design section (top)
and a code section (bottom)
39
Notice how it created the main method for you
automatically.
40
Notice how it created the constructor for you
automatically. All of the work for the
Constructor will be done in the method initGUI
creating components, positioning components, and
adding them to the JFrame.
41
Across the top are the different elements for
creating GUIs components, containers, and layout
managers
42
First, lets set the layout to absolute
positioning. Choose the Layout tab.
43
Now select the Absolute Layout button and press
the mouse on the JFrame. This sets the layout of
the JFrame to absolute.
44
Notice the code now shows the layout is set to
null, making the JFrame use Absolute positioning.
45
There is a tab for the typical components.
Select the tab and the row beneath it shows
components that may be added to the JFrame.
46
Notice there is a selection for a creating a
JButton (hold the mouse over an item and it will
give a Tooltip).
47
Notice there is a selection for a creating a
JCheckBox (hold the mouse over an item and it
will give a Tooltip)
48
And for a JLabel. Select the JLabel and press
the mouse on the JFrame.
49
A dialog box appears for you to name the JLabel
a name for the variable that will be used in the
program and the Text that will appear on the
JLabel.
50
Name the component prompt and give the Text Name.
51
The JLabel is created and placed on the JFrame.
Notice the code that was written automatically.
52
To put the JLabel in a different position, drag
it to a new location. To resize it, drag one of
the red anchors around the JLabel
53
To save the program, write mouse click on the
code section and select Save.
54
To execute the program, write mouse click on the
code section choose Run As -gt Java Application.
55
(No Transcript)
56
Add the JTextField by selecting it from the
ToolBar and then pressing the cursor on the
JFrame. Give it the component name name, and
the Text leave blank (remove the default text
that is there)
57
Add the OK button.
58
Add the CANCEL button.
59
Save the program and execute it.