DIEB7.1 Kursusgang 7 Oversigt: Sidste kursusgang Opgaver Værktøjer til udvikling og implementering af HCI-design Oversigt over Java Swing

DIEB7.2 Sidste kursusgang HCI designmetode: opsummering ­ Aktiviteter ­ Resultater ­ Designdokument User-Centred design ­ Participatory design ­ Contextual design ­ Kontekstuelt interview Systemer til samarbejde ­ Et andet syn på IT-systemer ­ Eksempel: Maritim Communicator ­ Eksempel: Umpire Signalling System ­ Teorier om samarbejde Identificer behov Etabler krav Generer design Byg interaktiv version Evaluer design Udgangspunkt Resultat: Endeligt produkt

DIEB7.3 Opgaver 1.Færdiggørelse af analysedokumentets del om brugergrænsefladen 2.Færdiggørelse af designdokumentets del om brugergrænseflade-komponenten

DIEB7.4 Kursusgang 7 Oversigt: Sidste kursusgang Opgaver Værktøjer til udvikling og implementering af HCI-design Oversigt over Java Swing

DIEB7.5 Programmering af brugergrænseflader Lektion 1: Tegn-orienteret terminal i 1980’erne: Brugergrænsefladen for et simpelt administrativt system udgjorde 75-80% af den samlede kode Brugergrænsefladens forholdsmæssige del blev ikke mindre i de første grafiske brugergrænseflader Eksempel:

DIEB7.6 Værktøjer til udvikling og implementering af HCI-design Formålet med værktøjer til implementering af brugergrænseflade: reducere omfanget af programmering Værktøjerne skal kunne håndtere to væsentlige krav: ­ Uafhængighed af specifik programmering af hver enkelt stykke hardware (f.eks. skærm) ­ Håndtering af flere uafhængige applikationer, som udføres samtidigt (f.eks. i forskellige vinduer) Eksempler på løsninger på disse krav: ­ Client-server: serveren styrer skærm, mus, tastatur osv. og har en "abstrakt terminal" for hver tilknyttet klient-applikation. ­ X Windows: klient-applikationer kommunikerer direkte med serveren, serveren holder også styr på display information (fonte osv.), hvilket minimerer netværkstrafik, og der er en separat window manager, som kontrollerer klienter og løser konflikter. Bogen: oversigt over typer af værktøjer

DIEB7.7 Applikation: klassisk struktur En interaktiv applikation er basalt set bruger-drevet: Brugeren gør noget, og systemet reagerer I klassisk GUI-programmering håndteres dette gennem en event-løkke (kaldes også read- evaluation løkke) Denne løkke kører i applikationen Løkken venter på en event. Når den kommer, udføres en af casene i switch-sætningen Simpel struktur, men kompliceret når der er mange events, og når de enkelte events er komplicerede do read(event); // venter switch(event) { case event1: process1; case event2: process2; … case eventn: processn; } while true;

DIEB7.8 Alternativ struktur Der er et centralt program, som modtager alle events Hver event aktiverer en metode i en eller flere specifikke applikationer Applikationerne definerer selv, hvad der skal ske, når en bestemt event forekommer Dette defineres gennem en såkaldt callback-metode, hvis navn er defineret af det centrale program (i eksemplet: ModtagBesked) Se på objekterne og deres samspil Giver en meget simplere programstruktur Modtager Sket ModtagBesked SkafForandring Broadcaster Forandrings- BeskedTilAlle 1 0..m Mønster: Abonnement på tilstandsskift Problem: Fleksibel modifikation af komponenter Løsning: Adskillelse af ansvar gennem indkapsling OOA&D, afsnit 11.6 og 14.3

DIEB7.9 Kursusgang 7 Oversigt: Sidste kursusgang Opgaver Værktøjer til udvikling og implementering af HCI-design Oversigt over Java Swing ­ Tre dele ­ Applet ­ Udførelse ­ Simpel komponent ­ Simpel event-håndtering

DIEB7.10 Oversigt over Java Swing Oprindeligt var GUI-programmering i Java baseret på Abstract Window Toolkit (AWT). De fleste AWT-komponenter er specialiseringer af Component Med Java 2 indførtes Java Foundation Classes (JFC) – GUI-delen af JFC kaldes ”Swing” Næsten alle Swing-komponenter er specialiseringer af JComponent, der er en specialisering af AWT's Container-klasse Swing er et stort og kompliceret bibliotek – de mest brugte klasser Denne del af kurset giver en oversigt og introduktion, som sætter jer i stand til at ­ lave en enkel GUI-komponent ­ sætte jer ind i de mere komplekse dele

