Download pdf - Sascha Wolter | Best Practices Rich

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)

http://www.wolter.biz/

http://www.flashforum.de/

http://www.amazon.de/exec/obidos/ASIN/3827360986/wolter-21

http://www.amazon.de/exec/obidos/ASIN/3827361435/wolter-21

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


LOST IN FLEXFlex-Crashkurs für Flash-Designer und Java-Programmierer


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


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

• 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.


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!


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!


MXML and ActionScript

XML/HTTPREST

SOAP Web Services

Browser


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


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!


MXML and ActionScript

Lokale Ressourcen

XML/HTTPREST

SOAP Web Services

Desktop


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


AIR ApplicationAIR Application

HTML

Occasionally Connected Network

Flex / LC Data Services Web Services

Apollo Runtime

HTML/AJAX

Flash/Flex

PDF

Flash/Flex

PDF

AIR Application

HTML/AJAX

AIR Application

Flash/Flex

Windows OS Mac OS Linux OS

Systemarchitektur


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)


Flash Plattform im Überblick


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

http://cloud.macromedia.com/strategy/2005/roadmap.html

Flex Produktlinie im Überblick


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


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


Alternative Entwicklungsumgebungen


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/)


http://opensource.adobe.com/wiki/display/site/Home

http://opensource.adobe.com/wiki/display/flexsdk/Flex+SDK

http://bugs.adobe.com/

http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+3

http://www.adobe.com/openscreenproject/

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>


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


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


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


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 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!


Listen, Tabellen und Trees

ListTileListHorizontalTileListComboBox

DataGridDataGridColumns

Drag and Drop

Tree


Repeater

• Repeater– Datengetrieben Oberflächen lassen sich mit Hilfe von

Repeatern dynamisch aufbauen.– Performance beachten!


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


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


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 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


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

}


Styles

Selector Typ:Global

global {themeColor:#A65904color:#484848;

}

Komponenten-TypButton {

color:#484848;fontWeight:normal

}

Instanz.myButton {

color:#484848;fontWeight:normal

}


STILLE POSTDesigner und Developer Workflow


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


“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')" />


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


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


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);


Skin Artwork


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


Fireworks

After Effects Premiere Pro

Flash Dreamweaver Flex

IllustratorPhotoshop

Contribute

http://www.adobe.com/go/flex3_cs3_swfkit

CS3 und Flex


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;


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


http://download.macromedia.com/pub/exchange/mxi_file_format.pdf

http://www.adobe.com/de/exchange/em_download/

ARCHITEKTURErfahrungsberichte und Vergleich von Frameworks


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”


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/)


http://labs.adobe.com/wiki/index.php/Cairngorm

http://puremvc.org/

http://projects.simb.net/easyMVC/

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


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


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/

http://labs.adobe.com/wiki/index.php/Cairngorm

http://www.adobe.com/devnet/flex/articles/cairngorm_pt1.html

http://www.cairngormdocs.org/

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;


http://www.wolter.biz/?s=locale

http://labs.adobe.com/wiki/index.php/Flex_3:Feature_Introductions:_Runtime_Localization

http://labs.adobe.com/wiki/index.php/Flex_3:Feature_Introductions:_Runtime_Localization

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" ];


AUF ZURUFFragen und Antworten aus der Praxis



Danke für Ihre GeduldBest Practices Rich Applications