als PDF

Transcrição

als PDF

Sascha Wolter | http://www.wolter.biz
Best Practices Rich Applications
Prozesse und Probleme aus der Praxis am
Beispiel von Flex und Flash
Ü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)
2
Inhalt
•
Lost in Flex
–
•
Stille Post
–
•
Designer und Developer Workflow
Architektur
–
•
Flex-Crashkurs für Flash-Designer und Java-Programmierer
Erfahrungsberichte und Vergleich von Frameworks
Auf Zuruf
–
Fragen und Antworten aus der Praxis
Flex-Crashkurs für Flash-Designer und Java-Programmierer
LOST IN FLEX
LOST IN FLEX
•
Flex verstehen
–
–
–
–
•
Flex verwenden
–
–
–
–
–
•
Rich Applications und Lightweight Desktop Application
Werkzeuge: Installation und Anpassung
Hilfe und Fehlersuche
Das erste Projekt
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
Historie von Rich Applications
1996: Flash 2
2002: RIA
2004: Flex 1.0
MXML
2006: Flex 2.0
2007: AIR
2002: Central
Definition von Rich Applications
•
Rich (Internet) Applications
Das Beste des Internets
(Inhalte)
Außerdem ist auch die Leistungsfähigkeit
der Applikation gemeint, die z.B.
Desktop (Applikationen) Berechnungen auf Clientseite
ausführen kann, ohne eine Anfrage zum
• Austausch
Server starten zu müssen. Dadurch
• Leistungsfähig
• Integration
lassen sich RIAs viel flüssiger bedienen
und geben Rückmeldungen sofort zurück.
• Einfach
• Allgegenwärtig
• Standart
• Verbunden
Systemübergreifend
(Kommunikation)
• Echtzeit
• Personalisiert
• Übergreifend
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.
Man könnte diese Anwendungen auch
"intelligente Clients" nennen. Natürlich
sind diese Anwendungen Internetoptimiert (durch Komprimierung sowie
Streaming-Techniken). RIAs müssen
zur Laufzeit weniger Anfragen an den
Server stellen.
Wie Flash arbeitet!
Flash CS3 Professional
Browser
Timeline and
ActionScript
Flash Player
Flash CS3 Professional
Timeline
ActionScript
Data
Data
Web Server
Compile
XML/HTTP
REST
SOAP Web Services
Flash Remoting (AMF)
J2EE Application Server
.swf
Existing Applications and Infrastructure
Java / .NET / PHP / CGI
Wie Flex arbeitet!
Flex Builder IDE
Browser
MXML and
ActionScript
Flash Player
Flex SDK
MXML
ActionScript
Flex Class Library
Data
Data
Web Server
Compile
XML/HTTP
REST
SOAP Web Services
LifeCycle Data Services
.swf
Existing Applications and Infrastructure
AIR Entwickler Workflow
Design / Code
.air Datei
Betriebssystem
Flex Builder
Flash
Dreamweaver
LiveCycle
Designer
InDesign
Command Line
Deployment Package
Installierte Anwendung
SWF
PDF
HTML
PNG, JPEG...
Photoshop
More...
AIR am Beispiel Flex Builder!
Flex Builder IDE
Desktop
MXML and
ActionScript
AIR
AIR SDK
MXML
ActionScript
AIR/Flex Klassenbibliothek
Daten
Daten
Lokale Ressourcen
Web Server
Compile/Package
XML/HTTP
REST
SOAP Web Services
LiveCycle Data Services
.air
Existierende Anwendungen und Infrastruktur
AIR zur Laufzeit
Flex / LC Data Services
Web Services
Occasionally Connected Network
AIR Application
AIR Application
AIR Application
HTML/AJAX
Flash/Flex
Flash/Flex
HTML
Flash/Flex
AIR Application
HTML/AJAX
PDF
PDF
Apollo Runtime
Windows OS
Mac OS
Linux OS
Systemarchitektur
Thin-Client
CPU Auslastung unter Last
RIA (oder “Fat-Client”)
CPU 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)
Flash Plattform im Überblick
Connect
Digital Editions
(Web Kommunikation und Kollaboration)
(EBooks)
Laufzeitumgebungen
Flash Player
Adobe AIR
Flash Mobile
(Desktop RIAs )
(Flash Lite )
(Client)
(Web BrowserPlugIns)
Anwendungen
Lösungen von
Fremdanbietern
Tools
FlexBuilder 3
(basiert auf Eclipse)
Programmiermodelle
ActionScript 3
Bibliotheken
MXML
(ECMA Script)
(Frameworks)
(XML)
Flash CS 3
(Design und Animation)
Serverkomponenten
LiveCycle Data FlashCast
Flash Media Server
(Mobile Push Services)
(A/V + Data Streaming)
Services
Kommunikation / Protokolle
SOAP
HTTP/S
AMF
PHP, J2EE oder .NET
Existierende Middleware- und Backend-Schicht
RTMP
Dreamweaver CS 3
(HTML und JavaScript)
Flex Produktlinie im Überblick
Flex SDK (kostenfrei, teilw. OpenSource)
MXML und ActionScript 3.0
Flex Framework und Klassenbibliothek
Kommando Zeilen Compiler, Debugger u. Profiler
Flex
Charting
Flex Builder
Visuelles Layout
Code Hinweise
Debugging
Skinning und Styling
Erweiterbare Charting Komponenten
Message Service
Data Management Service
RPC Services (Blaze DS)
Positionierung von Flex und Flash
Flash Professional
FlexBuilder

