DIEB8.1 Kursusgang 8 Oversigt: Sidste kursusgang Opgaver Klassen Container Layout-manager Event-håndtering.

Præsentationer af emnet: "DIEB8.1 Kursusgang 8 Oversigt: Sidste kursusgang Opgaver Klassen Container Layout-manager Event-håndtering."— Præsentationens transcript:

1 DIEB8.1 Kursusgang 8 Oversigt: Sidste kursusgang Opgaver Klassen Container Layout-manager Event-håndtering

2 DIEB8.2 Sidste kursusgang Oversigt: Sidste kursusgang Værktøjer til udvikling og implementering af HCI-design Oversigt over Java Swing: ­ Et stort antal komponenter ­ En mekanisme til håndtering af events ­ En manager til håndtering af layout Introduktion ­ Applets ­ To simple komponenter ­ En simpel event

3 DIEB8.3 Opgaver 1. Udfør programmet i Savitch, display 17.2. 2. Udbyg programmet i opgave 1, så der tilføjes en titel. Hvad sker der, hvis I sætter titlen flere gange? 3. Lav en applet med tre knapper og et tekstfelt. Der skal komme en forskellig tekst i tekstfeltet, når der trykkes på hver af de tre knapper. 4. Lav applet'en i opgave 3 om til et vindue, svarende til den programstruktur, der er brugt i Savitch, display 17.2. 5. Vælg et enkelt vindue fra jeres projekt. Der må gerne være mindst et par knapper og nogle felter med information om et objekt i problemområdet. Lav i første omgang knapperne og få dem ind i vinduet. Lad i første omgang være med at bekymre jer om layout. Brug flow-layout som i eksemplet, jeg viste jer sidste gang. 6. Udbyg vinduet fra foregående opgave med et tekstfelt, hvori I viser en tekst, som varierer afhængigt af, hvilken knap, der blev trykket på. 7. Udbyg vinduet med to tekstfelter, så tryk på nogle af knapperne skriver i det ene tekstfelt og tryk på de andre skriver i det andet. 8. Udbyg vinduet med tekstfelter, hvori I skriver noget information om det objekt fra problemområdet, som vinduet handler om.

4 DIEB8.4 Kursusgang 8 Oversigt: Sidste kursusgang Opgaver Klassen Container ­ Grundbegreb ­ JFrame Layout-manager Event-håndtering

5 DIEB8.5 Klassen Container: Grundbegreb Den grundlæggende komponent til en GUI er JFrame Den er en specialisering af klassen Container i java.awt Vi skal senere se andre specialiseringer af Container (se diagrammet på side 959 i bogen) Vi får adgang til JFramens container ved hjælp af metoden getContentPane() Containeren kan indeholde og vise komponenter, og vi kan tilføje komponenter (med add) Containeren har en metode setLayout(), som bruges til at vælge den ønskede layout-manager

6 DIEB8.6 JFrame Den grundlæggende klasse (container) til opbygning af brugergrænseflader Genererer et standardvindue med: ­ Titel ­ Indhold ­ De tre knapper i øverste højre hjørne Beskrivelse af basale metoder i JFrame: side 927 i bogen Praktisk ­ Gør vinduet synligt, når indholdet er fyldt ind.setVisible(true) ­ Definer luk-knappen:.setDefaultCloseOperation(Jframe.EXIT_ON_CLOSE) Ellers fås default HIDE_ON_CLOSE, så vinduet er utilgængeligt, mens programmet stadig kører Bemærk, at luk-knappen i et vindue ikke er en JButton, så der kan ikke knyttes en selvdefineret listener til denne knap (i modsætning til JButton-knapper) – brug de forud-definerede konstanter

7 DIEB8.7 Kursusgang 8 Oversigt: Sidste kursusgang Opgaver Klassen Container Layout-manager ­ Layout-managere i Swing ­ 4 layout-managere ­ Sammenligning ­ JPanel ­ Eksempel Event-håndtering

8 DIEB8.8 Layout-managere Java Swing har en samling af layout- managere, som bestemmer layout’et ud fra et standardskema og nogle tilhørende parametre Vi skal se på følgende layout-managere: ­ BorderLayout ­ FlowLayout ­ GridLayout ­ Boxlayout

9 DIEB8.9 BorderLayout (1) Vinduet deles op i fem områder: ­ Fire borders : North, South, West og East ­ Center Komponenter placeres med add()

10 DIEB8.10 BorderLayout (2) BorderLayout er default for en JApplet, så vi behøver ikke at kalde den Parametre uden angivelse af område placeres som default i ”Center”

11 DIEB8.11 BorderLayout (3) Border-områderne får den størrelse, som er nødvendig i den ene retning og strækkes i den anden Center får resten Vinduerne til højre er alle lavet ved at trække i vinduet

12 DIEB8.12 FlowLayout (1) Komponenter placeres i den rækkefølge de sættes ind med add() Fra venstre mod højre og fra op mod ned (rækkevist) Hvis vi bare ændrer Border til Flow i det foregående program fås dette layout

13 DIEB8.13 FlowLayout (2) Alle komponenter får den mindst mulige størrelse, som er nødvendig

