The format of the data returned from CFJSON wasn’t working right with Spry. I had to tell CFJSON to return it’s data in "array" format. This gave me data that looked like so (and by the way, this is borrowed from the Spry docs that I’ll be linking to in a moment):

{
"data":
[
{ "firstname": "John", "lastname": "Smith", "id": "3001" },
{ "firstname": "Jane", "lastname": "Doe", "id": "4532" },
{ "firstname": "Ann", "lastname": "Hunt", "id": "5462" }
]
}

Turns out though – that Spry had built in support for the default way that CFJSON returned cfqueries. Why? The default way CFJSON returns queries is actually even smaller. Consider this version:

{
"data":
{
"firstname": [ "John", "Jane", "Ann" ],
"lastname": [ "Smith", "Doe", "Hunt" ]
"id": [ "3001", "4532", "5462" ]
}
}

Notice that the main change is the columns are not repeated. In order for Spry to work with this form, I simply had to add a new attribute to my JSONDataSet creation: 

var dsIssues = new
Spry.Data.JSONDataSet
("issuesxml.cfm?id=#p.getID()#&stupid=#rand("SHA1PRNG")#",
{path:"data",pathIsObjectOfArrays: true});

Note specifically the pathIsObjectOfArray attribute.

Ok – so why is this a big deal? Well as I mentioned in the last post, I had hoped the savings in size would be a bit better. For my 300 issue project I went from 130k to 90k. Guess what the size was for this alternate version? 40k. Now that is a nice savings.

For more information on the options concerning JSON datasets in Spry, see this page. Thanks go to Kin Blas of Adobe for pointing this out to me. (And Lighthouse Pro users will see this in the zip later today.)

Comment

I was asked to provide a bit more documentation so I thought I’d show a slightly more detailed example.

First lets start with a very simple form:

<form>
number one: <input type="text" name="one" id="one"><br>
number two: <input type="text" name="two" id="two"><br>
</form>

This form has two simple text fields named one and two. I want to use Spry to send the values of these two fields to the server. First lets add a simple button:

<input type="button" value="Add" onClick="doAddPost()">

This simply fires off a JavaScript function. I’m going to break the function up and explain each and every line to make it as clear as possible. First, start the function.

