DOA Konstruktion av gränssnitt 5 april 2004 av Björn Eiderbäck

Transkript

1 DOA Konstruktion av gränssnitt 5 april 2004 av Björn Eiderbäck Innehåll del 1, oh 1 oh 21 Användargränssnitt Något om tekniker för gränssnittsbyggande Typiskt gränssnitt Verktyg Knappar Vi hoppar en del i OH-bilderna Detaljerna får den intresserade läsa själv Textyta previous next previous next 2 Användargränssnitt Är den del av applikationen som låter användaren interagera och kontrollera tillämpningen med (vanligen) mus och tangentbord. Ett användargränssnitt består av grafiska komponenter (eng widgets eller gadgets) som knappar, inmatningsfält och listor. En komponent (widget) beskriver både utseende, delar av beteendet och koppling till applikationsmodellen. Bra användargränssnitt är självförklarande ger bra återkoppling kraschar mjukt med bra förklarande felmeddelanden stödjer både nybörjare och experter Som utvecklare: varför och hur? Varför är gränssnittet viktigt? Är interaktiva gränssnitt bra? Är en viss typ av gränssnitt bra i alla situationer? previous next 3 previous next 4 Vad bör man tänka på vid konstruktion? Vad är uppgiften? Vilken information behövs? Hur jobbar man idag? bra, dåligt. Vilka fel görs? Vilka (för-)kunskaper behövs för uppgiften? etc. Vem skall använda systemet? Nybörjare Tillfälliga eller sporadiska användare Personer som använder systemet ofta utan att vara experter Experter I vilken omgivning skall systemet fungera? Till oh 11 previous next 5 Shneidermans principer Princip 1: Var medveten om olikheter Människor är olika Människor lär, tänker och löser problem på olika sätt En del föredrar tabeller, visa gillar grafiska representationer och andra vill helst arbeta med text och siffror Vem skall använda systemet? Vilka uppgifter skall utföras och hur frekvent? Interaktionsstil Direktmanipulation Menyer Formulär Kommandospråk Naturligt språk previous next 6

2 Shneidermans Princip 2: Åtta gyllene regler Sträva efter enhetlighet Erbjud kortkommandon (för den erfarne användaren) Ge återkoppling Designa dialoger så att dom är slutna med handlingar organiserade med tydlig början, mitt och slut Undvik att låta användaren göra fel (tex genom att använda menyer istället för textbaserad inmatning) och försök göra felhanteringen enkel Gör det enkelt att ångra handlingar ( undo ) Sträva efter att användarna av systemet känner att dom har kontroll (och inte systemet som kontrollerar dem) Minimera belastning av korttidsminnet 7 ± 2 Shneidermans Princip 3: Undvik fel Användare gör fel hela tiden! I ordbehandlare, kalkylark, databaser, trafikledning, osv En undersökning visade att erfarna professionella användare av ordbehandlare och operativsystem gjorde misstag eller valde ineffektiva strategier i 31% av uppgifterna som tilldelades dem Vissa förbättringar genom bättre felmeddelanden fast bättre att undvika felen! För varje felmeddelande fundera på om det inte finns en lösning som undviker felet helt och hållet. Meddela vad som är fel (tex matchande parentesfel) Se till att kompletta sekvenser genomförs Korrigera kommandon Genom automatisk ifyllnad Eller hellre, undvik felen genom ett direktmanipulativt gränssnitt previous next 7 previous next 8 Hur presentera information? Organisera skärmen Var konsekvent terminologi, förkortningar, användning av stora bokstäver, etc Effektiv kunskapsinhämtning för användaren familjär och uppgiftsanpassad design Minimera belastning av användarens minne organisera informationen så att risken för att användaren glömmer något minimeras (använd etiketter mm) Gör ut- och inmatning så lika varandra som möjligt om möjligt skall data kunna matas in eller editeras där det presenteras Gör det möjligt för användaren att kontrollera eller anpassa form och format att passa sina egna önskemål Hur bör inmatning ske? Var konsekvent liknande sekvenser av operationer skall leda till liknande resultat Minimera antalet användaroperationer kopiera in tidigare inmatade data som defaultvärden tänk också på experter Minimera belastning av användarens minne undvik att användaren skall behöva komma ihåg långa listor eller koder Gör ut- och inmatning så lika varandra som möjligt Gör det möjligt för användaren att kontrollera eller anpassa form och format previous next 9 previous next 10 Frameworks (FW) Ett FW är centralt för konstruktion av interaktiva applikationer Varför ett framework? Svårt att tränga in i toolkits (bibliotek av komponenter), eller följa givna designregler Ett FW ger återanvändbar applikationsdesign eller delsystem Ett FW representeras av ett antal abstrakta klasser och definitioner av hur dessa klasser samarbetar, vilket vägleder programutvecklaren och gör det enklare att konstruera enhetliga gränssnitt och applikationer snabbare mer uniformt Vad är ett Framework? Ett framework beskriver hur ett problem skall brytas ner Inte bara klasserna utan också hur deras instanser samverkar definierar invarianter som objekten måste dela och anger också hur dom skall användas Ett framework påtvingar en modell som programmeraren måste anpassa sig till previous next 11 previous next 12

