DIEB9.1 Kursusgang 9 Oversigt: • Sidste kursusgang • Opgaver • Beskrivelser af komponenter • Typiske komponenter • Arkitektur for en GUI

DIEB9.2 Sidste kursusgang Oversigt: • Klassen Container ­ Grundbegreb ­ JFrame • Layout-manager ­ Layout-managere i Swing ­ 4 layout-managere ­ Sammenligning ­ JPanel ­ Eksempel: vindue til et administrativt system • Event-håndtering ­ Grundbegreber ­ Listener ­ Håndtering af en event ­ Listener som inner class ­ Navne på elementer ActionEvent ActionListener // kode til håndtering // af en event Button

DIEB9.3 Opgaver 1.Fortsæt arbejdet med vinduet fra jeres projekt. Prøv at lave dele af vinduet som paneler, der sættes sammen. Læg først vægt på layout'et. Lav det som et Java-program ligesom eksemplet med FlightReservation. 2.Prøv med forskellige kombinationer af de 4 basale layouts. Se hvordan vinduet varierer. 3.Udbyg programmet fra opgave 1 med event-håndtering. Fokuser på brugergrænsefladen og dens samspil med funktionerne. Men lad være med at bruge meget tid på funktionernes virkemåde. Brug eventuelt funktioner, som bare returnerer det samme resultat. 4.Programmer et mere kompliceret vindue fra jeres projekt. 5.Lav et vindue med et password-felt. Vink: Find JPasswordField i Javas JDK dokumentation på java.sun.com. Vinduet skal fungere på den måde, at hvis brugeren indtaster det korrekte password, så skrives der en tekst ud i et JTextField, og hvis det er forkert, skrives der en anden tekst ud. 6.Næsten alle Swing-komponenter er specialiseringer af Component. Denne klasse har en setCursor() metode. Find denne i JDK dokumentationen. Lav en applet eller applikation, hvor I benytter en af de andre mulige cursore.

DIEB9.4 Kursusgang 9 Oversigt: • Sidste kursusgang • Opgaver • Beskrivelser af komponenter ­ Specifikationer ­ Eksempel • Typiske komponenter • Arkitektur for en GUI

DIEB9.5 Beskrivelser af komponenter (1) • Gå ind på • Vælg API Specifications under Reference (til venstre) • Vælg version (J2SE 1.5.0) i den midterste del af vinduet

DIEB9.6 Beskrivelser af komponenter (2) • I det vindue, der så kommer frem, kan I: ­ Vælge den relevante package (vindue 1) og ­ Vælge den relevante klasse (vindue 2) • Beskrivelsen af klassen findes i vindue 3

DIEB9.7 Kursusgang 9 Oversigt: • Sidste kursusgang • Opgaver • Beskrivelser af komponenter • Typiske komponenter ­ Knapper ­ Tekst ­ Checkbokse ­ Andre • Arkitektur for en GUI

DIEB9.8 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

DIEB9.9 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

DIEB9.10 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

DIEB9.11 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

DIEB9.12 Tekstfelt • Der kan skrives i det • Det kan aflæses • Det kan gøres til et dokument, hvori ændringer kan aflæses løbende • Flere forskellige specialiseringer

DIEB9.13 Check- bokse (1) • Markere en on/off tilstand • Kan bruges enkeltvist (den normale funktion) eller i en gruppe

DIEB9.14 Checkbokse (2)

DIEB9.15 Andre komponenter (1) • Borders • ScrollPanes

DIEB9.16 Scrollbars • Hvordan laver jeg en scrollbar • Er det nødvendigt at implementere en listener for at få den til at fungere rigtigt

DIEB9.17 Andre komponenter (2) • Radioknapper • Combo-boks Drop-down liste • List-bokse

DIEB9.18 Andre komponenter (3) • Simple menuer • Sliders og progress bars

DIEB9.19 Kursusgang 9 Oversigt: • Sidste kursusgang • Opgaver • Beskrivelser af komponenter • Typiske komponenter • Arkitektur for en GUI ­ Problem: brugergrænseflade og funktion ­ Samhørighed og kobling ­ Model-view-controller ­ Application framework ­ Arkitektur i projekterne

DIEB9.20 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)

DIEB9.21 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

DIEB9.22 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

DIEB9.23 Eksempel (1) • Eksempel • Separering af forretningslogik og brugergrænseflade • Calc 1 ganger med modifier, mens Calc 2 lægger den til

DIEB9.24 Eksempel (2)

DIEB9.25 Eksempel (3)

DIEB9.26 Application Framework • En stærk måde at lave genbrug på • 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)

DIEB9.27 Arkitektur i projekterne • Hvordan påvirker den generelle grundarkitektur brugergrænsefladens opbygning og relation til andre komponenter • Dette handler om overgangen fra systemdesign til programdesign • Hvordan kan grundstrukturen realiseres i Java, specielt for brugergrænsefladen • Bank-eksemplet i OOA&D- bogen

DIEB9.28

DIEB9.29 Status • Gennemgang af typiske komponenter • Oversigt over GUI-struktur: ­ Model-View-Controller ­ UI delegate ­ Application framework ­ Arkitektur i projekterne • Læs mere: Swing-bøger Næste gang: • En større opgave ­ Ingen forelæsning ­ Hjælpelærer og lærer til rådighed 4 timer ­ Prøv at anvende beskrivelser og teknikker fra kurset

DIEB9.30 Videre forløb Hidtil fire aktiviteter: • Kravspecificering: ­ krav og behov ­ foreløbigt klassediagram og brugsmønstre omsættes i en papirprototype ­ afprøves med brugere • Resultater fra OOA&D: ­ klassediagram ­ brugsmønstre • Design: ­ interaktionsrum ­ præsentationsmodel ­ interaktionselementer (vinduer) • Implementering i Java: ­ herunder programdesign • Evaluering er den næste aktivitet ­ Formålet med denne aktivitet: fastlægge brugbarhed ­ Indhold: finder problemer i systemet ­ Hvordan kan evaluering foregå i et Dat1/Inf1-projekt: en af to større øvelser i kurset Identificer behov Etabler krav Generer design Byg interaktiv version Evaluer design Udgangspunkt Resultat: Endeligt produkt