Javas GUI Framework GUI-programmering i Java vha. AWT

dProg2, F07awt.2 AWT og Swing Java har et omfattende framework til konstruktion af grafiske brugergrænseflader GUI widgets (komponenter) –Button, Label, Checkbox, Scrollbar, Frame, Dialog,... LayoutManagers –FlowLayout, BorderLayout, GridLayout,... Events og EventListeners –KeyEvent, MouseEvent, KeyListener, MouseListener Grafik og image-klasser –Color, Font, Graphics –Point, Rectangle –Image, Icon

dProg2, F07awt.3 En GUI består bl.a. af: Menu Label TextField Choice Checkbox List TextArea ScrollPane Button Applet el. Frame

dProg2, F07awt.4 GUI – det grafiske layout En GUI består af en række grafiske komponenter –knapper, lister, tekstfelter Disse fremstår i et visuelt layout i en grafisk container –en applet, en dialogboks, et vindue, eller et selvstændigt vinduesbaseret program (frame) Betegnelsen Container er velvalgt –indeholder polymorfe objekter nøjagtig som Set og Map.

dProg2, F07awt.5 java.awt.Component Container Component, ej Container

dProg2, F07awt.6 Kompositionshierarkier Enhver GUI i Java er et kompositionshierarki Et antal komponenter i en container: anApplet aCanvasaPanel aButton aChoice Container Component, ej Container

dProg2, F07awt.7 Designmønster: Composite Intent Sammensæt objekter i en rekursiv træstruktur der repræsenterer et part-whole hierarki. Mønsteret muliggør at enkelte og sammensatte elementer kan behandles uniformt. Motivation

dProg2, F07awt.8 Composite (2) Structure

dProg2, F07awt.9 Java og Swing Heavyweight vs. lightweight –AWT-komponenter er ”heavyweight” –Swing-komponenter er ”lightweight” Heavyweight komponenter –associeret med ”native” komponenter skabt af det underliggende operativsystem (peer component) –det er ”peer component” der bestemmer fremtoningen Lightweight komponenter –har ingen ”peer component” tilknyttet –fremtoningen bestemmes af Java-systemet på run-time Fremtoning uafhængig af platform! –pluggable look and feel

dProg2, F07awt.10 Swing Flere hundrede klasser og mange pakker! Letvægtskomponenter

dProg2, F07awt.11 Koordinatbaseret layout Mange tidligere tilgange til layout har været direkte koordinatbaserede: Denne tilgang er “uheldig”: –det er meget svært at kode en GUI tekstuelt x y changeButton.setSize(20,50); changeButton.setPosition(80, 60);

dProg2, F07awt.12 Alternativ til koordinatbasering Første bud på en løsning: GUI-Builders –interaktive værktøjer hvor man kan editere sin GUI grafisk –genererer derefter koordinatbaseret kildetekst Men det er ikke godt nok –Java skal være platformuafhængigt –men størrelsen af knapper, skrifttyper m.m. varierer fra platform til platform... I stedet for absolut placering specificeres den relative placering af komponenterne i en GUI –LayoutManagers

dProg2, F07awt.13 LayoutManager Layoutet af componenterne i en container bestemmes af containerens LayoutManager Ikke den absoultte, men den relative placering af komponenterne specificeres Positionen og størrelsen af komponenterne vil automatisk blive justeret når vinduets størrelse ændres

dProg2, F07awt.14 LayoutManager, hierarkiet

dProg2, F07awt.15 FlowLayout width = 400 height = 50 width = 100 height = 200