Entwickler, Programmierer

Designer

Ziel RIAs

Ziel Inhalte (mit Daten)

Self-Service Anwendungen

Optimierte Prozesse

Visuelle Analyse
Adressiert Teams mit klassischen
Anwendungs
entwicklungsfähigkeiten
Code-basierter Ansatz

Java/.NET

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
Flex + Flash = Gute Ergänzung für Flex Projekte
Flex Builder Features

Assistenten

Design Ansicht

Vollständiges Rendering von angepassten Skins und Komponenten
Eigenschaften Inspektor zum setzen von Komponenten Stylen
Coding Intelligenz

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

Visuelles Componenten Panel
Layout und Zustands Modelle

Projekte und Dokumente anlegen
Arbeitsumgebung konfigurieren
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
Alternative Entwicklungsumgebungen
Flash
Flex Builder
Flash
Autorensystem
basiert auf Eclipse
steil
mittel
+
+
+
-
Compiler
Flash
Develop
ASDT
FDT
basiert auf
Eclipse
basiert auf
Eclipse
mittel
flach
mittel
+
+
+
+
+
+
-
+
+
-
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
Editor
Lernkurve
ActionScript 1
ActionScript 2
ActionScript 3
MXML
Open Source
•
Open Source (http://opensource.adobe.com/wiki/display/site/Home)
–
–
–
–
•
Bug Database
–
•
http://bugs.adobe.com/
Nightly Builds
–
•
Flex SDK (http://opensource.adobe.com/wiki/display/flexsdk/Flex+SDK)
Adobe Flex SDK (Flex SDK plus Adobe Add-ons)
Blaze Data Services
http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+3
Open Screen Project (http://www.adobe.com/openscreenproject/)
Hallo Welt!
1.
2.
Projekt anlegen
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>
Framework (Flex Klassenbibliothek)
•
MXML versus ActionScript
–
–
–
–
•
MXML ist XML
Schreibweise
Namespaces
ActionScript mit –keep sehen
UI-CONTAINER VBox, HBox, Form, View,
Window, …
UI-STEUERELEMENTE
Metacommands
– Z. B. Bindings
DATENMODELL
•
Datenbindung,
Datenüberprüfung und
Datendienste
Scripts
– Script-Bereich
VERHALTEN
•
Button, CheckBox,
ComboBox, DataGrid, …
Styles
– Angabe von Stilen
Trigger (Ein- und Ausblenden,
Verschieben, …)
Effekte (Ausblenden, Größe
ändern, Verschieben …)
Framework per ActionScript nutzen
package core
{
import mx.core.Application;
public class MyApplication extends Application {
public function MyApplication() {
// singleton
super();
}
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
Steuerelemente
• Für alle Fälle: Wo ist
der Quellcode?
Layout
•
•
•
•
Container
Constraints
Navigatoren
View States
Komponenten
•
•
•
MXML Komponenten
ActionScript Komponenten
Simple-, Composite- und Template-Component
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;
Module
•
Module sind keine Module sondern…
– …dynamisch geladene Komponenten (dynamisches Binden)
– …eine Factory (Fabrik)
•
Styles sind Module
Formulare
• Form
• FormHeading
• FormItem
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" />
Formatter

One-Way Umwandlung von Daten in ein Stringformat

<mx:NumberFormatter> or ActionScript

Aufruf durch {Instanzname}.format()

Verfügbare Formatter:

CurrencyFormatter
DateFormatter
NumberFormatter
usw,
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)}" />
Ereignisse
Bubbling
Loose Coupling
Custom Events
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
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 model
Two 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!
Listen, Tabellen und Trees
List
TileList
HorizontalTileList
ComboBox
DataGrid
DataGridColumns
Drag and Drop
Tree
Repeater
• Repeater
– Datengetrieben Oberflächen lassen sich mit Hilfe von
Repeatern dynamisch aufbauen.
– Performance beachten!
Renderer
•
labelField und labelFunction
–
–
•
Renderer
–
•
und deren Verwandte
Manchmal reicht auch toString-Methode
–
–
–
–
–
Ein Renderer ist eine Komponente, die Anstelle der Standardzeilen und -zellen in
Listen zur Anzeige genutzt wird.
itemRenderer
itemEditor
cellRenderer
rowRenderer
headerRenderer
–
…
Data-Eigenschaft
Verhalten

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}" />
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>
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
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
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
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 nutzen

Skins ändern oder austauschen

Umfassende Styles für alle Steuerelemente
Style-Properties werden von der Super-Klasse geerbt (nicht alle!)
Skins sind Symbole um Oberflächenelemte anzuzeigen
Grafische Skins
Programmatische Skins
Theme zuweisen

Eine Sammlung von Styles und Skins wird als Theme verwaltet
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 Style
Label {
font-weight:normal;
fontSize:14
}
Styles

Selector Typ:

Global
global {
themeColor:#A65904
color:#484848;
}

Komponenten-Typ
Button {
color:#484848;
fontWeight:normal
}

Instanz
.myButton {
color:#484848;
fontWeight:normal
}
STILLE POST
4) Design Optimierungen
Developer
Design Produktion
(z. B. Thermo)
Visual Designer
3) Development
Flash Player: AVM1 vs. AVM2
“Classic”
AVM1
AVM2
Virtual Machine
“Classic”
Flash Player API
AS3
Flash Player API
Flash Player Capabilities
(Networking, Rendering, Text, Sound, etc.)
Browser / Operating System
MXML: Zur Kompilierzeit einbetten
•
Einbetten:
<mx:Image source="@Embed('assets/images/flex_embed.swf')" />
•
Nachteil:
–
•
Vorteil:
–
–
•
Code geht verloren (bei ActionScript 2);
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')" />
MXML: Zur Laufzeit Laden
• Laden:
<mx:SWFLoader
source="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" />
ActionScript: Zur Kompilierzeit
einbetten
•
Einbetten
package {
import flash.display.MovieClip;
[Embed(source="bee.swf",
symbol="bee")]
public class Bee
extends MovieClip {
public var stick:MovieClip;
}
}
•
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;
Syntax:
–
[Embed("asset.swf")]
class Name extends
DisplayObject
– [Embed("asset.swf")]
var Name:Class;
– Parameter:
source
mimeType
scaleGridTop
scaleGridBottom
scaleGridLeft
scaleGridRight
symbol
ActionScript: Zur Laufzeit Laden
•
Laden:
loader = new Loader();
loader.load(new URLRequest("bee.swf"));
addChild(loader);
•
Nachteil:
–
–
•
Vorteil:
–
•
Kommunikation geht bei ActionScript 2 nur per LocalConnection (AVM1/AVM2);
Nur komplette SWF-Dateien;
Kommunikation geht bei ActionScript 3 per ActionScript (AVM2/AVM2);
Syntax:
loader = new Loader();
loader.load(new URLRequest("flash.swf"));
addChild(loader);
Skin Artwork
Flash
Dreamweaver Fireworks
Photoshop

