Folie 1Sascha Wolter | http://www.wolter.biz
Best Practices Rich Applications Prozesse und Probleme aus der
Praxis am Beispiel von Flex und Flash
Sascha Wolter | http://www.wolter.biz 2
Über mich
• Sascha Wolter (www.wolter.biz) ist Entwickler und Architekt für
Rich Applications auf der Basis von AIR, Flash, Flex und
Silverlight. Bereits seit 1995 arbeitet er freiberuflich als
Berater, Autor und Trainer. Sascha ist ebenfalls durch zahlreiche
internationale Vorträge auf den führenden Konferenzen wie der
„Flashforward“ und „Flash on the Beach“ bekannt. Seine Bücher und
Artikel rund um Flash, Flex und den Flash Media Server zählen zu
den meistgelesenen Publikationen. Als Gründer der führenden
deutschsprachigen Adobe User Group flashforum.de engagiert sich
Sascha auch für die Belange der Anwender.
• Veröffentlichungen – Video Training Flash CS3 – Video Training
Flex 3 Grundlage – Video Training Silverlight 2 (demnächst)
• Stille Post – Designer und Developer Workflow
• Architektur – Erfahrungsberichte und Vergleich von
Frameworks
• Auf Zuruf – Fragen und Antworten aus der Praxis
Sascha Wolter | http://www.wolter.biz
Sascha Wolter | http://www.wolter.biz
LOST IN FLEX
Sascha Wolter | http://www.wolter.biz
• Der englische Begriff "rich" steht dabei für die "reichhaltigen"
Möglichkeiten wie z.B. Drag-und-Drop-Fähigkeit oder Bedienbarkeit
über Tastenkürzel.
Außerdem ist auch die Leistungsfähigkeit der Applikation gemeint,
die z.B. Berechnungen auf Clientseite ausführen kann, ohne eine
Anfrage zum Server starten zu müssen. Dadurch lassen sich RIAs viel
flüssiger bedienen und geben Rückmeldungen sofort zurück.
Man könnte diese Anwendungen auch "intelligente Clients" nennen.
Natürlich sind diese Anwendungen Internet- optimiert (durch
Komprimierung sowie Streaming-Techniken). RIAs müssen zur Laufzeit
weniger Anfragen an den Server stellen.
Sascha Wolter | http://www.wolter.biz
(Inhalte)
Flash CS3 Professional
Flash CS3 Professional
Flex Builder IDE
.swf
Compile
.swf
Sascha Wolter | http://www.wolter.biz
MXML and ActionScript
Flex Builder IDE
Apollo Runtime
Systemarchitektur
Thin-Client CPU Auslastung unter Last
• Mehr Nutzer mit gleicher Infrastruktur
• Reduzierte Bandbreite
• Lösungen – Schlechte Usability: Alles modal; – Sehr schwer:
Konfliktmanagement und explizite Synchronisierung; – Asynchron und
„versteckt“ modal!
• Data Services – Veraltete Daten (Managed)
Sascha Wolter | http://www.wolter.biz
Flash CS 3 (Design und Animation)
Dreamweaver CS 3 (HTML und JavaScript)
Anwendungen
Laufzeitumgebungen
(Client)
Programmiermodelle
Serverkomponenten
Adobe AIR (Desktop RIAs )
Flash Mobile (Flash Lite )
ActionScript 3 (ECMA Script)
FlashCast (Mobile Push Services)
Kommando Zeilen Compiler, Debugger u. Profiler
MXML und ActionScript 3.0
Flex Framework und Klassenbibliothek
Sascha Wolter | http://www.wolter.biz
Code-basierter Ansatz Java/.NET
Adressiert Design/Entwickler Team mit Flash, Multimedia
kenntnissen
Scripting, Grafikdesign, Visuelle Tools
Flex Builder Features
Design Ansicht Visuelles Componenten Panel
Layout und Zustands Modelle Visuelles Werkzeug für
Begrenzungs-basiertes Layout Automatisches Ausrichten und
Skalierung von Komponenten Visuelles Gestalten von Komponenten oder
Anwendungs Zuständen
Unterstützung Für Skinning und Styling Vollständiges Rendering von
angepassten Skins und Komponenten Eigenschaften Inspektor zum
setzen von Komponenten Stylen
Coding Intelligenz Codeeinfärbung für AS, MXML, CSS
Code-Vervollständigung Schnelle Quell Code Navigation
Debugger und Profiler Interaktiver Debugger Variablen, Ausdruck
Fenster In-line Notation von Compiler Fehlern und Warnhinweise
Performance und Speicherprobleme finden
Sascha Wolter | http://www.wolter.biz
Editor Flash Autorensystem basiert auf Eclipse basiert auf
Eclipse basiert auf
ActionScript 1 ActionScript 2 ActionScript 3 MXML
+ + + -
- - + +
- + + +
- + - -
- + + -
Compiler Flash/Flex Flex nutzt MTASC und SWFMill MTASC MTASC,
Flex,
Flash
Open Source
• Bug Database – http://bugs.adobe.com/
• Open Screen Project
(http://www.adobe.com/openscreenproject/)
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical">
<mx:Label text="Hello World" />
<mx:Label>
<mx:htmlText>
<![CDATA[<font color="#FF0000">Single Line Text with
HTML</font>]]>
</mx:htmlText>
</mx:Label>
• MXML versus ActionScript – MXML ist XML – Schreibweise –
Namespaces – ActionScript mit –keep sehen
• Metacommands – Z. B. Bindings
Button, CheckBox, ComboBox, DataGrid, …
Datenbindung, Datenüberprüfung und Datendienste
Framework per ActionScript nutzen
// singleton super();
} }
}
• http://www.flashforum.de/forum/showthread.php?t=210238
Sascha Wolter | http://www.wolter.biz
Sascha Wolter | http://www.wolter.biz
Sascha Wolter | http://www.wolter.biz
nutzen!
• measure: Größe festlegen; – invalidateDisplayList
Sascha Wolter | http://www.wolter.biz
• Styles sind Module
Sascha Wolter | http://www.wolter.biz
<mx:TextInput id="username" text="" /> <mx:Button
id="myButton" label="Speichern" />
Sascha Wolter | http://www.wolter.biz
CurrencyFormatter DateFormatter NumberFormatter usw,
<mx:Text width="100" text="{euroFormatter.format(100,25)}"
/>
Sascha Wolter | http://www.wolter.biz
Daten zwischen Objekten ausstauschen!
Daten werden automatisch von einer Quelle (source) zu einem Ziel
(destination) kopiert
Curly braces {} <mx:TextInput id="tiText" width="200" text=""
/> <mx:Text id="txtText" width="200" text="{tiText.text}"
/>
<mx:Binding>-Tag <mx:Binding source="tiText.text"
destination="txtText.text" />
<mx:TextInput id="tiText" width="200" text="" /> <mx:Text
id="txtText" width="200" />
ActionScript [Bindable] Metakommando
Sascha Wolter | http://www.wolter.biz
Flex data model stores data in client-side objects
A data model is an ActionScript object that contains properties and
methods
You can use built-in validator classes to validate data contained
in a model Two types of data models: Use MXML model (this unit) or
use an ActionScript class
<mx:Model id="myModel"> <name>
</name> <address>
</address> </mx:Model>
• Lieber Wertobjekte (Value Object, kurz VOs) nehmen!
Sascha Wolter | http://www.wolter.biz
Repeatern dynamisch aufbauen. – Performance beachten!
Sascha Wolter | http://www.wolter.biz
• labelField und labelFunction – und deren Verwandte – Manchmal
reicht auch toString-Methode
• Renderer – Ein Renderer ist eine Komponente, die Anstelle der
Standardzeilen und -zellen in
Listen zur Anzeige genutzt wird. – itemRenderer – itemEditor –
cellRenderer – rowRenderer – headerRenderer
– …
Für Animation und Bewegung
Ein Verhalten ist eine Kombination von Einem Auslöser (trigger): Z.
B. ein Mausklick auf eine Komponente Ein Effekt (effect)
Verfügbare Effekte: Blur Dissolve/Fade Move Resize usw.
<mx:Fade id="fade" duration="1500" alphaFrom="0.2" alphaTo="1.0"
/>
<mx:Button label="Klick mich!" mouseDownEffect="{fade}"
/>
Sascha Wolter | http://www.wolter.biz
<mx:states> <mx:State name="state1">
</mx:State> </mx:states>
<mx:Parallel> <mx:Move target="{myButton}" duration="1000"
/>
<mx:Resize target="{myButton}" duration="1000" />
</mx:Parallel>
</mx:Transition> </mx:transitions>
• XML einbetten – E4X
• ActionScript Varianten – Inline – ActionScript-Block –
Klassen
• Auf Fehlersuche – Ausgabe (trace) – Debugger und Profiler
Sascha Wolter | http://www.wolter.biz
Fehlerbehandlung − Synchron (Try-Catch-Blöcke) − Asynchron
(Ereignisse)
Variablen und Eigenschaften
Funktionen und Methoden
Sascha Wolter | http://www.wolter.biz
3 Arten zur Änderung des Erscheinungsbildes in Flex:
Style API nutzen Umfassende Styles für alle Steuerelemente
Style-Properties werden von der Super-Klasse geerbt (nicht
alle!)
Skins ändern oder austauschen Skins sind Symbole um
Oberflächenelemte anzuzeigen Grafische Skins Programmatische
Skins
Theme zuweisen Eine Sammlung von Styles und Skins wird als Theme
verwaltet
Sascha Wolter | http://www.wolter.biz
• Inline Styles – Als Attribute innerhalb einer Komponente
<mx:Button label="My Button" color="#FF0000" cornerRadius="3"
/>
• Local Styles – Als <mx:Style> Tag innerhalb eines MXML
Dokuments <mx:Style>
.myFontStyle {font-size:14;color:#FF0000} Button
{color:#FF0000}
</mx:Style>
– CSS Style und MXML Style Label {
font-weight:normal; fontSize:14
}
Sascha Wolter | http://www.wolter.biz
4) Design Optimierungen
Sascha Wolter | http://www.wolter.biz
Browser / Operating System
• Vorteil: – Instanznamen bleiben erhalten; – Ganze SWF-Dateien und
Symbole (Linkage);
• Syntax: <mx:Image
source="@Embed('assets/images/flex_embed.swf')" /> <mx:Image
source="@Embed(
source='assets/images/flex_embed.swf', symbol='linkage',
mimeType='application/x-shockwave-flash',
scaleGridTop='25',scaleGridBottom='125',scaleGridLeft='25',scaleGridRight=
'125')" />
LocalConnection (AVM1/AVM2); • Vorteil:
– Nur komplette SWF-Dateien; • Syntax:
Sascha Wolter | http://www.wolter.biz
import flash.display.MovieClip; [Embed(source="bee.swf",
} }
• Verwenden mc = new Bee(); mc.stick.scaleX = 2; mc.x = 100; mc.y =
100; addChild(mc);
• Nachteil: – Code geht verloren (bei ActionScript 2);
• Vorteil: – Instanznamen bleiben erhalten;
var Name:Class; – Parameter:
Sascha Wolter | http://www.wolter.biz
• Nachteil: – Kommunikation geht bei ActionScript 2 nur per
LocalConnection (AVM1/AVM2); – Nur komplette SWF-Dateien;
• Vorteil: – Kommunikation geht bei ActionScript 3 per ActionScript
(AVM2/AVM2);
• Syntax: loader = new Loader(); loader.load(new
URLRequest("flash.swf")); addChild(loader);
Sascha Wolter | http://www.wolter.biz
Bereitstellung für möglichst viele Formate und Plattformen Designer
zu Designer
Designer zu Entwickler
Inhalts-Designer zu Inhaltskonsument
http://www.adobe.com/go/flex3_cs3_swfkit
CS3 und Flex
Sascha Wolter | http://www.wolter.biz
Import Skin Assets into Flex Builder Create Flex Components in
Flash CS3
MXML and CSS
CS3 templates make it easy to create custom component skins
Flash developers can easily package work as Flex components
Flex Component Kit for Flash CS3
Für die Nutzung von Flash in Flex Inkl. Zeitleiste usw.; Sowohl in
Flash als auch Flex nutzbar; Erzeugt eine Bibliothek
(Library);
Schritt für Schritt: 1. Passende Version des Flex SDKs beachten; 2.
Erstelle Flash Inhalt als MovieClip Symbol mit erlaubtem Bezeichner
und
Registrierungspunkt oben links; Empfohlen sind 24 Bilder pro
Sekunde; 3. Prepariere Flash MovieClip Symbole für Flex über das
Kommando “Make
Flex Component” und veröffentliche anschließend ein SWC; 4.
Übertrage den Flash Inhalt nach Flex in dem die Bibliothek
hinzugefügt
wird;
• Compiletime CSS – Library-Projekt mit CSS-Datei
Sascha Wolter | http://www.wolter.biz
Eigene Flash Erweiterung
• MXP (Flash Extension) – z. B. JavaScript API – z. B. Komponenten
– z. B. Templates
• MXI –
http://download.macromedia.com/pub/exchange/mxi_file_format.pdf
Sascha Wolter | http://www.wolter.biz
Presumptions: Framework definition
• What is a Framework? – Steve Webster: “When developers write
large pieces of code that they
consider significant enough to consider leveraging on other
projects, they tend to supplement the code with this term. Thus
there are many types of frameworks: persistence frameworks,
transaction frameworks, logging frameworks, aspect-oriented
frameworks, animation frameworks, unit- testing frameworks, and the
like.”
• A Framework usually covers the following issues – Application
specific Classes like Loggers, Collections, Models etc. –
Architecture specific Classes like the Model View Controller Design
Pattern
• Famous design pattern: Model View Controller – View (Components)
– Models (Data) – Controller (can be managed via Events and
Commands)
• Game engine – Game developers call a Framework “Engine”
Sascha Wolter | http://www.wolter.biz
Presumptions: Steeling is permitted!
• Justification: – Do not invent the wheel again – Inspiration is
no theft – Using someone's idea means to understand it – Similar
architectures makes teamwork easier
• Inspiration – Java and Java Swing – Flex 2 Framework and
Cairngorm
• Good example: Design patterns are stolen ideas! • Adapt existing
ideas, do not simple copy them • Be always able to explain your
acting
Sascha Wolter | http://www.wolter.biz
• Keep in mind: – Different skills of programmers – Maintenance –
Future-proof – Coding conventions might help
• Bad example: Design patterns can become very abstract and
complex! – Well, you know how it works but you do not know what
for!
Sascha Wolter | http://www.wolter.biz
• Alles schon fertig – Cairngorm
(http://labs.adobe.com/wiki/index.php/Cairngorm) – PureMVC
(http://puremvc.org/) – EasyMVC
(http://projects.simb.net/easyMVC/)
Sascha Wolter | http://www.wolter.biz
Rich Internet Application development." – Allgemein: Cairngorm ist
eine Best-Practice Sammlung von Ansätzen und
Entwurfsmustern, um skalier- und wartbare Flex 2 Anwendungen zu
entwickeln.
• Idee – Ursprüngliche 2002 von iteration::two (jetzt Adobe
Consulting, Edinburgh, Schottland) – Portierung von J2EE Blueprint
Patterns nach
• Versionen – ActionScript 1.0 und Flash MX, später AS 2.0 –
Veröffentlichung Cairngorm 0.95 für Flex 1.5 während der MAX 2004
in New Orleans – Cairngorm 2 zeitgleich mit Flex 2 im Juni 2006 –
Aktuelle Version 2.1 – Open Source (BSD Lizenz) –
labs.adobe.com
Sascha Wolter | http://www.wolter.biz
• Motivation – Anforderungen an die Anwendung
• Modularität, Erweiterbarkeit, Skalierbarkeit – Flickschusterei:
Zusätzliche Funktionen sind bei naiver Herangehensweise
später jedoch nur unter großem Aufwand integrierbar (und 3 Monate
später weiß keiner mehr wieso, weshalb und warum).
– Teamarbeit • Eine gemeinsame „Sprache“ muss gefunden
werden!
– Kommunikation (Nachichtenfluss in Anwendungen) • Wie sage ich dem
DataGrid in der Hauptanwendung, dass sich die
Daten im Popup-Fenster geändert haben? • Suchmaske in der
Hauptanwendung soll den gleichen WebService
aufrufen, wie auch die QuickSearch in der Menüleiste! – Vermeide
unnötige Abhängigkeiten („hart verdrahtet“)
• var foo:Object = myPanel.myDataGrid.selectedItem.data; • Was
passiert beim Umbenennen einer Instanz?
Sascha Wolter | http://www.wolter.biz
wiederkehredne Probleme (Muster) zu lösen. – Micro Architecture:
Grundlage der internen Architektur für Anwendungen – Loose
Coupling: Lose Kopplung zwischen den einzelnen Komponenten
einer Anwendung – Modularer Aufbau: Einfacher Austausch von
Komponenten
Sascha Wolter | http://www.wolter.biz
• 6-teiliger DevNet Artikel (basiert teilweise noch auf Flex 1.5!)
–
http://www.adobe.com/devnet/flex/articles/cairngorm_pt1.html
• Cairngorm Community Project (Dokumentation und Co.) –
http://www.cairngormdocs.org/
• Bibliotheken und Namensräume – Manifest
• Optimierung – use-network – debug – optimize
• copylocale – http://www.wolter.biz/?s=locale –
http://labs.adobe.com/wiki/index.php/Flex_3:Feature_Introductions:_Runtim
Logo=Embed("logo.png") Sorter=ClassReference("sorters.Urdu")
• Zur Laufzeit laden var eventDispatcher:IEventDispatcher =
loadResourceModule(url);
eventDispatcher.addEventListener(ResourceEvent.COMPLETE,
completeHandler); resourceManager.localeChain = [ "fr_FR" ];
Sascha Wolter | http://www.wolter.biz
Sascha Wolter | http://www.wolter.biz
Best Practices Rich Applications
AIR zur Laufzeit
Flex Builder Features
MXML: Zur Kompilierzeit einbetten
MXML: Zur Laufzeit Laden
ActionScript: Zur Kompilierzeit einbetten
ActionScript: Zur Laufzeit Laden
Bibliotheken und Themes
Eigene Flash Erweiterung
