Building a Graphical User Interface

1
Buildinga Graphical User Interface

• CSCI2014
• Software Construction with Java

2
Design

• Design the look of each Window on paper
• Identify the components and their groupings
• Decide on the Layout required for each group of
  components.

3
Implementation

• Create a subclass of javax.swing.JFrame
• import javax.swing.
• class MyFrame extends JFrame
• Create and layout all the components in the
  constuctor method
• (For large GUIs break up the constructor into
  sub-methods).

4
Standard parts of the constructor

• class MyFrame extends JFrame
• public MyFrame()
• //parent constructor
• super(title)
• //choose a close operation
• this.setDefaultCloseOperation(
• JFrame.EXIT_ON_CLOSE)
• //components are added to a content pane
• Container contentPane
• this.getContentPane()

5
Pack() and setVisible()

• At the end of the constructor, after placing the
  components on the frame
• //request the layout manager to resize the
• frame to show all the components.
• this.pack()
• //to prevent the user from resizing the frame
• this.setResizable(false) //optional
• //make the frame visible
• this.setVisible(true)
• //end of constructor

6
Layout Managers

• Java SDK provides several layout managers that
  help position components.
• The default for the content pane is BorderLayout
• The default for a JPanel is FlowLayout
• It is possible to change the layout e.g.
• pane.setLayout(new GridLayout(3,4))
• A versatile and easy-to-use layout is BoxLayout

7
Creating a component

• Firstly, choose a suitable constructor
• JTextField tf
• tf new JTextField(20)
• Set other attributes as required e.g.
• tf.setText(Some text)
• tf.setEditable(false)
• Add the component to its parent container
• pane.add(tf, BorderLayout.NORTH)

8
Container Layers

• Containers (eg JPanel, JTabbedPane) are also
  components.
• It is common to group components onto a
  container
• JPanel buttonpanel new JPanel()
• buttonpanel.add(button1)
• buttonpanel.add(button2)
• etc.
• and then add the container to its parent
  container.
• pane.add(buttonpanel, BorderLayout.SOUTH)

9
ScrollPane

• If a component (or container) should have
  scollbars, then place the component on a
  scrollPane
• JScrollPane s new JScrollPane()
• s.add(component)
• and then add the scrollPane to its parent
  container.
• pane.add(s)
• Some components get scrollbars by default e.g
  JTextArea.

10
Components and Data Models

• Some components are associated with a data model,
  that is displayed in the component, e.g. a JList.
• String planets
• "Mercury", "Venus", "Earth", "Mars", "Jupiter",
  "Saturn", "Uranus", "Neptune"
• JList list new JList(planets)
• contentPane.add(list).
• Changes in the data model are automatically
  reflected in the component. (ModelViewController
  architecture)