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. Specify the size of the window Specify the title of the window 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_ON_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 JTextfieldfor 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_CLOSE); 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; }