GUI-Programmierung in Java

Transkript

1 GUI-Programmierung in Java Jan Pihl, Daniel Bugdalle 1. Einleitung Betreuer: Thomas Ströder Die Bedienung von Software stellt sich oft als etwas schwierig für viele Nutzer heraus, wenn es keine grafische Oberfläche gibt, mit der sie interagieren können. Die GUI-Programmierung ist eine Möglichkeit, dieses Problem zu lösen. Grafische Benutzeroberflächen stellen eine Schnittstelle zwischen dem Benutzer und der Software dar und bieten damit eine ausgezeichnete Möglichkeit, die Software für möglichst viele Nutzer zugänglich zu machen und die Benutzerfreundlichkeit zu erhöhen. Dies geschieht vor allem durch den Einsatz von Bedienelementen, wie Schaltflächen und Textfeldern, auf Fenstern. Wir betrachten folgendes Programm, welches eine grafische Oberfläche erhalten soll: Der Nutzer gibt eine Zahl in ein Textfeld ein, klickt danach auf eine Schaltfläche, die eingegebene Zahl wird quadriert und das Ergebnis wird auf dem Fenster sichtbar. Wir nehmen dabei an, dass der Nutzer nur Ziffern eingibt. Um für dieses Programm eine grafische Benutzeroberfläche zu erstellen, müssen wir zunächst eine Programmiersprache wählen. Java bietet hier viele verschiedene Möglichkeiten zur Erstellung von grafischen Benutzeroberflächen, welche sogar plattformunabhängig sind. Deswegen werden wir in den folgenden Kapiteln die Grundkonzepte der GUI-Programmierung in Java erläutern und die grafische Oberfläche für das Beispielprogramm nach und nach aufbauen. Dazu beginnen wir mit der Erklärung des MVC-Konzeptes, welches ein wichtiges Grundkonzept für die GUI-Programmierung ist. Darauf basierend beschäftigen wir uns mit der Realisierung von grafischen Oberflächen in Java, indem wir ein Fenster als Grundlage erstellen und darauf die Bedienelemente anordnen. Hierbei erklären wir, wie und wann Bedienelemente dargestellt und erneuert werden. Zum Schluss geben wir den Bedienelementen Funktionalitäten und erhalten dadurch eine voll funktionsfähige grafische Benutzeroberfläche Das Model-View-Controller-Konzept Beim sogenannten Model-View-Controller-Konzept (MVC-Konzept) handelt es sich um ein generelles Konzept bei der Erstellung grafischer Oberflächen. Es stammt aus dem Jahr 1979

2 und wurde vom Norweger Trygve Reenskaug ursprünglich für die Programmiersprache Smalltalk entwickelt. Das Konzept unterscheidet zwischen den folgenden Komponenten, in die ein Projekt getrennt werden sollte: 1. Die View, in der alles stehen soll, was für das Aussehen der Oberfläche verantwortlich ist und die sich mit den Informationen aus dem Model versorgt und gegebenenfalls die Darstellung anpasst. 2. Der Controller, der alle Benutzereingaben auf der View erkennt und dann das Model die erwarteten Änderungen an den Daten ausführen lässt. 3. Das Model, in dem alle Daten des Programms verarbeitet werden und das die View informiert, wenn sich relevante Daten geändert haben. Abbildung 1: MVC-Konzept Der Vorteil dieser Aufteilung ist, dass nun jede einzelne Komponente unabhängig weiterentwickelt, verändert oder ausgetauscht werden kann, ohne dass die anderen Komponenten verändert werden müssen. Bei einer Änderung an der View muss man sich zwar weiterhin Gedanken machen, wie man das Model anzeigen kann, das Model selbst muss allerdings nicht verändert werden, da dieses in einer anderen Komponente steht GUI in Java Die erste Möglichkeit grafische Oberflächen mit Java zu programmieren bot das Abstract Window Toolkit (AWT). Jede grafische Komponente des AWT nutzt hierbei seine Entsprechung im jeweiligen Betriebssystem, auf dem man das Programm laufen lässt. Dies hat den Vorteil, dass jede AWT-Anwendung wie eine normale Anwendung des jeweiligen Betriebssystems aussieht. Gleichzeitig kann das AWT dadurch aber nur solche Komponenten enthalten, die in jedem Betriebssystem zur Verfügung stehen. Um dieses Problem zu lösen, wurde 1997 eine neue GUI-Bibliothek von Sun, Netscape und IBM entworfen, die das AWT

