IEEM 110 Computing in Industrial Applications Basic User Interface in Java

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

What is Graphical User Interface? A method for: A method for: - providing input to a computer program - the computer program to display some output/data on the screen

GUI in Java Frame, Window and Panel Frame, Window and Panel An instance of a Frame = = A Window with border, title, buttons on top-right side to close window, … An instance of a Frame = = A Window with border, title, buttons on top-right side to close window, … Frames are example of containers Frames are example of containers can contain other components such as buttons, text fields can contain other components such as buttons, text fields A simple frame class 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; } Specify the size of the windowSpecify the title of the window

Window, Frame and Panel What is Panel? What is Panel? Panel act as a smaller containers for components Panel act as a smaller containers for components A simple Panel code put in the frame class 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

Window, Frame and Panel Example of frame class using a 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

Window, Frame and Panel How to display the frame we have made? How to display the frame we have made? Add the code to the main function Add the code to the main function MyFrame mingsFrame = new MyFrame(); MyFrame mingsFrame = new MyFrame(); mingsFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); mingsFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); mingsFrame.Show(); mingsFrame.Show(); Define the window will close when button is pressed

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

Text Input / Label Text Fields Text Fields How to add a text field to a window? How to add a text field to a window? JTextField(String text, int cols) JTextField(String text, int cols) text is the text to display, cols is the number of columns in the field 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 Unfortunately, a “ column ” is a rather imprecise measurement in Java Example: Example: JPanel myPanel = new JPanel(); JPanel myPanel = new JPanel(); JTextField myTextField = new JTextField("Hello", 10); JTextField myTextField = new JTextField("Hello", 10); myPanel.add(myTextField); myPanel.add(myTextField);

Text Input / Label Labels Labels How to add a label to a window? How to add a label to a window? JLabel(String text) JLabel(String text) text is the text to display text is the text to display Example: Example: JPanel myPanel = new JPanel(); JPanel myPanel = new JPanel(); JLabel myLabel = new JLabel("You say:"); JLabel myLabel = new JLabel("You say:"); JTextField myTextField = new JTextField("Hello", 10); JTextField myTextField = new JTextField("Hello", 10); myPanel.add(myLabel); myPanel.add(myLabel); myPanel.add(myTextField); myPanel.add(myTextField);

GUI in Java Action Listener Action Listener We need an event handler to get the user input, such as when they click on a command button 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 In java, we use Action Listener for this purpose JButton button1= new JButton("Check"); add(button1); button1.addActionListener(new ActionListener() { button1.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent event) { myTextField.setText( " Hi " );} myTextField.setText( " Hi " );}});

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

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

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

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

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

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(); MyFrame frame = new MyFrame(); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.show();} frame.show();}}

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);

Sample Program (Cont ’ ) JButton buttonCheck= new JButton("Check"); myPanel1.add(buttonCheck); buttonCheck.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent event) { String a = myTextField.getText(); String a = myTextField.getText(); myLabel3.setText(a);}}); 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; }