function doAddPost() {

We need to know where we will be posting the form, so next I define the URL:

var url = "moon.cfm";

Now I need to grab the values I want to post. Normally with a submit button you don’t have to worry about this. The browser simply sends all the form fields. In this case though I have to specify the fields manually. First I’ll grab the value of the form field, one, using the Spry/Prototype $() shortcut:

var one = $("one").value;

Then I’ll grab the value from the second form field:

var two = $("two").value;

The form post data must be sent like a query string: foo1=value1&foo2=value2. Again, I have to do this by hand:

var formData = 'one='+one+'&two='+two;

Next I encode any values in the string, like spaces or other special characters:

formData = encodeURI(formData);

So the last thing we do is run the Spry code that will handle the form post. I talked about this more in the last post so I won’t spend a lot of time on it.

Spry.Utils.loadURL(‘POST’, url, true, resFunc, {postData: formData, headers: {“Content-Type”: “application/x-www-form-urlencoded; charset=UTF-8″}});

The first argument defines the type of request (GET or POST). The second argument is the URL value I defined earlier. The third argument defines if the call is asynchronous or not. The fourth argument defines a function to run with the result of the HTTP call.

Lastly there is a structure of arguments that define the request. Again I have to thank Keith for figuring this out.

So here is the function again all in one code block:

function doAddPost() {
    var url = "moon.cfm";
    var one = $("one").value;
    var two = $("two").value;
    var formData = 'one='+one+'&two='+two;
    formData = encodeURI(formData);
    Spry.Utils.loadURL('POST', url, true, resFunc, {postData: formData, headers: {"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"}});
}

So how do we handle this server side? We have a few options. As I mentioned, the loadURL function lets you define code to run with the result. So whatever the server returned I can work with in JavaScript. This can be either a string or XML or WDDX. To make it easier I’ll just return a simple string:

<cfsetting enablecfoutputonly=true>
<cfparam name="form.one" default="0">
<cfparam name="form.two" default="0">

<cfif isNumeric(form.one) and isNumeric(form.two)>
    <cfoutput>#form.one+form.two#</cfoutput>
<cfelse>
    <cfoutput>0</cfoutput>
</cfif>

Obviously there isn’t anything too complex here, just the addition of two numbers. I take the result and simply output it directly to the client requesting the data. With me so far?

Now let’s return to JavaScript and work with the result. I had specified the a function named resFunc would handle the result. The function is all of 4 lines:

function resFunc(request) {
    var result = request.xhRequest.responseText;
    $("result").innerHTML = "Result was: " + result;
}

Spry automatically passes a collection of data back. The information I’m interested in resides in xhRequest.responseText. Once I have that, I can write out the result in the browser.

So I had mentioned more than once I wanted to make this process a bit simpler. Here is my first draft at it:

function doFormPost(url,formlist,resfunc) {
    var formdata = '';
    var formarray = formlist.split(',');
    for(var i=0; i < formarray.length; i++) {
      formdata+='&'+formarray[i]+'=';
      var fValue = $(formarray[i]).value;
      formdata+=fValue;
    }
    formData = encodeURI(formdata);
    Spry.Utils.loadURL('POST', url, true, resfunc, {postData: formdata, headers: {"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"}});
}

This lets you pass in a url and a list of form fields to post. The third argument is optional. So to do a Spry post you can do this instead of the button and custom function I had before:

<input type="button" value="Add3" onClick="doFormPost('moon.cfm', 'one,two',resFunc)">

As I said though this is just a first draft. Right now it assumes just text fields.

Comments

Tag:

Digg | Reddit | Furl

Bookmark WebProNews:

Raymond Camden, ray@camdenfamily.com
http://ray.camdenfamily.com

Raymond Camden is Vice President of Technology for roundpeg, Inc. A long
time ColdFusion user, Raymond has worked on numerous ColdFusion books
and is the creator of many of the most popular ColdFusion community web
sites. He is an Adobe Community Expert, user group manager, and the
proud father of three little bundles of joy.

Ray, we’re about to use spry on one of our sites but i was wondering what you would recommend to be the max records to return in the XML? We may have 2,000 records returned at a time (in a directory format)?
Do you have any performance tips etc.

When it comes to determining how many rows of data should be returned, you can’t just focus on the number of rows. You must also consider the size of each row. So imagine a set of XML that had one column per row:

<people>
<name>Jack Abbot</name>
<name>Victor Newman</name>
<name>Nick Newman</name>
</people>

In the example above the XML only contains the person’s name. If it contained other information (gender, age, marital status, salary, etc), then the size of the XML dramatically increases with each row.

So the first thing you want to do is get a gut feeling for the size of your rows.

Next you want to figure out how long its taking for the browser to load your XML.

The best tool for that (well, for Firefox users) would be Firebug. It lets you trace AJAX requests.

This includes the URL, the response, and important to you in this post is the time it took to load. If you can’t use Firebug, you should also look at ServiceCapture.

I actually use them both as ServiceCapture is great for monitoring Flash Remoting requests.

One of these days I’m going to get together a simple demo showing how to combine client side paging and server side paging to handle very large data sets in Spry.

Comments

Tag:

Reddit | Furl

Bookmark WebProNews:

Raymond Camden, ray@camdenfamily.com
http://ray.camdenfamily.com

Raymond Camden is Vice President of Technology for roundpeg, Inc. A long
time ColdFusion user, Raymond has worked on numerous ColdFusion books
and is the creator of many of the most popular ColdFusion community web
sites. He is an Adobe Community Expert, user group manager, and the
proud father of three little bundles of joy.

This is a pretty cool feature so I thought I’d whip up another demo so folks can really appreciate how handy this is. The idea is simple: You tell Spry to run code after the data is loaded and simply manipulate the data structure to add the new column. The new column can contain anything you want. This is great if you don’t have control over the XML that your Spry page is using.

Consider an XML document that returns a ColdFusion date:

<cfsetting enablecfoutputonly="true" showdebugoutput="false">

<cfcontent type="text/xml">
<cfoutput><people>
    <person>
       <name>Raymond Camden</name>
       <date>#now()#</date>
    </person>
    <person>
       <name>Jacob Camden</name>
       <date>#now()#</date>
    </person>
</people></cfoutput>

This simple XML file will return two people. The date value for each will be set to the current time. If used as is, the date would look like this:

{ts ’2006-12-27 09:20:35′}

Pretty ugly, eh? So lets make it nicer. First lets add an “Observer” to the Spry dataset. This tells Spry to run a function on any type of change in the data set:

data.addObserver(processData);

Now lets look at the processData function:

function processData(notificationType, notifier, thisdata) {
    if (notificationType != "onPostLoad") return;

    for (var i = 0; i < numRows; i++) {
       var row = rows[i];
       row.datepretty = myDateFormat(cfToDate(row.date));
    }
}

First note that we check the event type with the notificationType variable. (I based my function on the Adobe sample, so thanks go to them.) We get the data and the number of rows and then simply loop over the rows of data.

To add my custom column, I simply set a new value in the row. If I did:

row.goober = "foo";

Then the dataset would have a new column named goober with a static value of foo.

In my sample code, I wrote two custom functions, cfToDate, and myDateFormat. These are ugly functions that parse the date sent from ColdFusion and handle the formatting of the date. This could probably be done better, but you get the idea. I've included them in the zip (see Download link below).

Anyway - this is a very handy feature! Obviously you want to correct the XML server side if at all possible, but if you can't, this is a great way to handle it.

Comments

Tag:

Reddit | Furl

Bookmark WebProNews:

Raymond Camden, ray@camdenfamily.com
http://ray.camdenfamily.com

Raymond Camden is Vice President of Technology for roundpeg, Inc. A long
time ColdFusion user, Raymond has worked on numerous ColdFusion books
and is the creator of many of the most popular ColdFusion community web
sites. He is an Adobe Community Expert, user group manager, and the
proud father of three little bundles of joy.

It was done using the built in variable ds_EvenOddRow. On execution, this would be replaced with even or odd. So in this example:

<tr spry:repeat="dsEmployees" class="{ds_EvenOddRow}">

<tr spry:repeat="dsEmployees" class="{ds_EvenOddRow}">

You would end up with this when the dataset was generated:

<tr class="even"7>
...
<tr class="odd">

<tr class="even"> ... <tr class="odd">

If you wanted different names, you could prepend or append a value to the class like so:

<tr spry:repeat="dsEmployees" class="myds_{ds_EvenOddRow}">

<tr spry:repeat="dsEmployees" class="myds_{ds_EvenOddRow}">

While this worked, it wasn’t the cleanest method. Spry 1.4 introduces a new spry:even and spry:odd tag. This allows you to specify the class to use in each particular case. Consider this example:

<tr spry:repeat="dsEmployees" spry:even="even" spry:odd="odd">

<tr spry:repeat="dsEmployees" spry:even="even" spry:odd="odd">

This ends up being the exact same as the first example, but is a bit more clear.

One more quick example. If you are repeating over multiple datasets, you can tell spry:even and spry:odd what dataset to check for “oddness”. Adobe provides an example of that.

So to see live examples of all of these, visit:

http://labs.adobe.com/technologies/spry/samples/data_region/EvenOddRowSample.html

Comments

Reddit | Furl

Bookmark WebProNews:

Raymond Camden, ray@camdenfamily.com
http://ray.camdenfamily.com

Raymond Camden is Vice President of Technology for roundpeg, Inc. A long
time ColdFusion user, Raymond has worked on numerous ColdFusion books
and is the creator of many of the most popular ColdFusion community web
sites. He is an Adobe Community Expert, user group manager, and the
proud father of three little bundles of joy.

I’ll have some examples later on.

Some folks are getting the wrong zip. If you do, just give it an hour.

Straight from the changelist here are the updates:

Changes for Spry PreRelease 1.4 – 2006/12/14

Data

Effects

Widgets

Docs

Demos

Samples

Comments

Add to Del.icio.us | Digg | Reddit | Furl

Bookmark WebProNews:

Raymond Camden, ray@camdenfamily.com
http://ray.camdenfamily.com

Raymond Camden is Vice President of Technology for roundpeg, Inc. A long
time ColdFusion user, Raymond has worked on numerous ColdFusion books
and is the creator of many of the most popular ColdFusion community web
sites. He is an Adobe Community Expert, user group manager, and the
proud father of three little bundles of joy.

By collaborating with the development community, Adobe believes they have knocked out a problem facing web developers everywhere. Dreamweaver product manager Kenneth Berger talked with WebProNews ahead of the release of the new version about their approach to making CSS an obedient servant to the webmaster.

First the essentials. Dreamweaver 8 is out now, in upgrade and full versions. The product supports multiple technologies a webmaster may have in place to operate a site. In 2007, Adobe will add Dreamweaver 8 support for Windows Vista, and deliver a Mac Universal Binary.

Berger noted what web developers have known for quite some time. Cross-browser development can be more problematic when it comes to CSS. This poses some time wasting showstoppers as developers try to shift from working in table-based layouts to ones based on CSS properties.

During the MAX 2006 conference in October, Adobe provided a sneak peek at CSS Advisor, which will be a centralized destination for browser compatibility issues. Finding solutions for them has been difficult, but an approach that will be boosted by Dreamweaver’s user community should change this.

Berger demonstrated how CSS Advisor will operate. When a cross-browser issue crops up, the developer will see Dreamweaver auto-detect it, and show a link from the problem to the CSS Advisor site.

CSS Advisor will be community-driven, and Berger described it as having features similar to popular social media sites. User contributions will fill in the repository of CSS-related issues and fixes. That content can be tagged for more efficient discovery.

As developers rank the solutions presented for a given issue, CSS Advisor will display the highest-ranked one prominently on the page concerning the problem. Over time CSS Advisor should become more comprehensive, which should lead to significant time savings while troubleshooting CSS.

Berger also highlighted another technology from Adobe, the Spry Framework for Ajax 1.5. Along with Dreamweaver 8, Adobe Spry addresses what the company sees as a need in the marketplace for an Ajax framework to be oriented toward the non-technical designer and copywriter-types of people.

Visual effects can be dropped into a page from Spry. The effects are controlled by CSS, while Spry defines the behavior of the effect. Berger said Spry provides a cleaner, more understandable code than other options would.

Spry also contains a complete set of validation widgets. These serve to provide a more secure web application when used. Since many problems in web applications in the past have proven exploitable through the injection of unvalidated code, use of the validation widgets should help limit the scope of those attacks.

Since the Spry Framework is client-side focused, there will not be a need to employ a server technology to support it. Spry handles the data, widgets, and effects included with a web application.

Dreamweaver 8 and Adobe Spry should find their way into plenty of web development toolboxes over the next year. Since Dreamweaver is so heavily used by developers, we expect to see much more Ajax adoption reaching the Web as those developers try out Spry too.

—
Tag:

Add to Del.icio.us | Digg | Reddit | Furl

Bookmark WebProNews:

David Utter is a staff writer for WebProNews covering technology and business.

Last night instead of my normal useless browsing, I worked up a quick set of tags that will make it easier for folks to use Spry widgets. So for example, to create tabs (with the not yet officially released Spry Tab code), you can do this:

<cf_tab id="demo0">

</cf_tab>

Accordions are much more difficult:

<cf_accordion id="demo1">

</cf_accordion>

The custom tags are smart enough to know when they have been run once in the request and will not re-include the JavaScript files more than once. Before I tell you where to download this – please note that this is very rough code. It doesn’t have documentation (bah, docs are for wimps!) or proper error handling, or even strong testing. It really is just something I was playing with.

This all stemmed from a long talk I had with Charlie Arehart about CF and Spry and he will be working on this project as well. The project is being hosted – where else – at RIAForge: http://cfspry.riaforge.org

I also have some ideas for how to work with Spry datasets as well – but that is still way in the planning stages.

p.s. I said the code was a bit ugly – and it is – but check out how the custom tags are written, especially page.cfm. Notice how it checks for the parent and based on this can check to see if it properly wrapped. Custom tags are cool. Don’t let them CFC folks fool ya!

Comments

Tag:

Add to Del.icio.us | Digg | Reddit | Furl

Bookmark WebProNews:

Raymond Camden, ray@camdenfamily.com
http://ray.camdenfamily.com

Raymond Camden is Vice President of Technology for roundpeg, Inc. A long
time ColdFusion user, Raymond has worked on numerous ColdFusion books
and is the creator of many of the most popular ColdFusion community web
sites. He is an Adobe Community Expert, user group manager, and the
proud father of three little bundles of joy.

When working with Spry datasets, you have access to both the data in the set (obviously) as well as a set of built-in variables prefixed by ds_. The variables you can use:

• ds_RowID – This is the id of a row in the data set. This id can be used to refer to a specific record in the data set. It does not change even when the data is sorted.
• ds_RowNumber – This is the row number of the “current row” of the data set. Within a loop construct, this number reflects the position of the row currently being evaluated.
• ds_RowNumberPlus1 – This is the same as ds_RowNumber except that the first row starts at index 1 instead of index 0.
• ds_RowCount – This is the number of rows in the data set. If there is a non-destructive filter set on the data set, this is the total number of rows after the filter is applied.
• ds_UnfilteredRowCount – This is the number of rows in the data set before any non-destructive filter is applied.
• ds_CurrentRowID – This is the id of the “current row” of the data set. This value will not change, even when used within a looping construct construct.
• ds_CurrentRowNumber – This is the row number of the “current row” of the data set. This value will not change, even when used within a looping construct.
• ds_SortColumn – This is the name of the column last used for sorting. If the data in the data set has never been sorted, this will output nothing (an empty string).
• ds_SortOrder – This is the current sort order of the data in the data set. This data reference will output the words “ascending”, “descending”, or nothing (an empty string).
• ds_EvenOddRow – This looks at the current value of ds_RowNumber and returns the string “even” or “odd”. This is useful for rendering alternate row colors.

The text above was ripped from: http://labs.adobe.com/technologies/spry/articles/data_set_overview/

I’m thinking of creating a Spry cheat sheet to contain stuff like this and other tips that may be useful for development. If folks have some ideas for what to include, let me know by posting here.

Comments

Tag:

Add to Del.icio.us | Digg | Reddit | Furl

Bookmark WebProNews:

Raymond Camden, ray@camdenfamily.com
http://ray.camdenfamily.com

Raymond Camden is Vice President of Technology for roundpeg, Inc. A long
time ColdFusion user, Raymond has worked on numerous ColdFusion books
and is the creator of many of the most popular ColdFusion community web
sites. He is an Adobe Community Expert, user group manager, and the
proud father of three little bundles of joy.

Today I was helping my friend diagnose some issues with his application and IE and I ran into a new little bug.

This isn’t a Spry issue – but just IE in general.

Imagine this situation: You have a drop down field being populated by Spry. Let’s call it Categories. Whenever you change the category, you use Spry to populate a second drop down of products.

Pretty simple related selects type feature, right?

Turns out in IE, something interesting happens. Whenever I would change the category, the products drop down would be correctly populated – but defaulted to the last item in the drop down.

In FireFox, the first item would be selected.

What’s worse is that in my friend’s demo, he had a detail region tied to the second drop down. It would correctly show the detail for the first item in the drop down, but visually you saw the last item selected.

Once again I went to my buddy Kin Blas of Adobe. Turns out this isn’t a bug really – but a “feature” of IE, where it simply uses the last option as the default if you don’t mark one as the selected item.

Luckily there is a cool little way to fix this in Spry using conditionals. Spry gives you a hook to various bits of information related to the current dataset. These are named ds_Something or another. The following example shows how we can use them.

<div spry:region="categories">
<select spry:repeatchildren="categories" spry:choose="choose" name="category" onChange="categories.setCurrentRow(this.selectedIndex);">
<option spry:when="{ds_RowNumber} == {ds_CurrentRowNumber}" selected="selected">{category}</option>
<option spry:default="default">{category}</option>
</select>
</div>

Of particular note look at the when and default clause on the option tags.

This will apply logic before letting the item be printed when the dataset is applied. Note the use of ds_RowNumber and ds_CurrentRowNumber.

When the dataset is applied, these values will be dynamic and checked as Spry prints out the option tags.

Make sense? If not – let me know.

Comments

Tag:

Add to Del.icio.us | Digg | Yahoo! My Web | Furl

Bookmark WebProNews:

Raymond Camden, ray@camdenfamily.com
http://ray.camdenfamily.com

Raymond Camden is Vice President of Technology for roundpeg, Inc. A long
time ColdFusion user, Raymond has worked on numerous ColdFusion books
and is the creator of many of the most popular ColdFusion community web
sites. He is an Adobe Community Expert, user group manager, and the
proud father of three little bundles of joy.