3 erweiterte. Diese sogenannten Java Foundation Classes werden heute zumeist als Swing bezeichnet, da dies auch der Paketname der Bibliothek ist. Ein Vorteil von Swing ist vor allem die größere Anzahl von Komponenten im Vergleich zum AWT. Diese lässt sich vor allem darauf zurückführen, dass die Komponenten von Swing vollständig in Java implementiert sind und durch primitive Zeichenoperationen sichtbar gemacht werden. Auf diese Weise wurde die GUI-Programmierung mit Java zudem noch plattformunabhängiger, da die Programme nun auf jedem Betriebssystem gleich aussehen und sich nicht mehr an das Betriebssystem anpassen müssen. Grafische Oberflächen in Java sind also programmierte Oberflächen, die direkt im Programmcode (nicht etwa in einer externen Datei) erstellt werden. Das bedeutet auch, dass bei einer Änderung der grafischen Oberfläche direkt auf den Programmcode zugegriffen werden muss. Eine Aufteilung nach dem MVC-Konzept ist deswegen besonders sinnvoll. Wir wollen nun die Bibliothek Swing verwenden, um grafische Oberflächen benutzerfreundlich und funktionsfähig zu gestalten. Für den weiteren Verlauf werden wir auch die Bibliothek AWT benötigen. Dazu müssen Swing und AWT zuerst im Programmcode importiert werden. import javax.swing.*; import java.awt.*; Java bietet außerdem einige weitere Bibliotheken an, die die Programmierung von fortgeschrittenen grafischen Oberflächen ermöglichen. Einige davon werden auch von Swing genutzt. Auf diese wollen wir hier nicht eingehen, sondern nur einen kleinen Einblick geben (siehe 9. Ausblick) Das MVC-Konzept bei Swing Eine strikte Trennung zwischen View und Controller, wie sie beim MVC-Konzept vorgesehen ist, ist oft nicht die praktikabelste Möglichkeit eine grafische Oberfläche zu implementieren. Es entsteht ein hoher Kommunikationsaufwand zwischen den Komponenten, da zunächst die View den Controller über die Benutzereingaben informieren muss. Der Controller muss dann dem Model den entsprechenden Auftrag geben, seine Daten zu ändern und schließlich muss die View benachrichtigt werden, dass sie die Informationen abholen und neu darstellen muss. Bei der Programmierung müssen zudem alle Schnittstellen, die es zwischen View und Controller gibt, implementiert werden. Da bei vielen Swing-Komponenten View und Controller sehr stark zusammenhängen, bietet es sich für die Programmierung mit Swing-Komponenten an, View und Controller zusammen als UI zu betrachten und gemeinsam zu programmieren. Dadurch besteht weiterhin die

4 Möglichkeit das Model getrennt von View und Controller zu entwickeln und beispielsweise weitere Models mit der gleichen UI zu verbinden, oder aber auch das Model für andere Programme zu nutzen. 5. Das erste Fenster Ist Swing importiert, kann die Erstellung der grafischen Oberfläche mit der grundlegenden Komponente beginnen. Das Fenster heißt in Swing JFrame und bildet die Grundlage für alle weiteren Komponenten. Es beinhaltet einen Container mit dem Namen Content-Pane, worauf alle weiteren Komponenten abgelegt werden. Ohne das Fenster kann also keine grafische Oberfläche in Swing realisiert werden. Für die Erstellung der grafischen Oberfläche unseres Beispielprogramms benötigen wir also folgende Klassen: UI (vereint View und Controller aus dem MVC-Konzept) Main (erstellt ein Objekt der Klasse UI und startet damit das Programm) Quad (Beispielprogramm, entspricht dem Model. Enthält eine Methode public int calc(int a), die a quadriert und zurückgibt) Da wir annehmen, dass die Klasse Quad (unser Model) vorgegeben ist, beginnen wir mit der Erstellung des Fensters in der Klasse UI. Dazu schreiben wir einen Konstruktor: 1 public class UI extends JFrame { 2 public UI(){ 3 settitle( simplegui ); 4 setsize(300, 300); 5 setvisible(true); 6 setdefaultcloseoperation(jframe.exit_on_close); 7 } 8 } Wie wir sehen erweitert unsere Klasse UI die Klasse JFrame. Zunächst geben wir unserem Fenster in Zeile 1 den Titel simplegui. Die Methode set size(int breite, int hoehe) aus Zeile 4 ermöglicht es uns, die Breite und Höhe des Fensters festzulegen. Damit das Fenster bei der Ausführung des Programms auch sichtbar ist, muss die Sichtbarkeit mithilfe der Methode in Zeile 5 auf den Wert true gesetzt werden. Die Methode in Zeile 6 lässt uns festlegen, was geschehen soll, wenn das Fenster geschlossen wird. In diesem Fall wird dann das Programm beendet. 4

