21
Design af brugerflader 13.1 Kursusgang 13 Oversigt: Sidste kursusgang Beskrivelser af komponenter Typiske komponenter Arkitektur for en GUI

Kursusgang 13

  • Upload
    elan

  • View
    42

  • Download
    0

Embed Size (px)

DESCRIPTION

Kursusgang 13. Oversigt: Sidste kursusgang Beskrivelser af komponenter Typiske komponenter Arkitektur for en GUI. Beskrivelser af komponenter. Gå ind på www.java.sun.com Vælg APIs under Documentation Vælge den relevante package (vindue 1) Vælg den relevante klasse (vindue 2) - PowerPoint PPT Presentation

Citation preview

Page 1: Kursusgang 13

Design af brugerflader 13.1

Kursusgang 13Oversigt:

• Sidste kursusgang

• Beskrivelser af komponenter

• Typiske komponenter

• Arkitektur for en GUI

Page 2: Kursusgang 13

Design af brugerflader 13.2

Beskrivelser af komponenter

• Gå ind på www.java.sun.com

• Vælg APIs under Documentation

• Vælge den relevante package (vindue 1)

• Vælg den relevante klasse (vindue 2)

• Beskrivelsen af klassen findes i vindue 3

Page 3: Kursusgang 13

Design af brugerflader 13.3

Sidste kursusgang• Layout-managere

BorderLayout FlowLayout GridLayout Boxlayout

• Eksempel på opbygning af et vindue til et administrativt system

• Event-håndtering Swings model Events Listener Binding til objekt

ActionEvent ActionListener // kode til håndtering // en event

Button

Page 4: Kursusgang 13

Design af brugerflader 13.4

Knapper (1)• Der findes en række forskellige

knapper

• Menupunkter defineres også som knapper

• Alle knapper er specialiseringer af AbstractButton, som er en generel mekanisme til selektering

• BasicArrowButton er fra javax.swing.plaf.basic

Page 5: Kursusgang 13

Design af brugerflader 13.5

Knapper (2)• De typiske knapper

genereres enten navngivet eller anonymt

• Pile-knapperne sættes ind i et separat panel jp, som så sættes ind i containeren cp

Page 6: Kursusgang 13

Design af brugerflader 13.6

Knap-Gruppe (1)• Individuelle knapper kan

kombineres i en button group

• Hvert knap-objekt knyttes til et gruppe-objekt

• Til en given button group kan der tilføjes objekter af enhver klasse, der er en specialisering af AbstractButton

Page 7: Kursusgang 13

Design af brugerflader 13.7

Knap-Gruppe (2)• Knapperne i en button

group virker med exclusive-or – dvs. at kun en af dem kan være aktiv ad gangen

• Alle undtagen JButton viser dette

Page 8: Kursusgang 13

Design af brugerflader 13.8

Tekstfelt

• Der kan skrives i det

• Det kan aflæses

• Det kan gøres til et dokument, hvori ændringer kan aflæses løbende (eksempel i bogen)

• Flere forskellige specialiseringer

Page 9: Kursusgang 13

Design af brugerflader 13.9

Check-bokse (1)• Markere en on/off

tilstand

• Kan bruges enkeltvist (den normale funktion) eller i en gruppe

Page 10: Kursusgang 13

Design af brugerflader 13.10

Checkbokse (2)

Page 11: Kursusgang 13

Design af brugerflader 13.11

Andre komponenter (1)• Borders

• ScrollPanes

Page 12: Kursusgang 13

Design af brugerflader 13.12

Andre komponenter (2)

• Radioknapper

• Combo-boksDrop-down liste

• List-bokse

Page 13: Kursusgang 13

Design af brugerflader 13.13

Andre komponenter (3)

• Simple menuer

• Sliders ogprogress bars

Page 14: Kursusgang 13

Design af brugerflader 13.14

Arkitektur for en GUI

• Egenskaber ved klasser: Høj samhørighed Lav kobling Eksempel: kunde og konto er én klasse

• Hvorfor er det vigtigt?

• Hvordan opnås det?

• Opdeling (separation of concerns)

Page 15: Kursusgang 13

Design af brugerflader 13.15

Generel løsning:Model-View-Controller• Generel løsning, som blev udviklet i

tilknytning til Smalltalk

• Eksempel: diagram i Excel

• Separerer tre forskellige aspekter af en GUI for en given komponent

• Model (og funktion): holder styr på komponentens tilstand (indirekte kommunikation: kan kun broadcaste til view og controller - stiplet)

• View: den visuelle præsentation af en komponent (kan give besked til controlleren, f.eks. om musens position, da der blev klikket)

• Controller: finder ud af, om komponenten skal reagere på en event, for eksempel et klik på musen

Page 16: Kursusgang 13

Design af brugerflader 13.16

Java’s løsning• View og controller er slået

sammen til en UI delegate

• Vil gerne muliggøre mange-til-mange relation mellem model og UI delegate

• Hvorfor kan MVC ikke dette?

• Løses ved kun at bruge indirekte kommunikation begge veje

Page 17: Kursusgang 13

Design af brugerflader 13.17

Eksempel (1)• Eksempel

• Separering af forretningslogik og brugergrænseflade

• Calc 1 ganger med modifier, mens Calc 2 lægger den til

Page 18: Kursusgang 13

Design af brugerflader 13.18

Eksempel (2)

Page 19: Kursusgang 13

Design af brugerflader 13.19

Eksempel (3)

Page 20: Kursusgang 13

Design af brugerflader 13.20

Application Framework

• Et application framework er en klasse eller en samling af klasser, som løser et bestemt problem

• Man bruger framework’et ved at nedarve fra en af klasserne og så overskrive nogle af metoderne

• En bestemt type application frameworks er designede til at reagere på events. De kaldes også control frameworks

• Java Swing er et application framework (control framework)

Page 21: Kursusgang 13

Design af brugerflader 13.21

Status

• Gennemgang af typiske komponenter

• Oversigt over GUI-struktur: Model-View-Controller UI delegate Application framework

Næste gang:

• En større opgave Ingen forelæsning Hjælpelærere til rådighed 4 timer Prøv at anvende beskrivelser og teknikker fra kurset To demoer sidste kursusgang?