GrIP-vt2010 - Other Approaches Cristian Bogdan – 2010-02-15 Admin • Project ques/ons? Other Approaches • Physical Interac/on Design demo Wed Mar to Interac/on 3rd at 15:15 on Torget Programming Cris/an Bogdan cris/@kth.se • @Override on framework methods re‐defined (to make sure redefinion is done) • In paint(Graphics g), cast Graphics to Graphics2D to get a richer API – Including afine transforma/ons DH2640 Grafik och Interaktionsprogrammering VT 2010 Why Other Approaches? Approaches • A given approach can work for both prototyping and • Produc/vity development – Interac/on code can grow very large and me‐consuming – But if you use it for prototyping, make sure you can be fast, so you can with toolkits or frameworks focus on the design rather than on the technology – Building e.g. a dialog box in procedural code is not very • User Interface Builders intuive – NetBeans, Eclipse Visual Editor – The “widget level” is very detailed • Command scrip/ng Tcl/Tk – Higher produc/vity is sought. Generate code? • Web 2.0 • Prototyping – Document‐based: JavaScript – JS frameworks (e.g. JQuery) – To communicate about the future product, some – Tradional toolkit: GWT sketch/mock‐up of it is needed • Rich Client PlaYorm: Eclipse RCP – Doing the sketch in the target framework/language is oXen slow/expensive, or the skills are not there • Rich Internet Applica/ons: Adobe Flex, Java FX • • PlaYorm change: from standalone to Web 2.0 Movie metaphor: Adobe Flash GUI‐byggare Några GUI‐byggare: • OXa integrerade med en IDE, Integrated • Interface Builder ever since NeXT (1988) Development Environment for Objec/ve‐C, now on Mac and iPhone • GUI:er består oXast av widgets, samt kod som • Visual Studio .NET Forms Designer, skickar meddelanden mellan dessa www.microsoX.com • GUI‐byggare: "rita" gränssniet, kod som skapar • Borland C++ Builder, www.borland.com widgets och deras layout genereras automa/skt! • QT Designer, www.trolltech.com ‐ Doing that in procedural code is typically boring • NetBeans, www.netbeans.org • Sedan lägger man ll händelselyssnare etc. själv, oXa via någon form av property inspector. • Olika plug‐ins för Eclipse • Many more Sida ‹#› GrIP-vt2010 - Other Approaches Cristian Bogdan – 2010-02-15 NetBeans 6.0 Eclipse interface builder • Called Visual Editor – hhp://www.eclipse.org/vep/ • Was not updated much since Eclipse 3.2 (2006) – S/ll possible to use in 3.5 • hhp://wiki.eclipse.org/VE/Update – This tells that there may not be so much demand for an interface builder Rich Client PlaYorm Command scrip/ng • Eclipse RCP • Tcl scrip/ng language • Can create Eclipse‐like applica/ons using the • Tk user interface toolkit necessary parts (plugins) from Eclipse itself • button.dialogbox.ok -text OK -command {destroy.dialogbox} • Each plugin declares – Create a button – Views and their inial grouping – Called .dialogbox.ok – Editors – With the text OK – Menu items – When pressing the button – Dependencies on other plugins – Destroy the parent window of the button (.dialogbox) • Declared using OSGi (Open Services Gateway • Highly flexible Text and Canvas widgets Inia/ve) • More concise code, rapid prototyping • But still procedural, still at the widget level Web 2.0: HTML + JS + Ajax HTML + JS: events • HTML can describe interface using markup • <form … onSubmit()=“…”> – Form widgets and dynamic elements (see DOM) • Or dynamically: – More declara/ve, possibly more produc/ve • Document Object Model (DOM) • document.forms[0].onSubmit() = – Hierarchical addressing (remember Composite?) function(){…} – document.forms[0].action • Buhons and other GUI‐framework‐like widgets • JavaScript provide the usual events (e.g. onClick) – allows event‐driven change of the document – HTML + CSS presenta/on, JavaScript interac/on • Besides, HTML‐specific events like onSubmit, – Each object defines proper%es, methods, events, sub‐objects onBlur… – document.forms[0].action =‘some_page’; • And document events like onreadystatechange – document.forms[0].submit(); • – document.forms[0].buttons[1] … difficult to add mulple independent event listeners Sida ‹#› GrIP-vt2010 - Other Approaches Cristian Bogdan – 2010-02-15 Web 2.0: HTML + JS + Ajax Web 2.0: frameworks • Data communica/on to the server • Web 2.0 brought a number of frameworks that ease – HTML+JS are restricted to the client browser the JavaScript work. – Server method invoca/on needed for useful • MooTools, very small library applica/ons • JQuery concise code, chained calls – Without change of current browser page • $(document).ready(function() { – Ajax (Asynchronous JavaScript and XML) or similar $("#orderedlist").find("li") .each(function(i) { – Essen/ally a remote procedure call (RPC) for $(this).append( " BAM! " + i ); JavaScript, using }); }); • HTTP as communica/on protocol – Each <li> from the list called #orderedlist is • XML to transmit procedure name, parameters and appended a certain text when the HTML document is results ready Web 2.0: GWT Rich Internet Applica/ons • Google Web Toolkit hhp://code.google.com/webtoolkit • Web applica/ons that look like desktop applica/ons • Applica/ons are wrien in Java • Most of Web 2.0 are RIAs – Using a framework‐like API (Widget, Panel, Frame, Buhon, • But some RIAs are not based on JavaScript but on a Tree…, EventListener) browser plug‐in • Tested in a Java‐based browser • Interac/vity and anima/on – hosted mode • Adobe Flash, Flex – Can be debugged as well • MicrosoX Silverlight • Translated in JavaScript + Ajax automa/cally • Java FX • Then ran in a browser Flash: Anima/on through RIA: Flash Tweening • The movie metaphor • draw or import an element • Stage • select a frame sequence, • Scene • insert a tween – "sec/ons" of a clip, each with its set of frames • define one or more keyframes • Timeline • edit the posion, size and color at the – Frames, keyframes, layers keyframes • test movie (or publish to the web) Sida ‹#› GrIP-vt2010 - Other Approaches Cristian Bogdan – 2010-02-15 Flash: Interac/ve UI RIA: Java FX • make the "stages" in a a graphical program • Compe/tor of Adobe Flex (similar concepts) • or through screenshots • Defines a Stage, Scene,Timeline, KeyFrame, tweening • – Declara/ve or through scans maybe scans of earlier paper – Text‐based prototypes • Uses nodes, groups and transforma/ons over them, • add small scripts for looping layouts • debug: trace() • Data bindings: constraints between variables • add transparent buhons add small event • Events handling scripts for buhon pressing • Scrip/ng language over Java • hhp://java.sun.com/javafx/1/tutorials/ui/ Prototyping Prototype • iden/fy problems and misunderstandings • representa/on: off‐line vs on‐line before it's too late and/or too expensive • precision (low or high, also referred to as • re‐respresent problems, explore solu/ons, get fidelity) inspired • interac/vity (the "look" only, or also parts of • common understanding based on shared the "feel") representa/on (compare formal requirement • evolu/on: rapid, itera/ve (but "plan to throw gathering) one away”), evolu/onary (into the final system) On‐line interac/ve prototyping Ongoing research • "screen changers" (HTML, PowerPoint and • OntoUCP project at TU Wien 2005‐2008 corresponding, earlier Hypercard) • Now EU CommRob project • mulmedia presenters (Flash, Director) • Much higher than widget level • interface builders – Communica/on (tree leaves) – Rhethorical structure (tree nodes) • Flash: on‐line and interac/ve. Not necessarily rapid. Can be itera/ve and even evolu/onary. Sida ‹#› GrIP-vt2010 - Other Approaches Cristian Bogdan – 2010-02-15 Example rendering (UI genera/on) Example model of model Sida ‹#›.