5 In der Hauptklasse Main legen wir nun ein Objekt der Klasse UI an: 1 public class Main{ 2 public static void main(string[] args){ 3 UI simplegui = new UI(); 4 } 5 } Starten wir nun das Programm, sollte das Ergebnis wie folgt aussehen: 6. Komponenten Komponenten sind Bedienelemente, die auf dem Fenster dargestellt werden, oder das Fenster selbst. Wichtige Bedienelemente sind etwa Textfelder und Schaltflächen. Um Komponenten darzustellen verwendet Swing intern die Bibliothek Java2D. Die sogenannten leichtgewichtigen Komponenten von Swing werden von Java2D mit primitiven Zeichenoperationen dargestellt, indem Pfade gezeichnet werden, welche etwa einen Rahmen oder einen Text darstellen können. Dies ist auch der Grund für die Plattformunabhängigkeit von grafischen Oberflächen in Swing: Es werden keine grafischen Komponenten des Betriebssystems genutzt, sondern selbst durch Pfade gezeichnet, wodurch auch die Verschiebung ermöglicht wird. Swing realisiert das durch die Methode paint(), welche automatisch für das Zeichnen einer Komponente aufgerufen wird. Nachdem die grafische Oberfläche programmiert ist, sollte sie also auf jedem Betriebssystem gleich aussehen. Swing bietet, neben dem JFrame, viele weitere Komponenten. Einige oft genutzte Komponenten sind: JLabel: vom Benutzer nicht veränderbarer Text oder Icon, JButton: Schaltfläche, die den Benutzer eine Aktion ausführen lässt, sowie verschiedene Textfeldkomponenten, etwa: JTextField: einzeiliges Textfeld, JTextArea: mehrzeiliges Textfeld, 5 JPasswordField: einzeiliges Textfeld, bei dem die Zeichen verdeckt werden.

6 Fast jede Komponente in Swing ist eine Unterklasse von JComponent. Dadurch erhalten Komponenten grundlegende Methoden, wie etwa die Abfrage der Breite oder Position. Auch die Methode update(), die intern paint() aufruft und die Komponente zeichnet, wird geerbt. So wird ermöglicht, dass jede Komponente zur Laufzeit aktualisierbar ist. Da unser Beispiel bisher nur aus einem Fenster besteht und keine Interaktionsmöglichkeit bietet, fügen wir nun einige Komponenten hinzu. Zur Erinnerung: Der Benutzer soll eine Zahl eingeben, auf eine Schaltfläche klicken und dann ein Ergebnis sehen können. Dazu nutzen wir folgende Komponenten, welche wir als Attribute der Klasse UI hinzufügen: 1 JLabel text = new JLabel("Berechnung"); 2 JLabel output = new JLabel("Ergebnis"); 3 JTextField input = new JTextField(10); 4 JButton calc = new JButton("Berechnen!"); Hier wird in Zeile 1 ein Objekt der Klasse Label erstellt, welches den Text Berechnung zeigt. In Zeile 2 erstellen wir ein weiteres Label, in dem später das Ergebnis ausgegeben wird. In Zeile 3 wird ein Textfeld erstellt, welches eine Breite von 10 Zeichen besitzt. Zum Schluss erstellen wir den Button, der die Berechnung mit der im JTextField eingegebenen Zahl starten soll. Will man erreichen, dass die Labels zentriert sind, wird folgender Konstruktor genutzt: JLabel text = new JLabel("Berechnung", JLabel.CENTER); Natürlich können die Eigenschaften jeder einzelnen Komponente auch im Nachhinein verändert werden. Dabei lassen sich je nach Komponente beispielsweise Schriftart, -farbe, und -größe ändern, oder Eigenschaften wie die Hintergrundfarbe der Komponente (sogar während der Laufzeit) festlegen. Um die Komponenten verwenden zu können, müssen diese aber noch zum Content-Pane des JFrames hinzugefügt werden. Dies geschieht mit Hilfe der add-methode im Konstruktor unserer Klasse UI. add(text); Dies wird für jede Komponente durchgeführt, die später auf dem JFrame sichtbar sein soll. Wenn wir das Programm ausführen, wird sichtbar, dass auf unserem Fenster nur die zuletzt hinzugefügte Komponente zu sehen ist. Das liegt daran, dass das standardmäßige Layout alle Komponenten an der gleichen Stelle positioniert und passend skaliert, wodurch die Komponenten übereinander abgelegt werden. Eine genauere Erklärung und Lösung des 6

