This presentation will introduce AJAX in Grails through the GrailsUI plugin. We'll start with the core concepts behind the plugin and give examples of the most widely used and interesting widgets GrailsUI provides. Some examples will include methods of interacting with the widgets and handling events. We will also talk about how to provide proper JSON data to the widgets from the server.

1. AUTOCOMPLETE
MENUBAR
CHARTS
DATEPICKER
DIALOG
DATATABLE
GrailsUI Primer
Matthew Taylor

2. The
“Accidental”
RIA Developer

5. Want
DataTable
NOW

10. Want
row click
handling
NOW

25. “Most of the people
writing in JavaScript
are not
programmers”
- Douglas Crockford

33. GRAILSUI

34. JavaScript scope
Global (bad)
Scoped (better)
Namespaced (best)

35. Adding beforeShow event handler to
GrailsUI Dialog

36. Adding itemSelect event handler to
GrailsUI AutoComplete

38. WTF?

41. <div id="dt_div_myTable"></div>
<script> var myColumnDefs = [{'formatter': 'date',
YAHOO.util.Event.onDOMReady(function () { 'sortable': true,
var DataSource = YAHOO.util.DataSource, 'key': 'due',
DataTable = YAHOO.widget.DataTable, 'label': 'Due Date'}, {'formatter': 'text',
Paginator = YAHOO.widget.Paginator; 'sortable': true,
'key': 'acctNum',
var myTable_ds = new DataSource('/guipdt/foo/fooTable?'); 'label': 'Account Number'}, {'formatter': 'number',
myTable_ds.responseType = DataSource.TYPE_JSON; 'sortable': true,
myTable_ds.connMethodPost=true; 'key': 'quantity',
myTable_ds.responseSchema = { 'label': 'Quantity'}, {'formatter': 'currency',
resultsList : 'results', 'sortable': true,
fields : ["due","acctNum","quantity","amtDue"], 'key': 'amtDue',
metaFields : { 'label': 'Amount Due'}];
totalRecords: 'totalRecords'
} GRAILSUI.myTable = new GRAILSUI.DataTable('dt_div_myTable', myColumnDefs, myTable_ds, '', {
}; initialRequest : 'max=5&offset=0&sort=due&order=asc&',
myTable_ds.doBeforeCallback = function(oRequest, oFullResponse, oParsedResponse, oCallback) { paginator : myTable_paginator,
return GRAILSUI.util.replaceDateStringsWithRealDates(oParsedResponse); dynamicData : true,
}; sortedBy : {key: "due", dir: YAHOO.widget.DataTable.CLASS_ASC},
'selectionMode': 'single',
var myTable_paginator = new Paginator( 'rowClickNavigate': false,
{'rowsPerPage': 5} 'rowClickMode': 'none',
); 'formatter': 'text'
});
var registerEditorListener = function(editor, field, url) { // Update totalRecords on the fly with value from server
editor.subscribe("saveEvent", function(oArgs) { GRAILSUI.myTable.handleDataReturnPayload = function(oRequest, oResponse, oPayload) {
GRAILSUI.myTable.loadingDialog.show(); oPayload.totalRecords = oResponse.meta.totalRecords;
var editorCallback = { return oPayload;
failure: function(o) { };
// revert the cell value
GRAILSUI.myTable.updateCell(oArgs.editor.getRecord(), field, oArgs.oldData); // Set up editing flow
// alert user var highlightEditableCell = function(oArgs) {
alert('Recieved an error during edit: ' + o.responseText); var elCell = oArgs.target;
} if(YAHOO.util.Dom.hasClass(elCell, "yui-dt-editable")) {
}; this.highlightCell(elCell);
YAHOO.util.Connect.asyncRequest('POST', url, editorCallback, 'id=' + }
oArgs.editor.getRecord().getData('id') };
+ '&field=' + field + '&newValue=' + oArgs.newData); GRAILSUI.myTable.subscribe("cellMouseoverEvent", highlightEditableCell);
}); GRAILSUI.myTable.subscribe("cellMouseoutEvent", GRAILSUI.myTable.onEventUnhighlightCell);
}; GRAILSUI.myTable.subscribe("cellClickEvent", GRAILSUI.myTable.onEventShowCellEditor);
});
</script>

44. Indirect
Pass-through
Direct
Pass-through

52. Matthew Taylor
rhyolight@gmail.com
http://dangertree.net
@rhyolight