Kursusgang 11 Oversigt: Sidste kursusgang Værktøjer til udvikling og implementering af HCI-design Oversigt over Java Swing Design af brugerflader 11.1
Samme sted Forskellige steder Sidste kursusgang Samtidigt Oversigt: Sidste kursusgang Andet syn på IT-systemer: Groupware - Fra individ til samarbejde - Tid og sted - Funktion - Administration som groupware Computer-Supported Cooperative Work (CSCW) To eksempler på teorier, som can hjælpe os med at designe groupware: - Distribueret kognition - Speech act teori Eksempel - Den maritime communicator Forskellige tidspunkter Participant Understanding Direct communication Control and feedback Artefact of work Participant Design af brugerflader 11.2
Værktøjer til udvikling og implementering af HCI-design Tegn-orienteret terminal i 1980 erne: Brugergrænsefladen for et simpelt administrativt system udgjorde 75-80% af den samlede kode Brugergrænsefladens forholdsmæssig del blev ikke mindre i de første grafiske brugergrænseflader Formålet med værktøjer til implementering af brugergrænseflade: redure 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å arkitekturer: - Client-server - X Windows Design af brugerflader 11.3
Grundlæggende 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å readevaluation 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; Design af brugerflader 11.4
Alternativ struktur Der er et centralt program, som modtager alle events Hver event aktiverer en metode i en bestemt applikation Applikationen definerer, 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 Giver en meget simplere programstruktur Problem: Fleksibel modifikation af komponenter Løsning: Adskillelse af ansvar gennem indkapsling Modtager Sket ModtagBesked SkafForandring 0..m 1 Broadcaster Forandrings- BeskedTilAlle Design af brugerflader 11.5
Oversigt over Java Swing Oprindeligt var Java s GUI programmering baseret på Abstract Window Toolkit (AWT) Med Java 2 indførtes Java Foundation Classes (JFC) GUI-delen af JFC kaldes Swing AWT eksisterer og anvendes stadigt delvist Swing er et kompliceret og omfattende bibliotek 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 komplekse dele Design af brugerflader 11.6
Java Swing Består basalt set af: Et stort antal komponenter Eksempel: en knap En mekanisme til håndtering af events Eksempel: der trykkes på en knap En manager til håndtering af layout Eksempel: knapperne er placerede på en bestemt måde 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 Design af brugerflader 11.7
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 (men en init) Swing og AWT bibliotekerne tilknyttes Applet en er en specialisering af JApplet Design af brugerflader 11.8
Udførelse af en applet En applet erklæres som en klasse: Applet 1 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 Appletviewervindue op, hvori output fra udførelsen ses Design af brugerflader 11.9
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 Design af brugerflader 11.10
Hvad sker der? (2) JLabel er en klasse Dens konstruktor tager en 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 Design af brugerflader 11.11
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 webbrowseren. 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 Design af brugerflader 11.12
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 Design af brugerflader 11.13
Aftestning af applets I bogen er der et program, som gør det enklere at teste en applet Applet en kan udføres som et normalt program fra kommandolinien Klassen Console gør dette Den kan tages direkte fra bogen og puttes ind i en klasse, som I tilknytter Design af brugerflader 11.14
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) Design af brugerflader 11.15
Håndtering af events Hvad sker der, når vi trykker på en knap? Det bestemmer vores program Det gør det 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 Design af brugerflader 11.16
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 Design af brugerflader 11.17
Hvad sker der? Når der trykkes på en knap, skrives dens navn i tekstfeltet Design af brugerflader 11.18
Status Brugt nogle basale komponenter - Knap - Tekstfelt Prøvet simpel event-håndtering Næste gang Layout-manager Mere om events Design af brugerflader 11.19