7 Problems erfolgt im nächsten Abschnitt, welcher sich mit Layoutmanagern befasst, die auch die Anordnung von Komponenten ermöglicht. 7. Layoutmanager Nachdem wir nun Komponenten und Container kennen, müssen wir diese zusammen bringen. Dafür gibt es zwei Möglichkeiten: Entweder wir nutzen den GUI-Builder einer Entwicklungsumgebung und lassen uns den Code generieren, indem wir die grafische Oberfläche visuell erstellen, oder wir nutzen die von Swing ebenfalls mitgelieferten Layoutmanager selbst in unserem Programmcode. Das Layout bezieht sich nur auf die View und besitzt deshalb keine Verbindung zum Model oder zum Controller. Lediglich das Aussehen der Oberfläche wird hier geändert. Layoutmanager bieten die Möglichkeit, Komponenten zu einem Container (im Beispiel dem JFrame) hinzuzufügen und nach einem bestimmten Muster anzuordnen. So lassen sich Komponenten beispielsweise nebeneinander oder übereinander anordnen. Da Komponenten existieren, die auf dem Container des JFrames einen eigenen Kind-Container anlegen, ist es auch möglich, dass Komponenten nur auf einem Kind-Container nach einem ausgewählten Layout angeordnet werden. Beispiele für Layoutmanager: FlowLayout: Ordnet die Komponenten nebeneinander auf dem Container an. GridLayout: Gibt allen Komponenten die gleiche Größe, passt sie an das Fenster an und ordnet sie entsprechend der im Konstruktor übergebenen Anzahl an Reihen und Spalten an. BorderLayout: Teilt den Container in 5 verschiedene Bereiche und nutzt eine modifizierte add-methode, um Komponenten im gewünschten Bereich zu platzieren. 7

8 Für unser Beispiel bietet sich das GridLayout an. Um dies zu realisieren fügen wir folgenden Code vor den add-aufrufen im Konstruktor der Klasse UI ein: 8 setlayout(new GridLayout(4,0)); Diese Zeile bewirkt, dass die Komponenten auf dem Fenster in einem Raster angeordnet werden. Die Parameter des Konstruktors von GridLayout ermöglichen die Festlegung der Anzahl der Zeilen und Spalten des Rasters durch die Übergabeparameter. Der erste Parameter repräsentiert die Anzahl der Zeilen, der Zweite die Anzahl der Spalten. Jedoch wird die Anzahl der Zeilen und Spalten intern in GridLayout berechnet. Wird hierbei eine Anzahl an Zeilen übergeben, wird die Anzahl der Spalten mit dieser Zahl und der Anzahl der Komponenten, die hinzugefügt wurden, berechnet. Der Wert, der hier für die Spalten übergeben wird ist dabei unwichtig. Setzt man die Anzahl der Zeilen auf 0, wird die Anzahl der Zeilen durch die übergebene Anzahl der Spalten berechnet. Werden beide Parameter auf 0 gesetzt, wirft das Layout eine Exception. Bei 4 Komponenten wird die Anzahl der Spalten also intern automatisch auf 1 gesetzt, wenn wir als Parameter 4 und 0 übergeben. Bei den darauf folgenden Aufrufen der add-methode werden die Komponenten vom Layoutmanager automatisch eingeordnet. Würden wir stattdessen das BorderLayout nutzen, müssten wir nicht nur den setlayout- Aufruf, sondern auch die add-methodenaufrufe wie folgt abändern, um das Ergebnis aus der obigen Abbildung zu erhalten. 1 public class UI extends JFrame { 2 public UI(){ setlayout(new BorderLayout()); add(text, BorderLayout.PAGE_START); 7 add(input, BorderLayout.WEST); 8 add(calc, BorderLayout.CENTER); 9 add(output, BorderLayout.EAST); } 12 }

