Lecture 3 - Graphical User Interfaces

1. Lecture 3 - Graphical User Interfaces • GUI toolkits in Java API • JFrame • GUI components • Input in Frames • Reading: • Horstmann, Chapters 4, 10 and 12 • Swing tutorial • Java tutorial, Chapter on Swing (downloadable)

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

3. JFrame • 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. • Frame – The Java term for a GUI window.

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

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

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

7. The contentPane • 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”)); • Or, we can create a new contentPane: JPanel pane = new JPanel(); frame.setContentPane(pane); pane.add(new JLabel(“Hello World!”));

8. JPanel and JApplet • Panels are simple lightweight containers. • They support graphics, in addition to user interface components. • 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. </APPLET>

9. GUI Components • Display elements: text labels, image labels. • Basic controls: text fields, buttons, radio buttons, check-boxes, option lists, combo-boxes (drop-down lists), menus, sliders. • Containers: panels, scroll-panes, split-panes, tabbed-panes, toolbars. • Fancy displays: tables, tree-displays. • Fancy controls: file chooser, color chooser. • See http://java.sun.com/docs/books/tutorial/uiswing/components/components.html

10. Using Inheritance to define Panels • 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); } } • It is even necessary when you need to include graphics painting.

11. Input in panels 1 2 • Users enter text in text field components • 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 {

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

13. Input in panels (cont.) 1 “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). 2 3

14. Input in applets (cont.) Define actionPerformed method. • Called when user types Enter key in the text field. • Use getText method of JTextField class to get the String contained in t. 4

15. The event model • The code above is one instance of the event model. • With the event model, the panel can respond to button clicks, mouse movements, etc. • Can also use multiple text fields and distinguish which one was modified. • More in the next lecture...

16. Layout • Layout of GUI panels is a tricky business. • Need to allow for resizing of windows. • Need to be flexible about the text labels etc. • Java library defines a number of “Layout Managers” to facilitate layout. • Or, you can define your own or import third party libraries. • http://java.sun.com/docs/books/tutorial/uiswing/mini/layout.html