The 91st Indianapolis 500

Wow! Ok, I'm not a big race fan. Races have two real moments of big excitement, the start and the finish. Other than the occasional wreck it's a bunch of cars going around in circles. Well, that's how I thought.

[More]

My First ExtJS DataGrid Pt 6: The Grid

Alright, rolling right along. Last tutorial (see the bottom of this post for a complete listing) we covered the initial setup of our ColumnModel, which is telling our DataGrid what the basic layout of our grid columns will be and to which fields of our DataStore each column will be mapped to. Now it's time to actually instantiate our grid.

So, the first thing we have to do is create our Grid object and tell it which html element will be our grid within our page. Basically we'll tell the function the ID of the div element, what DataStore object to use, and which ColumnModel object to use.

view plain print about
1// create the editor grid
2var grid = new Ext.grid.Grid('topic-grid', {
3 ds: ds,
4 cm: cm
5 });

This is it in it's most basic form. We're going to stay away from any fancy stuff for now, and get to selection models and stuff in a later post. Let's add to it a little bit by stating that the grid may be resizable.

view plain print about
1// make the grid resizable, do before render for better performance
2var rz = new Ext.Resizable('topic-grid', {
3    wrap:true,
4    minHeight:100,
5    pinned:true,
6    handles: 's'
7});
8rz.on('resize', grid.autoSize, grid);

That will make the grid resizable, and should be declared prior to rendering the grid. Rendering the grid is our next step, and way simple.

view plain print about
1// render it
2grid.render();

Can't get much easier than that. Going back to the resizable for a second, don't ask, I don't know. Easiest one for me to figure on sight is the minHeight attribute, but I haven't reviewed the API enough to know what all is going on. If you figure it out before I do then leave a comment. Next we'll need to add the paging tool bar to the footer. We'll get the footer, then add the paging toolbar.

view plain print about
1var gridFoot = grid.getView().getFooterPanel(true);
2
3// add a paging toolbar to the grid's footer
4var paging = new Ext.PagingToolbar(gridFoot, ds, {
5 pageSize: 25,
6 displayInfo: true,
7 displayMsg: 'Displaying users {0} - {1} of {2}',
8 emptyMsg: "No users to display"
9});

Notice the arguments of the PagingToolbar() function, the footer object, the DataStore object, and a JSON object with attributes of the pageSize (number of records), whether to display data set info, the message of the count, and a message to display should no records be returned.

The final step here is to load the DataStore. Once this is done you will have a complete, basic DataGrid for display.

view plain print about
1// trigger the data store load
2ds.load({params:{start: 0, limit: 25}});

Notice here the 'params'. These are name/value pairs that are passed, via post, whenever you request the next page of your data, with these values being your initial request (starting at row 0, returning 25 records). If you go back and look at your pagingService.cfm (included in the download) you'll see where these values are used.

So, that's the end of this post. You now have a basic DataGrid. In our next tutorial we'll start to style some things, and show you how to implement a custom 'renderer' for a specific column's data.

Where is Cutter?

Well, It's good to be back (so to speak). I had a nice bout of the stomach flu, and it was no fun. But now I'm back in the saddle and ready to go. I should post the next phase of my EXT UI DataGrid tutorial within the next few days, and I hope to get back to my Creating The View tutorial very shortly (next stop: Mach II).

This very minute, though, I'm sitting in the Nashville International Airport preparing to fly out for the weekend. My stepfather has been asking me, for half a decade now, to join him for the Indy 500. No reason to say no this year, so I'm waiting on a flight to Charlotte, North Carolina where I'll catch a connection to Dayton, Ohio. We're going to check out a few things in John's hometown before making the trip in Sunday for the race. I personally have never been a huge racing fan, but the Indy 500 is an event. It would be kind of like turning down a trip to the Kentucky Derby, the World Series, or the Super Bowl. So, I'm in for the new experience and little time with my step dad.

Which is interesting in regards to my DataGrid tutorial. IndyCar.com is highlighted on the home page of Jack Slocum's Ext JS UI library as a site that uses the javascript components extensively, sporting a cool AJAXified interface that provides real time racing data during Indy races.

So, I'll try to knock out the next installment of my DataGrid tutorial while I wait around in airports. See if I can get this train moving again. I'll also fill you in on the fun of the weekend as I go along.

