1. Programming with Java’s Swing API February 4, 2003 CMPS 109 - Advanced Programming Graphical User Interfaces

2. Does your program do what it is supposed to? If the program doesn’t work, there’s no point to using it. Is the program’s use easy to understand for its intended audience? If the people you are writing the program for don’t understand how it works, they can’t use it. Does the program perform at an acceptable speed? If it takes forever to run, people will not want to use it. Priorities

3. Interfaces are everywhere in programming Application Program Interface (API) Class interface Library interface User Interfaces (UIs) are how your program interacts with the outside world. Most UIs are bad. Programmers don’t have the training to create a good UI. Psychology is providing the framework for understanding what makes a good User Interface. Interfaces

4. Graphical User Interfaces (GUIs) provide the users with an easily understood metaphor for interacting with a computer. GUIs consist of “Windows” that are blocked off areas of the screen, and “Components” or “Widgets” within those Windows. Examples of Components: Labels, Buttons, Images, Text Entry boxes, Lists, Trees, Menus, etc. Graphical Interfaces

5. The Abstract Windowing Toolkit (AWT) was Java’s original GUI toolkit. It used “native” widgets. It was difficult to program. It did not support a wide range of widgets. Swing was introduced with Java 2 (the Java 1.2 API) It only used native windows, all other widgets were drawn “by hand”. Swing supports a wider range of widgets, and is easily extended. AWT and Swing

6. Swing has its own “Look and Feel” that is distinct from the “native” look and feel of the systems it runs on. Many companies have developed their own Look and Feel so that users can’t see the difference. Java Swing

