Fachbereich Informatik und Elektrotechnik Java Swing. Advanced Java. Java Swing Programming. Programming in Java, Helmut Dispert

Transcription

1 Java Swing Advanced Java Java Swing Programming

2 Java Swing Design Goals The overall goal for the Swing project was: To build a set of extensible GUI components to enable developersto more rapidly develop powerful Java front ends for commercial applications. The design goals mandated that Swing would: 1. Be implemented entirely in Javato promote cross-platform consistency and easier maintenance. 2. Provide a single API capable of supporting multiple look-and-feelsso that developers and end-users would not be locked into a single look-and-feel. Enable the power of model-driven programmingwithout requiring it in the highest-level API. 3. Adhere to JavaBeans design principlesto ensure that components behave well in IDEs and builder tools. 4. Provide compatibility with AWT APIs where there is overlapping, to leverage the AWT knowledge base and ease porting. Ref.: Sun Microsystems

3 Contents Introduction History JFC Java Foundation Classes What makes Swing so special? Lightweight Components PLAF MVC Delegation Event Model How touseswing Components JComponent Layouts Example Summary

4 AWT Problems with the AWT AWTis not functional enough for full scale applications small widget library widgets have only basic functionality extensions commonly needed AWT Components rely on native peers no platform independency: widgets do not perform exactly the same on different platforms Widget = Window Gadget

5 AWT vs. Swing APIs Java AWT (Abstract Windowing Toolkit) Package: java.awt GUI functionality (graphical user interface) Component libraries: labels, buttons, textfields, etc. (platform dependent) Helper classes: event handling, layout managers (window layouts), etc. The Swing APIs Package: javax.swing Greater platform independence - portable "look and feel" (buttons, etc.) AWT and Swing are part of the JFC (Java Foundation Classes) Easy upgrading using "J": Applet JApplet Button JButton

6 Classes, Packages java.lang.object java.awt.component java.awt.container java.awt.panel java.applet.applet Component Container Panel Applet

7 Class JApplet java.lang.object java.awt.component java.awt.container java.awt.panel java.applet.applet javax.swing.japplet Class JApplet: An extended version of java.applet.applet that adds support for the JFC/Swing component architecture. Component Container Panel Applet JApplet

8 Classes, Packages Syntax: public class Name extends java.applet.applet {... } imported package class

9 JFC Java Foundation Classes AWT Swing Accessibility 2D API Drag and Drop AWT: the original GUI toolkit Swing: the new GUI toolkit Accessibility: tools to develop support for users challenged by traditional UI s 2D API: classes for more complex use of painting, shape, colour, and fonts Drag and Drop: tools for implementing the transfer of information between Java applications and native applications

10 JFC Java Foundation Classes consist of: Abstract Windowing Toolkit(AWT) Swing Ab JDK1.2 Leichtgewichtige Komponenten (ohne Betriebsystem Support) Die Swing-Klassenbibliothek baut auf AWT auf und erweitert diese um Komponenten und dem Model-View-Controller(MVC) Java 2D Erstellen und bearbeiten von Bildern und 2D Grafiken Drag and Drop Verschieben mit der Maus Accessibility Schnittstelle zur Einbindung zusätzlicher Ein- und Ausgabegeräte. continued

11 JFC Java Foundation Classes consist of: Abstract Windowing Toolkit (AWT) Schwergewichtige Komponenten (verwenden betriebsystemnahe Funktionen) Umfasst drei Elemente Komponenten Oberflächenelemente Beispiel: Buttons, Labels,... Container Gruppieren und enthalten Oberflächenelemente Beispiel: Fenster Layout Manager Legen fest, wie die Komponenten im Container angesprochen werden können Beispiel: Border Layout (Nord, Süd, Ost, West, Center)

12 AWT Architecture of the Swing Class Library OS-independent part of API OS-dependent part of API Motif ButtonPeer Button ButtonPeer Windows ButtonPeer The button peer interface specifies the methods that all implementations of Abstract Window Toolkit buttons must define.

13 Swing Components Concept of Java peers: When instantiating an AWT component the native environment creates the component. User sees the native look-and-feel, component acts like the native control. Peer: native code that provides this look-and-feel. Each platform has its own set of peers. Example: A Java button appears (and acts) as a Windows button under Windows, as a Macintosh button under Macintosh, and as a Unix button under Unix. Problem: Not all native controls respond in the same way to the same events, so that a Java program shows different behavior under different Java AWT environments. Solution: Lightweightcomponents, written entirely in Java. Swing provides a set of pure Java lightweight components, ensuring better cross-platform compatibility. A lightweight component subclasses java.awt.component-implementing the look-and-feel of the component in Java rather than delegating the lookand-feel to a native peer.

