Post on 16-Oct-2021
transcript
Sascha Wolter | http://www.wolter.biz
Best Practices Rich ApplicationsProzesse 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.deengagiert 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)
Inhalt
• Lost in Flex– Flex-Crashkurs für Flash-Designer und Java-Programmierer
• 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
LOST IN FLEXFlex-Crashkurs für Flash-Designer und Java-Programmierer
Sascha Wolter | http://www.wolter.biz
LOST IN FLEX
• Flex verstehen– Rich Applications und Lightweight Desktop Application– Werkzeuge: Installation und Anpassung– Hilfe und Fehlersuche– Das erste Projekt
• Flex verwenden– Flex Framework: MXML versus ActionScript– Oberflächen erstellen– Daten eingeben und anzeigen– Verhalten– Daten laden
• Flex programmieren (siehe Architektur)– ActionScript 3– Probleme und Lösungen– Konzepte und deren Anwendung
• Flex gestalten (siehe Stille Post)– Themes, Styles und Skins
Sascha Wolter | http://www.wolter.biz
Historie von Rich Applications
Sascha Wolter | http://www.wolter.biz
1996: Flash 2
2002: RIA
2004: Flex 1.0 MXML
2006: Flex 2.0
2007: AIR
2002: Central
Definition von Rich Applications
• 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 Clientseiteausfü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
Desktop (Applikationen)
• Austausch• Leistungsfähig• IntegrationDas Beste des Internets
(Inhalte)
• Einfach• Allgegenwärtig• Standart• Verbunden
Systemübergreifend(Kommunikation)
• Echtzeit• Personalisiert• Übergreifend
Rich (Internet) Applications
Wie Flash arbeitet!
Sascha Wolter | http://www.wolter.biz
Timeline and ActionScript
XML/HTTPREST
SOAP Web Services
Browser
J2EE Application Server
Flash Remoting (AMF)
Flash Player
Web Server
Existing Applications and InfrastructureJava / .NET / PHP / CGI
Flash CS3 Professional
Flash CS3 Professional
Timeline ActionScript
.swf
Compile
.swf
Data Data
Wie Flex arbeitet!
Sascha Wolter | http://www.wolter.biz
MXML and ActionScript
XML/HTTPREST
SOAP Web Services
Browser
J2EE Application Server
LifeCycle Data Services
Flash Player
Web Server
Existing Applications and InfrastructureJava / .NET / PHP / CGI
Flex Builder IDE
Flex SDK
MXML ActionScriptFlex Class Library
.swf
Compile
.swf
Data Data
AIR Entwickler Workflow
Sascha Wolter | http://www.wolter.biz
Betriebssystem
Installierte AnwendungFlex Builder
Dreamweaver
InDesign
Command Line
Flash
LiveCycleDesigner
Photoshop
More...
Deployment Package
HTML PNG, JPEG...
SWF PDF
Design / Code .air Datei
AIR am Beispiel Flex Builder!
Sascha Wolter | http://www.wolter.biz
MXML and ActionScript
Lokale Ressourcen
XML/HTTPREST
SOAP Web Services
Desktop
J2EE Application Server
LiveCycle Data Services
AIR
Web Server
Existierende Anwendungen und InfrastrukturJava / .NET / PHP / CGI
Flex Builder IDE
AIR SDK
MXML ActionScriptAIR/Flex Klassenbibliothek
.air
Compile/Package
.air
Daten Daten
AIR zur Laufzeit
Sascha Wolter | http://www.wolter.biz
AIR ApplicationAIR Application
HTML
Occasionally Connected Network
Flex / LC Data Services Web Services
Apollo Runtime
HTML/AJAX
Flash/Flex
Flash/Flex
AIR Application
HTML/AJAX
AIR Application
Flash/Flex
Windows OS Mac OS Linux OS
Systemarchitektur
Sascha Wolter | http://www.wolter.biz
RIA (oder “Fat-Client”)CPU Auslastung unter Last
Thin-ClientCPU Auslastung unter Last
• Mehr Nutzer mit gleicher Infrastruktur
• Reduzierte Bandbreite
Asynchron und Synchron
• Problem– Inkonsistenz– Datenpakete können sich überholen
• 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 Plattform im Überblick
Sascha Wolter | http://www.wolter.biz
Tools
FlexBuilder 3(basiert auf Eclipse)
Flash CS 3(Design und Animation)
Dreamweaver CS 3(HTML und JavaScript)
Anwendungen
Laufzeitumgebungen
(Client)
Programmiermodelle
Serverkomponenten
PHP, J2EE oder .NET
Digital Editions(EBooks)
Connect(Web Kommunikation und Kollaboration)
Flash Player (Web Browser-PlugIns)
Adobe AIR(Desktop RIAs )
Flash Mobile(Flash Lite )
ActionScript 3(ECMA Script)
Bibliotheken(Frameworks)
MXML(XML)
LiveCycle Data Services
Flash Media Server (A/V + Data Streaming)
FlashCast(Mobile Push Services)
Lösungen von Fremdanbietern
Existierende Middleware- und Backend-Schicht
HTTP/S AMF RTMPSOAPKommunikation / Protokolle
Flex Produktlinie im Überblick
Sascha Wolter | http://www.wolter.biz
Visuelles Layout
Flex Builder
Code Hinweise
Debugging
Skinning und Styling
LifeCycle Data Services
Message Service
Data Management Service
RPC Services (Blaze DS)
Flex SDK (kostenfrei, teilw. OpenSource)
Kommando Zeilen Compiler, Debugger u. Profiler
MXML und ActionScript 3.0
Flex Framework und Klassenbibliothek
Flex Charting Erweiterbare Charting Komponenten
Positionierung von Flex und Flash
Sascha Wolter | http://www.wolter.biz
Entwickler, ProgrammiererZiel RIAs
Self-Service AnwendungenOptimierte ProzesseVisuelle Analyse
Adressiert Teams mit klassischen Anwendungs entwicklungsfähigkeiten
Code-basierter AnsatzJava/.NET
Designer
Ziel Inhalte (mit Daten)
Marketing, Unterhaltung, Navigation, Animation, Simulation/E-learning, Web Video, Online Werbung
Erstellen vonKomponenten und Designelementen für Flex
Adressiert Design/Entwickler Team mit Flash, Multimedia kenntnissen
Scripting, Grafikdesign, Visuelle Tools
FlexBuilder Flash Professional
Flex + Flash = Gute Ergänzung für Flex Projekte
Flex Builder Features
AssistentenProjekte und Dokumente anlegenArbeitsumgebung konfigurieren
Design AnsichtVisuelles Componenten Panel
Layout und Zustands ModelleVisuelles Werkzeug für Begrenzungs-basiertes LayoutAutomatisches Ausrichten und Skalierung von KomponentenVisuelles Gestalten von Komponenten oder Anwendungs Zuständen
Unterstützung Für Skinning und StylingVollständiges Rendering von angepassten Skins und KomponentenEigenschaften Inspektor zum setzen von Komponenten Stylen
Coding IntelligenzCodeeinfärbung für AS, MXML, CSSCode-VervollständigungSchnelle Quell Code Navigation
Debugger und ProfilerInteraktiver DebuggerVariablen, Ausdruck FensterIn-line Notation von Compiler Fehlern und WarnhinweisePerformance und Speicherprobleme finden
Sascha Wolter | http://www.wolter.biz
Alternative Entwicklungsumgebungen
Sascha Wolter | http://www.wolter.biz
Flash Flex Builder Flash Develop ASDT FDT
Editor Flash Autorensystem basiert auf Eclipse basiert auf
Eclipsebasiert auf
Eclipse
Lernkurve steil mittel mittel flach mittel
ActionScript 1ActionScript 2ActionScript 3MXML
+++-
--++
-+++
-+--
-++-
Compiler Flash/Flex Flex nutzt MTASC und SWFMill MTASC MTASC, Flex,
Flash
Kostenlos Nein Nein Ja Ja Nein
Plattform Mac/Win Mac/Win Win Diverse Diverse
Open Source
• Open Source (http://opensource.adobe.com/wiki/display/site/Home)– Flex SDK (http://opensource.adobe.com/wiki/display/flexsdk/Flex+SDK)– Adobe Flex SDK (Flex SDK plus Adobe Add-ons)– Blaze Data Services– LifeCycle Data Services
• Bug Database– http://bugs.adobe.com/
• Nightly Builds– http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+3
• Open Screen Project (http://www.adobe.com/openscreenproject/)
Sascha Wolter | http://www.wolter.biz
Hallo Welt!
1. Projekt anlegen2. MXML erstellen
<?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 color="0xFF0000">
<mx:text>Hello World</mx:text>
</mx:Label>
</mx:Application>
Hinweis CDATA
<mx:Label text= " Single Line Text without HTML" />
<mx:Label>
<mx:htmlText>
<![CDATA[<font color="#FF0000">Single Line Text with HTML</font>]]>
</mx:htmlText>
</mx:Label>
Sascha Wolter | http://www.wolter.biz
Framework (Flex Klassenbibliothek)
• MXML versus ActionScript– MXML ist XML– Schreibweise– Namespaces– ActionScript mit –keep sehen
• Metacommands– Z. B. Bindings
• Scripts– Script-Bereich
• Styles– Angabe von Stilen
Sascha Wolter | http://www.wolter.biz
UI-CONTAINER
VERHALTEN
UI-STEUER-ELEMENTE
DATENMODELL
VBox, HBox, Form, View, Window, …
Button, CheckBox, ComboBox, DataGrid, …
Trigger (Ein- und Ausblenden, Verschieben, …)Effekte (Ausblenden, Größe ändern, Verschieben …)
Datenbindung, Datenüberprüfung und Datendienste
Framework per ActionScript nutzen
package core{
import mx.core.Application;
public class MyApplication extends Application {public function MyApplication() {
// singletonsuper();
}
override public function initialize():void {super.initialize();// place your code here
}}
}
<?xml version="1.0" encoding="utf-8"?> <myNamespace:MyApplication xmlns:myNamespace="*" usePreloader="false"/>
• http://www.flashforum.de/forum/showthread.php?t=210238
Sascha Wolter | http://www.wolter.biz
Steuerelemente
• Für alle Fälle: Wo ist der Quellcode?
Sascha Wolter | http://www.wolter.biz
Layout
• Container• Constraints• Navigatoren• View States
Sascha Wolter | http://www.wolter.biz
Komponenten
• MXML Komponenten• ActionScript Komponenten• Simple-, Composite- und Template-Component
Sascha Wolter | http://www.wolter.biz
Komponenten
• Tipp: Wenn gleiche Komponenten unterschiedlich aussehen!– Neue Komponenten ableiten und neuen Namen als Type-Selector
nutzen!
• Komponenten Lifecycle– addChild
• createChildren: „Bestandteile“ erzeugen;– invalidateProperties
• commitProperties: Auf Änderungen reagieren;– invalidateSize
• measure: Größe festlegen;– invalidateDisplayList
• layoutChrome: Chrome von Containern erstellen;• updateDisplayList: Darstellung aktualisieren;
Sascha Wolter | http://www.wolter.biz
Module
• Module sind keine Module sondern…– …dynamisch geladene Komponenten (dynamisches Binden)– …eine Factory (Fabrik)
• Styles sind Module
Sascha Wolter | http://www.wolter.biz
Formulare
• Form
• FormHeading
• FormItem
Sascha Wolter | http://www.wolter.biz
Validator
<mx:Validator> oder ActionScript
Verfügbare Validator:DateValidator
NumberValidator
StringValidator
usw.
Beispiel:
<mx:StringValidator id="validName"source="{username}"property="text"required="true"trigger="{myButton}"triggerEvent="click"listener="{username}" />
<mx:TextInput id="username" text="" /><mx:Button id="myButton" label="Speichern" />
Sascha Wolter | http://www.wolter.biz
Formatter
One-Way Umwandlung von Daten in ein Stringformat<mx:NumberFormatter> or ActionScriptAufruf durch {Instanzname}.format()Verfügbare Formatter:
CurrencyFormatterDateFormatterNumberFormatterusw,
Beispiel:
<mx:CurrencyFormatter id="euroForatter"precision="2"rounding="nearest"currencySymbol=" €"alignSymbol="right"decimalSeparatorFrom=","decimalSeparatorTo=","useThousandsSeparator="false" />
<mx:Text width="100" text="{euroFormatter.format(100,25)}" />
Sascha Wolter | http://www.wolter.biz
Ereignisse
Bubbling
Loose Coupling
Custom Events
Sascha Wolter | http://www.wolter.biz
Bindings
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
Modelle
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 modelTwo types of data models: Use MXML model (this unit) or use an ActionScript class
<mx:Model id="myModel"><name>
<firstName>Klaus</firstName><lastName>Mustermann</lastName>
</name><address>
<street>Vahrenwalderstr. 156</street><zipCode>30165</zipCode><city>Hannover</city>
</address></mx:Model>
<mx:Label width="200" text="{myModel.name.firstName} {myModel.name.lastName}" /><mx:Text width="200" text="{myModel.address.street}" /><mx:Text width="200" text="{myModel.address.zipCode} {myModel.address.city}" />
• Lieber Wertobjekte (Value Object, kurz VOs) nehmen!
Sascha Wolter | http://www.wolter.biz
Listen, Tabellen und Trees
ListTileListHorizontalTileListComboBox
DataGridDataGridColumns
Drag and Drop
Tree
Sascha Wolter | http://www.wolter.biz
Repeater
• Repeater– Datengetrieben Oberflächen lassen sich mit Hilfe von
Repeatern dynamisch aufbauen.– Performance beachten!
Sascha Wolter | http://www.wolter.biz
Renderer
• 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
– …
• Data-Eigenschaft
Sascha Wolter | http://www.wolter.biz
Verhalten
Für Animation und Bewegung
Ein Verhalten ist eine Kombination vonEinem Auslöser (trigger): Z. B. ein Mausklick auf eine KomponenteEin Effekt (effect)
Verfügbare Effekte:BlurDissolve/FadeMoveResizeusw.
<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
Verhalten
• Transitions– Effekte für den Wechsel von View States
<mx:states><mx:State name="state1">
<mx:SetProperty target="{myButton}" name="x" value="100" /><mx:SetProperty target="{myButton}" name="width" value="200" />
</mx:State></mx:states>
<mx:transitions><mx:Transition fromState="*" toState="state1">
<mx:Parallel><mx:Move target="{myButton}" duration="1000" />
<mx:Resize target="{myButton}" duration="1000" /></mx:Parallel>
</mx:Transition></mx:transitions>
Sascha Wolter | http://www.wolter.biz
Daten Laden
• Medien<mx:Image source="@Embed('assets/images/flex_embed.gif')"
toolTip="Embedded"/>
<mx:Image source="assets/images/flex_reference.png" toolTip="Referenz"/>
• XML einbetten– E4X
• XML laden– Sicherheitseinstellungen beachten
Sascha Wolter | http://www.wolter.biz
Flex programmieren
• Rapid Prototyping– Entwurf und Test der Anwendungsoberfläche– Vor der Implementierung
• ActionScript Versionen– Von Aktionen bis hin zu ECMAScript 4
• ActionScript Varianten– Inline– ActionScript-Block– Klassen
• Auf Fehlersuche – Ausgabe (trace)– Debugger und Profiler
Sascha Wolter | http://www.wolter.biz
ActionScript 3
Konventionen und Kommentare− Wartbarkeit und Fehlervermeidung
Fehlerbehandlung− Synchron (Try-Catch-Blöcke)− Asynchron (Ereignisse)
Variablen und Eigenschaften
Funktionen und Methoden
Kontrollstrukturen
Ereignisse
Klassen und Packages− Anlegen eines Projektes
Sascha Wolter | http://www.wolter.biz
Flex gestalten
Nutze Stile (Styles), um das „Look and Feel“ anzupassen
Kann für einzelne oder alle Steuerelemente (Controls) genutzt werden
3 Arten zur Änderung des Erscheinungsbildes in Flex:
Style API nutzenUmfassende Styles für alle SteuerelementeStyle-Properties werden von der Super-Klasse geerbt (nicht alle!)
Skins ändern oder austauschenSkins sind Symbole um Oberflächenelemte anzuzeigenGrafische SkinsProgrammatische Skins
Theme zuweisenEine Sammlung von Styles und Skins wird als Theme verwaltet
Sascha Wolter | http://www.wolter.biz
Styles
• 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>
• External Styles<mx:Style source="myStyle.css" />
– CSS Style und MXML StyleLabel {
font-weight:normal;fontSize:14
}
Sascha Wolter | http://www.wolter.biz
Styles
Selector Typ:Global
global {themeColor:#A65904color:#484848;
}
Komponenten-TypButton {
color:#484848;fontWeight:normal
}
Instanz.myButton {
color:#484848;fontWeight:normal
}
Sascha Wolter | http://www.wolter.biz
STILLE POSTDesigner und Developer Workflow
Sascha Wolter | http://www.wolter.biz
Designer und Developer Workflow
Sascha Wolter | http://www.wolter.biz3) Development
4) Design Optimierungen
Visual Designer
Developer
(z. B. Thermo)Design Produktion
Flash Player: AVM1 vs. AVM2
Sascha Wolter | http://www.wolter.biz
“Classic”AVM1
AVM2Virtual Machine
Flash Player Capabilities(Networking, Rendering, Text, Sound, etc.)
Browser / Operating System
“Classic”Flash Player API
AS3Flash Player API
MXML: Zur Kompilierzeit einbetten
• Einbetten:<mx:Image source="@Embed('assets/images/flex_embed.swf')" />
• Nachteil:– Code geht verloren (bei ActionScript 2);
• 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')" />
Sascha Wolter | http://www.wolter.biz
MXML: Zur Laufzeit Laden
• Laden:<mx:SWFLoadersource="assets/images/flex_reference.swf" />
• Nachteil:– Kommunikation geht bei ActionScript 2 nur per
LocalConnection (AVM1/AVM2);• Vorteil:
– Kommunikation geht bei ActionScript 3 per ActionScript(AVM2/AVM2);
– Nur komplette SWF-Dateien;• Syntax:
<mx:Image source="url" /><mx:SWFLoader source="url" />
Sascha Wolter | http://www.wolter.biz
ActionScript: Zur Kompilierzeit einbetten• Einbettenpackage {
import flash.display.MovieClip;[Embed(source="bee.swf",
symbol="bee")]public class Bee
extends MovieClip {public var stick:MovieClip;
}}
• Verwendenmc = 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;
• Syntax:– [Embed("asset.swf")]
class Name extends DisplayObject– [Embed("asset.swf")]
var Name:Class;– Parameter:
sourcemimeTypescaleGridTop scaleGridBottomscaleGridLeftscaleGridRight symbol
Sascha Wolter | http://www.wolter.biz
ActionScript: Zur Laufzeit Laden
• Laden:loader = new Loader();loader.load(new URLRequest("bee.swf"));addChild(loader);
• 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
Skin Artwork
Sascha Wolter | http://www.wolter.biz
Designer und Developer Workflow
Bereitstellung für möglichst viele Formate und PlattformenDesigner zu Designer
Designer zu Entwickler
Inhalts-Designer zu Inhaltskonsument
Desktop zu Browser zu Endgerät
http://www.adobe.com/go/flex3_cs3_swfkit
Sascha Wolter | http://www.wolter.biz
Fireworks
After Effects Premiere Pro
Flash Dreamweaver Flex
IllustratorPhotoshop
Contribute
CS3 und Flex
Sascha Wolter | http://www.wolter.biz
Import Skin Assets into Flex Builder Create Flex Components in Flash CS3
MXML and CSS
Import wizard generates code assigning assets to components
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 FlexInkl. 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;
Sascha Wolter | http://www.wolter.biz
Bibliotheken und Themes
• Runtime CSS– Compile CSS to SWF– StyleManager.loadStyleDeclarations("theme.swf");
• 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
• Extension Manager– http://www.adobe.com/de/exchange/em_download/– Packen– Installieren
Sascha Wolter | http://www.wolter.biz
ARCHITEKTURErfahrungsberichte und Vergleich von Frameworks
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
Presumptions: Keep it simple
• Business equals Games– Think on charts as spaceships!
• 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
Frameworks
• Selber machen– Events– Commands– Model– View– Controller
• 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
Cairngorm
• Was ist Cairngorm?– Adobe: "The Cairngorm Microarchitecture is a lightweight yet prescriptive framework for
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
Cairngorm
• 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
Cairngorm
• Cairngorm bietet Entwurfsmuster– Sammlung von allgemeinen Ansätzen (Entwurfsmustern), um typische
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
Cairngorm
Sascha Wolter | http://www.wolter.biz
68
Cairngorm
• Download Cairngorm (und ältere Versionen):– http://labs.adobe.com/wiki/index.php/Cairngorm
• 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/
Projektorganisation und Workflow
• Mehrere Projekte– Anwendung– Bibliotheken– Themes
• Bibliotheken und Namensräume– Manifest
• Optimierung– use-network– debug– optimize
Sascha Wolter | http://www.wolter.biz
ANT Build
• flexTask.jar• build.xml• flex.properties• flex-config.xml
– dump-config filename.xml– link-report filename.xml
Sascha Wolter | http://www.wolter.biz
Mehrsprachigkeit
• Locale– LocaleChain– Property-Dateien
• RessourceBundle– <mx:Label text="@Resource(key='helloWorld', bundle='Application')" />
• copylocale– http://www.wolter.biz/?s=locale– http://labs.adobe.com/wiki/index.php/Flex_3:Feature_Introductions:_Runtim
e_Localization
• StringUtil– StringUtil.substitute(str, ...):String;
Sascha Wolter | http://www.wolter.biz
Mehrsprachigkeit
• Per ActionScript<mx:Metadata>[ResourceBundle("Application")]</mx:Metadata>{resourceManager.getString('Application','helloWorldLabel')}
• Typen– getString– getNumber, getInt– getBoolean– getClass
Logo=Embed("logo.png")Sorter=ClassReference("sorters.Urdu")
• Zur Laufzeit ladenvar eventDispatcher:IEventDispatcher = loadResourceModule(url); eventDispatcher.addEventListener(ResourceEvent.COMPLETE, completeHandler);resourceManager.localeChain = [ "fr_FR" ];
Sascha Wolter | http://www.wolter.biz
AUF ZURUFFragen und Antworten aus der Praxis
Sascha Wolter | http://www.wolter.biz
Sascha Wolter | http://www.wolter.biz
Danke für Ihre GeduldBest Practices Rich Applications