> GUI Programmierung in Java Teil 2

Transkript

1 > GUI Programmierung in Teil 2 Mark Egloff

2 Lernziel Heute Abend > Sie lernen eine 2. Library für die GUI Erstellung kennen > Sie kennen die Begriffe JFC, SWING und MVC und können diese auch erklären > Sie erstellen eigene Oberflächen Mark Egloff

3 > Let s Mark Egloff

4 Was ist? > steht zum einen für ein rhythmisch-dynamisches Phänomen und eines der Grundelemente des Jazz. Durch die minimale Verschiebung der Betonungen innerhalb des Taktes vom Puls (den vier Taktschlägen oder Beats) weg entsteht ein "federnder", als "-Feeling" bezeichneter Rhythmuseindruck, der für die Musikrichtung des Jazz charakteristisch ist. (siehe (Rhythmus)) > Bei handelt es sich um eine API zum Programmieren von grafischen Benutzeroberflächen. Seit -Version 1.2 (1998) ist es Bestandteil der -Runtime. gehört zu den Foundation Classes (JFC). baut auf dem älteren AWT auf und ist mit den anderen APIs verwoben. Mark Egloff

5 Warum wenn es AWT gibt? > Obwohl das Abstract Window Toolkit das Problem einer einheitlichen Benutzeroberfläche lösen sollte, ist dies bei Sun nicht ganz gelungen. Das AWT war von Anfang an zusammengepfuscht. > Das AWT wurde damals in ca. 6 Wochen erstellt und dann als Folge nachträglich umgebaut. Von AWT 1.0 auf AWT 1.1 fanden erhebliche Einbüssungen in der Rückwärts-Kompatibilität statt. > SUN hatte das AWT einfach gehaltenund nur auf die wesentlichsten GUI Elemente beschränkt. Dies gefiel den GUI Entwicklern gar nicht. > Darauf hin konzipierte Netscape kurzerhand die Internet Foundation Classes (IFC), die das AWT in wesentlichen Punkten ergänzten. Auch Microsoft mischt in Form von Erweiterungen mit. Microsoft bot die Application Foundation Class (AFC) an. Mark Egloff

6 Warum wenn es AWT gibt? > Im April des Jahres 1997 haben sich Sun, Netscape und IBM auf eine GUI- Bibliothek geeinigt, die auf Netscapes IFC aufbaut und das AWT in der -Version 1.2 erweitert. Der Name des Toolkits wude JFC ( Foundation Classes) genannt. > Als 1997 in San Francisco auf der One die neuen JFC-Komponenten vorgestellt wurden, entschied sich Georges Saab, ein Mitglied des JFC- Teams, für Musik parallel zur Präsentation, und zwar -Musik, weil der Entwickler glaubte, dass sie wieder in Mode käme. Dementsprechend wurden die neuen grafischen Elemente in einem Paket namens abgelegt. Obwohl der Name offiziell dem Kürzel JFC weichen musste, war er doch so populär, dass er bestehen blieb. Mark Egloff

7 Foundation Classes > Die JFC besteht im Wesentlichen aus: > -GUI-Komponenten > Pluggable Look&Feel > Accessibility > 2D-API > Drag&Drop AWT 2D Drag&Drop Look & Feel Accessibility JFC (ab 1.2) > Das AWT wird heute als Subgruppe von JFC angesehen. Mark Egloff

8 Unterschiede zu AWT? Das Heavyweight Peer-Prinzip bei AWT > Die ursprüngliche AWT-Implementierung benötigt so genannte Peer- Klassen, die als native Funktionen auf der speziellen Benutzeroberfläche implementiert sind. Eine Schaltfläche unter AWT kennt dann einen Partner auf der Betriebssystemseite, der die Visualisierung vornimmt. JVM Button Betriebssystem Heavy Mark Egloff

9 Unterschiede zu AWT? > Die Lösung der AWT Peer Variante hat seine Vor und Nachteile + Der Vorteil besteht darin, dass durch die nativen Peer-Klassen die Oberfläche schnell wird und der Speicherverbrauch sich im Rahmen hält. - Leider zeigen die Programme unter den verschiedenen Betriebssystemen bisweilen merkwürdige Seiteneffekte. So kann ein Textfeld unter Windows weniger als 64K Zeichen aufnehmen, bei anderen Oberflächen ist dies egal. - Da das AWT auch nur Komponenten anbietet, die auf jeder Plattform verfügbar sind, ist das Angebot an Widgets sehr beschränkt. Moderne grafische Elemente, sei es auch nur ein Icon auf einer Schaltfläche, sind vom AWT nicht vorgesehen. Mark Egloff