14 AWT Architecture of the Swing Class Library Heavyweight Komponenten (AWT) DieAnbindung der Komponenten geschieht mit sogenannten Peer-Objekten, welche für jedes Betriebsystem neu geschrieben werden. Lightweight Komponenten (Swing) Werden von Java selbst gezeichnet DieContainerklassen (Frame, Dialog, Window, Applet) wurden aus AWT übernommen und erweitert: JFrame, JDialog, JWindow, JApplet als toplevel Container Alleleichtgewichtigen Komponenten können direkt in den Frame gezeichnet werden.

15 AWT AWT - Heavyweight Components Rectangular Opaque Always drawn over top of lightweight components Rely on native peers Look and Feel tied to operating system functionality determined by operating system faster, because the OS handles the work

16 Swing Swing - Lightweight Components Swing uses lightweight components It uses a variant of the Model View Controller Architecture (MVC) It has Pluggable Look And Feel (PLAF) It uses the Delegation Event Model

17 Swing Swing - Lightweight Components Any shape Transparent portions Overlap Mouse events fall through transparent portions Do not rely on native peers Look and Feel drawn at runtime so can vary functionality is the same on all platforms slower because Java has to do the work

18 Swing Lightweight vs. Heavyweight

19 Model View Controller Roots in MVC Swing architecture is rooted in the model-view-controller (MVC) design that dates back to SmallTalk. MVC architecture calls for a visual application to be broken up into three separate parts: A model that represents the data for the application. The viewthat is the visual representation of that data. A controllerthat takes user input on the view and translates that to changes in the model.

20 Model View Controller Independent MVC-elements: Model state data for each component different data for different models View how the component looks onscreen, displays the data Controller dictates how the component reacts to I/O events Controller Model View

21 Model View Controller State Query Change Notification Model Encapsulates Encapsulates application application state state Responds Responds to to state state queries queries Exposes application functionality Exposes application functionality Notifies Notifies views views of of changes changes State Change View Renders Renders the the models models Requests Requests updates updates from from models models Sends user gestures to controller Sends user gestures to controller Allows Allows controller controller to to select select view view View Selection User Gestures Controller Defines Defines application application behaviour behaviour Maps Maps user user actions actions to to model model updates updates Selects view for response Selects view for response One One for for each each functionality functionality Method Invocations Events

22 Modified MVC UI Delegate The Java Swing Architecture uses a modified MVC-model in which the "view" and "controller" are combined in a so-called UI object (User-interface). Component M UI Object UI Manager The UI Object is also called the "UI delegate" or the "delegate object". The modified MVC-model is also referred to a "separable model architecture".

23 Modified MVC UI Delegate Example: JButton ButtonUI Controller View JButton Button Model

24 Modified MVC UI Delegate Example: JButton - Pluggable Look and Feel(PLAF) ButtonUI Controller View UIFactory JButton Button Model

25 Modified MVC UI Delegate Swing Look & Feel AWT Look & Feel JComponent (MVC Model) Component MVC View MVC Controller Peer (native) ComponentUI (Delegate) Platform Widget (native)

26 Swing Components and Container

27 Swing Packages Important Swing Packages: javax.accessibility Provides accessibility for disabled persons javax.swing Provides a set of "lightweight" (all-java language) components that, to the maximum degree possible, work the same on all platforms. javax.swing.border Provides classes and interface for drawing specialized borders around a Swing component. javax.swing.event Provides for events fired by Swing components. javax.swing.plaf Provides user interface objects built according to the Basic look-and-feel.

28 Swing Components: JComponent, JFrame Swing components are similar to components in the Abstract Windowing Toolkit (AWT)butare subclasses of the JComponent class. common root of most of the Swing GUI classes guiding framework for GUI objects extends java.awt.container class Swing applications are subclasses of the class JFrame.

29 Swing Components Swing components and containers are added to a content panewhich represents the full frame area. The content pane is added to the frame.

30 RootPane Structure of a RootPane Menu ContentPane GlasPane LayeredPane

31 Swing Components AbstractButton ButtonGroup ImageIcon JApplet JFrame JButton JCheckBox JComboBox JLabel Abstract Superclass for Swing buttons. Encapsulates a mutually exclusive set of buttons. Encapsulates an icon. The Swing version of Applet. The Swing frame that is more sophisticated than the AWT frame. We can add components in layers, add a menu bar, or paint over the component through a component called a glass pane. The Swing push button class. The Swing check box class. Encapsulates a combo box (a combination of a drop-down list and text field). The Swing version of a Label. continued

