Creating User Interfaces Using frames, panels and simple GUI components

1. Creating User Interfaces Using frames, panels and simple GUI components HCI

2. GUI Components • Some common GUI components in the javax.swing package: • JLabel, JTextField, JCheckBox, Jlist, JRadioButton, Jslider, JButton, • Online documentation: http://java.sun.com/j2se/1.5.0/docs/api/ • Google: Java API

3. Extend JFrame • Import GUI classes • import javax.swing.* • Extend JFrame to hold the user interface components • public class MyWindowextends JFrame

4. Extend JFrame • In the constructor set up the window, add components and make the window visible public MyWindow() { setTitle("My Window"); setSize (100,100); //add components JButton button = new JButton("Hello"); add(button); setVisible(true); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); }

5. Extend JFrame • In the main declare and instance of the class public static void main(String [] args) { MyWindow app = new MyWindow(); }

6. MyWindow.java import javax.swing.*; public class MyWindow extends JFrame { public MyWindow() { setTitle("My Window"); setSize (100,100); //add components JButton button = new JButton("Hello"); add(button); setVisible(true); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } public static void main(String [] args) { MyWindow app = new MyWindow(); } }

7. Add Components • Declare private instance fields to allow the fields to be accessed from other methods in the class • JFrame defaults to a BorderLayout. If you do not specify location of component, it will put it in the center and replace previous addition • import java.awt.* to specify BorderLayout fields //declare instance fields private JButton button = new JButton(“hello”); private JTextFieldtextField; public MyGUIComponents() { textField = new JTextField(10); //allocate space //add to JFrame add(button, BorderLayout.NORTH); add(textField, BorderLayout.SOUTH); pack(); setVisible(true); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); }

8. Use JPanel as Subcontainer • Panels act as subcontainers to group user-interface components. • You add the components to a panel, and then add the panel into the frame • JPanel defaults in a FlowLayout instead of a BorderLayout. • The components are added from left to right in the order in which they were added

9. Use JPanel as Subcontainer public MyPanels() { //allocate space textField = new JTextField(10); //add items to panel panel.add(label); panel.add(textField); panel.add(button); //add panel to JFrame add(panel); pack(); setVisible(true); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } public static void main(String [] args) { MyPanels app = new MyPanels(); } }//end class import javax.swing.*; import java.awt.*; public class MyPanels extends JFrame { //instance fields private JButton button = new JButton("press me"); private JLabel label = new JLabel("Name: "); private JTextFieldtextField; private JPanelpanel = new JPanel();

10. Layout Managers • Java provides several layout managers: • FlowLayout - Arranges components in rows. This is the default for panels. • BorderLayout - Arranges components in five regions: • North, South, East, West, and Center. • This is the default layout manager for a JFrame. • GridLayout - Arranges components in a grid with rows and columns. • LayoutMangers are set using the setLayout() method JPanel panel = new JPanel() panel.setLayout(new BorderLayout()); GridLayout layout = new GridLayout(2,2); panel.setLayout(layout); • A container can only have one layout at a time • After setting the new layout, use validate() to force the container to update the display.

11. Activity: GUI Components • Experiment with common GUI components in the javax.swing package: • JLabel, JTextField, JCheckBox, JList, JRadioButton, Jslider, JButton, • http://hercules.gcsu.edu/~gwilliam/3950HCI/mytour.html • Online documentation: http://java.sun.com/j2se/1.5.0/docs/api/ • Google: Java API

12. Activity: GUI Components (Hints) • Use a ButtonGroup to logically group radio buttons to ensure only one can be selected at a time ButtonGroup group = new ButtonGroup(); group.add(op1Button); group.add(op2Button); group.add(op3Button); • To create a border for a panel use the setBorder method and BorderFactory class’ static methods • BorderFactory has static methods that return various types of borders panel.setBorder(BorderFactory.createTitledBorder("Label and TextField")); • A slider defaults to not displaying labels or ticks • Specify the labels and tick marks are visible • Specify the location of the major and minor tick spacing • You can specify the alignment of a layout manager panel.setLayout (new FlowLayout(FlowLayout.CENTER));