10 Unterschiede zu AWT? Das Lightweight Peer-Prinzip bei > verwendet für seine GUI Elemente keine Peer Klasse. benützt lediglich ein Peer für das Grundfenster. Alle anderen Elemente werden dann mittels Zeichenoperationen auf die Oberfläche aufgemalt. JVM JFrame JButton Betriebssystem win MAC Mark Egloff

11 Unterschiede zu AWT? Das Lightweight Peer-Prinzip bei > Auch diese Lösung hat natürlich seine Vor- und Nachteile: + Diese Lösung ist vollständig in und somit plattformunabhängiger + Eine Leichtgewicht-Komponente kann durchsichtig sein und muss nicht mehr in einen rechteckigen Bereich passen. Da alle Komponenten nun gemalt werden, lässt sich alles ohne Rücksicht auf das unterliegende grafische System zeichnen - Leider aber auch langsamer. Alle Komponenten werden mit primitiven Zeichenoperationen gemalt, so etwa eine Schaltfläche aus einem Rechteck mit Schatten und einem Text in der Mitte. Mark Egloff

12 Unterschiede zu AWT? Das Lightweight Peer-Prinzip bei > Andere Unterscheide bzw. Gemeinsamkeiten bei zu AWT sind > bietet eine sehr umfangreiche Auswahl an GUI Elementen an welche es in AWT nicht gibt z.b. Trees, Tabellen, Bars, Regler etc. Dazu kommen noch fertige Dialoge wie FileChooser, ColorChoser, Message-Dialoge etc. > verwendet für die Eventbehandlung das genau gleiche Prinzip und somit die genau gleichen Klassen wie das AWT > Im Vergleich zu AWT hat man mit folgende zusätzliche Möglichkeiten, Tastenkombinationen zur Steuerung von Komponenten, Drag & Drop, Setzen des Look and Feels, Tooltips, automatisches Double Buffering, andere Layout-Manager/Panels Mark Egloff

13 Unterschiede zu AWT? Die ungesunde Mischung & AWT gleichzeitig > Zwar können und AWT gleichzeitig in einer Appliaktion genutzt werden. Jedoch kann es zu so genannten Clipping Problemen kommen Heavyweight Komponenten sind direkt mit dem Betriebsystem verknüpft und können nicht mit kombiniert werden. Operationen bzw. Flächen werden von AWT Komponenten ignoriert z.b. Clipping Probleme Mark Egloff

14 Set Demo C:\jdk1.5.0_06\demo\jfc\Set2\Set2.html Mark Egloff

15 Aufbau der Library > Die -API besteht in aus ca.20 Packages. Alle Packages sind in einer Hierarchie namens javax.xxxx untergebracht. > ist in 1.2 in folgende Pakete eingeteilt. > javax.accessibility enthält Klassen um -Anwendungen auch auf anderen Geräten und anderen Ein- und Ausgabemedien verfügbar zu machen. > javax.swing ist eigentlich das wichtigste Paket und enthält alle Klassen, um grafische Benutzerelemente zu erstellen. > javax.swing.border bietet Klassen an, mit denen spezielle Rahmen um grafische Benutzerelemente gezeichnet werden können. > javax.swing.colorchooser wird benötigt, wenn Sie die Klasse javax.swing.jcolorchooser einsetzen wollen, um dem Anwender ein Schaltelement zu präsentieren, das die Auswahl einer Farbe ermöglicht. Mark Egloff

16 Aufbau der Library > ist in 1.2 in folgende Pakete eingeteilt (Fortsetzung ) > javax.swing.event dieses Paket stellt genaugenommen lediglich eine Erweiterung der Klassen aus java.awt.event dar, da auch die Interfaces und Klassen aus jenem Paket für -Elemente verwendet werden. > javax.swing.filechooser enthält Klassen, die vom Steuerelement javax.swing.jfilechooser benötigt werden. > javax.swing.plaf bietet eine Auswahl verschiedener Klassen an, über die jeweils das Look-and-Feel einer -Anwendung gezielt eingestellt werden kann. > javax.swing.plaf.basic enthält Klassen, um grundlegende Funktionen für ein Look-and-Feel zu unterstützen. > javax.swing.plaf.metal ist verantwortlich für das Standard-Look-and- Feel von. javax.swing.plaf.multi bietet die Möglichkeit, verschiedenartige Look-and-Feels zu kombinieren. Mark Egloff