3 Hollywood Omvänd kontroll (Hollywood-principen) Ring inte oss vi ringer er! Koda med klassbibliotek Koda med framework Att använda ett framework Hur? skapa nya subklasser sätta ihop objekt (så att de samverkar) modifiera fungerande exempel Användarkod Framework kod i klassbibliotek användarkod previous next 13 previous next 14 Grafiskt Framework Ett grafiskt system fungerar ofta som ett framework i vilket man infogar egna applikationer Man anropar initieringsrutiner sätter upp anrop till egna rutiner (call-backs) huvudlooprutin (som sedan anropar dom tidigare definierade call-back-rutinerna) previous next 15 Exempel på FW Javas API (Application Programmer s Interface) Java:s API innehåller bla awt (abstract windowing toolkit) som delvis kan användas som ett FrameWork som bla stödjer konstruktion av applikationer med fönster Konstruktion av egna fönster Fundamental fönsterklass AWT: Frame Swing: JFrame Ett sätt att konstruera fönster med egna egenskaper (tex speciell utritning) är att subklassa fönsterklassen Beteendet ändras, dvs anpassas till dom egna önskemålen, genom att lämpliga metoder skrivs om i den konkreta (egna) subklassen Tex paint() eller paintcomponent() för att beskriva utritning Olika händelsehanterare definieras för att ta hand om olika inmatningshändelser I Swing subklassar man ofta JComponent previous next 16 Frame och Applet java.lang java.awt java.applet Object Object Component Component Container Container Window Window Panel Panel Frame Frame Applet Applet Ofta importeras alla klasser i java.awt Exempel 1 (AWT) package mypackage; // Klassdefinition (utan extends medför subklass till Object) public class MyApplication { Ofta är det tillräckligt att (Java 1.1) subklassa Frame och implementera tex WindowListener, MouseListener och MouseMotionListener senare skall vi titta på hur vi istället kan använda adaptorer skriva public static void main(string [] args) instansiera den egna klassen, ange fönsterstorlek och ange att fönster och mushändelser skall tas emot (addwindowlistener(this) osv), öppna det hela skriva public void paint(graphics g) rita på skärmen konstruera metoder för dom gränssnitt för dom "lyssnare" vi angett att vi skall implementera Instansiera Frame Sätt storlek Och öppna public static void main(string [] s) { Frame f = new Frame("Mitt första fönster"); f.setsize(200, 300); f.setvisible(true); previous next 17 previous next 18