Scorpio Tour Nashville: Final Wrap-up

First, I want to thank Ben for an outstanding presentation last night. 49 attendees from three different states, from beginners to long time gurus, and everyone walked away highly impressed with the upcoming Scorpio release. (Side Note: Of all of the companies represented it looks like EVERYBODY is hiring).

Ben started off with a minor history of CF. The came the disclaimer: stuff changes. Features shown might change, or not end up in the final version. At the end of it all we asked him what he thought might not make it in and he said, in his current opinion, there was nothing shown that he didn't think would make it to final release.

What's it all about? In past releases there were typically single points of focus as to why an upgrade was compelling. Scorpio? No single highlight: Developer Productivity, Integration, and Improved Management and Administration.

Developer Productivity:

  • CFImage (50 + functions) VERY COOL! Write direct to the browser (I never did that with Alagad). I asked about the underpinnings and image quality concerns. CFImage is built on JAI, but extended by Adobe extensively where needed. Much better quality.
  • AJAX - JSON (and serialization), Controls, and wizard.
    • autosuggest, populated by a simple list or via an AJAX call back to the server.
    • datefield
    • richtexteditor - Configurable, to a point. This uses FCKEditor. Works in all visual browsers, with the exception of Safari (which they are working to correct). Does not have the file upload stuff. It's been turned off be default (for obvious security reasons) and would require you to edit the server side files. Or, you roll your own (better choice). You can control some base menus, and if you have access you can define your own menus by editing/extending the underlying js.
    • DataGrid (more in a minute)
    • CFWindow - modal type windows
    • cflayout
    • cflayoutarea
    • related selects - make selects related as many levels as you need, or related to an input box, or related to...
    • cfmenu/cfmenuitem - create heirarchal menus simply and easily
    • cfajaxproxy? Set up proxies for ajax calls
    • cfajaximport - I asked about this. Ben skirted it like we didn't see it. Apparently Dave Schuck and the Scots UG noticed it as well (Google the tag)
    • New AJAX wizards plugin for Eclipse (query builder wizard included in one example)
    • Debugger for AJAX calls (log4javascript?) - turn it on in admin, append a querystring var and it's there
    Showed a nice sample app from Ray that uses AJAX to pull traffic problem data, with map, from a zip code. 43 lines of code. I don't think Ray had to write much html in it at all, most generated by the various cf tags. Every 'AJAX' tag that I saw, except the text editor and maybe the autosuggest, was rendered by Slocum's Ext UI library, and there will be API's to show you how to extend the components, as well as the ability to define custom styles.
  • Use cfloop file="" to loop a file line by line - java line reader under the hood
  • File I/O functions (so file i/o in cfscript)
  • CFThread - Run, Join, Sleep, Terminate. Threads expose metadata - elapsedtime, error, name, output, priority, starttime, status
  • CFDocument Improvements
    • Bookmarks
    • Bookmark Heirarchies
    • Create custom report templates
    • CSS styling
    • Conditional formatting
    • Now supports multiple queries in a single report
    • Output to HTML and XML
  • CFC interfaces and IsInstanceOf()
  • ArgumentsCollection (asking engineers about inconsistent naming)
  • Implicit array and structure creation (as in js or as)
  • JavaScript style operator support in all CFML expressions and CFScript - certain boolean operands only available in script (<=,>=, etc.)
  • Caching of stored procs, caching with cfqueryparam
  • CFFTP supports SFTP
  • CFC's now properly serialize objects, allowing true replication across a cluster
  • Eclipse Debugger Plugin - Step through, line-by-line, from breakpoints (requires RDS access, supports multiple debugging 'sessions', turn on through admin[requires restart, and can specify specific port in admin])
  • Extensions for DW (no debugger)and plugins for Eclipse, according to what makes sense by the 'types' of developers using these tools