17 Aufbau der Library > ist in 1.2 in folgende Pakete eingeteilt (Fortsetzung ) > javax.swing.table wird nur dann benötigt, wenn Sie das Steuerelement javax.swing.jtable verwenden wollen, um eine Tabelle anzuzeigen. > javax.swing.text enthält Code zur Unterstützung von Text- Eingabefeldern. > javax.swing.text.html enthält Code zur Unterstützung spezieller HTML- Eingabefelder. > javax.swing.tree benötigen Sie nur dann, wenn Sie das Steuerelement javax.swing.jtree einsetzen möchten, um eine hierarchische Aufzählung anzuzeigen. > javax.swing.undo enthält Code, um Undo- und Redo-Funktionen in - Anwendungen einfach zu entwickeln. > Seit der Version gibt es zwei weitere Packages namens javax.swing.html.parser und javax.swing.text.rtf. Mark Egloff

18 Aufbau der Library Von AWT zu > Eine Umstellung von AWT auf ist für den Programmierer einfach gehalten. Für jede AWT Klasse gibt es eine entsprechende Klasse > Alle Klassen beginnen mit einem Jxxxx und somit lassen sich die entsprechenden Klassennamen von AWT zu einfach herleiten z.b. > java.awt.frame javax.swing.jframe > java.awt.panel javax.swing.jpanel > java.awt.button javax.swing.jbutton > java.awt.label javax.swing.jlabel > java.awt.textfield javax.swing.jtextfield > java.awt.textarea javax.swing.jtextarea > Mark Egloff

19 Aufbau der Library AWT Beispiel: Body Mass Index AWT Applikation Applikation Mark Egloff

20 Aufbau der Library AWT Beispiel: Body Mass Index (1/2) AWT Applikation class BMIAWTFrame extends Frame implements ActionListener { Label labelresult; TextField textsize, textweight; public BMIAWTFrame() { settitle("bmi - AWT Frame"); setsize(400, 120); setlayout(new GridLayout(3, 2)); add(new Label("Körpergröße cm:")); textsize = new TextField(); add(textsize);... Applikation class BMIFrame extends JFrame implements ActionListener { JLabel labelresult; JTextField textsize, textweight; public BMIFrame () { settitle("bmi - Frame"); setsize(400, 120); setlayout(new GridLayout(3, 2)); add(new JLabel("Körpergröße cm:")); textsize = new JTextField(); add(textsize);... Mark Egloff

21 Aufbau der Library AWT Beispiel: Body Mass Index (2/2) AWT Applikation... add(new Label("Gewicht in kg:")); textweight = new TextField(); add(textweight); labelresult = new Label(); add(labelresult); Button ok = new Button("OK"); ok.addactionlistener(this); add(ok); setvisible(true); } public void actionperformed( ){ } } Applikation... add(new JLabel("Gewicht in kg:")); textweight = new JTextField(); add(textweight); labelresult = new JLabel(); add(labelresult); Button ok = new JButton("OK"); ok.addactionlistener(this); add(ok); setvisible(true); } public void actionperformed( ){ } } Mark Egloff

22 Aufbau der - Library Grundlegendes Klassendiagramm Mark Egloff

23 Die Basisklasse javax.swing.jcomponent > Die Klasse java.awt.component bildet die Basisklasse der Objekte, die als grafische AWT-Komponenten auf den Schirm kommen. > Diese wird nun für -Komponenten noch einmal zu javax.swing.jcomponent erweitert und bildet die Basisklasse für sämtliche Interaktions Elemente. > Allerdings leitet JComponent nicht direkt von Component ab, sondern erst von java.awt.container (und Container dann direkt von Component). Dies hat zur Konsequenz, dass jede JComponent automatisch auch ein Container ist. Component Container JComponent AWT Button JButton Mark Egloff

24 Aufbau der - Library Grundlegende Container Klassen bei > Bei wurden die Haupt-Cotainer Klassen nicht gross geändert, so existieren die entsprechende Klassen JFrame, JWindow und JDialog. Mark Egloff

25 Aufbau der - Library Die neuen LayoutManager bei (1/2) > Bei den LayoutManagern gab es einige Neuerungen. So kamen Manager speziell für das Verwalten der Scrollbereiche sowie 2 neue für die grafische Unterteilungen hinzu Mark Egloff