Illustrator
Contribute
Flex
After Effects Premiere Pro
Bereitstellung für möglichst viele Formate und Plattformen

Designer zu Designer

Designer zu Entwickler

Inhalts-Designer zu Inhaltskonsument

Desktop zu Browser zu Endgerät
http://www.adobe.com/go/flex3_cs3_swfkit
CS3 und Flex
Import Skin Assets into Flex Builder
Create Flex Components in Flash CS3
CS3 templates make it easy to
create custom component skins
Flash developers can
easily package work
as Flex components
Import wizard generates code
assigning assets to components
MXML and CSS
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;
Bibliotheken und Themes
• Runtime CSS
– Compile CSS to SWF
– StyleManager.loadStyleDeclarations("theme.swf");
• Compiletime CSS
– Library-Projekt mit CSS-Datei
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
Erfahrungsberichte und Vergleich von Frameworks
ARCHITEKTUR
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, unittesting 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”
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
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!
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/)
Cairngorm
•
Was ist Cairngorm?
–
–
•
Idee
–
–
•
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.
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
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?
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
Cairngorm
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/
68
Projektorganisation und Workflow
•
Mehrere Projekte
– Anwendung
– Bibliotheken
– Themes
•
Bibliotheken und Namensräume
– Manifest
•
Optimierung
– use-network
– debug
– optimize
ANT Build
•
•
•
•
flexTask.jar
build.xml
flex.properties
flex-config.xml
– dump-config filename.xml
– link-report filename.xml
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;
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 laden
var eventDispatcher:IEventDispatcher = loadResourceModule(url);
eventDispatcher.addEventListener(ResourceEvent.COMPLETE,
completeHandler);
resourceManager.localeChain = [ "fr_FR" ];
Fragen und Antworten aus der Praxis
AUF ZURUF
Danke für Ihre Geduld
Best Practices Rich Applications