dProg2, F07awt.16 FlowLayout (2) public class Flow extends Applet { public Flow () { // FlowLayout is default, but... setLayout(new FlowLayout()); add(new Button("Java")); add(new Button("C++")); add(new Button("Perl")); add(new Button("Ada")); add(new Button("Smalltalk")); add(new Button("Eiffel")); }

dProg2, F07awt.17 BorderLayout

dProg2, F07awt.18 BorderLayout (2) import java.awt.*; import java.applet.Applet; public class Border extends Applet { public Border () { setLayout(new BorderLayout()); add("South", new Button("South")); add("North", new Button("North")); add("East", new Button("East")); add("West", new Button("West")); add("Center", new Button("Center")); }

dProg2, F07awt.19 GridLayout row = 3 col = 2 row = 1 col = 0 row = 0 col = 1

dProg2, F07awt.20 GridLayout (2) public class Grid extends Applet { public void init () { int row = 0, col = 0; // row =...; // col =...; setLayout(new GridLayout(row, col)); add(new Button("Java")); add(new Button("C++")); add(new Button("Perl")); add(new Button("Ada")); add(new Button("Smalltalk")); add(new Button("Eiffel")); }

dProg2, F07awt.21 Nestede paneler

dProg2, F07awt.22 Nestede paneler (2) public class NestedPanels extends Applet { public NestedPanels () { Panel center = new Panel();... Panel south = new Panel();... setLayout(new BorderLayout()); add("North", new Button("North")); add("East", new Button("East")); add("West", new Button("West")); add("South", south); add("Center", center); } protected Label messageBar; protected Choice choice; }

dProg2, F07awt.23 Nestede paneler (3) Panel center = new Panel(); center.setLayout(new BorderLayout()); center.add("South", new Button(”Syd")); center.add("North", new Button(”Nord")); center.add("East", new Button(”Øst")); center.add("West", new Button(”Vest")); center.add("Center", new Button(”Center")); Panel south = new Panel(); south.setLayout(new FlowLayout()); south.add(new Button("Help")); choice = new Choice(); choice.addItem("one"); choice.addItem("two"); choice.addItem("three"); choice.addItem("four"); choice.addItem("five"); south.add(choice); messageBar = new Label("This is a message bar."); south.add(messageBar);

dProg2, F07awt.24 Andre LayoutManagere CardLayout –hver komponent fylder det hele –fungerer som kort ovenpå hinanden GridBagLayout –yderst fleksibel, men kompliceret –kompasknapperne i Presenter er udlagt vha. en GridBag. Din helt egen manager –ved at udvide LayoutManager, kan man definere sin egen LayoutManager –ColumnLayout, udlægger komponenter i deres standardstørrelse som FlowLayout, men fra oven og nedefter (kan findes i “Java Examples in a Nutshell”)

dProg2, F07awt.25 Strategy Pattern Context Solution En klasse (Context) kan have glæde af forskellige implementationer af en algoritme (som klienter kan levere) 1.Definér en interface type som en abstraktion for algoritmen 2.ConcreteStrategy-klasser implementerer interfacet (forskellige algoritmer) 3.Klienten leverer et ConcreteStrategy-objekt til Context

dProg2, F07awt.26 Øvelse 1 Hvordan ser kompositionshierarkiet for applet’en ud som UML objekt-diagram?

dProg2, F07awt.27 Øvelse 2 Foreslå kompositionshierarki og LayoutManagere for en GUI for en lommeregner:

dProg2, F07awt.28 Hændelser GUI-komponenter kommunikerer med resten af programmet via hændelser Hændelser repræsenterer input eller handlinger Source (kilde) –den komponent hvor hændelsen opstår Listener –et objekt som modtager og behandler en hændelse Hændelser er klassificeret i hændelsesklasser –subklasser af AWTEvent Hver hændelsestype modsvares af en listenertype

dProg2, F07awt.29 Simpel hændelseshåndtering Tryk: dublerer teksten i tekstfeltet Slet: sletter teksten i tekstfeltet

dProg2, F07awt.30 Simpel hændelseshåndtering (2) public class SimpleEventHandler extends Applet { private TextField display; private Button button1, button2; public void init() { display = new TextField("", 20); add(new Panel().add(display)); button1 = new Button("Tryk"); button2 = new Button("Slet"); Panel p = new Panel(); p.add(button1); p.add(button2); add(p); ActionListener myListener = new ButtonActionListener(display); button1.addActionListener(myListener); button2.addActionListener(myListener); }

dProg2, F07awt.31 Listener som indre klasse class ButtonActionListener implements ActionListener { TextField t; public ButtonActionListener( TextField f ) { t = f; } public void actionPerformed(ActionEvent e) { String s = e.getActionCommand(); if ( s.equals("Tryk") ) { t.setText(t.getText() + t.getText()); } else if ( s.equals("Slet") ) { t.setText(""); } }

dProg2, F07awt.32 Konstruktion af framework public class TrykSletFramework extends Applet {... protected trykPressed() {} protected sletPressed() {} class ButtonActionListener implements ActionListener { TextField t; public ButtonActionListener( TextField f ) { t = f; } public void actionPerformed(ActionEvent e) { String s = e.getActionCommand(); if ( s.equals("Tryk") ) { trykPressed(); } // hookMethod else if ( s.equals("Slet") ) { sletPressed(); } // hookMethod }

dProg2, F07awt.33 Brug af Framework public class MyTrykSletFramework extends TrykSletFramework { // hookMethod protected trykPressed() { // MyTrykPressedAction } // hookMethod protected sletPressed() { // MySletPressedAction } TSF MyTSF Framework Applikationslag

dProg2, F07awt.34 Hændelseshåndtering Listener –en klasse der er villig til at håndtere (visse) events En listener skal –implementere et passende listener-interface –informere en (eller flere) kilder om at den vil abonnere på en bestemt type hændelser fra den pågældende kilde En listener kan –abonnere på flere typer hændelser fra flere kilder En listener kan være –en indre klasse –en hel applet/app Kilden selv kan være listener

dProg2, F07awt.35 Listener som anonym indre klasse public class SimpleEventHandler extends Applet { private TextField display; private Button button1, button2; public void init() {... ActionListener myListener = new ActionListener() { public void actionPerformed(ActionEvent e) { String s = e.getActionCommand(); if ( s.equals("Tryk") ) display.setText(display.getText() + display.getText()); else if ( s.equals("Slet") ) { display.setText(""); } }; button1.addActionListener(myListener); button2.addActionListener(myListener); }

dProg2, F07awt.36 Anonyme klasser En lokal (indre) klasse uden navn Anvendelse –Hvis man kun skal kunne referere en klasse et sted fra (der hvor man instansierer den), kan man kombinere instansiering med definition af klassen. –Man undgår at skulle navngive klassen –Kan laves med udgangspunkt i interface såvel som (abstrakt) klasse –Syntaks: new className ( argumentList ) { classBody } new interfaceName () { classBody }

dProg2, F07awt.37 Applet selv som listener public class SimpleEventHandler extends Applet implements ActionListener { private TextField t; private Button button1, button2; public void init() {... button1.addActionListener(this); button2.addActionListener(this); } public void actionPerformed(ActionEvent e) { String s = e.getActionCommand(); System.out.println( "s: " + s ); if ( s.equals("Tryk") ) { t.setText(t.getText() + t.getText()); } else if ( s.equals("Slet") ) { t.setText(""); } }

dProg2, F07awt.38 En GUI opbygges i fire trin 1.Opret komponenterne 2.Udlæg komponenterne i en container 3.Arranger komponenterne i deres container 4.Håndtér hændelserne genereret fra komponenterne

dProg2, F07awt.39 Events, Listeners og Adapter Events –MouseEvent (museklik) højre venstre dobbelt –MouseMotionEvent musen flytter sig –ActionEvent knap trykkes tegn tastes,... –ItemEvent en indgang i en list vælges –WindowEvent vindue lukkes ikoniseres aktiveres Listeners –MouseListener –MouseMotionListener –ActionListener –ItemEvent –WindowEvent Adapter –MouseAdapter –MouseMotionAdapter –ActionAdapter –ItemAdapter –WindowAdapter

dProg2, F07awt.40 Navngivning Java har en gennemført navngivning; for en Event- type X: –1) Eventet hedder “XEvent” –2) Listenerklassen (egt. interfacet) hedder “XListener” –3) Metoden til at registrere listenere hehdder “addXListener”