Grails YUI Widget

Purpose

• This plugin allows the creation of YUI 2 Widgets via Grails TagLibs

Goals

• Provide a mechanism for instantiating YUI 2 Widgets via Grails TagLib
• Provide a solid foundation of tags and utilities methods
• Allow for the highest degree of configuration from TagLib
• Provide a mechanism for consumer customization
• Minimize "stitching" Widgets together within generated javascript

Additional Resources

• GitHub https://github.com/swestfall/grails-yui-widget

Usage Overview

Each of the tags follow a common pattern for creating YUI Widgets.

• Call Javascript Constructor with ID and Config.
• Subscribe to Widget events with event handlers
• Set properties of the Widget
• Execute methods against the Widget after construction

<yuiWidget:someTag
    id="test"
    namespace="myNamespace"
    config="${[
       numberConfig : 1,
       stringConfig: 'hello world',
       boolConfig: true,
       arrayConfig : [ 'one', 'two', 'three' ],
       methodConfig: '@jsMethod1' ]}"
     events="$[
        [type: 'widgetEvent1', fn: 'JSMethod2', obj: 'window', scope: 'window' ],
        [type: 'widgetEvent2', fn: 'JSMethod3' ]]"
     props="${[
        [name: 'prop1', val: 'true'],
        [name: 'prop2', val: '@jsMethod4']]}"
     methods=${[
        ['setSomeProperty(123);']]}
</yuiWidget:someTag>

So what is going on here?

• Config: Map of prop/val and collections that will be cast to JSON and passed to YUI Widget
• Events: Array of Maps containing event definitions to be applied to the YUI Widget
• Props: Array of Maps containing properties to be set on the YUI Widget
• Methods: Array of Strings that are applied to the YUI Widget after construction

• Javascript Object Literals can be referenced in Config & Props via prefixing the '@' character to the string. A modified version of Crockford's JSON library is used to handle this. In Events, the code assumes the fn property is a JS Literal.
• Events will assume "null" for obj & scope if they are not specified.

Javascript Inclusion

<yuiWidget:javascript/>

• User is responsible for including YUI Javascript/CSS resources
• Plugin is not dependent on Grails YUI

Tags currently supported

• AutoComplete
• yuiWidget:yuiAutoComplete
• Calendar
• yuiWidget:yuiCalendar
• DataSource
• yuiWidget:yuiLocalDataSource
• yuiWidget:yuiXHRDataSource
• DataTable
• yuiWidget:yuiDataTable
• yuiWidget:yuiScrollingDataTable
• Dialog
• yuiWidget:yuiToolTip
• yuiWidget:yuiSimpleDialog
• yuiWidget:yuiDialog
• yuiWidget:yuiPanel
• Paginator
• yuiWidget:yuiPaginator

Examples

• TestApp located on GitHub https://github.com/swestfall/grails-yui-widget
• Extensibility Examples will be added soon
• AutoComplete
• Paginated DataTable
• Dialog

Versions

• Removed JSON Source - Added JSON JAR

• Added Calendar support

• Initial release