9 Um die Komponenten nun an der gewünschten Stelle einzuordnen, nutzen wir die abgewandelte add-methode. Mit dem zweiten Übergabeparameter übergeben wir die Position. Dazu nutzen wir etwa BorderLayout.PAGE_START, um festzulegen, dass die Komponente über allen anderen angeordnet wird. Das zuvor bestehende Problem, dass nur die zuletzt hinzugefügte Komponente zu sehen ist, entsteht dadurch, dass ein JFrame standardmäßig das BorderLayout wählt und so alle Komponenten im Bereich BorderLayout.CENTER übereinander ablegt werden. 8. Events und Listener Um Komponenten (oder einer grafischen Oberfläche als Ganzes) Funktionalitäten zuweisen zu können, muss eine Möglichkeit existieren, auf bestimme Ereignisse (zum Beispiel auf einen Mausklick) zu reagieren. Dies entspricht der Kommunikation zwischen View und Controller im MVC-Konzept (siehe Abbildung 1). Aktualisierungen und Benutzerereignisse werden von der View an den Controller weitergeleitet. Der Controller wartet auf solche Ereignisse mit sogenannten Listenern und reagiert entsprechend darauf. Um dies in Java zu ermöglichen, nutzt man die Bibliothek java.awt.event. In unserem Beispiel müssen also zunächst zusätzliche Bibliotheken (in der Klasse UI, welche eine Kombination aus View und Controller darstellt) importiert werden. import java.awt.event.actionevent; import java.awt.event.actionlistener; In der Bibliothek befinden sich sowohl Events, als auch die jeweils dazu passenden Listener- Interfaces. In diesen steht für jede mögliche Ereignisart ein Methodenrumpf zur Verfügung. So gibt es beispielsweise im Interface WindowListener Methodenrümpfe für das Öffnen und das Schließen eines Fensters. Ein typisches Beispiel für ein Event ist das Drücken eines JButtons, wodurch ein ActionEvent ausgelöst wird. Andere Eventtypen sind etwa WindowEvents oder MouseEvents, die auf Mausbewegungen und Mausklicks reagieren. Damit wir dem Button aus unserem Beispiel eine Funktion zuweisen können, benötigen wir eine Klasse, die das Interface ActionListener, und damit insbesondere die Methode actionperformed(actionevent e), implementiert. Diese Klasse realisieren wir als innere Klasse in unserer Klasse UI: 1 public class UI extends JFrame{

10 3 class ButtonListener implements ActionListener{ 5 public void actionperformed(actionevent e) { 6 int num = Integer.parseInt(input.getText()); 7 int erg = Quad.calc(num); 8 output.settext(string.valueof(erg)); 9 } 10 } 11 } Diese Stelle im Programmcode repräsentiert die Kommunikation zwischen Model, View und Controller aus dem MVC-Konzept. Dabei ist das übergebene Actionevent das Ereignis, was von der View an den Controller weitergeleitet wird. In Zeile 6 nutzen wir die Methode gettext(), was der Abholung der Daten von der View entspricht, und lassen das Model in Zeile 7 die Berechnung durchführen. Das Ergebnis wird dann vom Model an die View weitergeleitet und in Form eines Textes in der View ausgegeben. Bei jeder Änderung der View muss sie neu erneuert werden. Das bedeutet, dass geänderte Komponenten, wie beim erstmaligen Zeichnen, durch die Methode paint() von Swing durch primitive Zeichenoperationen gezeichnet werden. Damit die Methode actionperformed(actionevent e) ausgeführt wird, müssen wir unsere Listener-Klasse allerdings noch bei der Komponente "anmelden". Um bei jeder Komponente auch nur solche Listener hinzuzufügen, die diese Komponente bedienen können, bieten unterschiedliche Komponenten hierfür unterschiedliche add-methoden. So gibt es beispielsweise für einen JFrame einen WindowListener, aber keinen ActionListener. Bei einem JButton ist genau das Gegenteil der Fall. Bei jeder Komponente können dafür aber beliebig viele Listener eingefügt werden. In unserer Beispieloberfläche müssen wir dem JButton ein Objekt vom Typ ButtonListener hinzufügen. 1 public class UI extends JFrame { public UI(){ calc.addactionlistener(new ButtonListener()); 10

11 } 8 } Wenn wir jetzt den Button drücken, wird ein ActionEvent ausgelöst, welches (nach dem MVC-Konzept) von der View an den Controller übergeben wird, und alle hinzugefügten Listener werden ausgeführt. In unserem Beispiel wird der Input ausgelesen und als Parameter einer Methode an das Model übergeben. Die Rückgabe schreiben wir dann in unser Output-Label und aktualisieren dadurch die View. An dieser Stelle sind wir mit der Erstellung der grafischen Benutzeroberfläche für unser Beispielprogramm fertig. Sie bietet nun alle Funktionen, die für eine benutzerfreundliche grafische Oberfläche nötig sind. 9. Ausblick Swing und AWT bieten neben den beschriebenen Möglichkeiten zur Erstellung von grafischen Oberflächen auch die Möglichkeit selbst auf einem JFrame zu zeichnen. So können etwa Linien, Rechtecke oder Zeichenketten auf einem JFrame gezeichnet werden. Der Programmierer erhält dadurch die Möglichkeit, darzustellen, was er möchte, und ist nicht auf eine Auswahl von Komponenten beschränkt. Man könnte beispielsweise eine Unterklasse von JFrame erstellen (ähnlich zu unserer Klasse UI) und dort die paint-methode überschreiben. In dieser Methode können dann beliebige Formen mit primitiven Zeichenoperationen dargestellt werden. Außerdem kann hier die Bibliothek Java2D verwendet werden, um komplexe Formen zu zeichnen und damit die Möglichkeiten der Gestaltung zu erweitern Zusammenfassung Wir haben in wenigen Schritten eine einfache grafische Benutzeroberfläche in Java programmiert. Die GUI-Programmierung in Java folgt in der Regel dem gleichen Muster: mit Hilfe des MVC- Konzeptes trennen wir Funktionalität und Darstellung so gut wie möglich. Es besteht also die Möglichkeit, die grafische Oberfläche zu ändern (zum Beispiel durch das Hinzufügen einer weiteren Komponente), ohne dass die bis dahin implementierte Funktionalität verloren geht. Außerdem ist es so möglich, die gleiche grafische Oberfläche für ein anderes Programm (ein anderes Model) zu nutzen, ohne die Implementierung der grafischen Oberfläche grundlegend verändern zu müssen.

