Design af brugerflader11.1 Kursusgang 11 Oversigt: Sidste kursusgang Værktøjer til udvikling og implementering af HCI-design Oversigt over Java Swing

Design af brugerflader11.2 Sidste kursusgang 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 Participant Direct communication Understanding Artefact of work Control and feedback Samme sted Forskellige steder Samtidigt Forskellige tidspunkter

Design af brugerflader11.3 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 brugerflader11.4 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å 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;

Design af brugerflader11.5 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 Modtager Sket ModtagBesked SkafForandring Broadcaster Forandrings- BeskedTilAlle 1 0..m Problem: Fleksibel modifikation af komponenter Løsning: Adskillelse af ansvar gennem indkapsling

Design af brugerflader11.6 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 brugerflader11.7 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 brugerflader11.8 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 brugerflader11.9 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 Appletviewer- vindue op, hvori output fra udførelsen ses

Design af brugerflader11.10 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 brugerflader11.11 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 brugerflader11.12 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

Design af brugerflader11.13 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 brugerflader11.14 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 brugerflader11.15 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 brugerflader11.16 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 brugerflader11.17 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 brugerflader11.18 Hvad sker der? Når der trykkes på en knap, skrives dens navn i tekstfeltet

Design af brugerflader11.19 Status Brugt nogle basale komponenter ­ Knap ­ Tekstfelt Prøvet simpel event-håndtering Næste gang Layout-manager Mere om events