Introduction to Swing

Introduction and Background Swing is Sun’s second Java GUI kit Built on AWT, but most programs will directly use only Swing classes GUIs are built of components organized using containers Swing components interact with the user using an event listener model

About JFC and Swing JFC – Java TM Foundation Classes Encompass a group of features for constructing graphical user interfaces (GUI). Implemented without any native code. “Swing” is the codename of the project that developed the first JFC components (JFC ). The name “Swing” is frequently used to refer to new components and related API. 1)Initially released as an extension to JDK 1.1

About JFC and Swing (cont) Swing features: –The Swing Components Dialog, Tabbed pane, Buttons, File Chooser,... –Pluggable Look and Feel –Accessibility API Screen readers, Braille displays,... –Java 2D TM API (Java 2 Platform only) –Drag and Drop (Java 2 Platform only) Between Java applications and native applications.

Pluggable Look and Feel Each picture shows the same program but with a different look and feel

Parts of a GUI Widgets –objects like buttons, windows, and text fields –users interact with the widgets using the mouse and keyboard –listeners may be attached to one or more widgets Listeners –objects which are notified when a particular event occurs –customized reaction to the event, provided by the GUI designer –standardized set of methods that the listener must implement, provided by the system Event Objects –objects that contain information about the event e.g. where it occurred

Swing Programs Four basic types of Swing program: –JFrame, a top level window decorated like a native window –JWindow, an undecorated stand-alone window (splash- screen) –JApplet, an embeddable applet –JDialog, a popup dialog window Each program type is implemented as a framework class How to write a Swing applet Extend JApplet Implement required framework methods: –init(), called when applet is first loaded –start(), start running –stop(), stop running –destroy(), clean up and terminate In many cases, only init() is needed

Swing Components Components are the “widgets” of Swing Most concrete Swing class names start with a “J” All Swing components subclass JComponent, which provides generic methods Containers, e.g. JPanel, are also components getSize() setBackground() setFont() getSize() setBackground() setFont() setText() setIcon() setText() setIcon() setCurrentDirectory() setFileFilter() setCurrentDirectory() setFileFilter() setMaximum() setMinimum() setPaintTicks() setMaximum() setMinimum() setPaintTicks()

Swing Containers Components can be grouped together into containers Within a container, component positioning is controlled by a layout manager, e.g. FlowLayout, GridLayout Layout managers and containers manage generic AWT Components Intermediate containers are useful for organization: they form a containment hierarchy

Event Listeners User actions (mouse, keyboard) are represented as events Event Listeners are objects that process events on behalf of Swing components Listeners are registered using a component add-listener method, which takes the listener object as its argument There are many classes of events, each of which may include several specific event types Each event class has an associated Java interface, e.g. KeyListener, MouseListener The listener interface specifies methods that the Swing infrastructure will call, one for each event type in the class, e.g. keyPressed(), keyReleased() Event listener objects implement these interface methods

Swing Components Swing provides many standard GUI components such as buttons, lists, menus, and text areas, which you combine to create your program's GUI. Swing provides containers such as windows and tool bars. –top level: frames, dialogs –intermediate level: panel, scroll pane, tabbed pane,... –other Swing components: buttons, labels,...

Containers Descendents of the java.awt.Container class Components that can contain other components. Use a layout manager to position and size the components contained in them. Components are added to a container using one of the various forms of its add method –Depending on which layout manager is used by the container panel.add(component);

Top Level Containers Every program that presents a Swing GUI contains at least one top-level container. A Top level container provides the support that Swing components need to perform their painting and event-handling. Swing provides three top-level containers: –JFrame (Main window) –JDialog (Secondary window) –JApplet (An applet display area within a browser window)

Top Level Containers (cont) To appear on screen, every GUI component must be part of a containment hierarchy, with a top-level container as its root. Each top-level container has a content pane that contains visible components in that top-level container’s GUI. Don’t add a component directly to a top-level container.

JFrame A frame implemented as an instance of the JFrame class, is a window that has decorations such as a border, a title and buttons for closing and iconifying the window. –The decorations on a frame are platform dependent. Applications with a GUI typically use at least one frame.