14 DIEB8.14 FlowLayout (3) Når vinduet ændrer facon, flyttes komponenterne rundt

15 DIEB8.15 GridLayout (1) Skaber en tabel med et valgt antal rækker og søjler Komponenterne fyldes i fra venstre mod højre (rækkevist)

16 DIEB8.16 GridLayout(2) Tabellen justeres i begge retninger, så den fylder vinduet ud

17 DIEB8.17 GridBagLayout Den mest komplekse layout-manager Giver fuld kontrol

18 DIEB8.18 BoxLayout (1) Nogle af de samme egenskaber som GridBagLayout men meget enklere Placering af komponenter styres enten horisontalt (X_AXIS) eller vertikalt (Y_AXIS) Bemærk: containeren er parameter til konstruktoren

19 DIEB8.19 BoxLayout (2) Der er en container Box, der bruger BoxLayout som sin layout-manager Den kan bruges til at generere layouts, hvor der er styr på mellemrum og indbyrdes placering Dette kaldes strut og glue Der kan også defineres et RigidArea, som er baseret på absolutte værdier

20 DIEB8.20 Sammenligning

21 DIEB8.21 JPanel En container, der kan indeholde komponenter (som JFrame) Bruges til opbygning af et mere komplekst vindue Vinduet består af et eller flere JPanel Hvert JPanel har et layout Et JPanel består at komponenter og JPanels (rekursivt)

22 DIEB8.22 Eksempel: FlightReservation 1. A text field labeled "Date:", a combo box labeled "From:", and a combo box labeled "To:" must reside at the top of frame. Labels must be placed to the left side of their corresponding component. The text field and combo boxes must be of equal size, reside in a column, and occupy all available width. 2. A group of radio buttons titled "Options" must reside in the top right corner of the frame. This group must include "First class", "Business", and "Coach" radio buttons. 3. A list component titled "Available Flights" must occupy the central part of the frame and it should grow or shrink when the size of the frame changes. 4. Three buttons titled "Search", "Purchase", and "Exit" must reside at the bottom of the frame. They must form a row, have equal sizes, and be center-aligned.

23 DIEB8.23

24 DIEB8.24

25 DIEB8.25

26 DIEB8.26

27 DIEB8.27

28 DIEB8.28 Eksempel: resultat

29 DIEB8.29 Eksempel: to andre varianter

30 DIEB8.30 Kursusgang 8 Oversigt: Sidste kursusgang Opgaver Klassen Container Layout-manager Event-håndtering ­ Grundbegreber ­ Listener ­ Håndtering af en event ­ Listener som inner class ­ Navne på elementer

31 DIEB8.31 Event -håndtering Grundide: en komponent kan ”fyre” en hændelse (event), når der gøres noget bestemt ved den For eksempel at brugeren klikker på musen Hver hændelse har sin egen klasse Hver komponent understøtter bestemte af disse hændelser Når en hændelse fyres, kan den modtages af en eller flere lyttere (Listener-objekter) Listener-objektet kaldes også event handleren ActionEvent ActionListener // kode til håndtering // af en event Button

32 DIEB8.32 Listener-objekt Swing håndterer fyringen. Programmøren skal (bare) lave det listener-objekt, som skal modtage en given hændelse Dette objekt skal registeres som lytter i tilknytning til den relevante kilde til hændelsen (addXXXListener) Her registreres bl som listener objekt på begge objekterne b1 og b2

33 DIEB8.33 Event-håndtering I erklæringen af Listener-klassen angives det, at den enten implementerer en ActionListener (eller udvider udvider en klasse, der implementerer en ActionListener) I Listener-klassen defineres den eller de metoder, som realiserer håndteringen. Det er denne kode, der reagerer på den givne hændelse Her er det en hændelse af klassen ActionEvent

34 DIEB8.34 Definering som inner class Et listener-objekt defineres ofte ved hjælp af en anonym inner class Det betyder, at klassen ikke behøver at blive navngivet I eksemplet kaldes den ButtonListener

35 DIEB8.35 Navne på elementer (1) For hver komponent kan vi finde, hvad den undersøtter: ­ Events ­ Listener-klassens navn ­ Add og remove metoderne Eksempel: for en JScrollbar: ­ AdjustmentEvent ­ AdjustmentListener ­ addAdjustmentListener( ) ­ removeAdjustmentListener( ) For Listener-klassen har vi også brug for at kende de metoder, der skal defineres Eksempel: for AdjustmentListener: ­ adjustmentValueChanged(AdjustmentEvent)

36 DIEB8.36 Navne på elementer (2) Hvis vi bruger en Listener skal vi definere alle metoder Hvis vi kun har brug for en af dem, er dette besværligt Derfor har nogle listener-klasser, som har flere metoder, også en adapter, der definerer tomme metoder For eksempel ComponentAdapter for ComponentListener Man behøver så bare at overskrive de metoder, der er relevante for ens opgave

37 DIEB8.37 Status Detaljeret gennemgang af layout-håndtering og de mest gængse layout-managers Detaljeret gennemgang af event-håndtering Næste gang: Komponenter i Swing Arkitektur for en GUI