Spry - First Experience

Posted At : July 14, 2006 9:42 AM | Posted By : Robert
Related Categories: Javascript / Ajax, ColdFusion

Got a neat little note tracking system to develop and thought that the spry framework could be used to do the view layer. So here is my First Spry experience.

What I am doing is fairly basic, pretty much recieving a recordset out of a cfc into a proxy page then displaying a dynamic table through a custom tag.

This example goes through the process from a query to displaying the table in a custom tag.

So i changed my getNotes() function to returntype="xml" and by using Ray's toxml() i did the following to my recordset

<cfset toXML = createObject("component", "****.cfc.utility")>
<cfset xmlQuery = toXML.queryToXML(qGetNote, "notes", "note")>
<cfreturn xmlQuery />

I now set up a proxy page to hit the cfc and return the xml object

<cfsetting showdebugoutput="false">
<cfscript>
oNM = createObject("component","***.cfc.notemanager");
   xmlNotes = oNM.getNotes(url.itemId, url.typeid);
</cfscript>
<cfcontent reset="true" type="text/xml"><cfoutput>#xmlNotes#</cfoutput>

And after calling the spry js i then called my proxy page.

<script type="text/javascript" src="/assets/spryFramework/js/xpath.js"></script>
<script type="text/javascript" src="/assets/spryFramework/js/SpryData.js"></script>
<script type="text/javascript">
var dsNotes = new Spry.Data.XMLDataSet("noteProxy.cfm?ItemId=#attributes.itemId#&typeid=#attributes.typeId#", "notes/note");
</script>

Now that the spry dataset was in all i had to do was display it.

This is the really neat part of spry

create a spry region to display your data

<div spry:region="dsNotes">
// table goes here </div>

Then create your table

<table border="1" id="note">
   <tr>
      <th scope="col">datecreated</th>
      <th scope="col">Description</th>
      <th scope="col">Method</th>
      <th scope="col">User</th>
      

   </tr>

On columns that you want to be able to sort add the following

onclick="dsNotes.sort('DTCREATED');
// for example <th scope="col" onclick="dsNotes.sort('USERID');">User</th>

Then set up your spry results

<tr>
<td>{DTCREATED}</td>
<td>{NOTEDESCRIPTION}</td>
<td>{METHOD}</td>
<td>{USERID}</td>
</tr>

this should return the first record and very much like coldfusion all you need to do is define where you want to loop like this

<tr spry:repeat="dsNotes">
      <td>{DTCREATED}</td>
      <td>{NOTEDESCRIPTION}</td>
      <td>{METHOD}</td>
      <td>{USERID}</td>
   </tr>

TIP - its case senstive!!! and rays toxml function makes everything Upper Case.

So now when i want to include my note table all i have to do is include the following at the bottom of any item page and up comes a spry table

<ui:notes itemid="#request.input.id#" typeid="1" username="#ou.loginname#"/>

Resources I used to getting it working inside our system were

  • Dynamic Table Tutorial on Adobe Labs
  • Ray's toXML() function and widsom
  • Large Amount of Spry Resource

    • Comments (3) | Print | Download | del.icio.us | Linking Blogs | 1803 Views
    Comments
    [Add Comment]
    kisy's Gravatar Got a neat little note tracking system to develop and thought that the spry framework http://www.batteryfast.com/clevo/m375.htm clevo m375 battery,
    http://www.batteryfast.com/clevo/m360.htm clevo m360 battery,
    http://www.batteryfast.com/clevo/dr202.htm clevo dr202 battery,
    http://www.batteryfast.com/clevo/me202bb.htm clevo me202bb battery,
    http://www.batteryfast.com/fujitsu/fpcbp64.htm fujitsu fpcbp64 battery,
    http://www.batteryfast.com/fujitsu/s2000.htm fujitsu s2000 battery,
    http://www.batteryfast.com/fujitsu/fu-cbp109.htm fujitsu fu-cbp109 battery,
    http://www.batteryfast.com/fujitsu/s7011.htm fujitsu s7011 battery,
    http://www.batteryfast.com/fujitsu/fpcbp49.htm fujitsu fpcbp49 battery,

    http://www.batteryfast.com/fujitsu/fmvlbp103.htm fujitsu fmvlbp103 battery,
    http://www.batteryfast.com/fujitsu/p1000.htm fujitsu p1000 battery,
    http://www.batteryfast.com/fujitsu/p2000.htm fujitsu p2000 battery,
    http://www.batteryfast.com/uniwill/255-3s4400-g1l1... uniwill 255-3s4400-g1l1 battery,
    http://www.batteryfast.com/uniwill/un255.htm uniwill un255 battery,
    http://www.batteryfast.com/uniwill/un258.htm uniwill un258 battery,
    http://www.batteryfast.com/uniwill/258-4s4400-s1p1... uniwill 258-4s4400-s1p1 battery,
    http://www.batteryfast.com/uniwill/755-4s4000-s1p1... uniwill 755-4s4000-s1p1 battery,
    http://www.batteryfast.com/uniwill/un755.htm uniwill un755 battery,

    http://www.batteryfast.com/uniwill/bat-243s1.htm uniwill bat-243s1 battery,
    http://www.batteryfast.com/uniwill/un243.htm uniwill un243 battery,
    http://www.batteryfast.com/uniwill/un223.htm uniwill un223 battery,
    http://www.batteryfast.com/uniwill/223-3s4000-f1p1... uniwill 223-3s4000-f1p1 battery,
    http://www.batteryfast.com/apple/a1175.htm apple a1175 battery,
    http://www.batteryfast.com/asus/m3000-silver.htm asus m3000 silver battery,
    http://www.batteryfast.com/asus/m3n-silver.htm asus m3n silver battery,
    http://www.batteryfast.com/asus/a42-m6-silver.htm asus a42-m6 silver battery,
    http://www.batteryfast.com/asus/m6000-silver.htm asus m6000 silver battery,
    could be used to do the view layer. So here is my First Spry experience.
    # Posted By kisy | 9/26/08 3:04 PM
    warhammer gold's Gravatar Comments: Spry - First Experience
    # Posted By warhammer gold | 10/9/08 7:48 PM
    [Add Comment]