Intro to Building Desktop-Style Web UIs JavaScript on Grails CSS – Presentation Styles DOM – Document Object Model (Meta Data for Browser)‏ JavaScript – DOM Manipulation & Events, Ajax (XmlHttpRequest)‏ Javascript Libraries (Cross browser compatibility)‏ Grails Platform - Code By Convention (Productivity, consistency, quality)‏ - GORM - Plugin Architecture - SiteMesh, Spring, Hibernate Torey Lomenda Senior Consultant Object Partners Inc. torey.lomenda@objectpartners.com http://twitter.com/tlomenda http://www.objectpartners.com/weblog

Introduction Founded 1996, privately held company Minneapolis based Branch office in Omaha, NE 50 employees and growing Enterprise IT Consulting Leveraging leading edge and open source technologies Striving for the highest levels of productivity and quality Delivering mission critical applications that are: Performant Scalable Easier to enhance and maintain SpringSource partner Using Spring for 5+ years Excited about Grails Chris

Agenda Introducing Ext JS and Grails UI Technologies Working Together Exploring in Ten Steps Event-based Applications (DOM Manipulation, Events, Ajax)‏ Technologies Working Together Grails Platform Demo – Hockey Stats Application Side By Side Comparison of Ext JS and GrailsUI/Yahoo! UI Development Practices Control/Widget Features Effects & Animation Drag & Drop Dialogs and Windows Panels Forms Grids

A Note on Javascript Libraries Rich UI Goodness Dynamically change DOM and CSS based on user interaction Utility Libraries Prototype, script.aculo.us sprinkle effects on existing Web 1.0 app Mid-Level Libraries (Utilities and Controls)‏ Yahoo! User Interface (YUI)‏ JQuery Nice foundation to build full features Widgets Full-Featured (Out-of-the-box Widgets)‏ Ext JS – A Nice UI Component Model GrailsUI - Extending YUI the Grails Way Dojo

Introducing Ext JS and Grails UI JavaScript Namespace: Ext Provides high performance, customizable “real-world” UI widgets Well designed, documented and extensible component model Uses adapters to work seamlessly with other libraries (YUI, JQuery, Prototype)‏ Open sourced under GPLv3 Commercial License $289 per developer $1159 for 5 developers JavaScript Namespace: GRAILSUI A Grails plugin that provides an extensive tag library of rich ajax components based on the Yahoo! UI (YUI) JavaScript library and a YUI extension called the Bubbling Library. It has been designed for ease-of-use as well as configurability. Yahoo! UI (YUI)‏ JavaScript Namespace: YAHOO A set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX. YUI is available under a BSD license and is free for all uses.

Exploring in Ten Steps Step 0: Layout Step 1: Menus Step 2: Dynamic Forms Step 3: Tree Views Step 4: Accordions and Tabs Step 5: Data Grids Step 6: Search Combo Box/AutoComplete Step 7: Drag & Drop Step 8: Rich Text Editor Step 9: Customize Look and Feel

Highly Interactive Web Apps Websites/Web 1.0 Informational based Some advanced features such as eCommerce and Content Management CRUD style applications Web 2.0 Applications Full featured desktop-style interface; intuitive, immediate interaction a user experiences Advanced features like workflow and other processes that require a high level of user interaction

Event-Based Applications Paradigm Shift to event-based approach Flow of application determined by change of state or user interaction (the event). Event is broadcast Listener/Observer acts on the event Common Traps Acting on a component or object before it is in a state to handle the action. Caused by mixing procedural programming with event-based programming. Things to Consider Is the DOM ready? Is the DOM Element available? [eg: Ext.onReady(), YAHOO.util.Event.onDOMReady()] Is the component/object in a ready state? Timers to wait for conditions (ie: setTimeout, setInterval)‏ Javascript by its nature is single threaded Timers get around this issue Timers are not part of the JavaScript language natively. Is part of the objects and methods a Web Browser introduces

