IEEM 110 Computing in Industrial Applications

1
IEEM 110Computing in Industrial Applications

• Basic User Interface
• in Java

2
Outline

• What is Graphical User Interface (GUI)
• Window, Frame and Panel
• Labels and Text Inputs
• Action Listener
• Layout Management
• Sample Program

3
What is Graphical User Interface?

• A method for
• - providing input to a computer program
• - the computer program to display some
  output/data on the screen

4
GUI in Java

• Frame, Window and Panel
• An instance of a Frame A Window with border,
  title, buttons on top-right side to close window,
  
• Frames are example of containers
• can contain other components such as buttons,
  text fields
• A simple frame class
• Class SimpleFrame extends JFrame
• public SimpleFrame()
• setSize( WIDTH , HEIGHT )
• setTitle("Testing")
• public static final int WIDTH 200
• public static final int HEIGHT 200

5
Window, Frame and Panel

• What is Panel?
• Panel act as a smaller containers for components
• A simple Panel code put in the frame class
• Container contentPane getContentPane()
• JPanel myPanel new JPanel()
• JLabel myLabel new JLabel("You say")
• myPanel.add(myLabel)
• contentPane.add(myPanel, BorderLayout.SOUTH)

Put the panel at the SOUTH area of the window
6
Window, Frame and Panel

• Example of frame class using a panel
• class MyFrame extends JFrame
• public MyFrame()
• setTitle("Testing")
• setSize(WIDTH,HEIGHT)
• Container contentPane getContentPane()
• JPanel myPanel new JPanel()
• myPanel.setLayout(new FlowLayout(FlowLayout.LEFT
  ))
• myPanel.add(new Button("Button 1"))
• contentPane.add(myPanel)
• public static final int WIDTH 200
• public static final int HEIGHT 200

Add a panel with a button
7
Window, Frame and Panel

• How to display the frame we have made?
• Add the code to the main function
• MyFrame mingsFrame new MyFrame()
• mingsFrame.setDefaultCloseOperation(JFrame.EXIT_O
  N_CLOSE)
• mingsFrame.Show()

Define the window will close when button is
pressed
8
GUI in Java

• Text Input / Label
• Two components are used to get text input
• Text fields in JTextfield for single line input
• Text Area in JTextArea for multiple lines input
• Methods use in the Text Input
• void setText(String t)
• Change the text of a text component
• String getText()
• Return the text contained in this text component

9
Text Input / Label

• Text Fields
• How to add a text field to a window?
• JTextField(String text, int cols)
• text is the text to display, cols is the number
  of columns in the field
• Unfortunately, a column is a rather imprecise
  measurement in Java
• Example
• JPanel myPanel new JPanel()
• JTextField myTextField new JTextField("Hello",
  10)
• myPanel.add(myTextField)

10
Text Input / Label

• Labels
• How to add a label to a window?
• JLabel(String text)
• text is the text to display
• Example
• JPanel myPanel new JPanel()
• JLabel myLabel new JLabel("You say")
• JTextField myTextField new JTextField("Hello",
  10)
• myPanel.add(myLabel)
• myPanel.add(myTextField)

11
GUI in Java

• Action Listener
• We need an event handler to get the user input,
  such as when they click on a command button
• In java, we use Action Listener for this purpose
• JButton button1 new JButton("Check")
• add(button1)
• button1.addActionListener(new ActionListener()
  
• public void actionPerformed(ActionEvent event)
  
• myTextField.setText("Hi")
• )

12
GUI in Java

• Layout Management
• manage the position of text, I/O on the GUI
  window
• Components in container are managed by layout
  manager
• All positioning is relative to the boundary of
  screen
• Two kinds of manager
• Flow Layout Manager
• Border Layout Manager

13
Layout Management

• Flow Layout Manager
• Adds components in their natural size in a
  horizontal line
• If too many components to fit in one row
• Flow Layout will use multiple rows
• Components within each row are centered
• Constructors apply to the Flow Layout
• FlowLayout(int align, int hgap, int vgap)
• align control the position of the components
  (LEFT, RIGHT, CENTER)
• hgap is the horizontal gap, vgap is the vertical
  gap (defaults to 5 pixels)
• Flow Layout apply on the Window containers

14
Layout Management

• Flow Layout Manager
• Example1
• setLayout(new FlowLayout(FlowLayout.LEFT))
• add(new Button("Button 1"))
• add(new Button("2"))
• add(new Button("Long-Named Button 3"))
• Example2
• setLayout(new FlowLayout(FlowLayout.RIGHT,30,0))
• add(new Button("Long-Named Button 1"))
• add(new Button("Button 2"))
• add(new Button(3"))

15
Layout Management

• Border Layout Manager
• This layout has five areas
• North, South, East, West and Center
• When you enlarge a Container, then the Center
  area grabs as much of the newly available space
• Constructors apply to the Border Layout
• BorderLayout(int hgap, int vgap)
• hgap is the horizontal gap, vgap is the vertical
  gap (defaults to 0 pixels)
• Border Layout apply on the Panel containers

16
Layout Management

• Border Layout Manager
• Example1
• setLayout(new BorderLayout())
• add("North", new Button("North"))
• add("South", new Button("South"))
• add("Center", new Button("Center"))
• add("West", new Button("West"))
• Example2
• setLayout(new BorderLayout(5,10))
• add("North", new Button("North"))
• add("South", new Button("South"))
• add("Center", new Button("Center"))
• add("West", new Button("West"))

17
Sample Program

• import java.awt.
• import java.awt.event.
• import javax.swing.
• class Test
• public static final void main(String args)
  
• MyFrame frame new MyFrame()
• frame.setDefaultCloseOperation(JFrame.EXIT_ON_CL
  OSE)
• frame.show()

18
Sample Program (Cont)

• class MyFrame extends JFrame public MyFrame()
• setTitle("Sample Program")
• setSize(WIDTH,HEIGHT)
• Container contentPane getContentPane()
• JPanel myPanel1 new JPanel()
• JPanel myPanel2 new JPanel()
• JLabel myLabel1 new JLabel("You say")
• myTextField new JTextField("", 10)
• JLabel myLabel2 new JLabel("You said")
• myLabel3 new JLabel("")
• myPanel1.add(myLabel1)
• myPanel1.add(myTextField)
• myPanel2.add(myLabel2)
• myPanel2.add(myLabel3)

19
Sample Program (Cont)

• JButton buttonCheck new JButton("Check")
• myPanel1.add(buttonCheck)
• buttonCheck.addActionListener(new
  ActionListener()
• public void actionPerformed(ActionEvent
  event)
• String a myTextField.getText()
• myLabel3.setText(a))
• contentPane.add(myPanel1,BorderLayout.NORTH)
• contentPane.add(myPanel2,BorderLayout.SOUTH)
  
• public static final int WIDTH 250
• public static final int HEIGHT 140
• public static JTextField myTextField
• public static JLabel myLabel3