7. import java.awt.*; import javax.swing.*; class HelloButton { public static void main( String[] args ) { JFrame frame = new JFrame( “Hello Button” ); Container pane = frame.getContentPane(); JButton hello = new JButton( “Hello, world!” ); pane.add( hello ); frame.pack(); frame.show(); } A Small Sample

8. You need to import both java.awt.* and javax.swing.* to get all the basic classes. What to import import java.awt.*; import javax.swing.*;...

9. Creating a JFrame gives you a “top level” container. “Top level” containers are backed by native UI components (usually Windows or Dialogs). The string passed to the constructor is the title of the window. Creating a JFrame... JFrame frame = new JFrame( “Hello Button” );...

10. You can’t add components directly to a JFrame. JFrame uses different layers (panes) to support various Swing features (Drag and Drop, ToolTips, etc). Instead, you must add to the frame’s Content Pane. Call getContentPane() to get the content pane. The Content Pane... Container pane = frame.getContentPane();...

11. Create another Swing component. In this case, a standard push-button is created with the label “Hello, World!”. This button doesn’t do anything when pushed. Call add() with the component as a parameter to add it to the frame’s content pane. Adding content... JButton hello = new JButton( “Hello, world!” ); pane.add( hello );...

12. pack() will resize the frame to the minimum size needed to display the items in the content pane. Calling show() will show the JFrame. You must set the size of the frame (directly or with pack()) before you show the frame. Resizing and showing... frame.pack(); frame.show();...

13. When you close the window, you might notice that your program does not quit. When the first Swing component is created, a new Thread is created also. Threads allow a single program to do two things “at the same time.” In Swing’s case, the new thread is created to track and capture events (mouse, keyboard, etc). We’ll cover how to handle quitting and threads in Swing a little later. Quitting your program?

14. Swing Provides the following Components: Swing Components Buttons: JButton JCheckBox JRadioButton Containers: JPanel JFrame JDialog Lists: JList JTree JTable Menus: JMenuBar JMenu JMenuItem Miscellaneous: JFileChooser JCollerChooser JToolTip Organizers: JSplitPane JTabbedPane JToolBar Ranged Controls: JSpinner JSlider JProgressBar Scrolling: JScrollBar JScrollPane Text: JTextArea JTextField JLabel

15. Threads are a way of separating the work that a program does into multiple execution paths. They are sometimes compared to mini-programs. In Swing, the Event thread is an infinite loop. You have to call System.exit( 0 ); to actually quit. The Event Thread

16. Each pass through the event loop, Swing looks for mouse movements, mouse button presses, keyboard presses, etc. If an event is found, Swing passes any appropriate data to the component most directly affected by the event. Keyboard events go to the component that has “focus”. Mouse events go to the component under the mouse (if any). The Event Thread

17. You can “listen” for events in components you create by adding “listeners”. Swing defines a number of listener interfaces: Listening for Events java.awt.eventjavax.swing.event ActionListenerChangeListener MouseListenerDocumentListener MouseMotionListenerTableModelListener WindowListenerTreeModelListener ItemListener

18. You can tell what kind of events a component can receive by looking for functions of the form addXYZListener(), and examining the type of listener the function expects as a parameter. addActionListener() is used by a number of components and needs a parameter of ActionEventListener. Listening for Events

19. Any class can implement an event listener interface. Named inner classes are usually the best way to implement event listeners. Inner classes have direct access to the data stored in the outer class. You never have to wonder where the events are handled. Most event listeners are short functions (5 lines or less). Event Listeners

20. Never use anonymous classes to implement an event listener. Do not try to do long processing in an event listener, or a function called by a listener. Do not try to share listeners between components. Event Listener Warnings

21. import java.awt.*; import javax.swing.*; import java.awt.event.*; class HelloButton { public static void main( String[] args ) { new HelloButton(); } HelloButton() { JButton hello = new JButton( “Hello, world!” ); hello.addActionListener( new HelloButtonListener() ); JFrame frame = new JFrame( “Hello Button” ); Container pane = frame.getContentPane(); pane.add( hello ); frame.pack(); frame.show(); } A Sample Listener

22. private class HelloButtonListener implements ActionListener { public void actionPerformed( ActionEvent e ) { System.out.println( “The event was: “ + e ); } A Sample Listener The event was: java.awt.event.ActionEvent[ACTION_PERFORMED,cmd=Hello, world!] on javax.swing.JButton[,0,0,141x27,layout=javax.swing.OverlayLayout,alignm entX=0.0,alignmentY=0.5,border=javax.swing.plaf.BorderUIResource$Com poundBorderUIResource@1d8ff06,flags=48,maximumSize=,minimumSize=,preferredSize=,defaultIcon=,disabledIcon=,disabledSelectedIcon=,margin= javax.swing.plaf.InsetsUIResource[top=2,left=14,bottom=2,right=14],paintB order=true,paintFocus=true,pressedIcon=,rolloverEnabled=false,rolloverIco n=,rolloverSelectedIcon=,selectedIcon=,text=Hello, world!,defaultCapable=true]

23. The code to create the UI is now in the class constructor. Inner classes that are not static have to be created by class functions that are not static. The components that are added to the frame are created and configured before the frame is even created. Organizing the code to deal with only one component at a time makes it easier to read and change. Changes in the example

24. Some listeners have many events they can listen for. MouseListener (5 events) WindowListener (7 events) Adapters are sometimes provided for these listeners. Implement the listener interface with empty functions. You can subclass the adapter if you don’t want to implement the entire listener. Just override the functions you want to work with. Adapters vs. Listeners

25. import java.awt.*; import javax.swing.*; import java.awt.event.*; class HelloButton { public static void main( String[] args ) { new HelloButton(); } HelloButton() { JButton hello = new JButton( “Hello, world!” ); hello.addActionListener( new HelloButtonListener() ); JFrame frame = new JFrame( “Hello Button” ); frame.addWindowListener( new HelloButtonWindowListener() ); frame.getContentPane().add( hello ); frame.pack(); frame.show(); } Quitting Example

26. private class HelloButtonListener implements ActionListener { public void actionPerformed( ActionEvent e ) { System.out.println( “The event was: “ + e ); } private class HelloButtonWindowListener extends WindowAdapter { public void windowClosed( WindowEvent e ) { System.out.println( “Goodbye!” ); System.exit( 0 ); } Quitting Example

27. A Layout Manager determines where each component should be placed in the window or the container. The book has excellent examples for many of the common layout managers: FlowLayout places components in the window from left to right, like a word processor. GridLayout is like a table, all components are the same size. Border Layout splits the area into 5 predefined spaces like a compass. Component Layout

28. JPanel is an empty component that does not have any visual representation. JPanels are used to split one container into smaller (more manageable) areas. Each JPanel has its own layout manager. You can assign a GridLayout to the JFrame, and put a JPanel with a BorderLayout in each cell. JPanel and Nested Containers

29. JPanelExample() { JFrame frame = new JFrame( “JPanel Example” ); frame.getContentPane().setLayout( new GridLayout( 2, 2 ) ); for( int i = 0; i < 2; i ++ ) { for( int j = 0; j < 2; j++ ) { JPanel p = new JPanel(); p.setLayout( new BorderLayout() ); p.add( new JButton( “North” ), BorderLayout.NORTH ); p.add( new JButton( “South” ), BorderLayout.SOUTH ); p.add( new JButton( “East” ), BorderLayout.EAST ); p.add( new JButton( “West” ), BorderLayout.WEST ); p.add( new JButton( “Center” ), BorderLayout.CENTER ); frame.getContentPane().add( p ); } frame.pack(); frame.show(); } Nested Container Example

31. BoxLayout is an easy to use layout manager that allows you to create complex containment schemes. It is more flexible than the other managers, but only slightly more complex than the FlowLayout. It requires you to use nested containers. BoxLayout

32. BoxLayoutExample() { JPanel p1 = new JPanel(); p1.setLayout( new BoxLayout( p1, BoxLayout.X_AXIS ) ); p1.add( Box.createHorizontalGlue() ); p1.add( new JButton( “Right Aligned” ) ); JPanel p2 = new JPanel(); p2.setLayout( new BoxLayout( p2, BoxLayout.X_AXIS ) ); p2.add( Box.createHorizontalGlue() ); p2.add( new JButton( “Center Aligned” ) ); p2.add( Box.createHorizontalGlue() ); JFrame frame = new JFrame( “JPanel Example” ); frame.getContentPane().setLayout( new BoxLayout( frame.getContentPane(), BoxLayout.Y_AXIS ) ); frame.getContentPane().add( p1 ); frame.getContentPane().add( Box.createVerticalStrut( 20 ) ); frame.getContentPane().add( p2 ); frame.pack(); frame.show(); } BoxLayout Example

34. You can set three size attributes of Swing Components: Minimum, Preferred, and Maximum Unlike most layout managers, BoxLayout respects the size attributes of its components. You get the a lot of flexibility with only a few functions. Why BoxLayout is a better layout

35. BorderFactory allows you to create borders for JComponent descendants (most of Swing). Call setBorder( BorderFactory.createXYZBorder() ); Uses of Borders: Excellent for debugging layout issues when you have nested JPanels and resize problems. Empty borders can be used to create extra spacing around components where nothing is drawn. Compound borders can be used to stack borders on top of each other (for example, an empty area of 12 pixels on all sides, and then an etched border, or another compound border). Borders

36. JTextField is a simple, single line text entry area. JTextArea allows multi-line input, but is much more complex. Text Input with Swing

37. private JTextField textField; private JLabel echoLabel; TextFieldExample() { textField = new JTextField( “Enter text here...” ); echoLabel = new JLabel( “...it will echo here.” ); JFrame frame = new JFrame( “Text Field Example” ); frame.getContentPane().setLayout( new GridLayout( 2, 1 ) ); frame.getContentPane().add( textField ); frame.getContentPane().add( echoLabel ); frame.pack(); frame.show(); } private class TextFieldListener implements ActionListener { public void actionPerformed( ActionEvent e ) { echoLabel.setText( textField.getText() ); } Text Input Example

38. JOptionPane allows you to create simple dialog boxes: showConfirmDialog() presents the user with up to three choices: Yes, No, and Cancel. showInputDialog() gives the user a question and a text field to enter input. showMessageDialog() is great for reporting errors (invalid input) and simple messages. Each function has multiple versions, with varying degrees of configuration. JOptionPane

39. JFrame and JDialog both provide the setJMenuBar() function to specify the menu bar for that window. JMenuBar provides an add() function to add JMenus. JMenu provides an add() function for JMenuItems, Strings, and Components. JMenus can be added to other JMenus. Menu bars and Menus

40. private JFrame mbeFrame; MenuBarExample() { mbeFrame = new JFrame( “Text Field Example” ); mbeFrame.setJMenuBar( makeMenuBar() ); mbeFrame.getContentPane().add( new JLabel( “Other Stuff Here.” ) ); mbeFrame.pack(); mbeFrame.show(); } private class QuitItemListener implements ActionListener { public void actionPerformed( ActionEvent e ) { if( JOptionPane.showConfirmDialog( mbeFrame, “Do you want to quit?”, “Confirm Quit”, JOptionPane.YES_NO_OPTION ) == JOptionPane.YES_OPTION ) { System.exit( 0 ); } Menu Bar Example

41. private JMenuBar makeMenuBar() { JMenuItem quitItem = new JMenuItem( “Quit” ); quitItem.addActionListener( new QuitItemListener() ); JMenu fileMenu = new JMenu( “File” ); fileMenu.add( new JMenuItem( “Item 1” ) ); fileMenu.add( “Item 2” ); fileMenu.addSeparator(); JMenu fontMenu = new JMenu( “Font” ); fontMenu.add( “Times” ); fontMenu.add( “Courier” ); fontMenu.add( “Script” ); JMenu editMenu = new JMenu( “Edit” ); editMenu.add( “Undo” ); editMenu.addSeparator(); editMenu.add( fontMenu ); JMenuBar mbar = new JMenuBar(); mbar.add( fileMenu ); mbar.add( editMenu ); return( mbar ); } Menu Bar Example

42. Demonstrations and Questions