Javas GUI-framework

 Michael E. Caspersen, 2001Javas GUI-frameworkGUI.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

 Michael E. Caspersen, 2001Javas GUI-frameworkGUI.3 En GUI består bl.a. af: Menu Label TextField Choice Checkbox List TextArea ScrollPane Button Applet el. Frame

 Michael E. Caspersen, 2001Javas GUI-frameworkGUI.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.

 Michael E. Caspersen, 2001Javas GUI-frameworkGUI.5 java.awt.Component Container Component, ej Container

 Michael E. Caspersen, 2001Javas GUI-frameworkGUI.6 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, 2001Javas GUI-frameworkGUI.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

 Michael E. Caspersen, 2001Javas GUI-frameworkGUI.8 Composite (2) Structure

 Michael E. Caspersen, 2001Javas GUI-frameworkGUI.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

 Michael E. Caspersen, 2001Javas GUI-frameworkGUI.10 Swing Flere hundrede klasser og mange pakker! Letvægtskomponenter

 Michael E. Caspersen, 2001Javas GUI-frameworkGUI.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);

 Michael E. Caspersen, 2001Javas GUI-frameworkGUI.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

 Michael E. Caspersen, 2001Javas GUI-frameworkGUI.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

 Michael E. Caspersen, 2001Javas GUI-frameworkGUI.14 LayoutManager, hierarkiet

 Michael E. Caspersen, 2001Javas GUI-frameworkGUI.15 FlowLayout width = 400 height = 50 width = 100 height = 200

 Michael E. Caspersen, 2001Javas GUI-frameworkGUI.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")); }

 Michael E. Caspersen, 2001Javas GUI-frameworkGUI.17 BorderLayout

 Michael E. Caspersen, 2001Javas GUI-frameworkGUI.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")); }

 Michael E. Caspersen, 2001Javas GUI-frameworkGUI.19 GridLayout row = 3 col = 2 row = 1 col = 0 row = 0 col = 1

 Michael E. Caspersen, 2001Javas GUI-frameworkGUI.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")); }

 Michael E. Caspersen, 2001Javas GUI-frameworkGUI.21 Nestede paneler

 Michael E. Caspersen, 2001Javas GUI-frameworkGUI.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; }

 Michael E. Caspersen, 2001Javas GUI-frameworkGUI.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);

 Michael E. Caspersen, 2001Javas GUI-frameworkGUI.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, 2001Javas GUI-frameworkGUI.25 Øvelse 1 Hvordan ser kompositionshierarkiet for applet’en ud som UML objekt-diagram?

 Michael E. Caspersen, 2001Javas GUI-frameworkGUI.26 Øvelse 2 Foreslå kompositionshierarki og LayoutManagere for en GUI for en lommeregner:

 Michael E. Caspersen, 2001Javas GUI-frameworkGUI.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 Hver hændelsestype modsvares af en listenertype

 Michael E. Caspersen, 2001Javas GUI-frameworkGUI.28 Simpel hændelseshåndtering Tryk: dublerer teksten i tekstfeltet Slet: sletter teksten i tekstfeltet

 Michael E. Caspersen, 2001Javas GUI-frameworkGUI.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, 2001Javas GUI-frameworkGUI.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, 2001Javas GUI-frameworkGUI.31 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 }

 Michael E. Caspersen, 2001Javas GUI-frameworkGUI.32 Brug af Framework public class MyTrykSletFramework extends TrykSletFramework { // hookMethod protected trykPressed() { // MyTrykPressedAction } // hookMethod protected sletPressed() { // MySletPressedAction } TSF MyTSF Framework Applikationslag

 Michael E. Caspersen, 2001Javas GUI-frameworkGUI.33 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, 2001Javas GUI-frameworkGUI.34 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, 2001Javas GUI-frameworkGUI.35 Nestede klasser ButtonChoice

 Michael E. Caspersen, 2001Javas GUI-frameworkGUI.36 Nestede klasser (2) public NestedPanels3() { super(); ChoiceEventHandler chandler = new ChoiceEventHandler(); choice.addItemListener(chandler); ButtonEventHandler bhandler = new ButtonEventHandler(); bhandler.beActionListener(this); } class ChoiceEventHandler implements ItemListener { public void itemStateChanged(ItemEvent event) { if (event!=null) System.out.println("ItemStateChanged: " + event); Choice choice = (Choice) event.getSource(); if (choice != null) messageBar.setText("Choice selected: " + event.getItem()); }

 Michael E. Caspersen, 2001Javas GUI-frameworkGUI.37 Nestede klasser (3) class ButtonEventHandler implements ActionListener { public void actionPerformed(ActionEvent event) {... } protected void beActionListener(Component comp) { if (comp != null) { if (comp instanceof Button) { Button button = (Button) comp; button.addActionListener(this); } else if (comp instanceof Container) { Container container = (Container) comp; int n = container.getComponentCount(); for (int i = 0; i < n; i++) beActionListener(container.getComponent(i)); }

 Michael E. Caspersen, 2001Javas GUI-frameworkGUI.38 Composite, igen Structure

 Michael E. Caspersen, 2001Javas GUI-frameworkGUI.39 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, 2001Javas GUI-frameworkGUI.40 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, 2001Javas GUI-frameworkGUI.41 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”