MSc Workshop - © S. Kamin, U. ReddyLect 3 - GUI -1 Lecture 3 - Graphical User Interfaces r GUI toolkits in Java API r JFrame r GUI components r Input in Frames r Reading: m Horstmann, Chapters 4, 10 and 12 m Swing tutorial Swing tutorial m Java tutorial, Chapter on Swing (downloadable) Java tutorial, Chapter on Swing

MSc Workshop - © S. Kamin, U. ReddyLect 3 - GUI -2 Java API r java.awt - Original GUI toolkit in JDK 1.1, implemented using native GUI libraries of the operating systems. (Problem: portability.) r javax.swing - Portable GUI toolkit added in Java 2, extending java.awt. (Gives platform-independent operation, though it is slower.) r Many other third party GUI toolkits, e.g., SWT in Eclipse.

MSc Workshop - © S. Kamin, U. ReddyLect 3 - GUI -3 JFrame r In many application programs one needs to import both java.awt and javax.swing.  To avoid confusion, the common class names in Swing are are prefixed with the letter “J”, e.g., JFrame, JApplet, JButton, JMenubar etc. r Frame – The Java term for a GUI window.

MSc Workshop - © S. Kamin, U. ReddyLect 3 - GUI -4 Creating JFrames //1. Optional: Specify who draws the window decorations. JFrame.setDefaultLookAndFeelDecorated(true); //2. Create the frame. JFrame frame = new JFrame("FrameDemo"); //3. Optional: What happens when the frame closes? frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); //4. Create components and put them in the frame. //...create emptyLabel... frame.getContentPane().add(emptyLabel, BorderLayout.CENTER); //5. Size the frame. frame.pack(); //6. Show it. frame.setVisible(true);

MSc Workshop - © S. Kamin, U. ReddyLect 3 - GUI -5 Creating JFrames - Commentary 1. Asks that the frame should be decorated with borders etc. 2. Creates an instance of the JFrame class. 3. Specifies that the program should exit when the frame is closed. (If you don’t put this, the program might hang.) 4. Adds something called “emptyLabel” as a GUI component to the frame. 5. Asks that the frame be automatically sized based on its contents and their preferred sizes. 6. Makes the frame visible. (Otherwise, it would be hidden by default.)

MSc Workshop - © S. Kamin, U. ReddyLect 3 - GUI -6 Components and Containers r The things that you can display in GUI windows are called components. Examples are buttons, text fields, tables etc. r Some of the components are containers, i.e., they can contain other components inside them (which might again be containers etc.). r A JFrame is a container of a specialized sort. It has several “panes” as its components, the important one being its contentPane.

MSc Workshop - © S. Kamin, U. ReddyLect 3 - GUI -7 The contentPane r The contentPane is a container. So, we can add components to it. Container pane = frame.getContentPane(); pane.add(new JLabel( new ImageIcon( “world.gif”)))); pane.add(new JLabel(“Hello World!”)); pane.add(new JButton(“Click Me”)); r Or, we can create a new contentPane: JPanel pane = new JPanel(); frame.setContentPane(pane); pane.add(new JLabel(“Hello World!”));

MSc Workshop - © S. Kamin, U. ReddyLect 3 - GUI -8 JPanel and JApplet r Panels are simple lightweight containers. r They support graphics, in addition to user interface components. r Applets are frames that can be drawn inside web pages, included using a HTML tag such as: <APPLET code=“MyApplet.class” width=400 height=300> If you Java-enable your browser, you will see applet.

MSc Workshop - © S. Kamin, U. ReddyLect 3 - GUI -9 GUI Components r Display elements: text labels, image labels. r Basic controls: text fields, buttons, radio buttons, check-boxes, option lists, combo- boxes (drop-down lists), menus, sliders. r Containers: panels, scroll-panes, split-panes, tabbed-panes, toolbars. r Fancy displays: tables, tree-displays. r Fancy controls: file chooser, color chooser. r See

MSc Workshop - © S. Kamin, U. ReddyLect 3 - GUI -10 Using Inheritance to define Panels r Good design practice to define panels as classes, extending the JPanel class. public class MyPanel extends JPanel { int count = 0; // the state JButton button = new JButton(“Click me”); JLabel label = new JLabel(“0”); public MyPanel() { add(button); add(label); } r It is even necessary when you need to include graphics painting.

MSc Workshop - © S. Kamin, U. ReddyLect 3 - GUI -11 Input in panels r Users enter text in text field components r Reading the value in a text field involves four changes to what we’ve seen: import java.swing.*; import java.awt.event.*; public class MyPanel extends JPanel implements ActionListener { 1 2

MSc Workshop - © S. Kamin, U. ReddyLect 3 - GUI -12 Input in panels (cont.) JTextField t = new JTextField(4); public MyPanel () {... add(t); t.addActionListener(this); } public void actionPerformed (ActionEvent e) {... t.getText() } 3 4

MSc Workshop - © S. Kamin, U. ReddyLect 3 - GUI -13 Input in panels (cont.) “ import java.awt.event.* ” must appear verbatim (the event-handling library). “ implements ActionListener ” must appear verbatim (to say that it handles action events). JTextField variable, say t, is declared as instance variable In the constructor, in addition to calling add, call t.addActionListener(this); (to say that this object will handle the action events from t )

MSc Workshop - © S. Kamin, U. ReddyLect 3 - GUI -14 Input in applets (cont.) Define actionPerformed method. m Called when user types Enter key in the text field.  Use getText method of JTextField class to get the String contained in t. 4

MSc Workshop - © S. Kamin, U. ReddyLect 3 - GUI -15 The event model r The code above is one instance of the event model. r With the event model, the panel can respond to button clicks, mouse movements, etc. r Can also use multiple text fields and distinguish which one was modified. r More in the next lecture...

MSc Workshop - © S. Kamin, U. ReddyLect 3 - GUI -16 Layout r Layout of GUI panels is a tricky business. m Need to allow for resizing of windows. m Need to be flexible about the text labels etc. r Java library defines a number of “Layout Managers” to facilitate layout. r Or, you can define your own or import third party libraries. r