CSE 501N Fall 06 17: Java GUI Swing

1
CSE 501NFall 0617 Java GUI (Swing)

• 01 Nov 2006
• Rohan Sen

2
Administrative Notes

• More TA Hours (Pick one)
• M 1030 - 1230
• M 1900 - 2100
• T 0800 - 0930
• Lab 5 description online
• Addition of requirement to Lab 4
• toString method

3
Lecture Outline

• Lab 4 questions
• Java GUI basic concepts
• Basic classes
• Layout management
• Java widgets
• Labels
• Buttons
• Text boxes
• Text areas
• Others

4
Java GUI

• Basic classes
• JFrame
• Represents a window with buttons to close,
  minimize and maximize
• Can put any content inside it
• JContainer
• Something that you can place other graphical
  widgets on
• As the name suggests, a container contains
  additional widgets
• JComponent
• A basic graphical widget, e.g., buttons, labels,
  etc.
• Note Containers are components but not vice
  versa

5
JFrame

• To create a GUI which creates a window, simply
  extend the JFrame class

public class MyFrame extends JFrame public
MyFrame() super(My First Frame) //Othe
r methods
6
JContainer

• The most common container is the Jpanel
• Think of it as a flat tray on which you can lay
  out other components (or containers)
• You can add components by using the add method
• You may also remove components from the panel

public void addToPanel(Component c) JPanel
panel new JPanel() panel.add(c)
7
JComponent

• There are many types of JComponent
• For example, a JButton is a JComponent

public void addButtonToPanel() JPanel panel
new JPanel() JButton button new
JButton(Click Me) panel.add(button)
8
Example

• Code example
• Want to create a GUI that looks like the diagram
  below

My First GUI
Submit
Use the online Javadocs to figure out what
resources Are available to you within Swing
9
Layout Management

• Up to now, we have had limited control over
  layout of components
• When we used a panel, it arranged the components
  from the left to the right

10
Layout Management

• Each container has a layout manager that directs
  the arrangement of its components
• By default this is FlowLayout
• Three useful layout managers
• BorderLayout
• GridLayout
• GridBagLayout
• Layout managers are part of the java.awt package

11
Layout Management

• By default, JPanel places components from left to
  right and starts a new row when needed
• Panel layout carried out by FlowLayout layout
  manager
• Can set other layout managers

panel.setLayout(new BorderLayout())
12
Border Layout

• Border layout groups container into five areas
  center, north, west, south and east

13
Border Layout

