Fusionality

Viele moderne Websites nutzen aufwendige AJAX Features. Dadurch müssen teilweise mehrere Bibliotheken wie Scriptacluos, Prototype oder jQuery, so wie diverse Plugins und eigene Scripte geladen werden. Auch wenn die einzelnen Dateien nicht sonderlich groß sind, verursachen sie viele einzelne HTTP-Requests.

Hier kommt die Combine.cfc ins Spiel. Das Paket besteht aus einer combine.cfm, combine.cfc so wie verschiedenenen Java Archiven und Klassen. Die Archive yuicompressor-2.4.2.jar und combine.jar müssen, ebenso wie der Inhalt des Ordners com, zum ColdFusion Classpath hinzugefügt werden.

Nun kann man statt die Dateien einzeln zu verlinken:

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.2.js"></script>
<script type="text/javascript" src="js/jquery.corner.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.dimensions.min.js"></script>
<script type="text/javascript" src="js/jquery.tooltip.min.js"></script>
<script type="text/javascript" src="js/jquery.dltoggle.min.js"></script>
<script type="text/javascript" src="js/funny-stuff.js"></script>

Alle Dateien über einen Link laden:

<script type="text/javascript" src="combine.cfm?files=js/jquery-1.3.2.min.js,js/jquery.easing.1.2.js,js/jquery.corner.js,js/jquery-ui-1.7.2.custom.min.js,js/jquery.dimensions.min.js,js/jquery.tooltip.min.js,js/jquery.dltoggle.min.js,js/funny-stuff.js"></script>

Combine fügt nun die einzelnen Dateien zu einer Datei zusammen, so das effektiv nur eine Datei geladen werden muss, welche zusätzlich noch komprimiert wird. Combine entfernt unter anderem alle Leerräume, wie man es z.B. von der jQuery-minified her kennt. Keine Leerzeichen, keine Leerzeilen.

Der große Vorteil liegt darin, dass die Originaldateien nicht angerührt werden. So kann man einzelne Dateien immer noch problemlos ändern oder updaten.

Das ganze funktioniert auch mit CSS Dateien!

Diese Woche sollte ich für ein Projekt einen Datei-Upload realisieren. Eine Anforderung war, dass während dem Upload ein Statusbalken erscheint, möglichst mit Dateigröße und dem Fortschritt in Prozent.

Da man ja nicht immer das Rad neu erfinden muss, suchte ich nach einer bestehenden Lösung und fand jQuery Uploadify. Das mitgelieferte Beispiel von PHP auf ColdFusion zu portieren war kein großes Problem. Einfache Uploads funktionierten auf anhieb.

Allerdings sollten nach dem Upload einige Dateiinformationen in der Session gespeichert werden. Also habe ich innerhalb der Session ein neues Struct angelegt und wollte dieses befüllen. Auf der Folgeseite habe ich also mit <cfdump> die Session ausgegeben. Doch was ist das? Das Struct war leer! Es existeierte aber eine Session, cftoken und cfid waren vorhanden. Da ich eine in der Session gespeicherte UUID als Ordnername verwende, sah ich, das dort zwar ein Ordner angelegt wurde, aber unter einer anderen UUID.

Was war also nun passiert. Mein Aufruf der Seite hatte eine Session gestartet. Aber der Upload via Flash hatte eine separate Session gestartet, da Flash die Session nicht übergeben hatte.

Also musste ich Uploadify irgendwie dazu bringen, die Session zu übergeben. Dazu habe ich die Initialisierung des Uploadify Scripts angepasst:

<script type="text/javascript"><!--
$(document).ready(function() {
                  

   $("##uploadify").uploadify({
      'uploader' : 'uploadify/scripts/uploadify.swf',
      'script' : 'uploadify/scripts/uploadify.cfm&cfid=#session.CFID#&cftoken=#session.cftoken#',
      'cancelImg' : 'uploadify/cancel.png',
      'folder' : 'uploads',
      'queueID' : 'fileQueue',
      'buttonText'   :   'Dateien hochladen',
      'fileDesc'   :   'Nur Bilder und PDF',
      'fileExt'   :'*.jpg;*.pdf;*.jpeg;*.jpe;*.tiff;*.tif;*.png',
      'auto' : true,
      'wmode':'transparent',
      'multi' : true

   });
});
// --></script>

Die Dokumentation bietet keine Option, zusätzliche Parameter zu übergeben. Aber wenn wann an einen Parameter weiter mit & anhängt werden diese trotzdem übernommen.

So, nun hatte ich im Quellcode also folgendes Object:

<object id="uploadifyUploader" style="visibility: visible;" width="110" height="30" type="application/x-shockwave-flash" data="uploadify/scripts/uploadify.swf">
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="flashvars" value="uploadifyID=uploadify&pagepath=/&buttonText=Dateien%20hochladen&script=uploadify/scripts/uploadify.cfm&cfid=10759524&cftoken=19289335&folder=uploads&width=110&height=30&wmode=transparent&method=POST&queueSizeLimit=999&simUploadLimit=1&fileDesc=Nur Bilder und PDF&fileExt=*.jpg;*.pdf;*.jpeg;*.jpe;*.tiff;*.tif;*.png&multi=true&auto=true&fileDataName=Filedata&queueID=fileQueue" />
</object>

