Præsentation er lastning. Vent venligst

Præsentation er lastning. Vent venligst

 Henrik Bærbak, 2000Introducerende objektorienteret programmering11A.1 Grafiske Brugergrænseflader Java’s AWT framework.

Lignende præsentationer


Præsentationer af emnet: " Henrik Bærbak, 2000Introducerende objektorienteret programmering11A.1 Grafiske Brugergrænseflader Java’s AWT framework."— Præsentationens transcript:

1  Henrik Bærbak, 2000Introducerende objektorienteret programmering11A.1 Grafiske Brugergrænseflader Java’s AWT framework

2  Henrik Bærbak, 2000Introducerende objektorienteret programmering11A.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)

3  Henrik Bærbak, 2000Introducerende objektorienteret programmering11A.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

4  Henrik Bærbak, 2000Introducerende objektorienteret programmering11A.4 Andet læsestof  I konkret arbejde er eksempler nyttige. JavaDoc af AWT er overvældende og giver ikke overblik.  Arnow og Weiss er OK, men ret ’spredt’.  En bog, som kan anbefales er  “Java Examples - in a Nutshell”  David Flanagan, Forlaget O’Reilly  Det er en “companion” til “Java in a Nutshell”, men kan faktisk godt læses selvstændigt.

5  Henrik Bærbak, 2000Introducerende objektorienteret programmering11A.5 Hvad består en GUI af? Menu Label TextField Choice Checkbox List TextArea ScrollPane Button Applet el. Frame

6  Henrik Bærbak, 2000Introducerende objektorienteret programmering11A.6 GUI - det grafiske layout  En GUI består af en række grafiske komponenter, f.eks. knapper, lister, tekstfelter, osv., der fremstår i et visuelt layout i en grafisk collection/container.  En grafisk container er f.eks. en applet, en dialogboks, et vindue, eller et selvstændigt vinduesbaseret program (hedder en “frame” i Java).  Betegnelsen “container” er velvalgt, den indeholder polymorfe objekter, nøjagtig som e.g. Vector eller Dictionary.

7  Henrik Bærbak, 2000Introducerende objektorienteret programmering11A.7 java.awt.Component  Alle grafiske elementer (menuer undtaget) arver fra java.awt.Component - den abstrakte grafiske komponent Component Button CheckBox TextComponent ListChoice TextFieldTextArea

8  Henrik Bærbak, 2000Introducerende objektorienteret programmering11A.8 Kompositionshierarki  Enhver GUI i Java er et kompositionshierarki: Et antal komponenter i en grafisk container. anApplet aButton aLabel aTextField aButton

9  Henrik Bærbak, 2000Introducerende objektorienteret programmering11A.9 Opbygning af en GUI  En GUI opbygges i fire trin, hvor de to første er  1)Opret komponenterne Eks:Button changeButton = new Button( “Skift” );  2) Udlæg komponenterne i en container vha. af metoden “add”. Eks:add( changeButton );

10  Henrik Bærbak, 2000Introducerende objektorienteret programmering11A.10 FlowGUI import java.applet.Applet; import java.awt.*; public class FlowGUI extends Applet { public void init() { Label welcomeLabel = new Label( "Velkommen" ); TextField display = new TextField( "", 5 ); Button changeButton = new Button( "Skift" ); Button quitButton = new Button( "Farvel" ); add( welcomeLabel ); add( display ); add( changeButton ); add( quitButton ); } Metoden init spiller ‘rollen’ som konstruktør for applets. Trin 1 Trin 2

11  Henrik Bærbak, 2000Introducerende objektorienteret programmering11A.11 Opbygning af GUI  En GUI opbygges i fire trin, hvor de tre første er  1) Opret komponenterne  2) Udlæg komponenterne i en container  3) Arranger komponenterne i deres container Brug af layoutmanagere

12  Henrik Bærbak, 2000Introducerende objektorienteret programmering11A.12 Koordinatbaseret layout  Mange tidligere tilgange til layout har været direkte koordinatbaserede: x y changeButton.setSize(50,50); changeButton.setPosition(80, 20);

13  Henrik Bærbak, 2000Introducerende objektorienteret programmering11A.13 Koordinatbaseret layout  Denne tilgang er uheldig: Meget svært at ‘kode’ en GUI tekstuelt  Løsning: GUI-Builders, dvs. interaktive værktøjer, hvor man kan editere sin GUI grafisk; denne genererer derefter koordinatbaseret kildetekst.  Det er stadigvæk uheldigt for Java: Java er platformuafhængigt, og dermed varierer størrelse af knapper, skrifttyper...