• Default layout manager for a frame (technically,
  the frame's content pane)
• When adding a component, specify the position
  like this
• Expands each component to fill the entire
  allotted area If that is not desirable, place
  each component inside a panel

panel.add(component, BorderLayout.NORTH)
14
Grid Layout

• Arranges components in a grid with a fixed number
  of rows and columns
• Resizes each component so that they all have same
  size
• Expands each component to fill the entire
  allotted area

15
Grid Layout

• Add the components, row by row, left to right

JPanel numberPanel new JPanel()
numberPanel.setLayout(new GridLayout(4, 3))
numberPanel.add(button7) numberPanel.add(button
8) numberPanel.add(button9) numberPanel.add(bu
tton4) . . .
16
Grid Layout
17
Grid Bag Layout

• Tabular arrangement of components
• Columns can have different sizes
• Components can span multiple columns
• Quite complex to use
• Will not cover or assign in labs

18
Grid Bag Layout

• Fortunately, you can create acceptable-looking
  layouts by nesting panels
• Give each panel an appropriate layout manager
• Panels dont have visible borders
• Use as many panels as needed to organize
  components

19
Choices

• Radio buttons
• Check boxes
• Combo boxes

20
Radio Buttons

• For a small set of mutually exclusive choices,
  use radio buttons or a combo box
• In a radio button set, only one button can be
  selected at a time
• When a button is selected, previously selected
  button in set is automatically turned off

21
Radio Buttons

• In previous figure, font sizes are mutually
  exclusive

JRadioButton smallButton new JRadioButton("Small
") JRadioButton mediumButton new
JRadioButton("Medium") JRadioButton largeButton
new JRadioButton("Large") // Add radio
buttons into a ButtonGroup so that // only one
button in group is on at any time ButtonGroup
group new ButtonGroup() group.add(smallButton)
group.add(mediumButton) group.add(largeButton
)
22
Radio Buttons

• Button group does not place buttons close to each
  other on container
• It is your job to arrange buttons on screen
• isSelected called to find out if a button is
  currently selected or not if
• Call setSelected(true) on a radio button in group
  before making the enclosing frame visible

(largeButton.isSelected()) size LARGE_SIZE
23
Check Boxes

• Two states checked and unchecked
• Use one checkbox for a binary choice
• Use a group of check boxes when one selection
  does not exclude another
• Example "bold" and "italic" in previous figure

24
Check Boxes

• Construct by giving the name in the
  constructor
• Don't place into a button group

JCheckBox italicCheckBox new JCheckBox("Italic")

25
Combo Boxes

• For a large set of choices, use a combo box
• Uses less space than radio buttons
• "Combo" combination of a list and a text field
• The text field displays the name of the current
  selection

26
Combo Boxes
Figure 4An Open Combo Box
27
Combo Boxes

• If combo box is editable, user can type own
  selection
• Use setEditable method
• Add strings with addItem method

JComboBox facenameCombo new JComboBox()
facenameCombo.addItem("Serif")
facenameCombo.addItem("SansSerif") . . .
28
Combo Boxes

• Get user selection with getSelectedItem (return
  type is Object)
• Select an item with setSelectedItem

String selectedString (String)
facenameCombo.getSelectedItem()
29
Borders

• Place a border around a panel to group its
  contents visually
• EtchedBorder theree-dimensional etched effect
• Can add a border to any component, but most
  commonly to panels

Jpanel panel new JPanel ()panel.setBOrder(new
EtchedBorder ())
Continued
30
Borders

• TitledBorder a border with a title

Panel.setBorder(new TitledBorder(new
EtchedBorder(), Size))
31
Menus

• A frame contains a menu bar
• The menu bar contains menus
• A menu contains submenus and menu items

32
Menus
33
Menu Items

• Add menu items and submenus with the add
  method
• A menu item has no further submenus

JMenuItem fileExitItem new JMenuItem("Exit")
fileMenu.add(fileExitItem)
34
Text Areas

• Use a JTextArea to show multiple lines of text
• You can specify the number of rows and columns
• setText to set the text of a text field or text
  area
• append to add text to the end of a text area

final int ROWS 10 final int COLUMNS 30
JTextArea textArea new JTextArea(ROWS,
COLUMNS)
35
Text Areas

• Use newline characters to separate lines
• To use for display purposes only

textArea.append(account.getBalance() "\n")
textArea.setEditable(false) // program can
call setText and append to change it
36
Text Areas

• To add scroll bars to a text area

JTextArea textArea new JTextArea(ROWS,
COLUMNS) JScrollPane scrollPane new
JScrollPane(textArea)
37
Text Areas
38
TextField

• Input a single line of text
• Can set it to be editable or not
• Can obtain the text using the getText() method

39
What else?

• Swing offers many more classes and options to
  tweak the look and feel
• Explore using Javadocs
• Anything in the javax.swing package is fair game

40
Example

• Expanding the simple GUI
• Next time How do we make the GUI come alive?

41
Reading Text Input

• A graphical application can obtain input by
  displaying a JOptionPane
• The showInputDialog method displays a prompt and
  waits for user input
• The showInputDialog method returns the string
  that the user typed

String input JOptionPane.showInputDialog("Enter
x")double x Double.parseDouble(input)
42
Reading Text Input
43
Colors

• Standard colors Color.BLUE, Color.RED, Color.PINK
  etc.
• Specify red, green, blue between 0.0F and 1.0F
  Color magenta new Color(1.0F, 0.0F, 1.0F) // F
  float
• Specify RGB values between 0 and 255 int
• Color c new Color(255, 0, 0)

44
Conclusion

• Lab 4 due next week