Vorlesung Usability and Interaction. Sommersemester 2009

Transkript

1 Vorlesung Usability and Interaction Sommersemester 2009 Dipl.-Inf. Philipp Heim Forschungsgebiet Interaktive Systeme Institut für Visualisierung und interaktive Systeme Universitätsstraße Stuttgart Büro: Raum

2 Animierte Benutzungsschnittstellen RelFinder: (Kooperation von Uni Stuttgart, Uni Leipzig und Uni Duisburg-Essen) 2

3 Inhalt 1. Nachteile und Vorteile animierter Benutzungsschnittstellen 2. Verschiedene Entwicklungsframeworks (kurze Einführung) Darstellung (MXML) Logik (Actionscript) Ausblick 4. Weiterführende Angebote am VIS-Institut 3

4 1. Nachteile und Vorteile animierter Benutzungsschnittstellen Defintion: Animation (von lat. animare, zum Leben erwecken ) ist im engeren Sinne jede Technik, bei der durch das Anzeigen von Einzelbildern für den Betrachter ein bewegtes Bild geschaffen wird. Serienfotografie von Eadweard Muybridge 4

5 1. Nachteile und Vorteile animierter Benutzungsschnittstellen Mensch Nachteile Zeitintensiv Oftmals überflüssig Eher ungewohnt Informationen schlecht zugreifbar Vorteile Zusätzliche Information Nachvollziehbarer Natürlicher Unterhaltsam Maschine Rechenintensiv Speicherintensiv Bandbreitenintensiv 5

6 2. Verschiedene Entwicklungsframeworks Toolkit/ Entwicklungsframeworks GTK+ API Diverse (C, C++, Perl ) Plattform -übergr. Unix/ Linux Mac OS x x x Qt C++ x x x MS Foundation Classes MFC (Wrapper für WinAPI) WPF Windows Presentation Foundation AWT (verwendet native UI- Elemente des BS) C++ Windows.NET- Sprachen Java Swing Java x SWT (verwendet native UI- Elemente des BS) Java Cocoa (in Max OS X) ObjectifC x x x x x Auswahl 6

7 2. Verschiedene Entwicklungsframeworks Direkte Konkurrenten Frameworks für Web- Applikationen Java-Applets JavaFX Benötigt Browser- Plug-in x x Offener Standard Erfassbar durch Suchmaschinen DHTML (mit JavaScript) x (x) Adobe Flex Microsoft Silverlight x x SVG (W3C) (nur für IE) x x Auswahl 7

8 Was ist das? Entwicklungsframework zum Erstellen von RIAs (Rich Internet Applications) Flex Komponenten: MXML: Deklarative Sprache zum Erstellen von sichtbaren und unsichtbaren Komponenten (z.b.: Buttons, Labels, Text ) Actionscript: Imperative Sprache zum Erstellen der Programmlogik (z.b.: Methoden, Bedingungen, ) Wird kompiliert zu einem Flash-Movie (.swf) Flash-Movie kann in Browser angezeigt werden (benötigt Flashplayer 10) 8

9 Was brauche ich dafür? Entwicklungsumgebungen: Flashdevelop (for Windows only) free download Adobe Flex Builder (for Windows and Mac OS) free download Adobe Flex SDK, free download Auch benötigt: Java SDK, Flash Player 10, dotnetfx (nur für Flashdevelop!) 9

10 Installation: 1. Java SDK, dotnetfx und Flash Player installieren 2. Flex SDK entpacken nach C:\Flex 3. Flashdevelop installieren 4. Pfad setzen: Tools Program Settings Plugins: AS3Context Flex SDK Location setzen (Flashdevelop) 10

11 Das erste Projekt: 1. Project new Project Create new project 2. Actionscirpt3 Flex 3 Project Name: HelloWorld 3. Main.mxml: Code hinzufügen: <mx:label text= Hello World! /> 4. Build Project 5. Test Movie HelloWorld.swf (>>>Ex1_1) (Flashdevelop) 11

12 Darstellung (MXML) Überblick: Sprache zur Beschreibung der Oberfläche (GUI) Basiert auf XML (extensible Markup Language) Erweiterbare Auszeichnungssprache Dient zur Darstellung hierarchisch strukturierter Daten XML-Tags sind nicht vordefiniert. Man definiert seine Tags selbst Einfaches Beispiel (Hello World!): <?xml version="1.0" encoding="iso "?> <mx:application xmlns:mx=" <mx:label text="hello World!"/> </mx:application> 12

13 Darstellung (MXML) Beispiel: Listen Anzeige zweier Listen mit Namen (männliche und weibliche) Einblende- und Ausblende- Funktion der Listen XML-Datensatz <mx:xmllist id="femalenames"> <person> <name>andrea</name> </person> <person> <name>petra</name> </person> </mx:xmllist> 13

