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

DIEB6.2 Sidste kursusgang Oversigt: Opsummering: fra OOA til HCI-design (case 1) Andet syn på IT-systemer: ­ Groupware ­ Computer-Supported Cooperative Work (CSCW) ­ Eksempel: Den maritime communicator To eksempler på teorier, som can hjælpe os med at designe groupware: ­ Distribueret kognition ­ Speech act teori OOA&D Samme stedForskellige steder Samtidigt Forskellige tidspunkter

DIEB6.3 Kursusgang 6 Oversigt: Sidste kursusgang Værktøjer til udvikling og implementering af HCI-design Oversigt over Java Swing

DIEB6.4 Programmering af brugergrænseflader 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:

DIEB6.5 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å arkitekturer: ­ Client-server ­ X Windows

DIEB6.6 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;

DIEB6.7 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

DIEB6.8 Kursusgang 6 Oversigt: Sidste kursusgang Værktøjer til udvikling og implementering af HCI-design Oversigt over Java Swing

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

DIEB6.10 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 (GUI Builder)

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

DIEB6.12 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

DIEB6.13 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

DIEB6.14 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

DIEB6.15 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

DIEB6.16 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. I bogen er der et program, som gør det enklere at teste en applet Applet’en kan udføres fra kommandolinien som et program Klassen Console gør dette Den kan tages direkte fra bogen og puttes ind i en klasse, som I tilknytter Applet1d

DIEB6.17 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

DIEB6.18 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

DIEB6.19 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)

DIEB6.20 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

DIEB6.21 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)

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

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