12 In unserem Beispiel könnte man also das Model durch ein anderes ersetzen, welches mit der gleichen grafischen Oberfläche funktioniert. So könnte zum Beispiel ein Model, das die Wurzel der eingegebenen Zahl zurückgibt verwendet werden. Dazu müsste allerdings der Listener in der Klasse UI abgeändert werden. Das entspricht nicht ganz dem MVC-Konzept, lässt sich aber oft nicht so einfach vermeiden. Außerdem haben wir uns mit dem Design der grafischen Oberfläche auseinandergesetzt, welches in Swing mit Layoutmanagern realisiert wird. So können wir entscheiden, ob wir Komponenten etwa nebeneinander oder in einem Raster anordnen. Setzt man sich mit diesen ein wenig auseinander, kann man jede Komponente beliebig auf dem Fenster platzieren. Da die Komponenten ohne Events und Listener keine Funktionalität bieten, haben wir gezeigt, wie man diese Ereignisse behandelt und dafür den Datenaustausch zwischen View, Controller und Model nutzt. So kann jede Komponente auf bestimmte Ereignisse reagieren. Unser Beispielprogramm ist damit voll funktionsfähig und bietet eine benutzerfreundliche und einfache Oberfläche. Literaturverzeichnis o Ullenboom, Christian: Java ist auch eine Insel. Das umfassende Handbuch, hg. Von Rheinwerk Computing, Bonn, 10., aktualisierte Auflage, 2011 o Abbildung 1: Danny Falss: Vorstellung des Standard-Framework von Sun (verändert), Online-Publikation, Stand: JavaServerFaces/jsf2.html 12