Grafiske brugergrænseflader Javas AWT framework

 Michael E. Caspersen, 2000Introducerende objektorienteret programmeringJava-syntaks.2 Introduktion Grafiske brugergrænseflader (GUI) er komplekse og der er mange detaljer  Hvad I lærer af detaljer er formodentlig forældet og ubrugelig viden imorgen  Men, … principperne for objektorienterede GUI’s er ved at ligge rimelige faste Vi vil bruge AWT (Java1.1), ikke Swing (Java1.2)

 Michael E. Caspersen, 2000Introducerende objektorienteret programmeringJava-syntaks.3 Introduktion Realisering af en GUI for en applikation berører to store områder: –1) Grafisk layout Tekniske aspekter Æstetik, overskuelighed (uden for dette kursus) –2) Interaktion AWT’s interaktionsmodel (framework-baseret) Anvendelighed, passer til typiske brugssituation (uden for dette kursus) Vi vil tage de to dele i denne rækkefølge

 Michael E. Caspersen, 2000Introducerende objektorienteret programmeringJava-syntaks.4 Andet læsestof I konkret arbejde er eksempler nyttige. JavaDoc af AWT er overvældende og giver ikke overblik. » Niño & Hosch er OK, men kun introducerende. En bog, som kan anbefales er –David Flanagan, “Java Examples in a Nutshell”, O’Reilly –Det er en “companion” til “Java in a Nutshell”, men den kan fint læses selvstændigt.

 Michael E. Caspersen, 2000Introducerende objektorienteret programmeringJava-syntaks.5 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

 Michael E. Caspersen, 2000Introducerende objektorienteret programmeringJava-syntaks.6 En GUI består bl.a. af: Menu Label TextField Choice Checkbox List TextArea ScrollPane Button Applet el. Frame

 Michael E. Caspersen, 2000Introducerende objektorienteret programmeringJava-syntaks.7 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.

 Michael E. Caspersen, 2000Introducerende objektorienteret programmeringJava-syntaks.8 java.awt.Component Container Component, ej Container

 Michael E. Caspersen, 2000Introducerende objektorienteret programmeringJava-syntaks.9 Kompositionshierarkier Enhver GUI i Java er et kompositionshierarki Et antal komponenter i en container: anApplet aCanvasaPanel aButton aChoice Container Component, ej Container

 Michael E. Caspersen, 2000Introducerende objektorienteret programmeringJava-syntaks.10 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

 Michael E. Caspersen, 2000Introducerende objektorienteret programmeringJava-syntaks.11 Composite (2) Structure

 Michael E. Caspersen, 2000Introducerende objektorienteret programmeringJava-syntaks.12 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

 Michael E. Caspersen, 2000Introducerende objektorienteret programmeringJava-syntaks.13 Swing Flere hundrede klasser og mange pakker! Letvægtskomponenter

 Michael E. Caspersen, 2000Introducerende objektorienteret programmeringJava-syntaks.14 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);

 Michael E. Caspersen, 2000Introducerende objektorienteret programmeringJava-syntaks.15 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

 Michael E. Caspersen, 2000Introducerende objektorienteret programmeringJava-syntaks.16 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

 Michael E. Caspersen, 2000Introducerende objektorienteret programmeringJava-syntaks.17 LayoutManager, hierarkiet

 Michael E. Caspersen, 2000Introducerende objektorienteret programmeringJava-syntaks.18 FlowLayout width = 400 height = 50 width = 100 height = 200

 Michael E. Caspersen, 2000Introducerende objektorienteret programmeringJava-syntaks.19 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")); }

 Michael E. Caspersen, 2000Introducerende objektorienteret programmeringJava-syntaks.20 BorderLayout

 Michael E. Caspersen, 2000Introducerende objektorienteret programmeringJava-syntaks.21 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")); }

 Michael E. Caspersen, 2000Introducerende objektorienteret programmeringJava-syntaks.22 GridLayout row = 3 col = 2 row = 1 col = 0 row = 0 col = 1

 Michael E. Caspersen, 2000Introducerende objektorienteret programmeringJava-syntaks.23 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")); }

 Michael E. Caspersen, 2000Introducerende objektorienteret programmeringJava-syntaks.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”)

 Michael E. Caspersen, 2000Introducerende objektorienteret programmeringJava-syntaks.25 Øvelse 1 Hvordan ser kompositionshierarkiet for applet’en ud som UML objekt-diagram?

 Michael E. Caspersen, 2000Introducerende objektorienteret programmeringJava-syntaks.26 Øvelse 2 Foreslå kompositionshierarki og LayoutManagere for en GUI for en lommeregner:

 Michael E. Caspersen, 2000Introducerende objektorienteret programmeringJava-syntaks.27 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 (ActionEvent, MouseEvent,...) Hver hændelsestype modsvares af en listenertype –En listener er instans af en abstrakt klasse svarende til de events den kan lytte på (ActionListener, MouseListener,...)

 Michael E. Caspersen, 2000Introducerende objektorienteret programmeringJava-syntaks.28 Simpel hændelseshåndtering Tryk: dublerer teksten i tekstfeltet Slet: sletter teksten i tekstfeltet

 Michael E. Caspersen, 2000Introducerende objektorienteret programmeringJava-syntaks.29 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); }

 Michael E. Caspersen, 2000Introducerende objektorienteret programmeringJava-syntaks.30 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(""); } }

 Michael E. Caspersen, 2000Introducerende objektorienteret programmeringJava-syntaks.31 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

 Michael E. Caspersen, 2000Introducerende objektorienteret programmeringJava-syntaks.32 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(""); } }

 Michael E. Caspersen, 2000Introducerende objektorienteret programmeringJava-syntaks.33 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

 Michael E. Caspersen, 2000Introducerende objektorienteret programmeringJava-syntaks.34 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

 Michael E. Caspersen, 2000Introducerende objektorienteret programmeringJava-syntaks.35 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”

 Michael E. Caspersen, 2000Introducerende objektorienteret programmeringJava-syntaks.36 AWT framework Listeners og komponenter –er de abstrakte klasser i Javas AWT framework, som vi bruger og specialiserer for at skabe netop den grafiske brugergrænseflade vi ønsker –binder grænsefladen op på den model og funktionalitet som vi vil stille til rådighed. KomponentListener MinListener * AWT GUI Model ModelKlasser