MT311 Java Application Development and Programming Languages Li Tak Sing ( 李德成 )

Graphical user interface (GUI) Java provides lots of building blocks for you to build a graphical user interface. They are mainly stored in three packages: – javax.swing:contains most useful items like frame, panel, button, menu – javax.awt: contains items like graphic contexts, colour control. – javax.awt.event: contains all event handlers.

JFrame JFrame corresponds to a window. The following program creates a window: public class MyFrame { public static void main(String st[]) { javax.swing.JFrame f=new javax.swing.JFrame(); f.setVisible(true); }

JFrame However, we usually derive a subclass from JFrame and then add additional items to it as attributes. So the program usually look like this: public class MyFrame extends javax.swing.JFrame { public MyFrame() { setVisible(true); } public static void main(String st[]) { MyFrame f=new MyFrame(); }

JFrame However, in the last program, if we click the close window button in the window, the window will disappear but the program would still be running. In order to stop the program, we need to use the setDefaultCloseOperation method:

JFrame public class MyFrame extends javax.swing.JFrame { public MyFrame() { setDefaultCloseOperation(javax.swing.WindowConstants.EXIT_ON_CLOSE); setVisible(true); } public static void main(String st[]) { MyFrame f=new MyFrame(); }

Add items to a JFrame The window generated in the last program does not contain anything. Now, lets try to put something in. To put items to a JFrame, we need to get the container of the JFrame first. This is done by invoking the getContentPane method. Then you can use the add method to a button to it.

JButton public class MyFrame extends javax.swing.JFrame { private javax.swing.JButton button; public MyFrame() { button=new javax.swing.JButton(); button.setText("a button"); add(button); setDefaultCloseOperation(javax.swing.WindowConstants.EXIT_ON_CLOSE); setVisible(true); } public static void main(String st[]) { MyFrame f=new MyFrame(); }

JButton When you run the program, the above left window will appear. You cannot see the button as expected. This is because Java has not yet fix the size of the frame, the button yet. However, you can use the mouse to enlarge the window to see the button. You need to invoke the pack method to ask Java to fix the size of the item.

JButton public class MyFrame extends javax.swing.JFrame { private javax.swing.JButton button; public MyFrame() { button=new javax.swing.JButton(); button.setText("a button"); add(button); setDefaultCloseOperation(javax.swing.WindowConstants.EXIT_ON_CLOSE); setVisible(true); pack(); } public static void main(String st[]) { MyFrame f=new MyFrame(); }

Adding two buttons public class MyFrame extends javax.swing.JFrame { private javax.swing.JButton button; private javax.swing.JButton button2; public MyFrame() { button=new javax.swing.JButton(); button.setText("a button"); button2=new javax.swing.JButton(); button2.setText("a button 2"); add(button); add(button2); setDefaultCloseOperation(javax.swing.WindowConstants.EXIT_ON_CLOSE); setVisible(true); pack(); } public static void main(String st[]) { MyFrame f=new MyFrame(); }

Adding two buttons We can see that only one button appears, not two we expect.

Layout Manager This is something to do with the layout manager. A layout manager determines how items in a container are distributed. The following are more popular layout managers: – border layout – flow layout – grid layout

Border layout Items are distributed on 5 positions: – north – south – east – west – centre Only one component can be put in one position.

BorderLayout The class java.awt.BorderLayout is the border layout manager. The default layout manager of JFrame is BorderLayout, so if you do not change it to other layout manager, a JFrame can only hold 5 components. To store a component at the North position, we need the following statement: add(component, java.awt.BorderLayout.NORTH);

BorderLayout Note that in previous program, we use the following statement to add the button: – add(button) So we did not specify the position to be added. In this case, the default position would be centre. So when we use the add method to add two buttons, both of them are placed at the centre and therefore the later one will cover the former one and we can only see one button.

Adding two buttons Now we change the two add methods to be: add(button, BorderLayout.NORTH); add(button2,BorderLayout.CENTER); If we can the two add methos to be: add(button, BorderLayout.EAST); add(button2,BorderLayout.WEST);

Adding five buttons If we have five buttons and are added like this: add(button, BorderLayout.EAST); add(button2,BorderLayout.WEST); add(button3,BorderLayout.NORTH); add(button4,BorderLayout.SOUTH); add(button5,BorderLayout.CENTER);

Flow layout If the layout is managed by a flow layout managers, then the component will be added from left to right. Since the default layout manager of a JFrame is BorderLayout, if we want to change it to FlowLayout, we need to use the setLayout method.

FlowLayout public class MyFrame extends javax.swing.JFrame { private javax.swing.JButton button; private javax.swing.JButton button2; public MyFrame() { this.setLayout(new java.awt.FlowLayout()); button=new javax.swing.JButton(); button.setText("a button"); button2=new javax.swing.JButton(); button2.setText("a button 2"); add(button); add(button2); setDefaultCloseOperation(javax.swing.WindowConstants.EXIT_ON_CLOSE); setVisible(true); pack(); } public static void main(String st[]) { MyFrame f=new MyFrame(); }

GridLayout Under the control of a GridLayout manager, components are distributed as in a grids of equal size rectangles.

GridLayout.... this.setLayout(new java.awt.GridLayout(2,3)); add(button); add(button2); add(button3); add(button4); add(button5); add(button6);......

GridLayout.... this.setLayout(new java.awt.GridLayout(3,2)); add(button); add(button2); add(button3); add(button4); add(button5); add(button6);

JPanel JPanel is itself a component and a container. This means that it can act as a component to be placed inside a container. Then it can also act as a container to contain other components. For example, in the border layout, the north position can only hold one component. What if you want the north position to hold two components?

JPanel Then you need to put a JPanel at the north position and then put the two components at the JPanel. The default layout manager of a JPanel is FlowLayout.

JPanel javax.swing.JPanel panel=new javax.swing.JPanel(); panel.setLayout(new java.awt.GridLayout(2,1)); this.setLayout(new java.awt.GridLayout(1,2));.... add(button); add(panel); panel.add(button2); panel.add(button3); Frame a button panel a button 2 a button 3

JLabel This item allow you to write text.

JLabel public class MyFrame extends javax.swing.JFrame { private javax.swing.JButton button; public MyFrame() { javax.swing.JLabel label=new javax.swing.JLabel("press the button"); button=new javax.swing.JButton("button"); this.setLayout(new java.awt.FlowLayout()); this.add(label); this.add(button); setDefaultCloseOperation(javax.swing.WindowConstants.EXIT_ON_CLOSE); setVisible(true); pack(); } public static void main(String st[]) { MyFrame f=new MyFrame(); }

JTextField This item allows the user to input text.

JTextField public class MyFrame extends javax.swing.JFrame { private javax.swing.JTextField text; public MyFrame() { javax.swing.JLabel label=new javax.swing.JLabel("type in your name"); text=new javax.swing.JTextField(); this.setLayout(new java.awt.FlowLayout()); this.add(label); this.add(text); setDefaultCloseOperation(javax.swing.WindowConstants.EXIT_ON_CLOSE); setVisible(true); pack(); } public static void main(String st[]) { MyFrame f=new MyFrame(); }

JTextField Note that the textfield shown in last program is very small because initially the field is empty so Java uses a very small size to display it. In order to use an appropriate size for a textfield, you need to use the setPreferredSize method.

JTextField text.setPreferredSize(new Dimension(40,21)); where Dimension is a Java class used to tell the length and height in pixels of the textfield.

JCheckBox JCheckBox is an item that allows a user to select or unselect a value.

JCheckBox public class MyFrame extends javax.swing.JFrame { private javax.swing.JCheckBox check; public MyFrame() { javax.swing.JLabel label=new javax.swing.JLabel("Are you ok?"); check=new javax.swing.JCheckBox(); this.setLayout(new java.awt.FlowLayout()); this.add(label); this.add(check); setDefaultCloseOperation(javax.swing.WindowConstants.EXIT_ON_CLOSE); setVisible(true); pack(); } public static void main(String st[]) { MyFrame f=new MyFrame(); }

JComboBox This is a pull down menu so that you can select an item from the menu.

JComboBox public class MyFrame extends javax.swing.JFrame { private javax.swing.JComboBox box; public MyFrame() { javax.swing.JLabel label=new javax.swing.JLabel("select an item"); box=new javax.swing.JComboBox(); box.addItem("apple"); box.addItem("orange"); box.addItem("banana"); this.setLayout(new java.awt.FlowLayout()); this.add(label); this.add(box); setDefaultCloseOperation(javax.swing.WindowConstants.EXIT_ON_CLOSE); setVisible(true); pack(); } public static void main(String st[]) { MyFrame f=new MyFrame(); }

JRadioButton It is a radio button.

JRadioButton public class MyFrame extends javax.swing.JFrame { private javax.swing.JRadioButton button1; private javax.swing.JRadioButton button2; public MyFrame() { javax.swing.JLabel label=new javax.swing.JLabel("apple"); button1=new javax.swing.JRadioButton(); javax.swing.JLabel label2=new javax.swing.JLabel("orange"); button2=new javax.swing.JRadioButton(); this.setLayout(new java.awt.FlowLayout()); this.add(label); this.add(button1); this.add(label2); this.add(button2); setDefaultCloseOperation(javax.swing.WindowConstants.EXIT_ON_CLOSE); setVisible(true); pack(); } public static void main(String st[]) { MyFrame f=new MyFrame(); }

Event driven programming When you click a mouse or press a button, an event is generated. To handle these events, we need even handlers. In Java, event handlers are called listeners. Different types of events need different types of listeners.

Event Listeners For example, when you press a JButton, an action even is generated. To handle this action even, we need an ActionListener.

ActionListener ActionListener is an interface which has only one method: public void actionPerformed(java.awt.ActiveEvent a) This is the method that is to be executed when the JButton is pressed.

ActionListener Now, let's assume that we have the following class: public class MyListener implements java.awt.event.ActionListener { public void actionPerformed(java.awt.event.ActionEvent a) { System.out.println("abc"); }

Adding an action listener Then we can add the action listener to a button: button.addActionListener(new MyListener()); So when you press the button, an action even will be generated and this even is passed to the actionPerformed method of the MyListener.

ActionListener Note that you can add more than one action listener to a button. Then if you press the button, all of actionPerformed method of the listeners will be invoked.

Anonymous class If we have a class A, we can create a subclass of A without giving the class a name. This is call an anonymous class.

Anonymous class public class A { public void meth() { System.out.println("meth in A"); } public static void main(String st[]) { A b=new A() { public void meth() { System.out.println("meth in a sub class of A"); } }; b.meth(); }

Anonymous class In the examination, the new object is not an A, it is a subclass of A with the method meth overridden. This class can only be used where it is defined. So it is not very useful if you want to use it again in somewhere else. However, it has the advantage that you can use even the private attributes of the class where this anonymous class is used.

Anonymous class Note that inside an anonymous class, you can access the attributes and methods of the class where the anonymous class is defined. You can also access local variables of the method where the anonymous class is defined provided they are final. This is because local variable would no longer exists when the method is finished.

public class A { private int i=4; public void meth() { System.out.println("i*4 is "+(i*4)); } public void meth2() { int j=4; final int k=3; A a=new A() { public void meth() { System.out.println("i-4 is "+(i-4)); //ok System.out.println("j-4 is "+(j-4)); //error System.out.println("k-4 is "+(k-4)); //ok } }; a.meth(); } public static void main(String st[]) { A a=new A(); a.meth2(); }

Anonymous ActionListener ActionListener is an interface and therefore we cannot use the 'new' keyword to an instance of an ActionListener. However, we can define an anonymous ActionListener class which gives the implementation of the actionPerformed method.

Anonymous ActionListener button.addActionListener(new java.awt.event.ActionListener() { public void actionPerformed(java.awt.event.ActionEvent e) { System.out.println("abc"); } });

Inner class Another way to define an action listener is to use inner class. When you define a class within another class, the former one is an inner class. You can define a static inner class or a non- static inner class. A static inner class does not has any associated object of the outer class.

Inner class For a non-static inner class, each instance of the inner class is associated with an instance of the outer class.

Inner class public class A { private int a=1; public B b; public class B { private int b=4; public int meth() { return a+b; // ok as each instance of B is associated with an //instance of A. } public A() { b=new B(); }

Inner class So if you have the following code:.... A a=new A(); System.out.println(a.b.meth());.... the number 5 will be printed out.

Inner classes Like anonymous class, you can also access all methods and attributes of the outer class. Unlike anonymous class, there is no local variables to refer to as it is not defined inside a method.

public class MyFrame extends javax.swing.JFrame { public class MyListener implements java.awt.event.ActionListener { public void actionPerformed(java.awt.event.ActionEvent a) { System.out.println("abc"); } private javax.swing.JButton button; public MyFrame() { javax.swing.JLabel label=new javax.swing.JLabel("press the button"); button=new javax.swing.JButton("button"); button.addActionListener(new MyListener()); this.setLayout(new java.awt.FlowLayout()); this.add(label); this.add(button); setDefaultCloseOperation(javax.swing.WindowConstants.EXIT_ON_CLOSE); setVisible(true); pack(); } public static void main(String st[]) { MyFrame f=new MyFrame(); }