ITM 172 Getting Started with GUI Programming

1
ITM 172Getting Started with GUI Programming

• Chapter 10
• Part A

2
GUI Components

• Javas API comes with a collection of classes
  that build GUI components such as frames, panels,
  labels, buttons, textfields, textareas, combo
  boxes, check boxes radio buttons, menus, scroll
  bars, scroll panes, and tabbed panes.
• These GUI components are used to build the user
  interface of an application.

3
GUI component packages

• The older collection of GUI components, known as
  the heavy weight components because they are
  platform specific are mostly in the java.awt
  package.
• The newer collection of GUI components, known as
  the light weight components because they are
  not platform specific are in the javax.swing
  package.

4
GUI Class Hierarchy (Swing)
5
The JComponent hierarchy
6
GUI classes

• Building a user interface starts by declaring an
  object of the Container class or one of its
  sub-class. Examples of sub-classes of Container
  are the JFrame, JPanel and JApplet classes.
• Next, objects of the JComponent class or its
  sub-classes are placed (arranged) on the
  Container. Examples of JComponent sub-classes
  include JButton, JTextField, JList, JRadiobutton,
  and JMenu.
• A LayoutManager is used to specify how the
  Components will be arranged on the Container.
  LayoutManager classes include FlowLayout,
  GridLayout, BorderLayout, CardLayout, and
  GridBagLayout.

7
GUI Helper Classes

• GUI classes can be classified into three groups
  container classes, component classes, and helper
  classes.
• The helper classes include Graphics, Color, Font,
  FontMetrics, Dimension, and LayoutManager.

8
Creating a GUI

• Recall that creating the user interface starts
  with instantiating an object of the Container
  class or one of its sub-classes .
• The following program instantiates an object of
  the JFrame class and then calls the methods
  required to make it visible on the screen and
  specify its size.

9
MyFrame.java

• import javax.swing. // import all classes in
  the swing package
• public class MyFrame
• public static void main (String args)
• JFrame frame new frame(Test Frame)
• frame.setSize(400, 300) // size in pixels
• frame.setVisible(true)
• frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOS
  E)
• // terminate the application if user closes the
  frame.

10
Here is what the Jframe looks like.
11
Adding Components to a Frame

• To add a JButton that says OK on it to the
  frame, after instantiating the frame, type
• frame.getContentPane( ).add(new JButton(OK))
• A JFrame actually an outer container that has
  an inner container known as the Content Pane.
  Components are actually added to the JFrames
  Content Pane.

12
Heres the JFrame with the OK button. The
default layout manager automatically centered the
button.
13
Layout Managers

• Recall that the layout manager controls how the
  components are arranged on the container.
• Before layout managers were invented, the
  programmer had to specify the exact screen
  position of each component. Screen positions were
  expressed using x, y coordinates where x is the
  number of pixel columns from the right edge of
  the screen and y is the number of pixel rows
  from the top of the screen.
• The problem with hard-coding screen positions
  in pixels was that monitors are not all the same.
  A layout could look symmetric and centered on
  some monitors and off-center on others.

14
Five choices of layouts

• FlowLayout
• GridLayout
• BorderLayout
• CardLayout
• GridBagLayout

15
Flowlayout

• Using the flowlayout, components (buttons,
  textboxes, etc.) are arranged from left to right
  in the order in which they are added to the
  container.
• You can specify the way components are aligned
  (right, left, or centered) on the container.
• You can specify the gap between components
  (expressed in pixels).

16
Flowlayouts 3 constructors

• public flowLayout(int align, int hGap, intVgap)
• The alignment, horizontal gap and vertical gap
  can be specified when the flowLayout object is
  instantiated.
• public flowLayout(int alignment)
• User specifies alignment.
• public flowLayout( )
• Alignment defaults to centered and gaps default
  to 5 pixels.

17
Lab 10.1 ShowFlowLayout