32 Swing Components JOptionPane JPasswordField JRadioButton JScrollPane JTabbedpane JTable JTextField JTree The option panes in Swing. Option panes are dialog boxes that display some information to the user or get confirmation from the user so that the program can be executed further based on the choice the user makes. A text field that does not display the text entered into it, but displays the specified character, e.g. * as input is given into the field. The Swing version of a radio button. Encapsulates a rectangular area in which a component may be viewed. Encapsulates a tabbed window. Encapsulates a table-based control. The Swing version of a text field. Encapsulate a tree-based control.

33 Look and Feel PLAF -Pluggable Look and Feel Swing supplies three choices for look and feel: - Metal style - Swing's default cross-platform LAF - Motif X-Windows system style LAF - Windows style LAF - Mac style (not part of the JDK) - New styles can be designed - Style can be reset/changed at runtime Method: setlookandfeel(plaf)

34 Sample Program - PLAF Windows Look-and-Feel Motif Look-and-Feel Metal Look-and-Feel Java SwingExamp01

35 Sample Program - PLAF import java.awt.event.*; import java.awt.*; import javax.swing.*; public class SwingExamp01 extends Jframe implements ActionListener { private static final String[] MONTHS = { "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" }; public static void main(string[] args) { SwingExamp01 frame = new SwingExamp01(); frame.setlocation(100, 100); frame.pack(); frame.setvisible(true); }

36 Sample Program - PLAF public SwingExamp01() { super("our first Swing-Program"); //Panel zur Namenseingabe hinzufügen JPanel namepanel = new JPanel(); JLabel label = new JLabel( "Name:", new ImageIcon("triblue.gif"), SwingConstants.LEFT ); namepanel.add(label); JTextField tf = new JTextField(30); tf.settooltiptext("enter your name"); namepanel.add(tf); namepanel.setborder(borderfactory.createetchedborder()); getcontentpane().add(namepanel, BorderLayout.NORTH); //Monatsliste hinzufügen JList list = new JList(MONTHS); list.settooltiptext("select the month of your birthday"); getcontentpane().add(new JScrollPane(list), BorderLayout.CENTER); //Panel mit den Buttons hinzufügen JPanel buttonpanel = new JPanel(); JButton button1 = new JButton("Metal");

37 Sample Program - PLAF } button1.addactionlistener(this); button1.settooltiptext("metal-look-and-feel"); buttonpanel.add(button1); JButton button2 = new JButton("Motif"); button2.addactionlistener(this); button2.settooltiptext("motif-look-and-feel"); buttonpanel.add(button2); JButton button3 = new JButton("Windows"); button3.addactionlistener(this); button3.settooltiptext("windows-look-and-feel"); buttonpanel.add(button3); buttonpanel.setborder(borderfactory.createetchedborder()); getcontentpane().add(buttonpanel, BorderLayout.SOUTH); //Windows-Listener addwindowlistener(new WindowClosingAdapter(true));

38 Sample Program - PLAF public void actionperformed(actionevent event) { String cmd = event.getactioncommand(); try { //PLAF-Klasse auswählen String plaf = "unknown"; if (cmd.equals("metal")) { plaf = "javax.swing.plaf.metal.metallookandfeel"; } else if (cmd.equals("motif")) { plaf = "com.sun.java.swing.plaf.motif.motiflookandfeel"; } else if (cmd.equals("windows")) { plaf = "com.sun.java.swing.plaf.windows.windowslookandfeel"; }

39 Sample Program - PLAF } } //LAF umschalten UIManager.setLookAndFeel(plaf); SwingUtilities.updateComponentTreeUI(this); } catch (UnsupportedLookAndFeelException e) { System.err.println(e.toString()); } catch (ClassNotFoundException e) { System.err.println(e.toString()); } catch (InstantiationException e) { System.err.println(e.toString()); } catch (IllegalAccessException e) { System.err.println(e.toString()); }

40 Layout Managers Layout Managers are used to arrange components according to predefined patterns and to allow more complex UIs.

41 Layout Managers Miteinem Layout-Manager werden die Komponenten nach bestimmten Vorgaben auf einer Bedienoberfläche bzw. in einem Container angeordnet. JederContainer hat eine standardmässigereferenz auf ein Objekt, das ein Interface LayoutManager implementiert. MitsetLayout(LayoutManager)kann dieser überschrieben werden. Komponentenwerden mit add(component)dem Container hinzugefügt und in dieser Reihenfolge angeordnet. BeiTop-Level Containern muss der Aufruf der beiden Methoden auf der ContentPane erfolgen.

42 Layout Managers - Flow Layout The Flow Layout arranges components in a left-to-right flow, much like lines of text in a paragraph. Flow layouts are typically used to arrange buttons in a panel. It will arrange buttons left to right until no more buttons fit on the same line. Each line is centered.

43 Layout Managers - Flow Layout import java.awt.*; import java.awt.event.*; public class Flow extends Frame { public static void main(string[] args) { Flow wnd = new Flow(); wnd.setvisible(true); } } public Flow() { super("test FlowLayout"); addwindowlistener(new WindowClosingAdapter(true)); //Layout setzen und Komponenten hinzufügen setlayout(new FlowLayout(FlowLayout.LEFT,20,20)); add(new Button("Button 1")); add(new Button("Button 2")); add(new Button("Button 3")); add(new Button("Button 4")); add(new Button("Button 5")); pack(); }

44 Layout Managers - Border Layout The BorderLayout lays out a container, arranging and resizing its components to fit in five regions: north, south, east, west, and center. Each region may contain no more than one component, and is identified by a corresponding constant: NORTH, SOUTH, EAST, WEST, and CENTER.

45 Layout Managers - Grid Layout The GridLayout lays out a container's components in a rectangular grid. The container is divided into equal-sized rectangles, and one component is placed in each rectangle.

46 Layout Managers - Grid Layout import java.awt.*; import java.awt.event.*; public class Grid extends Frame { public static void main(string[] args) { Grid wnd = new Grid(); wnd.setvisible(true); } } public Grid() { super("test GridLayout"); addwindowlistener(new WindowClosingAdapter(true)); //Layout setzen und Komponenten hinzufügen setlayout(new GridLayout(4,2)); add(new Button("Button 1")); add(new Button("Button 2")); add(new Button("Button 3")); add(new Button("Button 4")); add(new Button("Button 5")); add(new Button("Button 6")); add(new Button("Button 7")); pack(); }

47 Layout Managers - Grid Bag Layout Example: GridLayout Java

48 Layout Managers - Grid Bag Layout The GridBagLayout The GridBagLayout class is a flexible layout manager that aligns components vertically and horizontally, without requiring that the components be of the same size. Each GridBagLayout object maintains a dynamic, rectangular grid of cells, with each component occupying one or more cells, called its display area.

49 Layout Managers - Grid Bag Layout

50 Layout Managers Further Layout Manager CardLayout Kann mehrere Container in einem übergeordneten Container anordnen, erzeugt einen Stapel von Containern, die hintereinander liegen. BoxLayout Ähnlich wie FlowLayout. Die zu einem Container hinzugefügten Komponenten werden von oben nach unten oder von links nach rechts angeordnet. OverlayLayout Ermöglicht das Stapeln von Komponenten bzw. das Übereinanderlegen. ViewportLayout Ein Viewport ist ein sichtbarer Bereich eines scrollbaren Fensters. NullLayout Komponenten können durch Vorgabe fester Koordinaten platziert werden (absolute Positionierung).

51 NullLayout import java.awt.*; import java.awt.event.*; public class NullLayout extends Frame { public static void main(string[] args) { NullLayout wnd = new NullLayout(); wnd.setvisible(true); } } public NullLayout() { super("dialogelemente ohne Layoutmanager"); addwindowlistener(new WindowClosingAdapter(true)); //Layout setzen und Komponenten hinzufügen setsize(300,250); setlayout(null); for (int i = 0; i < 5; ++i) { Button button = new Button("Button"+(i+1)); button.setbounds(10+i*35,40+i*35,100,30); add(button); } } Java

52 Swing MVC Advanced Java MVC Example

53 Swing MVC Example: Simple Calculator Main program: The main program initializes everything and ties everything together. View: creates the display, calls the model as necessary to get information. Controller: Responds to user requests. It is implemented as an Observer pattern --the Controller registers listeners that are called when the View detects a user interaction. Based on the user request, the Controller calls methods in the View and Model to accomplish the requested action. Model: independent of the user interface, performs the basic calculator function.

54 Swing MVC Main program: import javax.swing.*; public class CalcMVC { public static void main(string[] args) { CalcModel model = new CalcModel(); CalcView view = new CalcView(model); CalcController controller = new CalcController(model, view); } } view.setvisible(true); Java Create model, view, and controller