Created

2 May 2011

Applikation in eine Website einbetten

 
 

Code

Der Code muss nicht bearbeitet werden.
 

Übung

In den vorangegangenen drei Modulen haben Sie sich mit dem Erstellen und Debuggen einer Flex-Applikation befasst. Hier erfahren Sie, wie Sie Ihre Applikation auf einem Webserver implementieren.
 
Zuerst erstellen Sie einen Releasebuild der Applikation. Danach prüfen Sie den Code, der zum Laden Ihrer Flex-Applikation auf einer Website benötigt wird. Schließlich ermitteln Sie, welche zusätzlichen Dateien Sie zusammen mit der SWF-Datei auf dem Webserver ablegen müssen.
 

 
1. Schritt: Releasebuild erstellen

Wählen Sie „Projekt“ > „Releasebuild exportieren“. Wählen Sie im Exportassistenten Ihr Projekt und Ihre Applikation aus und geben Sie den Speicherort für den Releasebuild an (siehe Abbildung 1).
 
Wenn Sie eine Applikation entwickeln, wird eine Debug-Version Ihrer Applikation erstellt und im Ordner „bin-debug“ des Projekts gespeichert.
 
Erstellen Sie einen Releasebuild.

Abb. 1: Erstellen Sie einen Releasebuild.

Im Paket-Explorer sehen Sie jetzt den Ordner „bin-release“ in Ihrem Projekt. Er dient als Zeiger auf den gerade von Ihnen angegebenen Exportordner (siehe Abbildung 2).
 
 Zeigen Sie den Ordner „bin-release“ an.

Abb. 2: Zeigen Sie den Ordner „bin-release“ an.

Die Ordner „bin-debug“ und „bin-release“ enthalten neben der SWF-Datei zahlreiche weitere Dateien. Sie prüfen diese verschiedenen Dateien in späteren Schritten.
 

 
2. Schritt: SWF-Applikationsdateigrößen vergleichen

Klicken Sie mit der rechten Maustaste auf die SWF-Datei im Ordner „bin-debug“ und wählen Sie „Eigenschaften“, um den Speicherort und die Größe der Datei anzuzeigen. Wiederholen Sie den Vorgang für die SWF-Datei im Ordner „bin-release“.
 
Die SWF-Releasedatei ist normalerweise nicht größer als 100 KB.
 

 
3. Schritt: HTML-Vorlagendateien prüfen

Prüfen Sie die Dateien, die zum Generieren der Browser-fähigen Applikation verwendet werden (siehe Abbildung 3).
 
Welche Dateien in diesem Ordner angezeigt werden, hängt von Ihren Projekteinstellungen ab.
 
Prüfen Sie die HTML-Vorlagendateien.

Abb. 3: Prüfen Sie die HTML-Vorlagendateien.

Beim Erstellen der Applikation werden diese Vorlagendateien standardmäßig zum Generieren der HTML-Datei oder sonstiger Dateien verwendet, die in den Ordnern „bin-debug“ und „bin-release“ abgelegt werden. Sie enthalten Variablen, die entweder über Projekteigenschaften oder Attribute des Applikations-Tags aufgefüllt werden. Wozu diese Dateien im Einzelnen verwendet werden, erfahren Sie unter Schritt 2 und 3.
 

 
4. Schritt: Datei „FlexWebTestDrive.html“ öffnen

Prüfen Sie den Code, der zur Einbettung der Flex-Applikation generiert wurde.
 
Um Ihre Applikation anzeigen zu können, benötigen Endanwender den Flash Player – genauer gesagt, eine bestimmte Version des Flash Player. Die Web-Seite, in die Ihre Applikation eingebettet ist, muss daher auch Code enthalten, der die installierte Flash Player-Version prüft und den Anwendern ggf. hilft, auf die erforderliche Version aufzurüsten oder Flash Player herunterzuladen. Der primäre Code, der die Installation des Flash Player überprüft, stammt aus „SWFObject 2“, einer standardbasierten Bibliothek zum Einbetten von SWF-Dateien in HTML-Seiten. Die Bibliothek ist Bestandteil der Web-Seite:
 
<script type="text/javascript" src="swfobject.js"></script>
Die SWF-Datei wird durch Aufrufen der Methode embed() von swfobject eingebettet:
 
swfobject.embedSWF( "FlexWebTestDrive.swf", "flashContent", "100%", "100%", swfVersionStr, xiSwfUrlStr, flashvars, params, attributes);
Das erste Argument ist der Speicherort der SWF-Datei. Das zweite Argument ist der Name des alternativen Inhalts, (die „id“ eines später im Code definierten „div“-Tags), der angezeigt wird, wenn Flash Player nicht verfügbar ist. Im dritten und vierten Argument werden die Höhe und die Breite der Applikation definiert. Diese Werte sind im generierten HTML-Wrapper standardmäßig auf 100 % gesetzt, sodass die Applikation das gesamte Browser-Fenster in Anspruch nimmt. Um die Applikationsgröße anzupassen, sodass sie zum Beispiel nur einen bestimmten Bereich einer vorhandenen HTML-Seite einnimmt, ändern Sie diese Argumente in andere absolute oder relative Werte.
 
