HTML Dokument vorbereiten

Das HTML Dokument in dem die Flex Applikation eingebunden wird muss einen absolut positionierten div Container enthalten in dem ein IFrame erzeugt wird der wiederum die HTML Seite anzeigt:

<div id="myFrame"
style="position:absolute; background-color:transparent; border:0px;
visibility:hidden;"></div>

Wichtig ist, dass dieser div Container ganz am Ende des HTML Dokuments steht um den Container über die Flex Applikation legen zu können.

Über die JavaScript Funktion loadIFrame wird innerhalb des div Containers ein IFrame erstellt und die von Flex übergebene url wird aufgerufen.

function loadIFrame(url){
	document.getElementById("myFrame").innerHTML =
	"<iframe id='myIFrame' src='" + url + "'frameborder='0'></iframe>";
}

Danch wird von Flex aus die JavaScript Function moveIFrame aufgerufen um die Größe und die Position des IFrames einzustellen.

function moveIFrame(x,y,w,h) {
    var frameRef=document.getElementById("myFrame");
    frameRef.style.left=x;
    frameRef.style.top=y;
    var iFrameRef=document.getElementById("myIFrame");
	iFrameRef.width=w;
	iFrameRef.height=h;
}

Nun kann von Flex aus die Sichtbarkeit des IFrames über die beiden Funktionen showIFrame und hideIFrame gesteuert werden.

function showIFrame(){
    document.getElementById("myFrame").style.visibility="visible";
}

function hideIFrame(){
    document.getElementById("myFrame").style.visibility="hidden";
}

Damit ist das HTML Dokument fertig, jetzt müssen wir die IFrame Klasse in Flex einbinden.

IFrame in Flex Applikation einfügen:

Um die HTML Seite einbetten zu können wird die IFrame Klasse benötigt. Diese ruft über ExternalItnerface.call() die JavaScript Funktionen in unserem HTML Dokument auf.

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
    resize="callLater(moveIFrame)"
    move="callLater(moveIFrame)">
    <mx:Script>
    <![CDATA[
        import flash.external.ExternalInterface;
        import flash.geom.Point;
        import flash.net.navigateToURL;

        private var __source: String;

        /**
         * Move iframe through ExternalInterface.
         * The location is determined using localToGlobal()
         * on a Point in the Canvas.
         **/
        private function moveIFrame(): void {
            var localPt:Point = new Point(0, 0);
            var globalPt:Point = this.localToGlobal(localPt);
            ExternalInterface.call("moveIFrame", globalPt.x, globalPt.y,
                        this.width, this.height);
        }

        /**
         * The source URL for the IFrame.
         * When set, the URL is loaded through ExternalInterface.
         **/
        public function set source(source: String): void {
            if (source) {
				trace(source);
                if (! ExternalInterface.available) {
                    throw new Error("ExternalInterface is not available in
                    this container. Internet Explorer ActiveX, Firefox,
                    Mozilla 1.7.5 and greater, or other browsers that
                    support NPRuntime are required.");
                }
                __source = source;
                ExternalInterface.call("loadIFrame", source);
                moveIFrame();
            }
        }

        public function get source(): String {
            return __source;
        }

        /**
         * Whether the IFrame is visible.
         **/
        override public function set visible(visible: Boolean): void {
            super.visible=visible;
            if (visible) {
                ExternalInterface.call("showIFrame");
            } else {
                ExternalInterface.call("hideIFrame");
            }
        }

    ]]>
    </mx:Script>
</mx:Canvas>

Wird nun über IFrame.source eine URL festgelegt wird der IFrame im HTML Dokument erzeugt und die Seite mit der angegebenen URL geladen. Dann wird sofort die Funktion moveIFrame() aufgerufen, die den HTML-IFrame anhand der größe des Flex-IFrames skaliert und positioniert. Wenn jetzt der IFrame auf visible = true gesetzt wird, wird dieser sichtbar und man hat den Eindruck der HTML Content sei direkt in der Flex Applikation eingebettet.

Probleme dieser Lösung

Schon in den ersten Tests ergaben sich folgende Probleme dieser Lösung mit dem IFrame:

• Da der IFrame über der Flex Applikation liegt werden eventuelle PopUps überlagert.
  Lösung:
  • Wenn ein PopUp von Flex generiert wird muss der IFrame auf visible = false gesetzt werden.
  • - Das PopUp muss so positioniert werden, dass es vom IFrame nicht überlagert wird.
• Framesets werden nicht fehlerfrei dargestellt.
• Drag&Drop Ereignisse über dem IFrame werden von Flex nicht mehr erkannat.

Aufgrund der oben angesprochenen Probleme ist die IFrame Lösung für größere Anwendungen wohl nicht die optimale Option. Dennnoch finde ich den Ansatz interessant und für nicht sehr aufwändige Applikationen auf jeden Fall empfehlenswert.

Links
http://www.deitte.com/IFrameDemo3/IFrameDemo.html
http://www.judahfrangipane.com/blog/?p=137

ExternlInterface bietet nicht nur einen Aufruf von Funktionen außerhalb von Flash, sondern hiermit können auch Rückgabewerte zurück an Flash geliefert werden. Auch der Weg vom Flash-Player-Container zu ActionScript ist möglich. Das heißt, bestimmte Funktionen können in ActionScript zum Beispiel mittels JavaScript aufgerufen wegen mit Parameter-Übergabe. Die zwei hierfür verwendeten Methoden sind die addCallback- und call-Methoden. Die addCallBack-Methode ermöglicht den Aufruf von AS-Funktionen von außen, call den Weg anders herum.

Die Parameter von ExternalInterface.addCallBack sind erstens der Name mit dem die Funktion von außen aufgerufen werden kann, zweitens das Objekt auf das sich die Methode bezieht und drittens die Methode die zur weiteren Verarbeitung aufgerufen wird. Die Verknüpfung erfolgt wie das Beispiel von Adobe zeigt:

<script>
function callExternalInterface() {
thisMovie("externalInterfaceExample").goHome();
}
function thisMovie(movieName) {
if (navigator.appName.indexOf("Microsoft") != -1) {
return window[movieName]
}
else {
return document[movieName]
}
}
</script>


Hier müssen das id-Attribut (Object-Tag) und das name-Attribut (Embed-Tag) den Wert ”externalInterfaceExample” haben.

Mit ExternalInterface.call können wie gesagt Funktionen aufgerufen werden. Call hat zwei Parameter. Zum Einen dem Funktionsnamen und zum Anderen einen optionalen Parameter. Auch kann mit der call-Methode ein Rückgabewert abgefangen und weiterverarbeitet werden.

Diese beiden Methoden bieten ein die Möglichkeit einer einfachen Implementierung einer Schnittstelle in Flash, die sich vorwiegend für die Kommunikation mit JavaScript, aber auch anderen Sprachen wie C, anbietet. Die Anwendungsgebiete hierfür sind sehr zahlreich und reichen vom einfachen Auslesen der Browserinnengröße bis zur Verwendung einer Flash-Navigation in Web 2.0 Seiten.