Artikel - Detailansicht

Icon Aktuelles WDDX in ColdFusion - Javascript

Der Datenaustausch zwischen ColdFusion-Seiten mit WDDX wurde bereits in der WDDX-Einführung gezeigt. Doch mit WDDX kann man (und das ist ja eigentlich auch der Hauptzweck) Daten mit anderen Applikationen austauschen.
Wie man Daten und Strukturen von einem CF-Template nach Javascript-Code portieren kann, soll hier das Thema sein.
Mittels dieser Technologie ist es z.B. möglich, ein von der Datenbank serverseitig geholtes Recordset (mit CFQUERY) an die Javascript-Umgebung weiterzureichen. Die Struktur der Daten bleibt dabei erhalten.

Man muss aber nicht immer nur WDDX nutzen um Daten an Javascript zu liefern. Bei einfachen Variablen reicht oft dieser Code:

  

<cfset count=4>

<!--
  var js_count=<cfoutput>#count#</cfoutput>alert('count='+js_count);
//-->
var js_count = 4;


Einfache Variablen lassen sich so recht gut weiterreichen. Was macht man aber, wenn man komplexere Strukturen wie z.B. Arrays oder Recordsets übergeben will? Dieses Übergabeprinzip würde schnell sehr komplex und unhandlich werden. Auch hier hilft wieder das schon  bekannte CFWDDX-Tag weiter.

Bei der Benutzung von CFWDDX erzeugt ColdFusion automatisch den zur CF-Variable passenden Javascript-Konvertierungscode. Das erzeugte Javascript wird dann im Browser ausgeführt und erstellt dort die Datenstruktur. Hört sich leicht an und ist auch leicht programmiert:

<cfset MyCFArray=ListToArray( "a,b,c,d" )>
<SCRIPT LANGUAGE="JavaScript">
<!--
  <cfwddx action= "CFML2JS" input= "#MyCFArray#"
          toplevelvariable= "MyJSArray" >
  alert(' MyJSArray=' + MyJSArray + ' \n Element an [1]=' +
          MyJSArray[1] + '\n ArrayLänge=' + MyJSArray.length);

//-->
</SCRIPT>

Mit dem Attribut-Wert ACTION="CFML2JS" des CFWDDX-Tags gibt man an, dass man eine ColdFusionvariable in eine Javascriptvariable konvertieren will. Mit dem INPUT-Attribut gibt man die Ausgangsvariable von ColdFusion an und mit TOPLEVELVARIABLE die Javascript-Ergebnisvariable. Dabei muss der Wert für INPUT in # (Hash) eingeschlossen sein, schliesslich übergibt man den Inhalt der ColdFusionvariable, wärend man mit TOPLEVELVARIABLE nur den Variablennamen übergibt. ColdFusion erzeugt die mit TOPLEVELVARIABLE angegebenen Javascriptvariable so, als würde man die Variable direkt mit JS-Code erzeugen.
Damit der Browser den von ColdFusion erzeugten JS-Code auch ausführen kann, muss das CFWDDX-Tag zwischen zwei HTML-Script-Tags gesetzt werden. Die Javascript-Funktion ALERT() gibt das erzeugte JS-Array MyJSArray, das Element mit dem Index 1 und am Schluss die Länge des Arrays aus. Man sieht hier also, dass alle Eigenschaften von MyCFArray in MyJSArray enthalten sind.
Jeder sollte sich unbedingt einmal der erzeugten HTML-Code der ColdFusion-Templates im Browser ansehen!


Jetzt werden sich vieleicht einige fragen, wo sich bei dem Beispiel-Code jetzt eigentlich die WDDX-Technologie verbirgt. Dazu muss man sagen, dass der ACTION-Attributwert ACTION="CFML2JS" eine verkürtzte Schreibweise darstellt und eigentlich zwei Programmschritte beinhaltet, die aber hier für den Programmierer verborgen bleiben. Zuerst wird nämlich aus dem ColdFusion-Datensatz ein normales WDDX-Packet erzeugt und dann mit aus dem WDDX-Packet der Javascript-Code kreiert. Der folgende Code zeigt das ganze deutlicher, indem die beiden Schritte einzeln aufgeführt sind.

<cfset MyCFArray=ListToArray( "a,b,c,d" )>
<cfwddx action= "CFML2WDDX" input= "#MyCFArray#"
        output=
"MyWDDXPacket" >
<!--ausgabe des packets zur ansicht--->
<cfoutput>
  #HTMLEditFormat(MyWDDXPacket)#
</cfoutput>


<SCRIPT LANGUAGE="JavaScript">
<!--
  <!--- von CF erzeugter JS-Code --->
  <cfwddx action= "WDDX2JS" input= "#MyWDDXPacket#"
          toplevelvariable=
"MyJSArray" >
  <!--- von CF erzeugter JS-Code --->
  alert(MyJSArray);
//-->
</SCRIPT>

Hier wird zuerst das WDDX-Packet MyWDDXPacket erzeugt und dieses wird dann mit einem zweiten CFWDDX-Tag in Javascript umgewandelt. Das Attribut-Wert ACTION="CFML2JS" Stellt also lediglich eine verkürtzte Schreibweise dar.

Der von ColdFusion erzeugte JS-Code lässt sich aber, anstatt ihn gleich direkt in der Seite auszugeben, auch einer Variable zuweisen. Dazu gibt man im CFWDDX-Tag zusätzlich das Attribut OUTPUT an und weist diesem einen ColdFusion-Variablennamen zu. Dort wird dann der komplette Javascript-Code gespeichert. Man kann (und muss) ihn dann an geeigneter Stelle in der Seite selbst ausgeben.

<cfset MyCFArray=ListToArray( "a,b,c,d" )>
<cfwddx action=
"CFML2JS"
        input= "#MyCFArray#"
        output= "JSCode"
        toplevelvariable= "MyJSArray" >

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
<!---ausgabe des JS-codes--->
  <cfoutput>  
      #JSCode#
  </cfoutput>
  alert(MyJSArray);
//--> </SCRIPT>

Die ColdFusion-Variable JSCode bekommt vom CFWDDX-Tag den Javascript-Code zur Erzeugung der Javascript-Strukturen übergeben und man muss diese selbst in die Seite einbauen. Auch hier muss der JS-Code zwischen zwei SCRIPT-Tags eingebaut werden.



Steffen Goldfuss steffen@goldfuss.de - 01.11.2000

Zurück


Das deutsche ColdFusion-Forum cfml.de ist das Portal für Einsteiger und Experten zum Thema ColdFusion und der ColdFusion Markup Language (CFML).

© 2017 Webdesign & Hosting: CHC ONLINE Kassel | SOLVA Content-Management-System CMS
Urlaub-Angebote.de - Urlaub mit Bestpreis-Garantie buchen