Das fünfte Argument gibt die erforderliche Mindestversion des Flash Player an. Für Flex 4.5-Applikationen ist Flash Player 10.2.0 oder höher erforderlich. Mit dem sechsten Argument wird die Expressinstallation hinzugefügt, ein einfaches Verfahren zur schnellen Aktualisierung des Flash Player, falls die installierte Version nicht den Mindestanforderungen entspricht. Diesem Argument wird entweder eine leere Zeichenfolge (falls keine Expressinstallation verfügbar sein soll) oder der Speicherort der SWF-Datei „playerProductInstall.swf“ zugeordnet, die die Expressinstallation initiiert. Beide Werte wurden im JavaScript-Code festgelegt, bevor die Methode embed() aufgerufen wurde.
 
Die letzten drei Argumente werden für die Übergabe von Daten an die Applikation sowie zum Einrichten von Eigenschaften für die Applikation verwendet. Mit dem Objekt flashvars können Sie Daten von der Web-Seite an die Flex-Applikation übergeben. Mit den Objekten params und attributes richten Sie die Parameter für das Erscheinungsbild der SWF-Datei im Browser ein, einschließlich Qualität, Ausrichtung, Skalierung, Transparenz usw.
 
Sehen Sie sich abschließend das Tag noscript an, das in Browsern mit deaktiviertem JavaScript ausgeführt wird. Es enthält zwei Objekt-Tags, die das Einbetten einer SWF-Datei auch ohne JavaScript ermöglichen.
 
<noscript> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" id="FlexWebTestDrive"> <param name="movie" value="FlexWebTestDrive.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#ffffff" /> <param name="allowScriptAccess" value="sameDomain" /> <param name="allowFullScreen" value="true" /> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="FlexWebTestDrive.swf" width="100%" height="100%"> <param name="quality" value="high" /> <param name="bgcolor" value="#ffffff" /> <param name="allowScriptAccess" value="sameDomain" /> <param name="allowFullScreen" value="true" /> <!--<![endif]--> <!--[if gte IE 6]>--> <p>Either scripts and active content are not permitted to run or Adobe Flash Player version 10.2.0 or greater is not installed. </p> <!--<![endif]--> <a href="/go/getflashplayer"><img src="http://adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash Player" /></a> <!--[if !IE]>--> </object> <!--<![endif]--> </object> </noscript>
Das Tag object mit der classid wird vom Internet Explorer und von Browsern verwendet, die Flash Player als ein Flash ActiveX-Steuerelement implementieren. Das zweite object-Tag wird von Browsern verwendet, die Flash Player als Plug-in implementieren, z. B. Firefox, Safari oder Chrome. Mit den param-Tags richten Sie die SWF-Parameter für beide Objekt-Tags ein.
 
Wenn Sie SWF-Eigenschaften ändern möchten, vergewissern Sie sich, dass Sie für „swfobject“ und beide noscriptobject-Tags identische Parameterwerte einrichten.
 
Wenn Ihre Applikation in eine bestehende Web-Seite eingebettet werden soll und Sie nicht den standardmäßigen Wrapper verwenden möchten, müssen Sie sicherstellen, dass die Web-Seite den gesamten oben beschriebenen Code (oder gleichwertige Funktionen) enthält.
 

 
5. Schritt: Dateien im Ordner „bin-release“ prüfen

Wenn Sie Ihre Applikation auf einem Webserver implementieren, können Sie sicherheitshalber einfach alle Dateien im Ordner „bin-release“ auf den Produktions-Server verschieben. Sie werden aber in der Regel nicht alle Dateien benötigen.
 
Zeigen Sie den Ordner „bin-release“ an.

Abb. 4: Zeigen Sie den Ordner „bin-release“ an.

PHP-Entwickler, die Flash Builder für PHP verwenden: Es ist auch eine Datei „FlexWebTestDrive.php“ vorhanden.
 
Jede Flex-Applikation verwendet zumindest einen Teil des Flex-Frameworks. Um die Größe der SWF-Datei und die Download-Zeiten so gering wie möglich zu halten, wird der Frameworkcode nicht in Ihre Applikation kompiliert. Er wird stattdessen separat als Gruppe von Adobe-authentifizierten RSLs (Runtime Shared Libraries) bereitgestellt, die nur einmal heruntergeladen werden müssen, im Flash Player-Cache gespeichert und für jede Flex-Applikation verwendet werden können. Diese RSLs stehen in den SWZ-Dateien, die in den „bin“-Ordnern des Projekts angezeigt werden.
 