• This program creates class ShowFlowLayout that
  extends JFrame and contains a main( ) method.
• Main( ) invokes the constructor who obtains a
  reference to the contentPane in the JFrame
• Container container getContentPane( )
• .and then sets flowLayout to align left, horiz
  gap 10, vert gap 20
• container.setLayout(new FlowLayout(Flowlayout.LEFT
  , 10, 20)
• Finally, 10 buttons are added to the contentPane.

18
Page 416-418
19
(No Transcript)
20
The format of a GUI (screen-painter) class

• In our first example, main( ) created an instance
  of a JFrame (which displays an empty frame) and
  then main( ) used the add method to add the
  desired components to the JFrame.

21
The format of a GUI class

• In this example, we created a class that extended
  JFrame called ShowFlowLayout.
• This way, we can create our own constructor for
  ShowFlowLayout and we do so by moving all the
  add component statements out of main( ) and in
  to ShowFlowLayouts constructor.
• Now, only one statement in main( ) is needed to
  create an instance of a ShowFlowLayout, which
  calls its constructor (with all the add
  component statements) and the whole screen
  layout is created just by main( ) calling the
  constructor.

22
The benefit of this design

• We made ShowFlowLayouts constructor create a
  complete screen layout. Therefore, the
  ShowFlowLayout class makes a more fully-developed
  reusable software component (than Jframe).
• With minor modification (ex putting different
  labels on the JButtons), it can be re-used to
  create similar screen layouts elsewhere in the
  same program.
• The key benefit is consistency the entire
  programs user interface (all its screens) will
  look similar.

23
But what else is different about class
ShowFlowLayout?

• Main( ) creates an instance of his own class.
• Normally, main( ) would be in one class and call
  the constructor of another class.
• Since main( ) is always going to kick off a
  program by calling ShowFlowLayouts constructor
  (to display the whole screen layout), these two
  methods are closely coupled.
• Therefore, well just put the main( ) method in
  the same class with the showFlowLayouts
  constructor.

24
The GridLayout manager

• The GridLayout manager arranges components in a
  grid formation, where the user can specify the
  number of rows and columns.
• The number of rows or the number of columns can
  be 0 but not both. If say rows0 and columns5
  and there are 11 components, there will have to
  be 3 rows (with only one component in the 3rd
  row).
• If both the number of rows and the number of
  columns is non-zero, the number of rows takes
  precedence For example, if you specify 3 rows
  and 3 columns for 10 components, there will be 3
  rows but there must be 4 columns.

25
GridLayouts 3 constructors

• public GridLayout(int rows, int columns, int
  hGap, int vGap)
• User specifies number of rows, columns, and gaps
• public GridLayout (int rows, int columns)
• User specifies rows columns, Gaps default to 0.
• public GridLayout ( )
• Defaults to one row, one column, Gaps default to
  0.

26
Lab 10.2 ShowGridLayout

• This program modifies Lab 10.1 so that it uses
  the GridLayout instead of the FlowLayout.

27
Page 419-420
28
(No Transcript)
29
The Border Layout manager

• The Border layout manager divides the window into
  5 areas East, South, West, North, and Center.
• Components are added to one of these locations.

30
The Border Layout 2 constructors

• public BorderLayout (int hGap, int vGap)
• User specifies horizontal and vertical gap
• public BorderLayout( )
• Horizontal and vertical gaps are 0.

31
Lab 10.3 ShowBorderLayout

• This program modifies Lab 10.2 so that it uses
  the BorderLayout instead of the GridLayout.

32
Page 421-422
33
(No Transcript)
34
Using Panels as Containers

• When you add buttons or other GUI components to a
  Jframe, you are really adding it to the Jframes
  contentPane, a container within the Jframe.
• Sometimes you want to divide the contentPane into
  sections in order to achieve a certain look to
  your layout of GUI components.
• You can add Panels, which are containers within
  the contentPane container. Each Panel can set a
  different layout manager.

35
Lab 10.4 TestPanels

• This program creates two panels, P1 and P2.
• 13 buttons are added to P1.
• P1 and a text field are added to P2.
• P2 and another button are added to the Jframes
  contentPane.
• Each panel sets its own layoutManager, and the
  contentPane has its layoutManager.

36
TestContentPane

• Creates an explicit reference to the contentPane
• Container container getContentPane( )
• Sets layout for the contentPane
• Container.setLayout(new BorderLayout( ))
• Creates P1
• JPanel P1 new JPanel( )
• Sets layout for P1
• P1.setLayout(new GridLayout(4, 3) // 4 rows, 3
  columns
• Add buttons to P1
• P1.add(new Jbutton(whatever)

37
TestContentPane (continued)

• Creates panel P2
• JPanel P2 new JPanel( )
• Sets layout for P2
• P2.setLayout(New BorderLayout() )
• Add p1 and a text field to p2
• P2.add(new JTextField(text),BorderLayout.NORTH)
  
• P2.add(p1, BorderLayout.CENTER)
• Add p2 and a button to the contentPane
• Container.add(p2, Borderlayout.EAST)
• Container.add(new Button(label),
  BorderLayout.CENTER)

38
(No Transcript)
39
Page 423-424
40
Lab 10.X - Part A BasicGUICreate the following
user interface
This user interface has two buttons on the
contentPane, two JButtons on JPanel1, and two
JButtons on JPanel2.
41
Step 1. Create a class that extends JFrame. Set
its contentPanes layout to FlowLayout.

• import javax.swing.JFrame
• import java.awt.Container
• import java.awt.FlowLayout
• public class BasicGUI extends JFrame
• public BasicGUI( )
• 1. Container c getContentPane( )
• 2. c.setLayout(new FlowLayout( ))
• // OR getContentPane( ).setLayout(new
  FlowLayout( ))

42
Step 2 Add method main( ) to the class

• public static void main(String args)
• BasicGUI thisFrame new BasicGUI( )
• thisFrame.setTitle("My frame")
• thisFrame.setDefaultCloseOperation(JFrame.EXIT_ON
  _CLOSE)
• thisFrame.setSize(600, 400)
• thisFrame.setVisible(true)

43
Step 3 Add two JButtons to the JFrames
contentPane

• import javax.swing.JButton
• .
• 3. c.add(new JButton(Button1"))
• 4. c.add(new JButton("Button2"))
• // OR getContentPane( ).add(new
  JButton(Button1))

44
Step 4 Create two panels and set their layouts
to FlowLayout

• import javax.swing.JPanel
• ..
• 5. JPanel panel1 new JPanel( )
• 6. JPanel panel2 new JPanel( )
• 7. panel1.setLayout(new FlowLayout( ))
• 8. panel2.setLayout(new FlowLayout( ))

45
Step 5 Create 4 JButtons. Add two to each panel

• import javax.swing.JButton
• ..
• 11. panel1.add(new JButton(Button3"))
• 12. panel1.add(new JButton(Button4"))
• 13. panel2.add(new JButton("Button5"))
• 14. panel2.add(new JButton("Button6"))

46
Step 6 Add the panels to the contentPane

• 15. c.add(panel1)
• 16. c.add(panel2)

47
Step 7 Add a Titled Border to the panels

• import javax.swing.border.
• ..
• 9. panel1.setBorder(new TitledBorder("Panel
  1"))
• 10. panel2.setBorder(new TitledBorder("Panel
  2"))

48
Two JButtons were added to the contentPane, two
JPanels were created and added to the
contentPane, two JButtons were added to each
JPanel.
49
Homework

• Create a user interface that looks like the
  exhibit on the next slide.
• Note that the Border layout is used. A JButton is
  added to the NORTH, SOUTH, EAST, and WEST
  positions.
• A JPanel is created and added to the CENTER
  position. The JPanel has two JButtons of its own.

50
(No Transcript)