14 Darstellung (MXML) HBox & VBox HBox: Horizontale Anordnung von beliebigen Elementen VBox: Vertikale Anordnung von beliebigen Elementen <mx:vbox> <mx:label text="was soll angezeigt werden?"/> <mx:checkbox id="checkboxmale" label="male" selected="true" /> <mx:checkbox id="checkboxfemale" label="female" selected="false" /> </mx:vbox> (>>>Ex1_2)

15 Darstellung (MXML) DataGrid Entspricht einer Tabelle mit Spalten und Zeilen Stellt Daten dar (gespeichert in DataProvider-Attribut) <mx:vbox> <mx:label text="liste der Frauen"/> <mx:datagrid dataprovider="{femalenames}"> <mx:columns> <mx:datagridcolumn datafield="name" headertext="name"/> </mx:columns> </mx:datagrid> </mx:vbox> (>>>Ex1_3)

16 Darstellung (MXML) HBox & Vbox Test Richtige Lösung? A: <mx:vbox> <mx:hbox> ( ) </mx:hbox> <mx:hbox> ( ) </mx:hbox> </mx:vbox> B: <mx:hbox> <mx:vbox> ( ) </mx:vbox> <mx:vbox> ( ) </mx:vbox> </mx:hbox> Richtig! C: <mx:hbox> <mx:hbox> ( ) </mx:hbox> <mx:hbox> ( ) </mx:hbox> </mx:hbox> D: <mx:vbox> <mx:vbox> ( ) </mx:vbox> <mx:vbox> ( ) </mx:vbox> </mx:vbox> (>>>Ex1_4)

17 Darstellung (MXML) Binding Attributes Attribute id, selected und visible für Einblende- und Ausblende-Funktion der Listen: Automatischer Update! <mx:checkbox id="checkboxfemale" label="female" selected="false" /> <mx:vbox visible="{checkboxfemale.selected}"> <mx:label text="liste der Frauen"/> <mx:datagrid dataprovider="{femalenames}"> <mx:columns> <mx:datagridcolumn datafield="name" headertext="name"/> </mx:columns> </mx:datagrid> </mx:vbox> (>>>Ex1_5) 17

18 Logik (Actionscript) Imperative Sprache zum Erstellen der Programmlogik (z.b.: Methoden, Bedingungen, ) Trennung von View (MXML) und Controller (Actionscript) Ermöglicht Änderungen leichter umzusetzen Vermeidet Copy-Paste-Fehler Übersichtlichere Strukturierung komplexer Anwendungen Objektorientierung verstärkt diese Effekte weiter Wiederverwendbarkeit von Code! 18

19 Logik (Actionscript) Hello, World! -Beispiel (Click-Handler- Funktion) <mx:script> <![CDATA[ import flash.events.mouseevent; private function clickhandler ( event:mouseevent ):void { mylabel.text = "Hello, World!"; } ]]> </mx:script> <mx:label id="mylabel" fontweight="bold" fontsize="24"/> <mx:button id="mybutton" label="click Me!" click="clickhandler(event);"/> (>>>Ex2_2) 19

20 Logik (Actionscript) Actionscript vs. MXML <mx:script> <![CDATA[ import flash.events.mouseevent; private function clickhandler ( event:mouseevent ):void{ mylabel.text = "Hello, World!"; } Trennung von View und Controller! ]]> </mx:script> <mx:label id="mylabel" fontweight="bold" fontsize="24"/> <mx:button id="mybutton" label="click Me!" click="clickhandler(event);"/> <mx:label id="mylabel" fontweight="bold" fontsize="24"/> <mx:button id="mybutton" label="click Me!" click="mylabel.text = 'Hello, World!'"/> (>>>Ex2_3) 20

21 Ausblick Tolle Möglichkeiten

22 4. Weiterführende Angebote am VIS-Institut Arbeiten mit Adobe Flex Studienprojekt SemSor: Einschätzung von Gefahrensituationen mit Semantic Web und Web 2.0 Zeitraum: Wintersemester 2009/10 - Sommersemester 2010 Teilnehmerzahl (Studierende): 6 12 Aufgabenstellung hier 22

23 4. Weiterführende Angebote am VIS-Institut Arbeiten mit Adobe Flex Studien- oder Diplomarbeiten: Interaktive Definition und Visualisierung von Filtern Aufgabenstellung hier (Ultraviolette Filter) 23

24 4. Weiterführende Angebote am VIS-Institut Arbeiten mit Adobe Flex Studien- oder Diplomarbeiten: Zusammenhänge finden mit Hilfe des Semantic Web Aufgabenstellung hier 24

25 Danke für eure Aufmerksamkeit Fragen? 25