14  Henrik Bærbak, 2000Introducerende objektorienteret programmering11A.14 Layout i Java  Java håndterer layout ved hjælp af to teknikker:  1) Layoutmanagere Standardklasser, som stiller en række standard layouts/design til rådighed  2) Kompositionshierarkiet Grafiske elementer kan grupperes i en træstruktur.

15  Henrik Bærbak, 2000Introducerende objektorienteret programmering11A.15 FlowLayout  FlowLayout er default for applets; og organiserer komponenterne i et flow fra venstre mod højre.  Komponenternes størrelse respekteres.

16  Henrik Bærbak, 2000Introducerende objektorienteret programmering11A.16 FlowLayout import java.applet.Applet; import java.awt.*; public class FlowGUI extends Applet { public void init() { Label welcomeLabel = new Label( "Velkommen" ); TextField display = new TextField( "", 5 ); Button changeButton = new Button( "Skift" ); Button quitButton = new Button( "Farvel" ); add( welcomeLabel ); add( display ); add( changeButton ); add( quitButton ); }

17  Henrik Bærbak, 2000Introducerende objektorienteret programmering11A.17 GridLayout  GridLayout udlægger komponenter i et NxM gitter. Komponenterne resizes så de fylder deres plads.  Gitteret fyldes op rækkevis og nedefter. Der kan godt “mangle” nogle til sidst, men ikke inde i “midten”. N M

18  Henrik Bærbak, 2000Introducerende objektorienteret programmering11A.18 GridLayout public class GridGUI extends Applet { public void init() { Label welcomeLabel = new Label( "Velkommen" ); TextField display = new TextField( "", 5 ); Button changeButton = new Button( "Skift" ); Button quitButton = new Button( "Farvel" ); setLayout( new GridLayout( 2, 2) ); add( welcomeLabel ); add( display ); add( changeButton ); add( quitButton ); }

19  Henrik Bærbak, 2000Introducerende objektorienteret programmering11A.19 BorderLayout  BorderLayout opererer med de fire kompasretninger samt et center:  Komponenterne resizes efter lidt specielle regler så de fylder pladsen ud i den ene akse.. Prøv! CenterØstVest Nord Syd

20  Henrik Bærbak, 2000Introducerende objektorienteret programmering11A.20 BorderLayout public class BorderGUI extends Applet { public void init() { Label welcomeLabel = new Label( "Velkommen" ); TextField display = new TextField( "", 5 ); Button changeButton = new Button( "Skift" ); Button quitButton = new Button( "Farvel" ); setLayout( new BorderLayout() ); add( welcomeLabel, BorderLayout.NORTH ); add( display, BorderLayout.SOUTH ); add( changeButton, BorderLayout.EAST ); add( quitButton, BorderLayout.CENTER ); }

21  Henrik Bærbak, 2000Introducerende objektorienteret programmering11A.21 Andre layoutmanagere  Der er yderligere et par managere: CardLayout –Hver komponent fylder alting, fungerer som kort ovenpå hinanden GridBagLayout –Yderst fleksibel, men kompliceret, manager. Kompasknapperne i Presenter er udlagt vha. en GridBag. Din helt egen manager –Ved at nedarve fra LayoutManager, kan man selv definere et layout. En man ofte mangler er en ColumnLayout, som udlægger komponenter i deres standardstørrelse som FlowLayout, men fra oven og nedefter istedet. Den kan findes i “Java Examples in a Nutshell”.

22  Henrik Bærbak, 2000Introducerende objektorienteret programmering11A.22 Kompositionshierarki  Java’s grafiske komponenter kan grupperes til én enhed; ligesom {} laver sammensatte sætninger i Java, kan Panel lave sammensatte komponenter i en GUI.  Et Panel er en Container  Et Panel kan have sin egen LayoutManager  Eksempel: FlowLayout var bedst i vores første eksempel, men vi vil gerne have knapperne til altid at stå sammen.

23  Henrik Bærbak, 2000Introducerende objektorienteret programmering11A.23 PanelGUI public class PanelGUI extends Applet { public void init() { Label welcomeLabel = new Label( "Velkommen" ); TextField display = new TextField( "", 5 ); Button changeButton = new Button( "Skift" ); Button quitButton = new Button( "Farvel" ); add( welcomeLabel ); add( display ); Panel buttonPanel = new Panel(); buttonPanel.add( changeButton ); buttonPanel.add( quitButton ); add( buttonPanel ); } Default er “FlowLayout”

24  Henrik Bærbak, 2000Introducerende objektorienteret programmering11A.24 Container hierarkiet Component Applet Panel Window Container FrameDialog Kræver indlejring i anden container Kobling til operativsystemets komponenter

25  Henrik Bærbak, 2000Introducerende objektorienteret programmering11A.25 Øvelse  Hvordan ser kompositionshierarkiet for applet’en ud som UML objekt-diagram?

26  Henrik Bærbak, 2000Introducerende objektorienteret programmering11A.26 Øvelse  Foreslå kompositionshierarki og layoutmanagere for en GUI for vores HP lommeregner:

27  Henrik Bærbak, 2000Introducerende objektorienteret programmering11A.27 Interaktion...  GUI’en er på plads, ser pæn ud; hvordan får vi den så til at styre vores applikation?  AWT er hændelsesstyret:  En komponent skaber en hændelse (event) når den bliver manipuleret af brugeren En knap En hændelse: “Trykket på”

28  Henrik Bærbak, 2000Introducerende objektorienteret programmering11A.28 Opbygning af en GUI  En GUI opbygges i fire trin:  1) Opret komponenterne  2) Udlæg komponenterne i en container  3) Arranger komponenterne i deres container  4) Håndter hændelserne genereret fra komponenterne