Jetzt musste ich also Flash nur noch mitteilen, was mit den zusätzlichen Parametern anzustellen ist. Da die FLA-Datei mitgeliefert wird ist das auch kein Problem:

Zeile 338 in der uploadify.fla:

if (param.script.substr(0,1) != '/' && param.script.substr(0,4) != 'http') param.script = param.pagepath + param.script+'?cfid='+param.cfid+'&cftoken='+param.cftoken;

Somit bekommt die uploadify.cfm, welche den eigentlichen Upload regelt, alle benötigten Parameter übergeben.

Es begann alles ganz harmlos: Ich sollte mittels ColdFusion und der Fotolia API eine Bildsuche realisieren. Also hab ich mir die API angeschaut, eigentlich ganz easy.

Mittels ColdFusion wird ein HTTP Request abgesetzt und das Resultat verarbeitet. Auf die genau Vorgehensweise gehe ich hier nicht ein, das sprengt den Rahmen. Kurz gesagt: Ich sende einen XML Request an die API und erhalte einen XML Response, den ich mit einer CFC in ColdFusion Daten (Array/Structure) umwandel. Die xmlrpc.cfc findet man übrigens innerhalb des BlogCFC Pakets.

Und hier lag das Problem! Nach dem parsen durch die CFC waren alle Umlaute verhagelt. Also ging es an die Fehlersuche. Das Ergebnis lautet, xmlparse() ist schuld. Aber warum? Das wusste ich auch nicht, da es keinen Sinn ergab, schliesslich sind alle Daten UTF-8 kodiert.

Tests ergaben dann: Parse ich das zurückgelieferte XML direkt mit xmlparse(), gehen die Umlaute verloren. Speicher ich das XML mit cffile, lade es anschliessend erneut mit cffile mit encoding=utf-8 in eine Variable und parse dann die Variable ist alles in Butter. Aber das kann ja nicht Sinn der Übung sein. Und im Produktiv-Einsatz möchte ich auch nicht bei jedem Aufruf eine XML schreiben/lesen, das geht auf die Performance.

Also fragte ich Raymond Camden, den ColdFusion Jedi Master, um Hilfe. Nach mehreren Versuchen kam er zum gleichen Schluss wie ich auch: Ein Bug in xmlparse() es wohl ist.

Ich hatte mich bereits damit abgefunden und mich mit der cffile Lösung arrangiert. Bis ColdFusion 9 als Final Release erschien und ich meine Beta deinstallierte. Da fiel mir im ColdFusion Administrator unter "System Information" ein Setting auf:
Java File Encoding | Mac Roman

Eine kurze Suche bei Google führte zur Lösung: Unter "JAVA and JVM" gibt es ein Feld "JVM Arguments", welches schon diverse Argumente enthält. Dort fügt man "-Dfile.encoding=UTF-8" an und startet den Server neu. That's all, folks!

Für ColdFusion gibt es etliche Tutorials in denen das Umschreiben von URLs beschrieben wird. Jedoch immer mittels CFML. Dabei kann der Apache das viel einfacher:

Options -Multiviews

RewriteEngine On

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteCond %{REQUEST_FILENAME} !-l

RewriteRule ^([a-zA-Z0-9-_]+)   index.cfm?site=$1   [QSA]

What the hell?

Der Reihe nach:

Options -Multiviews
Wenn Multiviews aktiviert ist und ein Request auf index.html erfolgt, index.html aber nicht existiert, wird eine Suche in Gang gesetzt. Findet der Apache z.B. eine index.php oder index.css, wird diese ausgeliefert. Keine gute Idee und für unser Vorhaben hinderlich.

RewriteEngine on
Die RewriteEngine, die unsere URLs umschreibt, muss erst mal aktiviert werden.

RewriteCond
%{REQUEST_FILENAME} !-f
Der Pfad in der URL verweist nicht auf eine existierende Datei

%{REQUEST_FILENAME} !-d
Der Pfad in der URL verweist nicht auf einen existierenden Ordner

%{REQUEST_FILENAME} !-l
Der Pfad in der URL verweist nicht auf einen symbolischen Link

RewriteRule
RewriteRule ^([a-zA-Z0-9-_]+) index.cfm?site=$1 [QSA]
Alle Buchstaben, Zahlen, sowie die Zeichen – und _ werden als Variable an index.cfm?site= angehängt.

Das [QSA] bewirkt, das weitere Parameter mit Übergeben werden können.

Aus www.example.com/fotos/ wird intern www.example.com/index.cfm?site=fotos.

Weitere Parameter können per URL übergeben werden. Aus www.example.com/fotos/?jahr=2009 wird dann www.example.com/index.cfm?site=fotos&jahr=2009