WORKFLOW FÜR ENTWICKLER VON RICH-INTERNET- ANWENDUNGEN (RIA) Skript für eine 30-minütige Live-Demo 31.10.2007 Endgültige Version Diese Demodateien dürfen ausschließlich für Produktdemonstrationen, Schulungen oder andere Einsatzzwecke verwendet werden, die von Adobe Systems Incorporated ( Adobe ) autorisiert wurden. Ein anderer Einsatzzweck ist nur mit schriftlicher Genehmigung von Adobe erlaubt.
Inhalt Primäre Zielgruppe...3 Kernaussage...3 Tagline...3 Länge...3 Vorbereitung...3 Einführung...4 Mit Fireworks CS3 eine Anwendung entwerfen...4 Mit Flash CS3 eine Flex-Komponente erstellen...5 Mit Photoshop CS3 Skins für Komponenten definieren...5 Ein Flex-Projekt erstellen...6 Flash-Komponenten einsetzen...6 Eine Skin für ein Akkordeon festlegen...7 XML-Daten integrieren...7 Ein Video hinzufügen...8 Fazit...8 WORKFLOW FÜR RIA-ENTWICKLER 30-Minuten-Demo 31.10.2007 Endgültige Version 2
Primäre Zielgruppe Anwendungsentwickler, die mit Java, PHP, Ruby, Adobe ColdFusion und Adobe Flash arbeiten Kernaussage Adobe Flex enthält alle Werkzeuge und Technologien, die Entwickler zur raschen Erstellung innovativer Web-Anwendungen benötigen. Tagline Eclipse -basierte IDE zur Entwicklung von Rich Internet Applications Dauer 30 Minuten Vorbereitung Installation: Installieren Sie Flex Builder 3. Installieren Sie das Flex Component Kit. Laden Sie es dazu von folgender Adresse herunter: www.adobe.com/cfusion/exchange/index.cfm?event=extensiondetail&loc=en_us&extid=1273018 Das Flex Component Kit ist nur auf Englisch erhältlich. Extrahieren Sie ria_assets.zip auf den Desktop. Installieren Sie die Adobe Creative Suite 3 Web Premium über Setup (Windows ) bzw. den Installer (Mac OS X). Vergewissern Sie sich, dass auf der Festplatte mindestens 1,5 GB Speicherplatz zur Verfügung stehen. Systemanforderungen: Windows Intel Pentium 4, Intel Centrino, Intel Xeon oder Intel Core Duo (oder kompatibler Prozessor) Microsoft Windows XP mit Service Pack 2 oder Windows Vista Home Premium, Business, Ultimate oder Enterprise (nur für 32-Bit-Versionen zertifiziert) 1 GB RAM 5 GB freier Festplattenspeicher (zusätzlicher Speicher für die Installation erforderlich) 1024 x 768 Punkt Monitorauflösung mit 16-Bit-Farbtiefe DVD-ROM-Laufwerk USB2-Anschlüsse Macintosh PowerPC G4 oder G5 bzw. Intel Multi-Core Mac OS X Version 10.4.8; Java Runtime Environment 1.5 für Adobe Version Cue CS3 Server 1 GB RAM 7 GB freier Festplattenspeicher (zusätzlicher Speicher für die Installation erforderlich) 1024 x 768 Punkt Monitorauflösung mit 16-Bit-Farbtiefe DVD-ROM-Laufwerk USB2-Anschlüsse WORKFLOW FÜR RIA-ENTWICKLER 30-Minuten-Demo 31.10.2007 Endgültige Version 3
WORKFLOW FÜR RIA-ENTWICKLER Skript für eine 30-minütige Live-Demo 31.10.2007 Endgültige Version Schritt 1 Einführung Die Gestaltung einer Adobe Flex-Anwendung ist nicht länger darauf beschränkt, einen Screenshot für den Entwickler zu erstellen, der sich dann um die Umsetzung kümmern soll. Designer können jetzt das gesamte Layout entwerfen sowie für alle Komponenten Skins definieren. Damit haben sie mehr Kontrolle über das Erscheinungsbild von Flex- Anwendungen, und die Zusammenarbeit mit den Entwicklern wird erleichtert. Mit Adobe Photoshop, Adobe Fireworks, Adobe Illustrator und Adobe Flash ist die Umsetzung eines Entwurfs in Flex einfacher denn je. 1. Rufen Sie die fertige Anwendung auf: Öffnen Sie im Ordner CompletedProject die Datei Main.html. Die Anwendung enthält Bilder, ein Akkordeon mit Skin, eine Karte und ein Video, das im Hintergrund abgespielt wird. Das Layout der Anwendung wurde in Fireworks entworfen, die Karte in Flash erstellt, und das Akkordeon erhielt seine Skin mithilfe von CSS (Cascading Style Sheets) und Photoshop. In Flex wurden alle Elemente miteinander kombiniert und die Programmlogik hinzugefügt. Das Ergebnis ist eine voll funktionsfähige Anwendung. Schritt 2 Mit Fireworks CS3 eine Anwendung entwerfen Mit der neuen Exportoption MXML und Bilder von Fireworks CS3 generieren Sie direkt aus den Fireworks-Layouts MXML-Seiten für Flex und optimieren so den Workflow zwischen Designer und Entwickler. 1. Starten Sie Fireworks CS3. 2. Wählen Sie im Menü Datei den Befehl Öffnen und im Ordner assets die Datei aquathon_comp.png. Alle Elemente werden in Fireworks importiert und positioniert. Mit diesem Layout können die Elemente als MXML exportiert und dann in Flex verwendet werden. MXML ist eine XML-basierte Sprache, die HTML ähnelt. Sie dient der Definition der visuellen Elemente einer Flex-Anwendung. 3. Wählen Sie Datei > Exportieren. Wechseln Sie zum Unterordner src. Nennen Sie die Datei Layout.mxml. Vergewissern Sie sich, dass als Exportoption MXML und Bilder ausgewählt ist. Vergewissern Sie sich, dass die Option Bilder in Unterordner ablegen aktiviert ist. 4. Klicken Sie auf Speichern. 5. Beenden Sie Fireworks. WORKFLOW FÜR RIA-ENTWICKLER 30-Minuten-Demo 31.10.2007 Endgültige Version 4
Schritt 3 Mit Flash CS3 eine Flex-Komponente erstellen Mit dem Flex Component Kit für Flash CS3 können Sie interaktive, animierte Inhalte in Flash erstellen und sie in Flex als Flex-Komponente verwenden. Wenn Sie ein MovieClip-Symbol in Flash mit speziellen Ebenen versehen, wird es als Flex-Komponente behandelt. 1. Starten Sie Flash CS3. 2. Wählen Sie im Menü Datei den Befehl Öffnen und im Ordner src/assets die Datei MapComponent.fla. 3. Doppelklicken Sie auf den MovieClip MapComponent auf der Bühne. Achten Sie auf die Animation des MovieClips: Die Karte wird größer. 4. Ziehen Sie den Abspielkopf hin und her, um die einzelnen Phasen der Animation anzuzeigen. 5. Erstellen Sie zwei neue Ebenen mit Namen State Labels und Transition Labels. 6. Erstellen Sie Bildbeschriftungen für die Ebene State Labels. Wählen Sie Bild 1 der Ebene State Labels, und geben Sie im Bedienfeld Eigenschaften ( Fenster > Eigenschaften ) die Bildbeschriftung small ein. Wählen Sie Bild 25 der Ebene State Labels. Drücken Sie F6, um ein Schlüsselbild einzufügen, und geben Sie im Bedienfeld Eigenschaften die Bildbeschriftung big ein. 7. Erstellen Sie Bildbeschriftungen für die Ebene Transition Labels. Wählen Sie Bild 1 der Ebene Transition Labels, und geben Sie im Bedienfeld Eigenschaften die Bildbeschriftung small-big:start ein. Wählen Sie Bild 25 der Ebene Transition Labels. Drücken Sie F6, um ein Schlüsselbild einzufügen, und geben Sie im Bedienfeld Eigenschaften die Bildbeschriftung small-big:end ein. 8. Öffnen Sie die Bibliothek ( Fenster > Bibliothek ), und wählen Sie den MovieClip MapComponent. Beim Export eines MovieClip-Symbols als Flex-Komponente erstellt Flash CS3 eine SWC-Datei. Im Gegensatz zu einer SWF-Datei (dem üblichen Flash-Exportformat) enthält eine SWC-Datei zusätzlichen Code, mit dem sie als wiederverwendbare Flex-Komponente eingesetzt werden kann. 9. Wählen Sie im Menü Befehle die Option Convert Symbol to Flex Component (Symbol in Flex- Komponente konvertieren). 10. Wählen Sie Datei > Veröffentlichen. 11. Speichern Sie MapComponent.fla, und beenden Sie Flash. Schritt 4 Mit Photoshop CS3 Skins für Komponenten definieren Für die derzeit in Flex verfügbaren Oberflächenkomponenten kann in Photoshop CS3 problemlos eine Skin definiert werden. Auf diese Weise kreiert der Designer anhand vorhandener Komponentenelemente ein unverwechselbares Erscheinungsbild. 1. Starten Sie Photoshop CS3, und öffnen Sie im Ordner assets die Datei accordion_header.psd. Die PSD-Datei enthält die Kopfzeile für ein Akkordeon. Sie wird nun zur späteren Verwendung in Adobe Flex Builder exportiert. 2. Blenden Sie alle sichtbaren Textebenen aus. Da die Grafik in jeder Akkordeon-Kopfzeile verwendet werden soll, fügen Sie den Text erst in Flex hinzu. 3. Wählen Sie Datei > Für Web und Geräte speichern. 4. Wählen Sie das Optimierungsformat PNG-24. Vergewissern Sie sich, dass die Option Transparenz aktiviert ist. Klicken Sie auf Speichern. 5. Speichern Sie die Datei im Ordner src/assets unter dem Namen accordion-header.png. 6. Beenden Sie Photoshop, ohne zu speichern. WORKFLOW FÜR RIA-ENTWICKLER 30-Minuten-Demo 31.10.2007 Endgültige Version 5
Schritt 5 Ein Flex-Projekt erstellen Flex-Projekte organisieren die Elemente, Komponenten und Code-Bibliotheken, aus denen eine Anwendung besteht. 1. Starten Sie Flex Builder 3. 2. Wählen Sie File > New > Flex Project ( Datei > Neu > Flex-Projekt ). Nennen Sie das Projekt RIA. Wählen Sie als Speicherort für das Projekt den Ordner assets/riaproject auf Ihrem Desktop. Klicken Sie auf Finish (Fertigstellen). 3. Öffnen Sie im Ordner src die Datei Layout.mxml. Die Datei Layout.mxml haben Sie vorher im Rahmen dieser Demo aus Fireworks exportiert. 4. In der Entwurfsansicht (Registerkarte Design ) sehen Sie, wie die Bilder in der Anwendung positioniert sind. 5. In der Quellcode-Ansicht (Registerkarte Source ) wird die von Fireworks erstellte MXML-Datei angezeigt. Da die meisten Bilder in Komponenten verwendet werden, können zusätzliche Bilddaten gelöscht werden. 6. Löschen Sie in der Quellcode-Ansicht alle Image- und Label-Tags mit Ausnahme der Kopf- und Fußzeile ( Header und Footer ). 7. Wechseln Sie zur Entwurfsansicht, um die Ergebnisse anzuzeigen. 8. Speichern Sie, und schließen Sie die Datei. In der restlichen Demo wird eine vordefinierte Anwendung verwendet. Kommentare im Quelltext zeigen an, wo dieser Anwendung Code hinzugefügt werden soll. Kommentare sind Hinweise, die von der Anwendung ignoriert werden, aber die Dokumentation erleichtern. 9. Öffnen Sie Main.mxml. 10. Klicken Sie auf den grünen Pfeil in der Symbolleiste, um die Anwendung zu testen. Die Anwendung wird im Browser aufgerufen. Rechts im Fenster ist ein Akkordeon zu sehen. 11. Schließen Sie das Browser-Fenster. Schritt 6 Flash-Komponenten einsetzen Die vorhin in dieser Demo aus Flash CS3 exportierte SWC-Datei muss mit dem Flex-Projekt verknüpft werden, damit Flex die Komponente nutzen kann. 1. Klicken Sie im Flex-Navigator mit der rechten Maustaste (Mac: bei gedrückter Steuertaste klicken) auf das vorhin erstellte Projekt RIA, und wählen Sie Properties (Eigenschaften). 2. Wählen Sie im Bedienfeld Flex Build Path die Registerkarte Library path. 3. Klicken Sie auf Add SWC... (SWC hinzufügen), und wechseln Sie zum Ordner src/assets. Wählen Sie die Datei MapComponent.swc. 4. Klicken Sie auf OK. 5. Fügen Sie in der Quellcode-Ansicht unterhalb des Kommentars create MapComponent (etwa Zeile 59) die Kartenkomponente hinzu: <local:mapcomponent id="mymapcomponent" x="17" y="328"/> 6. Testen Sie die Anwendung. Die Streckenkarte wird jetzt auf dem Bildschirm angezeigt. Jetzt kann Flex zwischen den Bildern mit der Beschriftung small bzw. big wechseln, die in Flash CS3 definiert wurden. 7. Suchen Sie die Anweisung scalar function (etwa Zeile 25). 8. Heben Sie die Kommentierung von mymapcomponent.currentstate='small' auf, indem Sie die beiden vorangestellten Schrägstriche (//) entfernen. 9. Heben Sie die Kommentierung von mymapcomponent.currentstate='big' auf, indem Sie die beiden vorangestellten Schrägstriche (//) entfernen. Die Skalarfunktion enthält die Variable isout, mit der festgelegt wird, ob die Karte groß oder klein angezeigt werden soll. Falls isout wahr ist, wird die kleine, anderenfalls die große Karte aufgerufen. 10. Testen Sie die Anwendung. Klicken Sie auf das Symbol zur Vergrößerung der Karte (schwarzes Kästchen), um die Größe der Streckenkarte zu ändern. Schließen Sie das Browser-Fenster. WORKFLOW FÜR RIA-ENTWICKLER 30-Minuten-Demo 31.10.2007 Endgültige Version 6
Schritt 7 Eine Skin für ein Akkordeon festlegen Mithilfe von Cascading Style Sheets (CSS) können Sie Flex-Komponenten Skins zuordnen und das Aussehen der Website ändern. Das Bild für die Kopfzeile des Akkordeons, das vorhin in dieser Demo mit Photoshop CS3 erstellt wurde, wird jetzt auf das Akkordeon in der Flex-Anwendung angewendet. 1. Führen Sie Main.mxml aus. Achten Sie dabei auf die generischen Kopfzeilen des Akkordeons. 2. Schließen Sie das Browser-Fenster. 3. Öffnen Sie styles.css. Einige der enthaltenen CSS-Befehle werden bereits von der Anwendung genutzt. 4. Erstellen Sie eine CSS-Anweisung, mit der die AccordionHeader-Klasse geändert wird: AccordionHeader { } skin: Embed(source="assets/accordion-header.png"); color: #FFFFFF; paddingleft: 20px; Dieses CSS verwendet die Datei accordion-header.png als Skin, ändert die Textfarbe in Weiß und fügt links einen 20 Pixel großen Leerraum hinzu. 5. Speichern Sie styles.css, und wechseln Sie zu Main.mxml. Da das CSS für alle AccordionHeader-Objekte erstellt wurde, wird es automatisch angewendet. 6. Testen Sie Main.mxml. Die Kopfzeilen des Akkordeons wurden geändert. 7. Schließen Sie das Browser-Fenster. Schritt 8 XML-Daten integrieren Durch die Integration von XML in Flex lassen sich dynamische Anwendungen erstellen. 1. Suchen Sie nach dem Kommentar embed xml data sources (etwa Zeile 14). 2. Erstellen Sie zwei XML-Objekte: <mx:xml id="riderxml" source="data/riders.xml" format="e4x" /> <mx:xml id="teamxml" source="data/teams.xml" format="e4x" /> riderxml und teamxml sind XML-Objekte, die mit XML-Dateien im Datenordner (Unterorder data ) verknüpft sind. Die Beispieldateien riders.xml und teams.xml liegen im Textformat vor. Meistens wird als Datenquelle jedoch ein Server-seitiges Skript verwendet, das Daten aus einer Datenbank abruft. 3. Suchen Sie nach den Komponenten CurrentStandings und TeamStandings (etwa Zeile 53 und 55). 4. Ändern Sie die beiden Komponenten, sodass sie die XML-Daten abrufen: <comp:currentstandings label="current Standings" riderdata="{ riderxml }"/> <comp:teamstandings label="team Standings" teamdata="{ teamxml }" /> riderdata ruft Daten aus dem Objekt riderxml ab, teamdata aus dem Objekt teamxml. Damit wurden die Anweisungen für CurrentStandings und TeamStandings für die Verwendung von XML- Daten umgeschrieben. 5. Testen Sie die Anwendung. Klicken Sie durch die Bedienelemente des Akkordeons. Beachten Sie, dass Rider Standings und Team Standings jetzt mit Daten befüllt sind. 6. Schließen Sie das Browser-Fenster. WORKFLOW FÜR RIA-ENTWICKLER 30-Minuten-Demo 31.10.2007 Endgültige Version 7
Schritt 9 Ein Video hinzufügen Videos können als Hauptelement einer Anwendung oder einfach zur optischen Aufwertung eingesetzt werden. In diesem Schritt wird ein Video zum Hintergrund der Anwendung hinzugefügt. 1. Suchen Sie nach dem Kommentar create video (etwa Zeile 43). Das Video muss vor den anderen Elementen hinzugefügt werden, damit es im Hintergrund platziert wird. 2. Erstellen Sie ein VideoDisplay-Objekt: <mx:videodisplay id="videobg" autoplay="true" source="images/aqthn_video.flv" y="55" width="100%" height="480"/> Die Eigenschaft source gibt an, welches Video abgespielt werden soll. Da autoplay den Wert true aufweist, wird das Video automatisch gestartet. Anderenfalls müsste das Video durch den Anwender aufgerufen werden. 3. Testen Sie die Anwendung. Das Video wird im Hintergrund abgespielt. Die Beispielanwendung kombiniert Elemente aus Photoshop, Flash und Fireworks zu einer voll funktionsfähigen Flex-Anwendung. Dank der Einbeziehung aufwendiger Grafiken, selbst definierter Komponenten und Videos lassen sich mit Flex ansprechende Anwendererlebnisse gestalten. Schritt 10 Fazit Durch die Optimierung der Zusammenarbeit zwischen Designer und Entwickler wird die Erstellung von Anwendungen schneller und effizienter. Der Designer kann aktiv an der Entwicklung der Anwendung teilnehmen, und dem Entwickler wird das Umsetzen der layouterischen Vorgaben leichter gemacht. Änderungen sind dabei jederzeit möglich. WORKFLOW FÜR RIA-ENTWICKLER 30-Minuten-Demo 31.10.2007 Endgültige Version 8