29  Henrik Bærbak, 2000Introducerende objektorienteret programmering11A.29 Events  En event er et objekt, specialiseret fra klassen java.awt.AWTEvent.  Eksempler 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

30  Henrik Bærbak, 2000Introducerende objektorienteret programmering11A.30 Listeners  En komponent skaber og sender events - men kun til de listeners som er registrerede som modtagere.  En listener er instans af en abstrakt klasse svarende til de events, den kan lytte på ActionEvents kan høres af ActionListener instanser MouseEvents kan høres af MouseListener instanser En knap En hændelse: “Klikket” Knappens registerede listener(s)

31  Henrik Bærbak, 2000Introducerende objektorienteret programmering11A.31 Eksempel  Vores FlowGui skal gøre noget, når vi trykker på knapperne.  Fra ‘Button’s JavaDoc: If an application wants to perform some action based on a button being pressed and released, it should implement ActionListener and register the new listener to receive events from this button, by calling the button's addActionListener method.

32  Henrik Bærbak, 2000Introducerende objektorienteret programmering11A.32 ActionListener specialiseres class FlowActionListener implements ActionListener { Labell; TextFieldt; public FlowActionListener( Label label, TextField textfield ) { l = label; t = textfield; } public void actionPerformed( ActionEvent e ) { String action = e.getActionCommand(); System.out.println( "Action: "+action ); if ( action.equals( "Skift" ) ) { String tmp = l.getText(); l.setText( t.getText() ); t.setText( tmp ); } else if ( action.equals( "Farvel" ) ) { l.setText( "Farvel" ); } Note: ActionListener er et interface Default ‘ActionCommand’ for en knap er knappens label

33  Henrik Bærbak, 2000Introducerende objektorienteret programmering11A.33 Registrering af listener // Skab en listener instans ActionListener myListener = new FlowActionListener( welcomeLabel, display ); // Og registrer denne listener på knappernes events changeButton.addActionListener( myListener ); quitButton.addActionListener( myListener );

34  Henrik Bærbak, 2000Introducerende objektorienteret programmering11A.34 Interaktion  Skemaet er:  1) Find i JavaDoc for komponenten hvilke events den sender  2) Specialiser den tilhørende abstrakte listenerklasse og overskriv metoden/metoderne som håndterer de sendte events  3) Skabe en instans af den specialiserede listenerklasse og registrere denne hos den pågældende instans af komponenten.

35  Henrik Bærbak, 2000Introducerende objektorienteret programmering11A.35 Navngivning  Java har heldigvis en gennemført navngivning, givet en type af event X hedder:  1) Eventet for “XEvent”  2) Listener klassen (egt. interfacet) for “XListener”  3) Metoden til at registrere listener for “addXListener”

36  Henrik Bærbak, 2000Introducerende objektorienteret programmering11A.36 AWT framework  Listeners og komponenter er de abstrakte klasser i Java’s AWT framework, som vi bruger og specialiserer for at skabe netop den grafiske brugergrænseflade vi ønsker, samt binder grænsefladen op på den model og funktionalitet som vi vil stille til rådighed. KompontListener MinListener * AWT GUI Model ModelKlasser


Download ppt " Henrik Bærbak, 2000Introducerende objektorienteret programmering11A.1 Grafiske Brugergrænseflader Java’s AWT framework."

Lignende præsentationer


Annoncer fra Google