Wie bereits erwähnt, tauchte der Fehler völlig unregelmäßig auf und ließ sich nicht reproduzieren. In so einem Fall ist eine Fehlersuche nahezu unmöglich, da man den Code von Grund auf analysieren und überarbeiten müsste. Auch eine Suche über Google zu diesem Problem ergab keine hilfreichen Ergebnisse.

Nach mehreren gescheiterten Ansätzen, das Problem in der JavaScript-Datei zu suchen und zu beheben, stolperte ich auf die Vergabe der IDs, mit denen JavaScript die HTML-Objekte ansprechen und ein- und ausblenden kann. Diese Vergabe findet in der Datei tmenu_layers.php.inc statt und sieht (vereinfacht) so aus:

$this->WMid = substr(md5(microtime()),0,6);

Das bedeutet, dass für jedes Element eine ID aus der Micro-Time generiert wird und von dem Hash lediglich die ersten 6 Stellen als ID benutzt werden. Ich weiß nicht genau, ob es an der Kürze des Hashes oder an den Millisekunden als Grundlage lag, aber diese Vorgehensweise zur ID-Generierung erzeugte Kollisionen und vergab die IDs hin und wieder an mehrere HTML-Elemente gleichzeitig.

Um diese Kollisionen zu verhindern, änderte ich die ID-Vergabe um und nahm die PHP-Funktion uniqid() als Grundlage. Diese Funktion basiert zwar auch auf der aktuellen Micro-Time, lässt sich aber mit einen Parameter dazu bringen, die Rückgabe zusätzlich mit einem Zufallswert zu erweitern. Da dieser Zufallswert mit einem . angehängt wird, dies aber einen JavaScript-Fehler verursachen würde, habe ich anschließend noch alle Punkte aus der Rückgabe entfernt.

Die neue ID-Vergabe in der Datei tmenu_layers.php.inc sieht jetzt (vereinfacht) so aus:

$this->WMid = str_replace('.','',uniqid('',true));

Seit dieser Änderung ist der JavaScript-Fehler nicht mehr aufgetaucht. Ich gehe also davon aus, dass es die korrekte Lösung war.

Die Idee, die dahinter steckt ist folgende: Mit JavaScript wird das zu verändernde <select>-Element angesprochen. Dies kann entweder mit einer Schleife erfolgen, welche das ganze Dokument durchsucht oder selbstverständlich auch explizit für einzelne Elemente. Die entsprechenden Elemente werden anschließend durch einen neuen HTML-Code ersetzt, der ungefähr so aussehen könnte:

<div class="style-me">
	<span class="show-text" id="show-text"></span>
	<img src="dropdown-arrow.gif" alt="" />
	<select>...</select>
</div>

Das ursprüngliche <select>-Element wird hierbei nicht weg geworfen, sondern per CSS mit position: absolute; bzw. position: relative; über das neue <div> gelegt und anschließend kann die Opazität auf 0 gesetzt werden.

Hier ein kleines Beispiel zur Verdeutlichung. Links das fertige Element. Rechts zur Demonstration mit einem halbdurchsichtigen <select>-Element.

Dadurch, dass die Selectbox noch existiert und oben liegt, kann der User ganz normal darauf klicken und in der Selectbox die gewünschte Option auswählen. Die Selectbox erhält dann den entsprechenden Wert, der beim Absenden des Formulars regulär mitgeschickt wird. Wir müssen lediglich mit einem onchange-Event den Text des gewählten Wertes auslesen und in unser neu erstelltes HTML-Element schreiben.

Wir können anschließend das neue <div>-Element beliebig mit CSS manipulieren, eine Hintergrundgrafik vergeben, die Schrift ändern. Außerdem habe ich im Beispiel-Code oben eine Grafik mit eingefügt. Diese kann beliebig gewählt werden, so dass die perfekte Illusion einer gestylten Selectbox entsteht.

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

Somit kann ein Frontend-Login-Bereich eingerichtet werden, über den die Benutzer die Bilder komfortabel pflegen können und nicht den mühsamen (und bei dieser Extension etwas unübersichtlichen) Weg der Backend-Pflege gehen müssen. Die Benutzer können Kategorien anlegen, Bilder hinzufügen, Bilder löschen und auch ganze Kategorien wieder löschen. Und genau hier liegt ein kleines Problem: Löscht der Benutzer eine Kategorie, erscheint keine Sicherheitsabfrage und die Kategorie wird incl. aller Dateien sofort gelöscht. Dadurch kann durch einen einzigen unvorsichtigen Klick die vorherige mühsame Arbeit zunichte gemacht werden.

Mit folgender Anpassung am Template wird eine kurze und einfache JavaScript-Bestätigung vorgeschaltet, die den Benutzer noch einmal darauf hinweist, was geschieht und ob er das wirklich will.

Folgender Abschnitt im Template …

href="javascript:GalleryAdmin.deleteAlbum(###CATEGORY_UID###,###ALBUM_UID###);"

… muss durch diesen Code ersetzt werden:

href="javascript:askToDelete(###CATEGORY_UID###,###ALBUM_UID###);"

Und diese JavaScript-Funktion muss an geeigneter Position eingefügt werden:

/**
 * Ask the user before the album is deleted.
 */
function askToDelete(catID, albumID) {

	var askText = 'Soll das Album wirklich endgültig vom Server gelöscht
	               werden?\n\nDieser Vorgang kann nicht rückgängig
	               gemacht werden.';

	if(confirm(askText)) {
		GalleryAdmin.deleteAlbum(catID, albumID);
	}
}

Durch diese Änderung kann der Benutzer wie gewohnt die Bilder und Alben verwalten, wird aber vor dem Löschen eines Albums darauf hingewiesen, welche Folgen die Aktion haben wird und danach gefragt, ob er es wirklich tun will. Dieser eine Klick mehr stört wahrscheinlich niemanden wirklich, aber kann vor sehr viel Ärger, Problemen und Mehraufwand schützen.