Vorlesung Usability and Interaction Sommersemester 2009 Dipl.-Inf. Philipp Heim Forschungsgebiet Interaktive Systeme Institut für Visualisierung und interaktive Systeme Universitätsstraße 38 70569 Stuttgart Büro: Raum 1.061 Philipp.Heim@vis.uni-stuttgart.de http://www.vis.uni-stuttgart.de 1
Animierte Benutzungsschnittstellen RelFinder: http://relfinder.dbpedia.org (Kooperation von Uni Stuttgart, Uni Leipzig und Uni Duisburg-Essen) 2
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
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
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
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
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
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
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
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
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
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-8859-1"?> <mx:application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:label text="hello World!"/> </mx:application> 12
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
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)
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)
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)
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
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
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
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
Ausblick Tolle Möglichkeiten http://download.interactivesystems.info/chaingraph/annotatedimagesdemo.swf http://visudemos.ilog.com/webdemos/orgchart/orgchart.html http://visudemos.ilog.com/webdemos/heatmap/heatmap.html http://gfacet.org 21
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
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
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
Danke für eure Aufmerksamkeit Fragen? 25