4 och så sparar vi, kompilerar och kör Spara Spara filen med samma namn som klassen med extension.java, dvs här MyApplication.java Kompilera javac MyApplication.java Skapar en fil MyApplication.class Kör java MyApplication previous next 19 Vi definierar hur omritning av fönstret ska gå till Exempel 2 (AWT) package mypackage; public class MyFrame extends Frame { public MyFrame() { public MyFrame(String s) { super(s); public void paint(graphics g) { int x = 100, y = 200; for (int i = 0; i < 100; i++) { g.drawoval(x, y, i, i); public static void main(string [] s) { MyFrame f = new MyFrame("Mitt andra fönster"); f.setsize(200, 300); f.setvisible(true); previous next 20 För JFrame importerar vi javax.swing För mer avancerad grafik importerar vi java.awt.geom Med Graphics2D kan vi göra mer avancerade 2Dsaker Exempel 3, Swing, Graphics2D och JFrame package mypackage; import javax.swing.*; import java.awt.geom.*; public class MyJFrame extends JFrame { public void paint(graphics g) { Graphics2D g2 = (Graphics2D)g; g2.setstroke(new BasicStroke(8.0f)); g2.setcolor(color.magenta); g2.draw(new Arc2D.Double(40, 70, 200, 100, 120, 135, Arc2D.OPEN)); public static void main(string [] s) { MyJFrame f = new MyJFrame(); f.setsize(200, 300); f.setvisible(true); previous next 21 previous DOA 2003 Gränssnittskonstruktion Del 2 Innehåll, oh 22 resten Inmatningstyper Modeller för interaktiva applikationer Observer MVC Pluggbara komponenter Java Lyssnare Exempel adaptorer, MVC Enkel inmatning med knapp och fält Swing Referenser, ett axplock next Olika inmatningstyper Request mode Vänta tills dess att något sker tex på inmatning via tangentbordet eller klick på mus traditionell inmatning från tangentbord, scanf (C), readln (Pascal) sensor.waitbutton(); gc.displaystring("inmatning ", sensor.pos()); Där sensor är ett (tänkt) objekt som ger oss möjlighet att läsa av inmatningsverktygens status (dvs tex tangentbord och mus) Samplad/pollad Kontrollera status för enhet Omedelbar avläsning tex är någon knapp på musen nertryckt while(sensor.anybuttonpressed()) { pen.moveto(sensor.mousepoint()); inmatningstyper Händelsestyrd Förändringar hos enheter placeras i en kö intresserade program meddelas om att händelse inträffat från början av kön (flera kan alltså meddelas om samma händelse) Det är sedan upp till varje program att själv bestämma hur det skall (eller inte skall) reagera Exempel, en metod som reagerar om händelsen dubbeklick inträffar public void doubleclickevent(event event) { frame.setlocation(event.position()); previous next 23 previous next 24

5 Modeller för konstruktion av interaktiva tillämpningar Modeller Seeheim PAC MVC Morphing Tekniker Call-back Händelsebaserade Adaptorer, listeners Pluggbara Stil Direktmanipulativ, grafisk Drag-and-drop Objektorienterad Modeller för konstruktion av interaktiva tillämpningar Separation av applikation och presentation Newmans Reaction Handler, 1968 Var först med att separera applikation från presentation se [1, 2, 3] Seeheim, MVC och PAC Seeheim, 1985 På en Workshop i Seeheim konstruerade man den första konceptuella arkitekturen för ett User Interface Management System (UIMS). Man identifierade följande logiska komponenter i ett UIMS presentation - visualisering, in- och utmatning dialogkontroll - styr kommunikation mellan presentation och applikation tillämpningsgränssnitt - interfacesemantik i applikation previous next 25 previous next 26 Model View Controller (MVC), andra hälften av talet, se [4, 5, 6, 7] Delar upp applikationerna i tre komponenter applikationslogiken (modell) presentation (vy) interaktion (kontroll) Model View Controller (MVC) Model: logiken View: presentationen Controller: interaktionen Applikationslogiken Presentation Abstraction Control (PAC), 1989, se [8] Delar också upp applikationen i tre delar abstraktion presentation kontroll Mer konceptuell än MVC Presenterar V M C Interagerar previous next 27 previous next 28 Presentation Abstraction Control (PAC) Abstraction Presentation Control User Observer, beroenden mellan objekt Problem Hur kan vi konstruera en mekanism som tillåter att vissa objekt meddelas om någon vital del förändras i andra objekt utan att objekten görs starkt knutna till varandra? Krafter Vi vill undvika stark koppling och beroende mellan objekten Intresserade objekt skall informeras om något förändras. Lösning Upprätthåll en lista av objekt som är beroende av ett visst objekt. Om objektet förändras skall dom beroende objekten meddelas. Dom beroende objekten skall vart och en själva avgöra hur dom skall reagera på förändringen. previous next 29 previous next 30

6 ett sekvensdiagram som visar ett typiskt scenario Subject attach(observer) detach(observer) notify() observers for all o in observers { o.update(); * Observer update() :subject o 1 :observer o 2 :observer o 3 :observer :object attach(o 1 ) attach(o 2 ) attach(o 3 ) notify() update() update() update() notify() update() update() detach(o 3 ) previous next 31 previous next 32 Javalösning: observer Javalösning med Observer och Observable. I Java kan ett objekt som vill vara beroende av ett annat objekt implementera gränssnittet Observer medan det objekt som observeras görs till subklass till klassen Observable (eller möjligen använder ett fält som är subklass till denna typ). Gränssnittet Observer: package java.util; public interface Observer { void update(observable o, Object arg); Metod för att Lägga till observer Metod för att ta bort observer klassen Observable package java.util; public class Observable { private boolean changed = false; private Vector obs; private Observer[] arr = new Observer[2]; public Observable() {obs = new Vector(); public synchronized void addobserver(observer o) { if (!obs.contains(o)) {obs.addelement(o); public synchronized void deleteobserver(observer o) { obs.removeelement(o); Det här tar vi kursivt vidare till oh 42 previous next 33 previous next 34 Metoder för att meddela att objektet ändrats Meddelandet update( ) skickas till alla observers Observable forts public void notifyobservers() {notifyobservers(null); public void notifyobservers(object arg) { int size=0; Om vi inte anger synchronized (this) { argument så läggs null if (!haschanged()) return; på som argument size = obs.size(); if (size > arr.length) {arr = new Observer[size]; obs.copyinto(arr); clearchanged(); Från vem for (int i = size -1; i>=0; i--) { if (arr[i]!= null) { arr[i].update(this, arg); Argument till uppdateringen Sätt eller ta bort changed-flagga klassen Observable forts public synchronized void deleteobservers() { obs.removeallelements(); protected synchronized void setchanged() {changed = true; protected synchronized void clearchanged() {changed = false; public synchronized boolean haschanged() { return changed; public synchronized int countobservers() {return obs.size(); previous next 35 previous next 36

7 observer Exempel: MessageBoard och beroende studenter Subklassa Observable import java.util.*; class MessageBoard extends Observable { protected String message; public String getmessage(){return message; public void changemessage(string amessage){ message = amessage; this.setchanged(); this.notifyobservers(message); Argumentet sparas (om tex något beroende objekt vill läsa av det) Vi indikerar att objektet ändrats Vi meddelar beroende objekt, med message som argument observer: exempel Vi antar att det redan finns en "vanlig" implementation av Student, som vi utökar I update( ) definierar vi vad som skall göras då objektet får reda på att ett objekt som det är beroende av ändrats import Persons.*; import java.util.*; Implementera gränssnittet Observer class Student extends Persons.Student implements Observer { public void update(observable o, Object arg){ System.out.println(this.christianName() + " tar emot meddelande: " + arg); public Student(String christianname, String familyname, String pnr, String programme, String ) { super(christianname, familyname, pnr, programme, ); previous next 37 previous next 38 observer: exempel public class TestObserver { public static void main(string [] args) { MessageBoard board = new MessageBoard(); Student pers1 = new Student("Kalle", "Person", "133", X96", x96- kpe@nada.kth.se"); pers1.addcourse( DOA2004"); Gör pers1 beroende av board pers1.addcourse("the Classic Malts"); board.addobserver(pers1); board.changemessage("ny person: " + pers1.christianname()); /* Utskriften blir Kalle tar emot meddelande: Ny person: Kalle */ Meddela att board ändrats observer: exempel Student pers2 = new Student("Olle", "Olsson", "113", X96", "olle@swipnet.se"); pers2.addcourse( DOA2004"); pers2.addcourse("english-1"); Gör pers2 beroende av board board.addobserver(pers2); board.changemessage("ny person: " + pers2.christianname()); /* Utskriften blir Olle tar emot meddelande: Ny person: Olle Kalle tar emot meddelande: Ny person: Olle */ Meddela att board ändrats previous next 39 previous next 40 observer: exempel Student pers3 = new Student("Lotta", "Andersson", "123", "F97", "ff@home.se"); pers3.addcourse("mdi03"); pers3.addcourse( DOA2004"); board.addobserver(pers3); board.changemessage("ny person: " + pers3.christianname()); /* Utskriften blir Lotta tar emot meddelande: Ny person: Lotta Olle tar emot meddelande: Ny person: Lotta Kalle tar emot meddelande: Ny person: Lotta */ Model View Controller (MVC) Baseras på mönstret Observer Vyerna observerar (prenumererar på) förändringar hos modellen (publicisten) Annorlunda uttryckt: En vy görs beroende (eng. dependent) av modellen Vid intressanta förändringar i modellen så meddelas dom beroende objekten (dvs vyerna) Ren struktur Modellen skall inte ha någon direkt vetskap om vilka eller hur många vyer som är beroende av den Modellen skall inte heller ta hänsyn till hur dess data presenteras eller hur man interagerar med den previous next 41 previous next 42

8 MVC (Konkret struktur, med principkod) Modellen har implicita referenser till vyerna dependents MVC (Modellen ändras) - principiell kod Vid förändring görs (alternativt) model.changed() model.changed(argument) model.changed(argument, parameter) Vyn får meddelandet update(argument, parameter, avsändare) vyerna blir automatisk beronde då modellen anges via meddelandet model(model amodel) view.model(amodel) Denna metod finns i någon gemensam rotklass (i Java implementeras interfacet Observer och i Smalltalk är MVC så centralt att klassen Object implementerar nödvändiga metoder) så om man inte vill ta hand om argument räcker det att implementera update(argument, parameter) eller update(argument) previous next 43 previous next 44 Sammanfattning konstruktion med View- Controller (typfall) 1 Skapa klasser Skapa applikationslogiken Oftast bäst att fokusera på och konstruera den logiska applikationen, utan interaktion och presentation, först Frågor man kan ställa sig: Vad är modell? Vad är bara hjälpklasser? Skapa vy (I Java som direkt eller indirekt sublass till JComponent i Smalltalk som direkt eller indirekt subklass till View) Skapa kontrollklass I Java används en kombination av lyssnare och egna klasser i Smalltalk finns speciella kontrollklasser Gör kontrollern till defaultklass för vyn Detta gäller främst för den puristiska implementationen av MVC i Smalltalk, i Java får vi som sagt bla utnyttja lyssnare Sätt ihop det hela mha Observermönstret I Java måste man själv se till att koppla ihop det hela. I Smalltalk ser vyn till att rätta beroenden sätts upp då man ger den en modell previous next 45 2 Definiera hur utritning går till steg 1 skriv metoden Java AWT: paint(graphics) Swing: paintcomponent(graphics) i Smalltalk displayon: i vyn självklart gör man i praktiken ofta lite mer sofistikerade saker också 3 Definiera hur inmatning från interkationsverktygen ska gå till Java: konstruera händelselyssnare och lämpliga metoder Smalltalk: skriva metoder med givna namn som tar emot händelser av olika typer previous next 46 Problem med MVC Ibland svårt att definitivt separera funktionalitet mellan modell, vy och kontroller Ibland kan det vara bra att dela upp applikationen i datamodeller och applikationsmodell Datamodeller Applikationsmodell MVC i JAVA class MinModell extends Observable lägg till UI-objekt som prenumerant, dvs addobserver(observer o) skicka changed, dvs setchanged(); notifyobservers(); till modellobjektet om intressant ändring skett Applikationsmodellen kan då innehålla kod som är relaterad till användargränssnittet, dvs controller och view men fortfarande bevaras den lösa kopplingen till datamodellen previous next 47 class MinUIClass extends Component implements Observer implementera update(obsevervable o, Object x) som uppdaterar skärmen previous next 48

9 Java Eventmodell 1.1 Java 1.1 och senare har en modell där man definierar objekt som tar hand om händelser som sker i komponenter i gränssnitten I princip sätter man upp en händelselyssnare per typ (tangentbord, mus, fokus, etc.) av händelse man är intresserad av att applikationen ska reagera på Varje komponent (knapp, fält, mfl) kan också hanteras av sin egen händelselyssnare buttonx.addactionlistener(mylistenerforbuttonx) Med fördel används anonyma klasser för att definiera lyssnare för olika objekt Händelselyssnare Händelser till ett fönster eller komponent tas omhand av händelselyssnare påminner mycket om mönstret Observer, och i grafiska sammanhang om MVC, fast dom "beroende" objekten, dvs lyssnarna, måste implementera ett mer varierat utbud av metoder beroende av typ av lyssnare måste olika API:er implementeras Olika typer av lyssnare tar hand om olika typer av händelser, MouseListener, WindowListener, FocusListener, ActionListener, osv Namnet är uppbyggt på följande sätt: HändelsetypListener Till varje lyssnare finns ett speciellt interface som beskriver vilka metoder som lyssnaren implementerar Lyssnarna och deras interface tillhör ett gemensamt package nämligen: java.awt.event previous next 49 previous next 50 Händelselyssnare, några typiska KeyListener ActionListener ComponentListener FocusListener WindowListener EventListener TextListener MouseListener MouseMotionListener ItemListener AdjustmentListener Exempel: implementation av lyssnarfunktionalitet direkt i den egna klassen package MyTests; import java.awt.event.*; public class MyFrame1 extends Frame implements WindowListener{ public void windowopened(windowevent e) { public void windowclosing(windowevent e) { System.exit(0); public void windowclosed(windowevent e) { public void windowiconified(windowevent e) { public void windowdeiconified(windowevent e) { public void windowactivated(windowevent e) { public void windowdeactivated(windowevent e) { ContainerListener previous next 51 previous next 52 public static void main(string [] args) { MyFrame1 frame = new MyFrame1(); frame.settitle("fönster som lyssnar efter fönsterhändelser v1 (fönstret gör det själv)"); frame.setsize(400, 300); frame.addwindowlistener(frame); frame.setvisible(true); Exempel: lyssnare som inre klass package MyTests; import java.awt.event.*; class MyWindowListener implements WindowListener { public void windowopened(windowevent e) { public void windowclosing(windowevent e) { System.exit(0); public void windowclosed(windowevent e) { public void windowiconified(windowevent e) { public void windowdeiconified(windowevent e) { public void windowactivated(windowevent e) { public void windowdeactivated(windowevent e) { previous next 53 previous next 54

10 public class MyFrame2 extends Frame { public static void main(string [] args) { Frame frame = new MyFrame2(); frame.settitle("fönster som lyssnar efter fönsterhändelser v2 (med inre klass)"); frame.setsize(400, 300); frame.addwindowlistener(new MyWindowListener()); frame.setvisible(true); Adaptorer och händelselyssnare För att förenkla användningen av händelselyssnare finns ett antal fördefinierade adaptorer Dessa adaptorer implementerar alla metoder deklarerade i den aktuella lyssnarens gränssnitt En adaptor implemeneterar endast tomma metoder Genom att subklassa en adaptor och använda den som lyssnare så räcker det att endast skriva om dom metoder som verkligen gör något, så slipper man som i föregående exempel implementera massa metoder utan metodkropp Dessa adaptorer är speciellt enkla att använda tillsammans med anonyma inre klasser previous next 55 previous next 56 Object Object Klasser Adaptorer ComponentAdapter ContainerAdapter FocusAdapter KeyAdapter MouseAdapter MouseMotionAdapter WindowAdapter WindowListener WindowListener ActionListener ActionListener AdjustmentListener AdjustmentListener ComponentListener ComponentListener ContainerListener ContainerListener FocusListener FocusListener ItemListener ItemListener KeyListener KeyListener MouseListener MouseListener MouseMotionListener MouseMotionListener TextListener TextListener Gränssnitt Gränssnitt Exempel: lyssnare via adapter class MyWindowAdapter extends WindowAdapter { public void windowclosing(windowevent e) { System.exit(0); public class MyFrame3 extends Frame { public static void main(string [] args) { Frame frame = new MyFrame3(); frame.settitle("fönster som lyssnar efter fönsterhändelser v3 (med egen adapter)"); frame.setsize(400, 300); frame.addwindowlistener(new MyWindowAdapter()); frame.setvisible(true); previous next 57 previous next 58 Exempel: lyssnare via anonym subklass public class MyFrame4 extends Frame { public static void main(string [] args) { Frame frame = new MyFrame4(); frame.settitle("fönster som lyssnar efter fönsterhändelser v4 (med anonym subklass till adapter)"); frame.setsize(400, 300); frame.addwindowlistener(new WindowAdapter (){ public void windowclosing(windowevent e) { System.exit(0); ); frame.setvisible(true); Kommunicera och prenumerera på förändringar (en kort repetition) Traditionellt callbacks dvs en funktion kopplas till att ta emot en viss händelse från systemet eller komponent OpenGL, X enkelt statiskt MVC baseras på Observer/beroenden alla typer av förändringar via samma kanal möjligen parameterstyrt generellt (språk-) neutralt skalbart/distribuerbart en kanal med dispatching hos klient previous next 59 previous next 60

11 Lyssnare och adaptorer ett helt objekt kopplas till en viss typ av händelse högre nivå än call-backs lite komplext (och fördolt) beteende mest ett problem för ovana användare av det aktuella systemet finns stöd för detta i Java med fördefinierade listener-interface och adaptorer specialiserade kopplade främst till grafiska komponenter Smalltalk mer generell än Javas modell alla objekt förberedda går att pluggas till en speciell del (tex en instansvariabel) men också mer komplex (och fördold för den oinvigde) MVC i botten registrera lyssnare händelser tas omhand av lyssnare Lyssnare och adaptorer: implementation lyssnaren beskriver beteende och kommunicerar med applikationen kursivt vidare till oh 68 I Java är många komponenter, som vi tidigare nämnt, förberedda för att hanteras av speciella lyssnare I princip går det till på följande sätt en komponent registrerar ett visst objekt som en lyssnare på vissa typer av händelser när en händelse av denna typ inträffar så vidarbefordras den i form av ett förutbestämt (deklarerat i ett interface) meddelande till lyssnaren lyssnaren i sin tur är vanligen en applikation eller en adaptor som i sin tur kommunicerar med applikationen previous next 61 previous next 62 Centralt är klasserna Component med subklasser som Button och TextField Definierar metoder som addactionlistener dvs binder en lyssnare AWTEventMulticaster Hanterar bindning mellan applikation och komponent Skickar förutbestämt meddelande till lyssnare vid given händelse Exempel: definiera egen lyssnarklass import java.util.eventlistener; import java.awt.event.actionevent; public interface MyActionListener extends EventListener { public void actionperformed(actionevent e); AWTEventMulticaster Component listener * Listener previous next 63 previous next 64 (MyComponent ) package MyTests; import java.util.vector; import java.util.enumeration; import java.awt.event.actionevent; public class MyComponent { Vector actionlisteners = new Vector(); public void addmyactionlistener(myactionlistener listener) { if(!actionlisteners.contains(listener)) actionlisteners.add(listener); public void firemyaction() { ActionEvent event = new ActionEvent(this, 4711, "My action fired!"); Vector cloneoflisteners = (Vector) actionlisteners.clone(); for(enumeration e = cloneoflisteners.elements(); e.hasmoreelements();) ((MyActionListener) e.nextelement()).actionperformed(event); public void removemyactionlistener(myactionlistener listener) { if(actionlisteners.contains(listener)) actionlisteners.remove(listener); previous next 65 previous next 66

12 (MyListenerTest) package MyTests; import java.awt.event.actionevent; class MyLocalActionListener implements MyActionListener { public void actionperformed(actionevent e) { System.out.println("ActionEvent received: " + e); public class MyListenerTest { public static void main(string [] args) { MyComponent component = new MyComponent(); component.addmyactionlistener(new MyLocalActionListener()); component.addmyactionlistener(new MyLocalActionListener()); component.addmyactionlistener(new MyActionListener() { public void actionperformed(actionevent e) { System.out.println("ActionEvent received in anonymous class: " + e); ); component.firemyaction(); Eclipse Vi använder Eclipse för att koda nu För att göra kodandet enklare använder vi Eclipse som är en så kallad IDE Vi åtekommer till vad IDEer är senare (nästa pass på två timmar och i nästa uppsättning OH-bilder) previous next 67 previous next 68 Exempel: RitProgram1 package Prog1; import javax.swing.*; import java.awt.event.*; public class RitProgram1 extends JFrame implements WindowListener, MouseListener, MouseMotionListener { private int last_x, last_y; public RitProgram1(String s) { super(s); this.init(); public void init() { // Använd MouseListener och MouseMotionListener // addxxxlistener anger att vi ar intresserade av den aktuella typen av händelser. this.addwindowlistener(this); this.addmouselistener(this); this.addmousemotionlistener(this); this.setsize(300, 300); // En metod beskriven i MouseListener. // Anropas då vid tryck på musknapp. public void mousepressed(mouseevent e) { last_x = e.getx(); last_y = e.gety(); previous next 69 previous next 70 // Metoder deklarerade i MouseListener måste implementeras // även om vi inte gör något i dem public void mousereleased(mouseevent e) { public void mouseclicked(mouseevent e) { public void mouseentered(mouseevent e) { public void mouseexited(mouseevent e) { // och samma sak för metoder från MouseMotionListener. public void mousemoved(mouseevent e) { // En metod beskriven i MouseMotionListener. // Anropas då musen rörs med knapp nertryckt. public void mousedragged(mouseevent e) { Graphics g = this.getgraphics(); int x = e.getx(), y = e.gety(); g.drawline(last_x, last_y, x, y); last_x = x; last_y = y; public void windowopened(windowevent e) { public void windowclosing(windowevent e) { System.exit(0); public void windowclosed(windowevent e) { public void windowiconified(windowevent e) { public void windowdeiconified(windowevent e) { public void windowactivated(windowevent e) { public void windowdeactivated(windowevent e) { public static void main(string args []) { RitProgram1 ritprog = new RitProgram1("Enkelt ritprogram"); ritprog.setvisible(true); previous next 71 previous next 72

13 Exempel: RitProgram2 package Prog2; import javax.swing.*; import java.awt.event.*; class MinRityta extends JComponent { protected int last_x, last_y; public MinRityta() { super(); this.init(); public void init() { this.addmouselistener(new MouseAdapter () { public void mousepressed(mouseevent e) { last_x = e.getx(); last_y = e.gety(); ); this.addmousemotionlistener(new MouseMotionAdapter() { public void mousedragged(mouseevent e) { Graphics g = getgraphics(); int x = e.getx(), y = e.gety(); g.drawline(last_x, last_y, x, y); last_x = x; last_y = y; ); previous next 73 previous next 74 public class RitProgram2 { public static void main(string args []) { JFrame ritprog = new JFrame("Ritprogram 2"); ritprog.getcontentpane().add(new MinRityta()); Exempel: RitProgram3 (dubbelbuffring) package Prog3; import javax.swing.*; import java.awt.event.*; kursivt vidare till oh 80 ritprog.addwindowlistener(new WindowAdapter () { public void windowclosing(windowevent e) { System.exit(0); ); ritprog.setsize(300, 300); ritprog.setvisible(true); class MinRityta extends JComponent { Image image = null; Graphics img = null; protected int last_x, last_y; public MinRityta() { super(); this.init(); previous next 75 previous next 76 protected Graphics getimgraphics() { if(image == null) { Dimension dim = getsize(); image = createimage(dim.width, dim.height); img = image.getgraphics(); return img; public void paintcomponent(graphics g) { super.paintcomponent(g); if(!(image == null)) g.drawimage(image, 0, 0, this); previous next 77 public void init() { this.addmouselistener(new MouseAdapter () { public void mousepressed(mouseevent e) { last_x = e.getx(); last_y = e.gety(); ); this.addmousemotionlistener(new MouseMotionAdapter() { public void mousedragged(mouseevent e) { Graphics g = getimgraphics(); int x = e.getx(), y = e.gety(); g.drawline(last_x, last_y, x, y); repaint(); last_x = x; last_y = y; ); previous next 78

14 public class RitProgram3 { public static void main(string args []) { JFrame ritprog = new JFrame("Ritprogram 3"); ritprog.getcontentpane().add(new MinRityta()); ritprog.addwindowlistener(new WindowAdapter () { public void windowclosing(windowevent e) { System.exit(0); ); ritprog.setsize(300, 300); ritprog.setvisible(true); (simpelt) Javaexempel med knappar, inmatningsfält och textfält package test; import java.awt.event.*; import javax.swing.*; public class Test1 { public static void main(string[] args) { final JTextField textf1; final JTextArea text1; JButton b; JFrame f = new JFrame("Test1a"); previous next 79 previous next Container c = f.getcontentpane(); textf1 = new JTextField(); c.add(textf1, BorderLayout.NORTH); text1 = new JTextArea(); c.add(text1, BorderLayout.CENTER); b = new JButton("Flytta"); c.add(b, BorderLayout.SOUTH); b.addactionlistener(new ActionListener() { public void actionperformed(actionevent e){ text1.append(textf1.gettext()); ; ); f.setsize(200, 300); f.setlocation(100, 100); f.setvisible(true); Större Javaexempel med MVC och widgets RitProgramWidthWidgets.java i separat fil previous next 81 previous next 82 Exempel från Advanced Java 2 Platform Vi tittar på MVC-exemplet i utdraget ur Advanced Java 2 Platform How To Program av Deitel, Deitel och Santry, som finns i DOA-kursbunten Här konstrueraras en enkel MVC-applikation med bankkonton som visualiseras av olika typer av vyer Swing-exempel på nätet Swing-exempel på nätet Vi tittar på exempel på följande websidor nts/example-1dot4/index.html previous next 83 previous next 84

15 Referenser, ett axplock [1] A Brief History of Human Computer Interaction Technology, Brad A. Myers [2] The core of Information Technology, Andy Fischer & Kevin Lee [3] Strategic Directions in Human-Computer Interaction, BRAD MYERS, JIM HOLLAN, ISABEL CRUZ ET AL [4] [5] [6] [7] [8] [9] User Interface Software Tools, Brad A Meyers, ACM Transaction on Computer Interaction, Vol 2, No 1, March 1995, Pages , D= &CFTOKEN= Titta gärna på Speciellt Digital Library (i menyn på föregående sida) Och sök efter artiklar on-line (för att läsa dom så måste du dock sitta på KTH) previous next 85 Länkar Java Speciellt Se också OH s 83 VisualWorks JBuilder respektive Borlands C++ Eclipse previous next 86