Building RIAs with jQuery UI & jqGrid

Who am I?
ColdFusion developer since 2000
Senior Software Developer for Alagad, Inc.
Associate Director of the Model-Glue framework
Co-manager, Inland Empire CFUG

What we'll be covering
What is jQuery UI?
How to use jQuery UI
What is jqGrid?
How to use jqGrid
Using jQuery UI & jqGrid together to build applications

What we won't be covering
jQuery
If you do not have any knowledge of the core jQuery library, you may find this presentation difficult to follow

What is jQuery UI?
From the jQuery UI site:
"jQuery UI provides abstractions for low-level interaction and animation, advanced effects and high-level, themeable widgets, built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications."

OK, so what does that mean?
It's a collection of plugins for jQuery that encapsulate several different types of functionality
Interactions
Widgets
Effects
Utilities
Includes customizable theming support via the jQuery UI CSS framework & ThemeRoller

Interactions
Interactions allow for applying "behavior" to HTML elements
Draggable
Droppable
Resizable
Selectable
Sortable

Widgets
High-level user interface components
Accordion
Autocomplete
Button
Datepicker
Dialog
Progressbar
Slider
Tabs

Effects
Pre-built visual effects & enhanced animations
Additional Effects
Visibility Transitions
Color Transitions
Class Transitions
Advanced Easing

Utilities   
Miscellaneous tools
Position
More in development/planning stages
Shadow
Modal
Image Preloading

Theming Support
jQuery UI CSS framework
Can be used for standalone styling without using JavaScript
ThemeRoller
Gallery
Customizing
ThemeRoller Firefox bookmarklet

How to implement jQuery UI

What is jqGrid?
From the jqGrid site:
"jqGrid is an Ajax-enabled JavaScript control that provides solutions for representing and manipulating tabular data on the web."
A ThemeRoller-ready jQuery plugin that creates dynamic, highly-customizable grid widgets

jqGrid Anatomy

jqGrid Features
Sorting
Paging
Searching & Filtering
Form Search
Toolbar Search
Editing
Inline Editing
Cell Editing
Form Editing

Data Formats
Supports several types of input data
JSON (and JSONP)
XML
Local (JavaScript array)
HTML (via the tableToGrid() function)
Completely customizable xmlReader & jsonReader
Client-side sorting is supported
Paging & searching require server-side data

JSON Data Structure
{
page: "xxx",
records: "yyy",
total: "zzz",
rows: [
{ id: "1", cell: ["cell11", "cell12", "cell13"] },
{ id: "2", cell: ["cell21", "cell22", "cell23"] },
...
]
}

jqGrid Options
Far too many options to list here
Essential options for a functioning grid:
url
datatype (not required, but defaults to 'xml')
colNames (can use the label colModel option instead)
colModel
pager (navigation layer will not appear if not defined)
caption (caption layer will not appear if not defined)

colModel Options
Once again, too many to list them all
Some options that will often be used:
name (this is the only required option)
width (defaults to 150px)
align
formatter
index
sortable

Events & Methods
Rich event API
gridComplete
onCellSelect
onSelectRow
Methods & Functions
getCell
getRowData
setGridParam
trigger('reloadGrid')

Building a Grid

Putting it all together: an example master/detail application

Resources
jQuery:
http://www.jquery.com
jQuery UI:
http://www.jqueryui.com
jqGrid wiki:
http://www.trirand.com/jqgridwiki
jqGrid demos:
http://trirand.com/blog/jqgrid/jqgrid.html

Questions?
Contact me:
Email: eparker@alagad.com or ezra@cfgrok.com
GTalk: ezra@cfgrok.com
Blog: http://www.cfgrok.com
Twitter: @alagadinc