Integration:

  • .NET integration <cfobject> CreateObject support invocation of .NET assemblies within the CLR
    • Can access local and remote assemblies
    • Can be used even on nonwindows installations as a local object
    • Example connection to a native .NET class (systemio within the .NET framework itself) that gives the drive info of the machine (remote machine)
  • CFExchange - (he's running Exchange on a Win 2k3 server in VMWare on his laptop for the demo)
    • cfexchangeconnection
    • cfexchangecalendar
    • cfexchangeemail
    • cfexchangecontact
    • cfexchangetask
    • cfexchangefilter
    Shows example, with code, that makes the connection, pulls calendar entries according to a filter, displays the data, then fills out a form that creates a new calendar entry that he shows us after the fact in Exchange's Web Outlook. I can tell you from personal experience that writing something like this in ASP takes a script longer than my arm. His script was about 10 lines of code.
  • CFPresentation - Adobe Connect style on-the-fly and up-to-date slide presentations (swf output)
    • cfpresenter
    • cfpresentationslide - any old cfml in the tag
  • Flash Media Server bi-directional connection between connected Flash clients (not enough info here)
  • CFFeed for RSS and ATOM consumption
  • CFPDF
    • metadata
    • merge pages
    • extract pages
    • encrypt
    • thumbnail of pages
    • flatten
    • protect
    • execute DDX instruction sets
    DDX sounds extremely cool, giving developer extremely granular degree of control
  • CFPDFForm - Will populate PDF forms (AcroForms and XML based) with CF data, and extract data from a filled PDF form
    • CFPDFFormparam to pass values to form
    • CFPDFSubform used to manipulate nested forms
    • CAN NOT create PDF forms (option A & B Ben!)

Management and Administration:

  • Server Monitor
    • Server snapshots
    • Define alerts
    • Track the effectiveness of query caching
    • Longest running queries (and their statements)
    • memory usage per
      • page
      • variables
      • queries
      • application
      • and much more...
    An Extreme amount of available information, with the ability to kill processes at the thread level. Flex based front end, with an API that will be available to tap into (allowing guys like SeeFusion and FusionReactor to build some really outstanding stuff)
  • Admin and RDS User administration, with roles based permissions. Predefined roles (no, you can't add any), with even finer, more granular control at the sandbox level
  • Per application mappings, customtagpaths, logging, and debug settings (set in your Application.cfc)
  • JDK 1.6
  • Virtualization support
  • Licensing based on physical socket (so if you have two quad procs, and several virtual machine setups of Scorpio, your licensing for the server is for the two sockets, regardless of the number of implementations on the machine)
  • 64 bit support on Solaris, with other platforms to be supported in the future (but no time line given)
  • Special pricing options for hosting companies to make CF competitive in that space (host charging you more for CF over PHP or .NET is price gouging you)
  • Can (through admin) lock down the number of concurrent process per feature, like only 5 concurrent connections making PDF through CFPDF at the same time, etc.

Incredible stuff, with tons to get excited about, and more to come. Some of us want it now. Some of us want more "Java flavored Scorpio M & M's" All I can say is that Scorpio definitely has more cowbell. We are cookin' with Crisco baby, and we're servin' it hot! Ben told us that some benchmarks, on certain features, are clocking at 4 to 5 times faster. This is partly due to the JVM advancements within 1.6, and partly due to some reworking by the Adobe engineering team. A lot of attention was given to CFImage to extend the capabilities of the Java Advanced Imaging library to attempt to give things the quality you come to expect from Adobe's imaging efforts. And it's still scratching the surface as to all of the new features.

It's a great time to be a ColdFusion programmer!

Scorpio Tour Nashville: Quick Check In

Just a quick check in. Ben's presentation was 3 hours long, chock full of Scorpio goodness! I have a ton of notes, with quick outlines of all of the features discussed. There were tons of great questions from around the room, and Ben had answers for nearly everything. Tomorrow I'll wrap all of it together in a new post.

[More]

My First ExtJS DataGrid Pt 5: The ColumnModel

OK, we're winding down to the end of this tutorial, with only a few key components left. Today we cover the ColumnModel, which is how we manage the initial layout of our ExtJS DataGrid. We've already covered initial setup, our paging query, and defined out DataStore (see related entry links at the bottom of the post).

First things first, let's instantiate the ColumnModel

view plain print about
1var cm = new Ext.grid.ColumnModel([{
2    // cm is our ColumnModel object
3
4}]);

Next we'll define the layout of the first column in our grid

view plain print about
1var cm = new Ext.grid.ColumnModel([{
2    id: 'fname',
3    header: "First Name",
4    dataIndex: 'vcFirstName',
5    width: 120
6 }
7}]);

Alright, pretty basic stuff here. We've placed an 'id' on this column. This allows you to later reference the column specifically for styling. We didn't really mark this one for a particular reason, we just did it to explain. Next we have the 'header', which is the text that appears in your column header at the top of your DataGrid. This is then followed by the 'dataIndex' to define the data column it is mapped to within your DataStore. Lastly we have the 'width' attribute, which speaks for itself.

There are several other possible attributes that are available to you here, most of which are fairly easy to grab from the ExtJS API. We'll cover a few more in our next tutorial, but for now we'll just complete the layout of the ColumnModel.

view plain print about
1var cm = new Ext.grid.ColumnModel([{
2    id: 'fname',
3    header: "First Name",
4    dataIndex: 'vcFirstName',
5    width: 120
6 },{
7    header: "Last Name",
8    dataIndex: 'vcLastName',
9    width: 120
10    },{
11    header: "Is Admin",
12    dataIndex: 'bIsAdministrator',
13    width: 40
14    },{
15    header: "Is Active",
16    dataIndex: 'bIsActive',
17    width: 40
18    },{
19    id: 'last',
20    header: "Last Login",
21    dataIndex: 'tsDateLastLogin',
22    width: 150
23}]);
24// by default columns are sortable
25
26cm.defaultSortable = true;

The order you work in will be reflected in your final initial layout. Each column definition is contained in curly braces, separated by commas. Each attribute is also comma delimited, with the attribute name being un-quoted, while their values are quoted if string values and not if numeric. Also notice the double quotes around the 'header' values, but the single quotes around the others. I don't know if this is intentional, and haven't really tested it, but this is the way it was in all of the example files so I thought it best to stick with the convention. The last thing we did here was set a directive on the ColumnModel to state the the columns will be sortable by default.

Alright, now you have defined your ColumnModel. A few steps left to go just yet, like the grid itself, custom renderers, styles, and other things to give it a little more cowbell. We'll begin wrapping those up in our next edition. For those coming to the Nashville CFUG Scorpio Tour presentation tomorrow night I hope you'll flag me down and say high.

Scorpio Tour: Nashville CFUG

Tomorrow (May 9th) is the big day! Ben Forta will begin his Scorpio presentation at 7PM at Dave Ramsey's Financial Peace Plaza (address below). The buzz just keeps getting bigger, and the signups have been coming in. We'll be raffling off a license for Scorpio, to be given after release, and a copy of Flex Builder with Charting, but you must be registered and in attendance to win. But, there's more!

The Lampo Group (Dave Ramsey) will be supplying some great food from Lenny's. And, to top it all off, everyone will receive a copy of Dave's latest book "The Total Money Makeover." Plus all of the great Scorpio swag!

BTW, we did mention that Ben is speaking about Scorpio, right! The coolest, slickest, fastest, most feature rich version of the ColdFusion server ever released! The list of new features continues to grow, with something new being announced at every stop so far. What's in store for Nashville? You,ll have to come and see! If you haven't already the register today!

Date/Time
Wednesday, 9 May, 2007, 7PM Central Daylight Saving Time

Location
Dave Ramsey's Financial Peace Plaza
1749 Mallory Lane
Brentwood, TN 37067

My First ExtJS DataGrid Pt 4: The Data Store

So, up until now we have setup our support files and written our paging query service. Now it's time to begin tying our data to our DataGrid. The Ext library provides you many different ways of pulling in data into the components. We're going to create a data 'Store' using a combination of the HttpProxy (a utility for pulling data from within the same domain) and the XmlReader (for parsing our returned datasets).

A 'Store' is "a client side cache of Ext.data.Record objects which provide input data for widgets." Basically you create this representation of your server side data by defining where it is and what it looks like. We're using the HttpProxy, in this case, because our service script (pagingService.cfm) resides within the same domain as our calling page. And, since we set our service script to return an XML document, we need the XmlReader to 'map' the data that we need.

First we'll setup the basic block

view plain print about
1var ds = new Ext.data.Store({
2
3});

Add in the location of our service script

view plain print about
1var ds = new Ext.data.Store({
2    // load using HTTP
3 proxy: new Ext.data.HttpProxy({url: 'http://cc.mytestserver.loc/jTesting/xmlSqlTest.cfm'}),
4
5});

Then we set up our XML 'reader'

view plain print about
1var ds = new Ext.data.Store({
2    // load using HTTP
3 proxy: new Ext.data.HttpProxy({url: 'http://cc.mytestserver.loc/jTesting/xmlSqlTest.cfm'}),
4
5    // the return will be XML, so lets set up a reader
6 reader: new Ext.data.XmlReader({
7        // records will have an "T4" tag
8        record: 'T4',
9        id: 'ID',
10        totalRecords: "recCount"
11    }, [
12        // set up the fields mapping into the xml doc
13        'vcFirstName', 'vcLastName', 'bIsAdministrator','bIsActive','tsDateLastLogin'
14    ]),
15
16});

Ok, here is where I have to put on the breaks for a minute. You have to understand a little about what the reader requires here. It helps if you take a look at a return recordset from your service script. I suggest you call it in Firefox for a nice representation, but basically it looks something like this:

view plain print about
1<userList>
2    <T4>
3        <recCount>5802</recCount>
4        <ID>2350</ID>
5        <vcFirstName>Robin</vcFirstName>
6        <vcLastName>Williams</vcLastName>
7        <bIsAdministrator>0</bIsAdministrator>
8        <bIsActive>1</bIsActive>
9        <tsDateLastLogin>2007-05-01T14:34:57</tsDateLastLogin>
10    </T4>
11    <T4>
12        <recCount>5802</recCount>
13        <ID>4027</ID>
14        <vcFirstName>Howie</vcFirstName>
15        <vcLastName>Mandel</vcLastName>
16        <bIsAdministrator>0</bIsAdministrator>
17        <bIsActive>1</bIsActive>
18        <tsDateLastLogin>2007-04-29T16:29:33</tsDateLastLogin>
19    </T4>
20    ...
21</userList>

You see, looking at the XML, that each record is denoted by the 'T4' node, which we have mapped in our reader to the 'record' attribute. You'll also note that the 'id' attribute was mapped to the 'ID' node in the XML document. This is a unique identifier within each record. We mapped 'totalRecords' to the 'recCount' node, as this is where we set up in our script to place the total record count, and then you see a basic comma delimited list of the nodes that will be included in our DataGrid.

It's important to note here that we have used a very basic XML return for our example here. You do have the power to map values from XML attributes and nested nodes, through the use of XPath syntax. You can even rename a 'field' when identifying a mapping. Look through the examples included in the ExtJS download to get a better idea of what you might be able to do.

OK, to finish our DataStore definition we're going to specify the ability to 'remotely' sort our data, and set up our default sort column and sort order.

view plain print about
1var ds = new Ext.data.Store({
2    // load using HTTP
3 proxy: new Ext.data.HttpProxy({url: 'http://cc.mytestserver.loc/jTesting/xmlSqlTest.cfm'}),
4
5    // the return will be XML, so lets set up a reader
6 reader: new Ext.data.XmlReader({
7        // records will have an "T4" tag
8        record: 'T4',
9        id: 'ID',
10        totalRecords: "recCount"
11    }, [
12        // set up the fields mapping into the xml doc
13        'vcFirstName', 'vcLastName', 'bIsAdministrator','bIsActive','tsDateLastLogin'
14    ]),
15    // turn on remote sorting
16    remoteSort: true
17});
18ds.setDefaultSort('vcLastName', 'desc');

And so begins our scripting for creating our DataGrid. The big "gotchas" that hit me along the way were the stupid things. Mis-identifying my 'record' mapping, or missing a trailing comma. Firebug and the JavaScript Console (Firefox) are your friends.

Next round we'll define our ColumnModel. This is how we'll define the order of initial column display, define column headings, and really button up the initial details before fine tuning our layout.

Scorpio Tour: Nashville

Ben's visit is quickly approaching, and every stop on the tour (so far) he's announced another exciting new feature in our favorite platform. Aaron came out of his office today to announce that the giveaways are getting even bigger. Aside from raffling off a Scorpio license (to be given upon release), we'll also be giving away a copy of Flex Builder with Charting!

[More]