26 Aufbau der - Library Die neuen LayoutManager bei (2/2) Beispiel BoxLayout z.b. GridLayout gleichmässige Gittereinteilung setlayout(new GridLayout(1,3)); add(new JLabel("Left")); add(new JTextField("Middle")); add(new JButton("Right")); setsize(150, 220); setvisible(true); z.b. BoxLayout angepasste Gittereinteilung setlayout( new BoxLayout( getcontentpane(), BoxLayout.X_AXIS)); add(new JLabel("Left")); add(new JTextField("Middle")); add(new JButton("Right")); setsize(150, 220); setvisible(true); Mark Egloff

27 Aufbau einer - Komponente Das MVC Konzept > Bei wurde nebst des Lightweigth Konzeptes eine weitere bedeutungsvolle Eigenschaft geschaffen. Jede Komponente baut auf einem vereinfachtem MVC Konzept auf. > MVC steht für Model View Controller. MVC ist ein Architekturmuster zur Aufteilung von Softwaresystemen in das drei Einheiten Datenmodell (engl. Model), Präsentation (engl. View) und Programmsteuerung (engl. Controller). > Das MVC Pattern baut auf dem Observer Designpattern auf und benutzt daher dieselben Konzepte der Registrierung und Benachrichtigung > Controller Verwaltet Subjekt und Beobachter > Model Subjekt (Observable) > View Beobachter (Observer) Mark Egloff

28 Aufbau einer - Komponente Das MVC Konzept View update() Controller action() 1. Model change() register() notify() Klassendiagramm Kollaborationsdiagramm Mark Egloff

29 Aufbau einer - Komponente Das MVC Konzept > Bei wurde das MVC vereinfacht. Hierbei wurde der Controller und die View zu einem Teil UI-Delegate zusammengefasst. Mit anderen Worten eine Komponente besteht aus dem Model und dem Delegator der die Daten verwaltet. Mark Egloff

30 Aufbau einer - Komponente Das MVC Konzept > Dieses Model/Delegate Konzept wird bei folgenden Elementen angewandt: Model ListModel ComboBoxModel ButtonModel Document BoundedRangeModel SingleSelectionModel TableModel TableColumnModel TreeModel TreeSelectionModel Klasse, die dieses Model nutzt JList JComboBox JButton, JToggleButton, JCheckBox, JRadioButton, JMenu, JMenuItem, JCheckBoxMenuItem, JRadioButtonMenuItem JTextField, JPasswordField, JTextArea, JEditorPane, JTextPane JProgressBar, JScrollBar, JSlider JMenuBar, JPopupMenu, JTabbedPane JTable JTable JTree JTree Mark Egloff

31 Aufbau einer - Komponente Beispiel Model / UI-Delegate bei javax.swing.jtree > Das Model/UI-Delegate haben wir schon beim Beispiel JTree angewendet (siehe Lektion 10 Baumstrukturen). > Dort werden die Daten zuerst mittels Hilfsklassen in eine Baumstruktur gebracht und dann der eigentliche GUI Komponente zugefügt UI / Delegate: JTree Model: DefaultTreeModel Mark Egloff

32 Aufbau einer - Komponente Beispiel Model / UI-Delegate bei javax.swing.jtree UI / Delegate : JTree setmodel() getmodel() <<Interface>> TreeModel DefaultTreeModel 0..* childs <<Interface>> TreeNode <<Data>> Object DefaultMutable TreeNode Model String Mark Egloff

33 Aufbau einer - Komponente Beispiel Model / UI-Delegate bei javax.swing.jtree Erstellen des TreeModel // Wurzel des Baumes erstellen DefaultMutableTreeNode root = new DefaultMutableTreeNode("The Series"); // Erste Kategorie DefaultMutableTreeNode category = new DefaultMutableTreeNode("Beginner Level"); root.add(category); // Erstes Buch der Kategorie hinzufügen DefaultMutableTreeNode book = new DefaultMutableTreeNode( new Book("The Tutorial...")); category.add(book); // Model erstellen und Baum hinzufügen DefaultTreeModel model = new DefaultTreeModel(root); Mark Egloff

34 Aufbau einer - Komponente Beispiel Model / UI-Delegate bei javax.swing.jtree TreeModel der GUI Komponente zuweisen... // GUI Element erstellen JTree tree = new JTree(); // Modell zuweisen tree.setmodel(model); GUI tree Model model DefaultMutableTreeNode root The Series String DefaultMutableTreeNode category Beginner Level String DefaultMutableTreeNode book The Tutorial Book Mark Egloff