Common Trap Procedural Programming getEl() returns undefined. var panel = new Ext.Panel({ title: “My Panel”, items: [{html: “We are Here!”}]}); panel.render(); panel.items.get(0).getEl(); getEl() returns undefined. Tried to get the element before render completed. Event Programming var panel = new Ext.Panel({ title: “My Panel”, items: [{html: “We are Here!”}]}); panel.on(“render”, function(thisPanel) { thisPanel.items.get(0).getEl(); }); panel.render(); getEl() returns DOM element. Invoked action is event-based.

DOM Manipulation Ext JS YUI Finding Nodes Manipulating DOM var elById = Ext.get(elId)‏ var elBySelector = Ext.DomQuery.selectNode( 'a.mycls[@href*=”myref”]:first'); Manipulating DOM Ext.DomHelper Finding Nodes var elById = YAHOO.util.Dom.get(elId); var elBySelector = YAHOO.util.Selector.query('li a'); Manipulating DOM YAHOO.util.Dom

Ajax Support Ext JS YUI var successFn = function(res) { }; var failureFn = function(res) { Ext.Ajax.request({ url: 'someUrl', method: 'GET|POST', success: successFn, failure: failureFn }); var callback = { success: function(res) { }, failure: function(res) { } YAHOO.util.Connect.asyncRequest( 'POST', 'someUrl', callback, ['param1=blah']);

Technologies Working Together Enabling Web Technologies CSS (Cascading Style Sheets)‏ DOM (Document Object Model)‏ Javascript & Ajax (Async Javascript) Grails Platform Solid Foundation (Groovy, Spring, Hibernate, SiteMesh)‏ Plugin Architecture (Spring Security, Rich UI, many others)‏ Modularity: Easy to build custom plugins RESTful Web Services DOM – Provides the Meta-Data/Structure of a Web Page in a browser CSS – Styling, positioning, effects

The Role of CSS Look and Feel Cool Effects Visual Styling Positioning Examples: Drag & Drop, Expand/Collapse, Overlaying, many others CSS Box Model

DEMO: Hockey Stats Manager

Use Case Model Administer Leagues Manage Players Manage Scouting League Admin Manage Players Player Admin Manage Scouting Reports Scout

Domain Model Role RequestMapping User Team Player ScoutingReport home visitor ScoutingNotes Game PlayerStats PlayerNews League Season

Component Model (GSP)‏ (JSON)‏ (GSP)‏ (JSON)‏

Step 1 – Border Layout Ext JS YUI var viewport = new Ext.ViewPort({ layout: 'border', renderTo: 'some-div', items: [ {region: 'north', xtype: 'panel'}, {region: 'west', {region: 'south', ] }); var layout = YAHOO.widget.Layout({ units: [ {position: 'top', body: 'header-div'}, {position: 'left', body: 'side-div'}, {position: 'bottom', body: 'footer-div'}, ] }); *Leverage Grails SiteMesh Integration

Step 2 – Menus Ext JS YUI new Ext.Toolbar({ renderTo: 'some-div', items: [ {text: “Home”, xtype: “tbbutton”, handler: someFn}, {xtype: “tbseparator”}, {text: “Stats Menu”, menu: [ {title: “Sub 1”, disabled: false; handler: someFn } ] }); var menu = new YAHOO.widget.Menubar(); menu.addItems([ {text: “Home”, onclick: someFn }, {text: “Stats Menu” submenu: { id: “sub1Menu”, itemData: [ {text: “Sub 1”, disabled: false, } ] ]);

Step 3 – Dynamic Forms Ext JS Grails UI / YUI Nice Dynamic Forms Highlighted Features: Rich ComboBox Support Collapsible Field Sets Built-in Field Validation Binding buttons to forms Can use applyTo() to decorate existing HTML form. Preferred option is dynamic Minimal GrailsUI support for Forms Grails UI Widgets: Date Picker Expandable Panel Why the SplitButton? Should have used Grails UI Autocomplete YUI decorates existing HTML form markup Custom validation can be added to a form

Step 4 - Trees Ext JS YUI Use: Use: Ext.tree.TreePanel Ext.Tree.TreeLoader Use: YAHOO.widget.TreeView YAHOO.util.Connect new Ext.tree.TreePanel({ useArrows: true, root: { nodeType: “async”, text: “Some Tree”, draggable: false, id: “someRootNode” }, loader: someTreeLoader }); var loadFn = function(node, onCompleteCallback) { // Some Ajax call then complete ... onCompleteCallback(); }; var tree = new YAHOO.widget.TreeView(“Tree”); var root = tree.getRoot(); var node = new YAHOO.widget.TextNode({ label: “Some Node”, labelElId: “someNodeId”}, root); node.id = “attachIdToNode”; node.labelElId = “someNodId”); node.setDynamicLoad(loadFn);

Step 5 – Accordions & Tabs Ext JS Grails UI var p = new Ext.Panel({ layout: 'accordion', renderTo: 'some-div', cls: 'someCls', items: [ {title: 'Blah' collapsed: true, xtype: 'panel' }, {title: 'Blah Tabs', xtype: 'panel', xtype: 'tabpanel', activeItem: 0, items: [// tabs] ] } }); <gui:accordion id='someId' class=”someCls”> <gui:accordionElement id=”1” title=”Blah”> <div /> </gui:accordionElement> <gui:accordionElement id=”2” <gui:tabView> <gui:tab id=”tab1” title=”Tab1”> </gui:tab> </gui:accordion>

Step 6 – Data Grids Ext JS Grails UI Markup: var someGridStore = new Ext.data.JsonStore({ data: dataObj, root: “dataRoot”, fields: [ {name: “col1”}, {name” “col2”} ] }); new Ext.GridPanel({ store: someGridStore, autoHeight: true, columns: [ {header: “Col 1”, dataIndex: “col1”}, {header: “Col 2”, dataIndex: “col2”} ], viewConfig: { forceFit: true, getRowClass: someCssFn } Markup: <gui:dataTable id=“someDataTable” draggableColumns=“true” columnDefs=“[ [key:‘col1’, label:‘Col 1’], [key :’col2’, label:’Col 2’] ]“ sortedBy: “col1” controller: “someController” action: “someAction” params: [id:0] resultList: “dataRoot” rowExpansion: false rowsPerPage: 10 /> JS Code (Refresh Data): GRAILSUI.someDataTable. getDataSource(). sendRequest(“id=xxx”, callback);

Step 7 – Custom Search Combo Ext JS GrailsUI / YUI Markup: <gui:autoComplete id=“someCombo” resultName=“dataRoot” labelField=“resultLabel” idField=“id” controller=“someController” action=“someAction” minQueryLength=“1” typeAhead=“false” resultTypeList=“false” JS Code (Refresh Data): //Attach Behaviour GRAILSUI.someCombo_autocomplete. doBeforeParseData = function(req, res, callback) { // Build resultLabel }; formatResult = function(d, q, m) { // Put formatting code here var resultTemplate = Ext.XTemplate( ‘<tpl for=“.”>’ + ‘<div id=“someItem”{id}’ + ‘({name})’ + ‘</div>’ + ‘</tpl>’ new Ext.form.ComboBox({ store: someStore, typeAhead: false, loadingText: “”, cls: “”, pageSize: 10, minChars: 1, hideTrigger: true, tpl: resultTemplate, itemSelector: “div.someItem” });

Step 8 – Drag & Drop Ext JS YUI var dragSource = var dragSource = new Ext.dd.DragSource( ‘someDivElementId’, {someConfig: “prop1”}); var dropTarget = new Ext.dd.DropTarget( ‘someDropTarget’, notifyDrop: someFn}); var dragSource = new YAHOO.util.DDProxy( ‘someDivElementId’); dragSource.startDrag = function() { // Do Something } dragSource.onDragDrop = function(event, id) { // Use id of node you are // Dropping into var dropTarget = new YAHOO.util.DDTarget( ‘someDropTargetId’);

Step 9 – Rich Text Editor Ext JS GrailsUI / YUI Use 3rd Party Widgets such as TinyMCE (http://tinymce.moxiecode.com/)‏ <gui:dialog title=“Some Editor” draggable=“true modal=“true” buttons=“[ [text: ‘Ok’, isDefault: true] ]” triggers:[]> <gui:richEditor id=“SomeId” value=“Default Text” /> </gui:dialog>

Step 10 – Look & Feel * Understand the DOM generated. Use Firebug to Inspect DOM. Ext JS (Style Accordion)‏ Grails UI (Style Accordion)‏ .my-accordion { } .my-accordion .x-panel, .my-accordion .x-accordion-hd { background: none; .my-accordion .x-panel-body { border: 0px; .my-accordion .x-panel-header { background: transparent none repeat scroll 0 0; border-bottom:1px solid !important; border-left:medium none; border-right:medium none; border-top:medium none; width: 95%; margin-top: 10px; }.my-accordion .x-tool { float: left; }.my-accordion .x-panel-header-text { margin-left: 5px; font-weight: bold; #playerProfileInfoAccordion .actions { left:2px; margin-right: 10px; position:absolute; text-align:right; top:5px; } #playerProfileInfoAccordion .yui-panel{ border: 0px; border-style: none !important; #playerProfileInfoAccordion .hd { background:none !important; width: 95%; border-bottom: 1px solid !important; border-right: 0px !important; padding:0 20px !important

General Comparison Ext JS GrailsUI / YUI Pros Cons Pros Cons Powerful, intuitive, easy to use. (it actually works??)‏ Readable, extensible JS component model feature rich components out-of- the-box. Many config options available. Lazy instantiation of components Good documentation and samples Cons Commercial license ($289 per developer, $1159 for 5 developers)‏ 2.2.x lacks accessibility standards. 3.0 to change that. Pros Powerful, intuitive, easy to use. (it actually works??)‏ Nice tag support to embed components through mark-up Active communities (SpringSource, Yahoo)‏ YUI has good documentation and samples Cons Not as many features, eye candy and customizable options as Ext JS Grails UI documentation beyond getting started documents YUI is a powerful library, but needs to be extended with custom code for more flashy components

A Note on Performance Load time. Loading an application with lots of JavaScript and CSS. Optimize with the help of Yslow Profiler Memory Footprint and execution speed on the Browser JavaScript not known to be a fast language DOM elements take up a lot of memory JavaScript libraries strong focus on performance. Use them Research coding optimization techniques. Especially on IE Browsers – support for Ajax applications getting better

A Note on Web Accessibility Accessibility Guidelines Section 508 of Rehabilitation Act W3C Web Content Accessibility Guidelines (WCAG) Accessible Alternatives Degrading gracefully (Grade A browsers to lower grades)‏ Providing an alternate site if Javascript is disabled (Gmail) Keyboard Navigation Screen Reader friendly generated HTML Notify user when Javascript changes appearance Both YUI and Ext JS are embracing 508 support. Rehabilitation Act When not natively accessible, an accessible alternative must be provided being able to access the widgets with keyboards (no mouse) and/or screen reader improvements (ie having all widgets with a name/label) etc... WCAG Content and functionality be accessible when content is turned off. Users should be alerted when JavaScript changes appearance or functionality of browser window

Development Experience Groovy/Grails on Eclipse Need custom setup for a tolerable IDE experience. Blog coming soon Aptana JavaScript Editor IDE for AJAX Development Firebug JS debugging DOM inspection CSS control More... YSlow (Performance Recommendations)‏ Performance Report Card based on 13 rules from Yahoo!'s Exception Performance team Testing Tools Selenium HtmlUnit env.js Screw.Unit

References Demo code available at Recommended Books Reference Sites Ajax in Action. Dave Crane, Eric Pascarello, Darren James JavaScript Ninja. John Resig Ajax Security. Billy Hoffman, Bryan Sullivan Learning Ext JS. Shea Frederick, Colin Ramsay, Steve 'Cutter' Blades Learning Yahoo! User Interface. Dan Wellman Definitive Guide To Grails. Graeme Roche Reference Sites Ext JS (www.extjs.com)‏ YUI (http://developer.yahoo.com/yui/)‏ Grails UI (http://www.grails.org/GrailsUI+Plugin)‏ Grails (www.grails.org)‏

Final Word? Embrace JavaScript and Ajax technologies They are elegant and are “fun” to work with (once you get the hang of it. Grails is Grrreat!! Straight forward for Java developers to pick up Allows for rapid development Features via plugins will only continue to grow SpringSource support means the product will only get better Ext JS is a quality product. Is it worth $289? Grails UI is promising. Is generating in-line JavaScript a problem?