Wenn ein Anwender eine Applikation anfordert, die mit Adobe-RSLs arbeitet (was bei allen Flex 4- oder neueren Applikationen standardmäßig der Fall ist), verwendet der Flash Player die lokal im Cache gespeicherten Framework-Dateien, sofern sie in der erforderlichen Version vorliegen. Ist dies nicht der Fall, werden sie von der Adobe-Website heruntergeladen und anschließend lokal im Cache gespeichert. Sie müssen diese SWZ-Dateien somit nicht auf Ihrem Webserver implementieren, es sei denn, Sie möchten sie als Sicherung auf Ihrem Server haben oder stellen eine Applikation in einer Umgebung mit eingeschränktem Internetzugriff bereit.
 
In der folgenden Tabelle sind alle Dateien aufgelistet und beschrieben, die in den „bin“-Ordnern gespeichert werden.
 
Datei
 
Beschreibung
 
Bereitstellung?
 
FlexWebTestDrive.html
 
HTML-Seite, in der die Flex-Applikation eingebettet wird
 
Ja. Implementieren Sie diese Datei oder eine andere Webserver-Seite, in die die SWF-Datei eingebettet wird und die überprüft, ob die erforderliche Mindestversion von Flash Player installiert ist.
 
FlexWebTestDrive.php
 
PHP-Seite, in der die Flex-Applikation eingebettet wird
 
Ja. Stellen Sie diese Datei oder eine andere Webserver-Seite bereit, in die die SWF-Datei eingebettet ist und die überprüft, ob die erforderliche Mindestversion von Flash Player installiert ist.
 
FlexWebTestDrive.swf
 
Ihre Applikation!
 
Immer
 
framework_x.swz
 
RSL für Flex-Kern-Framework
 
Nein, wird auf Adobe-Servern bereitgestellt
 
Protokollordner
 
Enthält JavaScript-, CSS- und HTML-Code für Deeplinking-Vorgänge. Beim Deeplinking navigieren Anwender über die Browser-Schaltflächen „Weiter“ und „Zurück“ durch ihre Interaktionen mit der Applikation und erstellen eigene URLs als Lesezeichen.
 
Ja, wenn Ihre Applikation Deeplinking unterstützt
 
mx_x.swz
 
RSL für MX-Komponenten
 
Nein, wird auf Adobe-Servern bereitgestellt
 
PlayerProductInstall.swf
 
SWF-Datei, die zusammen mit „swfobject“ für die Expressinstallation verwendet wird, ein einfaches Verfahren zur schnellen Aktualisierung von Flash Player
 
Immer, sofern die Expressinstallation nicht deaktiviert ist
 
rpc_x.swz
 
RSL für Datendienste, die HTTP-, Webservice- oder Flash Remoting-Aufrufe ausführen
 
Nein, wird auf Adobe-Servern bereitgestellt
 
spark_x.swz
 
RSL für Spark-Komponenten
 
Nein, wird auf Adobe-Servern bereitgestellt
 
sparkskins_x.swz
 
RSL für MX-Komponentenskins
 
Nein, wird auf Adobe-Servern bereitgestellt
 
swfobject.js
 
Code für „SWFObject 2“, der die Flash Player-Installation ermittelt und eine SWF-Datei in eine Web-Seite einbettet
 
Ja, wenn „swfobject“·zum Einbetten der SWF-Datei in eine Web-Seite verwendet wird
 
textLayout_x.swz
 
RSL für das Text-Layout-Framework, das von den Spark-Textsteuerelementen verwendet wird
 
Nein, wird auf Adobe-Servern bereitgestellt
 

 
6. Schritt: Projekteinstellungen ändern, sodass keine Protokolldateien generiert werden

Wählen Sie „Projekt > Eigenschaften“. Rufen Sie „Flex Compiler“ auf und deaktivieren Sie die Integration mit der Browsernavigation.
 
Prüfen Sie den Ordner „bin-debug“ erneut. Der Protokollordner sollte jetzt nicht mehr angezeigt werden.
 
In dieser Übung haben Sie gelernt, wie Sie einen Releasebuild Ihrer Applikation erstellen, Ihre Flex-Applikation in eine Website einbetten und welche weiteren Daten für die Bereitstellung auf einem Webserver erforderlich sind. In der nächsten Übung erfahren Sie, wo Sie Ihren Dienstcode, d. h. Ihre Server-seitigen Klassendateien, ablegen müssen, damit Ihre Flex-Applikation sie aufrufen kann.
 

 
Weitere Informationen

Näheres zu diesem Thema finden Sie hier:
 
 
Dokumentation: Verwenden von Flash Builder 4.5
 
Dokumentation: Verwenden von Flex 4.5