1 / 30

Kursusgang 12

Kursusgang 12. Oversigt: Sidste kursusgang Layout-manager Event-håndtering. 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

omana
Download Presentation

Kursusgang 12

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Kursusgang 12 Oversigt: • Sidste kursusgang • Layout-manager • Event-håndtering Design af brugerflader

  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 • En simpel komponent • En simpel event Design af brugerflader

  3. Grundbegreber • De grundlæggende komponenter til en GUI er JApplet, JFrame, JWindow og JDialog • Disse komponenter producerer en Container, når vi bruger metoden getContentPane() • Denne container kan indeholde og vise komponenter • Containeren har en metode setLayout(), som bruges til at vælge den ønskede layout-manager Design af brugerflader

  4. 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 • GridBagLayout • Boxlayout Design af brugerflader

  5. BorderLayout (1) • Vinduet deles op i fem områder: • Fire borders : North, South, West og East • Center • Komponenter placeres med add() Design af brugerflader

  6. 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” Design af brugerflader

  7. 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 Design af brugerflader

  8. 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 Design af brugerflader

  9. FlowLayout (2) • Alle komponenter får den mindst mulige størrelse, som er nødvendig Design af brugerflader

  10. FlowLayout (3) • Når vinduet ændrer facon, flyttes komponenterne rundt Design af brugerflader

  11. GridLayout • Skaber en tabel med et valgt antal rækker og søjler • Komponenterne fyldes i fra venstre mod højre (rækkevist) Design af brugerflader

  12. GridBagLayout • Den mest komplekse layout-manager • Giver fuld kontrol • Eksempel i Swing-dokumentation Design af brugerflader

  13. 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 Design af brugerflader

  14. 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 Design af brugerflader

  15. Sammenligning Design af brugerflader

  16. Eksempel: FlightReservation • 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. • 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. • 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. • 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. Design af brugerflader

  17. Design af brugerflader

  18. Design af brugerflader

  19. Design af brugerflader

  20. Design af brugerflader

  21. Design af brugerflader

  22. Eksempel: resultat Design af brugerflader

  23. Eksempel: to andre varianter Design af brugerflader

  24. ActionListener // kode til håndtering // en event ActionEvent Button Event -håndtering • Grundide: en komponent kan ”fyre” en hændelse (event), når der gøres noget bestemt ved denFor 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 den af en eller flere lyttere (Listener-objekter) • Listener-objektet kaldes også event handleren Design af brugerflader

  25. 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 Design af brugerflader

  26. 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 Design af brugerflader

  27. 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 Design af brugerflader

  28. Navne på elementer (1) • For hver komponent kan vi finde, hvad den undersøtter (se side 794-796): • 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 (se side 799-800) • Eksempel: for AdjustmentListener: • adjustmentValueChanged(AdjustmentEvent) Design af brugerflader

  29. 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 metoderFor eksempel ComponentAdapter for ComponentListener • Man behøver så bare at overskrive de metoder, der er relevante for ens opgave Design af brugerflader

  30. 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 Design af brugerflader

More Related