DIEB7.11 Java Swing Består basalt set af: Et stort antal komponenter Eksempel: en knap En manager til håndtering af layout Eksempel: knapperne er placerede på en bestemt måde En mekanisme til håndtering af events Eksempel: der trykkes på en knap Anvendelse: Fra et Java program, hvor man håndkoder GUI’en (det vi gør) Et grafisk værktøj, som genererer Java-kode og kald af Swing (GUI Builder)

DIEB7.12 Applet En applet er den simpleste form for GUI-element Det er et lille program Programmet kan udføres i en web-browser Begrænsede muligheder af hensyn til sikkerhed En applet er en specialisering af klassen JApplet Har ikke nogen main-del I stedet en specifikation af init-metoden (defineret i JApplet) Swing og AWT bibliotekerne tilknyttes

DIEB7.13 Udførelse af en applet (A) En applet erklæres som en klasse: Applet1 Ved højreklik på klassen kan der vælges: Run Applet Der kommer et vindue op, hvor det vælges, hvor applet’en skal udføres. Vælg: Appletviewer Der kommer et Appletviewer- vindue op, hvori output fra udførelsen ses

DIEB7.14 Hvad sker der? (1) JFrame er den primære container for en Swing-baseret applikation. Figuren viser dens elementer (has-a relation) Alle objekter, der er knyttet til en JFrame, håndteres af et aggregeret JRootPane-objekt For at tilføje en komponent til en JFrame specificerer vi, hvilken af JRootPane’ens panes, komponenten skal placeres i. Som regel tilføjer vi til contentPane, og det sker ved at kalde: myJFrame.getContentPane().add(myComponent); De forskellige panes i figuren er variable i klassen JRootPane Metoden getContentPane() giver referencen til contentPanen JApplet har også en JRootPane

DIEB7.15 Hvad sker der? (2) JLabel er en klasse Dens konstruktor tager et tekststreng som input og genererer en etikette med den tekst: new JLabel(”Applet!”) Denne etikette er input til metoden add, og etiketten placeres på contentPanen

DIEB7.16 Udførelse af en applet (B) En applet kan også udføres i en web-browser – vælg visning i web-browser Her udføres den i Netscape

DIEB7.17 Udførelse af en applet (C) Applet1 kan også udføres fra kommandolinien: java Applet1c Men det kræver meget ekstra i form af main, objekter osv. To væsentlige objekter ­ applet ­ frame

DIEB7.18 Applet-metoder Definerede i klassen JApplet og overskrives i en applet definition: ● init( )Kaldes automatisk for at udføre den første initialisering af en applet, herunder også opsætning af layout. Defineres altid. ● start( )Kaldes hver gang applet’en kommer til syne i web- browseren. Tillader applet’en at starte sin normale operation, specielt det der standses af stop( ). Kaldes også efter init( ). ● stop( ) Kaldes hver gang applet’en bevæges ud af syne i web-browseren. Gør det muligt for applet’en at standse ressourcekrævende operationer. Kaldes umiddelbart før destroy( ). ● destroy( )Kaldes når applet’en fjernes fra siden. Bruges til at frigøre ressourcer, når applet’en ikke længere bruges

DIEB7.19 Applet-metoder (2) Applet-metoderne kan ses og tilgås i den menu, der kommer op i vinduet, når vi udfører vores applet Stop og Start kan udføres flere gange

DIEB7.20 Simpel komponent: en knap Knappen er en specialisering af JButton Der genereres to knapper De tilføjes til contentPane Placering reguleres af layout (mere om dette senere)

DIEB7.21 Håndtering af events Hvad sker der, når vi trykker på en knap? Det bestemmer vores program – i det foregående program skete der intet Det gør det enkelt at definere kodestumper, som skal udføres som respons på bestemte events – for eksempel at der trykkes på en knap Disse kodestumper er callback-metoderne

DIEB7.22 Simpel event-håndtering Der defineres en fælles ActionListener (bl) Den knyttes til begge knapper med JButton’s addActionListener() metode I ActionListener definerer metoden actionPerformed, hvad der skal ske, når der trykkes på knappen Bemærk casting af parameteren e til JButton (den generelle klasse)

DIEB7.23 Hvad sker der? Når der trykkes på en knap, skrives dens navn i tekstfeltet

DIEB7.24 Status Brugt nogle basale komponenter ­ Knap ­ Tekstfelt Prøvet simpel event-håndtering Næste gang Layout-manager Komponenter