Example import javax.swing.*; public class HelloWorldSwing { public static void main(String[] args) { JFrame frame = new JFrame("HelloWorldSwing"); final JLabel label = new JLabel("Hello World"); frame.getContentPane().add(label); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.pack(); frame.setVisible(true); } pack() causes a window to be sized to fit the preferred size and layouts of its sub-components

Example import javax.swing.*; public class HelloWorldFrame extends JFrame { public HelloWorldFrame() { super(“HelloWorldSwing”); final JLabel label = new JLabel("Hello World"); getContentPane().add(label); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); pack(); setVisible(true); } public static void main(String[] args) { HelloWorldFrame frame = new HelloWorldFrame(); } In this example a custom frame is created

JDialog Every dialog is dependent on a frame –Destroying a frame destroys all its dependent dialogs. –When the frame is iconified, its dependent dialogs disappear from the screen. –When the frame is deiconified, its dependent dialogs return to the screen. A dialog can be modal. When a modal dialog is visible it blocks user input to all other windows in the program.

JDialog (cont) To create custom dialogs, use the JDialog class directly (as in the previous examples). Swing provides several standard dialogs –JProgressBar, JFileChooser, JColorChooser,... The JOptionPane class can be used to create simple modal dialogs –icons, title, text and buttons can be customized.

Example Object[] options = {"Yes!", "No, I'll pass", "Well, if I must"}; int n = JOptionPane.showOptionDialog( frame, "Duke is a cartoon mascot. \n" + "Do you still want to cast your vote?", "A Follow-up Question", JOptionPane.YES_NO_CANCEL_OPTION, JOptionPane.QUESTION_MESSAGE, null, options, options[2]);

JComponent JComponent is the base class for all Swing components except top-level containers. –JLabel, JButton, JList, JPanel, JTable,... To use a component that inherits from JComponent, it must be placed in a containment hierarchy who’s base is a top- level container.

JComponent (cont) The JComponent class provides the following (partial list): –Pluggable Look & Feel –Keystroke handling –Tooltip support –Accessibility –An infrastructure for painting –Support for borders. All descendents of JComponent are also Containers –A JButton can contain text, icons etc.

Borders Every JComponent can have one or more borders. The class BorderFactory may be used to create standard borders pane.setBorder(BorderFactory. createLineBorder(Color.black)); Using a compound border, you can combine any two borders, which can themselves be compound borders BorderFactory.createCompoundBorder(border1, border2);

Simple Borders

Titled Borders

Compound Border

Intermediate Level Containers Also known as panels or panes Simplify the positioning of other components. –JPanel Play a visible and interactive role in a program’s GUI –JScrollPane –JTabbedPane A panel’s default layout manager is FlowLayout. –Other layout managers can easily be set panel.setLayout(new BorderLayout());

Intermediate Level Containers (cont) By default, panels don’t paint anything except for their background. By default, panels are opaque. –An opaque panel can be set as a top-level container’s content pane. –transparent (non-opaque) panels draw no background.

AWT to Swing AWT: Abstract Windowing Toolkit import java.awt.* Swing: new with Java2 import javax.swing.* Extends AWT Standard dialog boxes, tooltips, … Look-and-feel, skins Event listeners API:

GUI Component API Java: GUI component = class Properties Methods Events JButton

Using a GUI Component 1.Create it Instantiate object: b = new JButton(“press me”); 2.Configure it Properties: b.text = “press me”; [avoided in java] Methods: b.setText(“press me”); 3.Add it panel.add(b); 4.Listen to it Events: Listeners JButton

Anatomy of an Application GUI JPanel JButton JFrame JLabel GUIInternal structure JFrame JPanel JButtonJLabel containers

Using a GUI Component 2 1.Create it 2.Configure it 3.Add children (if container) 4.Add to parent (if not JFrame) 5.Listen to it order important

Build from bottom up Create: Frame Panel Components Listeners Add: (bottom up) listeners into components components into panel panel into frame JPanel JButton Listener JFrame JLabel

Code JFrame f = new JFrame(“title”); JPanel p = new JPanel( ); JButton b = new JButton(“press me”); p.add(b); // add button to panel f.setContentPane(p);// add panel to frame f.show(); press me

Application Code import javax.swing.*; class hello { public static void main(String[] args){ JFrame f = new JFrame(“title”); JPanel p = new JPanel(); JButton b = new JButton(“press me”); p.add(b);// add button to panel f.setContentPane(p); // add panel to frame f.show(); } press me

Layout Management The process of determining the size and position of components. Layout management can be done using absolute positioning –Size and position of every component within the container must be specified. –Does not adjust well when the top-level container is resized. –Does not adjust well to differences between users and systems, such as font size.

Layout Manager Heuristics Left to right, Top to bottom c n s ew FlowLayoutGridLayout BorderLayout none, programmer sets x,y,w,h null One at a time CardLayout GridBagLayout JButton

Layout Management (cont) Layout management is often performed using layout mangers –Components can provide size and position hints to layout managers, but layout managers have the final say on the size and position of those components.

Layout Management (cont) Layout hints –Minimum, preferred and maximum size –X axis alignment, Y axis alignment Customizing layout hints –Invoking setter methods: setMinimumSize, setAlignmentX,... –Subclassing and overriding the getter methods: getMinimumSize, getAlignmentX,...

Layout Management (cont) The Java platform supplies five commonly used layout managers: –BorderLayout –BoxLayout –FlowLayout –GridLayout –GridBagLayout

Layout Management (cont) When using the add method to put a component in a container, the container’s layout manager must be taken into account. –Relative position (BorderLayout) panel.add(component, BorderLayout.CENTER); –Order of addition (BoxLayout, GridLayout,...) panel.add(component);

BorderLayout Has five areas available to hold components –north, south, east, west and center All extra space is placed in the center area –Only the center area is affected when the container is resized. Default layout manager of content panes.

BoxLayout Places components in a single row (left to right) or column (top to bottom). Respects component’s maximum size and alignment hints.

FlowLayout Places components from left to right, starting new rows if necessary. Default LayoutManager of JPanel

GridLayout Places components in a requested number of rows and columns. Components are placed left-to-right and top-to- bottom. Forces all components to be the same size –as wide as the widest component's preferred width –as high as the highest component’s preferred height

Layout Management (cont) The following factors influence the amount of space between visible components in a container: –Layout manager automatically, user specified, none –Invisible components often used with BoxLayout –Empty borders works best with components that have no default border such as panels and labels.

Combinations JButton JTextArea

Combinations n JPanel: BorderLayout c JFrame JPanel: FlowLayout JButton JTextArea

Code: null layout JFrame f = new JFrame(“title”); JPanel p = new JPanel( ); JButton b = new JButton(“press me”); b.setBounds(new Rectangle(10,10, 100,50)); p.setLayout(null);// x,y layout p.add(b); f.setContentPane(p); press me

Code: FlowLayout JFrame f = new JFrame(“title”); JPanel p = new JPanel( ); FlowLayout L = new FlowLayout( ); JButton b1 = new JButton(“press me”); JButton b2 = new JButton(“then me”); p.setLayout(L); p.add(b1); p.add(b2); f.setContentPane(p); Set layout mgr before adding components press methen me

Applets JApplet is like a JFrame Already has a panel Access panel with JApplet.getContentPane( ) import javax.swing.*; public class hello extends JApplet { public void init(){ JButton b = new JButton(“press me”); getContentPane().add(b); } JApplet contentPane JButton

Applet Methods Called by browser: init( ) - initialization start( ) - resume processing (e.g. animations) stop( )- pause destroy( )- cleanup paint( )- redraw stuff (‘expose’ event)

Application + Applet import javax.swing.*; import java.awt.*; class helloApp { public static void main(String[] args){ // create Frame and put my mainPanel in it JFrame f = new JFrame(“title”); mainPanel p = new mainPanel(); f.setContentPane(p); f.show(); } class helloApplet extends JApplet { public void init(){ // put my mainPanel in the Applet mainPanel p = new mainPanel(); getContentPane().add(p); } // my main GUI is in here: class mainPanel extends JPanel { mainPanel(){ setLayout(new FlowLayout()); JButton b = new JButton(“press me”); add(b); } JApplet contentPane JPanel JFrame JButton or BrowserCommand line

Applet Security No read/write on client machine Can’t execute programs on client machine Communicate only with server “Java applet window” Warning

Typical command line program Non-interactive Linear execution program: main() { code; }

Interactive command line program User input commands Non-linear execution Unpredictable order Much idle time program: main() { decl data storage; initialization code; loop { get command; switch(command) { command1: code; command2: code; … }

Typical GUI program GUI program: main() { decl data storage; initialization code; create GUI; register callbacks; main event loop; } Callback1()//button1 press {code; } Callback2() {code; } … User input commands Non-linear execution Unpredictable order Much idle time Event callback procs

GUI Events Window System event loop App1 OK Cancel App2 code: OKbtn_click() { do stuff; } OKbtn_mouseover() { do more stuff; } CancelBtn_click() { do different stuff; } mouse click input device App1 event loop App2 event loop which app? which callback? App2 OK Cancel

Example Example: draw program MyDrawClass{ main() { DataStruct drawn_shapes; drawn_shapes.clear(); create Frame, Panel, buttons, … register listeners; } DrawPanel_listener_click() {drawn_shapes.add(new shape); } UndoButton_listener_click() {drawn_shapes.deleteLast(); } …

Events Handling Every time a user types a character or pushes a mouse button, an event occurs. Any object can be notified of an event by registering as an event listener on the appropriate event source. Multiple listeners can register to be notified of events of a particular type from a particular source.

Java Listeners 1.Register with a component to receive events Give component a ref to your Listener object JButton1.addMouseListener(new myMouseListener) 2.Receive events from component Component will call callback procs on your Listener object myMouseListener.mouseClicked(event) JButton1 myMouse- Listener click 2. mouseClicked( ) 1. addMouseListener( )

Types of Event Listeners Act that results in eventListener type User clicks a button, presses Return while typing in a text field, or chooses a menu item ActionListener User closes a frame (main window)WindowListener User presses a mouse button while the cursor is over a component MouseListener User moves the mouse over a componentMouseMotionListener Component becomes visibleComponentListener Component gets the keyboard focusFocusListener Table or list selection changesListSelectionListener

Implementing an Event Handler Implement a listener interface or extend a class that implements a listener interface. Register an instance of the event handler class as a listener upon one or more components. Implement the methods in the listener interface to handle the event.

Example button.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e) { numClicks++; label.setText(labelPrefix + numClicks); }});

Listener API Listeners must inherit from Java Listener base classes ActionListener, KeyListener, MouseListener, MouseMotionListener, WindowListener, … Abstract base classes: xxxxListener Stubbed base classes: xxxxAdapter MouseListener: mouseClicked(), mouseEntered(), mouseExited(), mousePressed(), mouseReleased()

Code button1 = new JButton(“press me”); myListener = new myListenClass; button1.addMouseListener(myListener); // extending a class (“subclassing”): class myListenClass extends MouseAdapter { public void mouseClicked(MouseEvent e){ // button clicked, do stuff here } // OR “implementing an interface”: class myListenClass implements MouseListener { public void mouseClicked(MouseEvent e){ // button clicked, do stuff here } … } An abstract base class (methods, no code)

Event objects mouseClicked(MouseEvent e) MouseEvent: getX( ), getY( ), getClickCount( ), getSource( ), … For each listener type: Component.addxxxxListener( ) xxxxListener abstract base class xxxxAdapter stubbed base class xxxxEvent

Inheritance with Swing class myPanel extends JPanel { public myPanel(){//constructor // create buttons, … } public void paintComponent(Graphics g){ super.paint(g); //call overriden method // paint stuff here } myPanel creates JPanel via inheritance Override JPanel methods to add functionality

Simplifying: Implements class myPanel extends JPanel implements MouseListener { public myPanel(){//constructor button1 = new JButton(“press me”); button1.addMouseListener(this); add(button1); } public void mouseClicked(MouseEvent e){ // button clicked, do stuff here } … } abstract base class

Simplifying: Anonymous classes class myPanel extends JPanel { public myPanel(){ button1 = new JButton(“press me”); button1.addMouseListener( new MouseAdapter() { public void mouseClicked(MouseEvent e){ // button clicked, do stuff here } ); add(button1); } Defining and instantiating a class on the fly

A Simple GUI

Creating a GUI import Java libraries - swing, awt construct a frame object declare widgets - instance variables choose, construct and set the layout add widgets attach listeners implement the listeners Order doesn’t matter here

Find Patterns in the Code for a Simple GUI import javax.swing.JFrame; import javax.swing.JTextArea; import javax.swing.JTextField; import javax.swing.JButton; import java.awt.Container; import java.awt.event.ActionListener; import java.awt.event.ActionEvent; import java.awt.FlowLayout; Swing - Newer GUI library May import many classes at once import javax.swing.*; AWT - Abstract Window Toolkit Older GUI library

Declare Widgets (Instance Variables) /** A simple program demonstrating input from TextFields and Buttons, and output to a TextArea. */ public class FirstExampleDemo extends JFrame { // Declare the GUI widgets we'll use. private JTextArea outputTA = new JTextArea(10, 30); private JTextField inputTF = new JTextField(30); private JButton clearButton = new JButton("Clear"); Basic window widget

Format the Main Window and Add the Widgets // Set up the GUI. public FirstExampleDemo() { this.setSize(400, 300); // Add all the GUI widgets to the frame Container contents = this.getContentPane(); contents.setLayout(new FlowLayout()); contents.add(outputTA); contents.add(inputTF); contents.add(clearButton); Must set the layout style of the window, and add the widgets to the associated Content Pane

Attach Listeners ClearListener cl = new ClearListener(); // Attach listeners clearButton.addActionListener(cl); inputTF.addActionListener(new AddListener()); }

Define Listeners (Implement Interfaces) // Define a listener for the add textfield. private class AddListener implements ActionListener { public void actionPerformed(ActionEvent e) { String text = inputTF.getText(); outputTA.append(text + "\n"); inputTF.setText(""); } // Define a listener for the clear button. private class ClearListener implements ActionListener { public void actionPerformed(ActionEvent e) { outputTA.setText(""); } ActionListener invoked on mouse click or enter key

Implementing a Listener implement an interface –the system needs to know that when an event happens, the listener attached to one of your widgets has a predictable set of methods using inner classes –the listener the GUI designer writes needs to be defined within the GUI class (helper class) –the listener typically needs access to the private instance variables (widgets) of the GUI class to update the display

Complex GUI A Calculator

Patterns from the Calculator GUI Layout choices –FlowLayout, GridLayout, BorderLayout, … JPanel –allows a nested layout design ActionEvent object (ActionListener parameter) methods –public Object getSource() returns the widget which invoked the listener –public String getActionCommand() returns text associated with the widget

Layout Choices & Nesting Panels // Add all the GUI widgets to the frame Container contents = this.getContentPane(); contents.setLayout(new BorderLayout()); contents.add(displayScreen, BorderLayout.NORTH); //A BorderLayout has 5 regions - north, south, east, west, center contents.add(addOperations(), BorderLayout.EAST); contents.add(addNumbers(), BorderLayout.CENTER); JPanel opButtons = new JPanel(); opButtons.setLayout(new GridLayout(3, 2)); //Specify the number of rows, columns in the grid

Using ActionEvent Objects in a Listener private class DigitListener implements ActionListener { public void actionPerformed (ActionEvent e) { displayScreen.append(e.getActionCommand()); } Every digit button needs basically the same listener. All the listener needs to know is the number showing on the button.

… but it doesn’t do anything To make the calculator work properly, we need more code Separate the application logic from the GUI –create a new class, for example CalcApp - program logic class CalcGUI - program GUI class listeners need to call methods from CalcApp –need to have an object from CalcApp as an instance variable in the CalcGUI class –may want to communicate to the GUI from the CalcApp class –send “this” as a parameter to the CalcApp constructor when initializing the instance variable in the CalcGUI class

Create the Program Logic Write code that will logically accept a number generated by clicking the digit buttons Write the code that will logically calculate the sum of two numbers Update the GUI listeners by calling methods from the application class

Conclusions Swing is still buggy (e.g. painting glitches) Lack of built-in support of Java2 in today’s browsers makes using Swing more difficult BUT Swing is powerful and easy to use Java’s OO model is perfectly suited for GUI programming

References index.htmlhttp://java.sun.com/j2se/1.3/docs/api/ index.html ents/components.htmlhttp://java.sun.com/docs/books/tutorial/uiswing/compon ents/components.html