Grails jQuery UI Widget

Purpose

• This plugin allows the creation of jQuery-UI via Grails TagLibs

Goals

• Provide a mechanism for instantiating jQuery-UI 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

Additional Resources

• GitHub https://github.com/swestfall/grails-jqueryui-widget
• Source Code https://github.com/swestfall/grails-jqueryui-widget/tree/master/jqueryui-widget
• Sandbox App https://github.com/swestfall/grails-jqueryui-widget/tree/master/jqueryui-widget-testApp

Usage Overview

TagLib tags allow jQuery-UI Widgets to be specified in Groovy

Example:

<jqueryui:jquiAutoComplete
    id="autoComplete1"
    renderMarkup="false"
    config="${[
        minLength : 1,
        source : createLink(controller: 'autoComplete', action: 'searchStockByCompanyJSON').toString()
    ]}"/>

Configuration Map allows for JavaScript literal references.

This means we can specify JavaScript functions (event handlers, callbacks, ect...) in Groovy as a String. It is done through a modified version of Douglas Crockford's JSON-java.

Example Map :

config="${[
    string : "one",
    number : 1,
    functionRef : '@grails.jqueryui.myCustomFn'
]}"

The above map will be rendered into this JSON

{
  string : "one",
  number : 1,
  functionRef : grails.jqueryui.myCustomFn
}

They key to this ability is placing the '@' character as the first character in a string that you want to be a JavaScript literal reference. The modified JSON-java library will spot this, remove the '@' character, and render the contents of the string without external quotes. When this JSON string is evaluated by the browser, the modified value will now be reference a JavaScript literal

References to instantiated jQuery-UI Widgets are maintained.

In JavaScript, if an object is not assigned to a variable after instantiation, it is effectively lost. To prevent this, the TagLib has a system of configurable namespaces and prefixes which are used to create a JavaScript variable. Assignment to a known namespace / variable allows other JavaScript functionality to interact with a Widget with ease.

Lets take the following example

<jqueryui:jquiAutoComplete
    id="autoComplete1"
    .....
   />

The above jQuery-UI Widget would be assigned to the following namespace / variable.

grails.jqueryui.components.grailsJQUIAutoComplete_autoComplete1

Namespace and Prefix values are configurable.

The namespace and prefixe values are configurable. This allows each user of the plugin to declare their own usage.

These are the defaults the code ships with

jqueryui {
    prefixes {
        accordion = "grailsJQUIAccordion_"
        autoComplete = "grailsJQUIAutoComplete_"
        datePicker = "grailsJQUIDatePicker_"
        dialog = "grailsJQUIDialog_"
        button = "grailsJQUIButton_"
        buttonSet = "grailsJQUIButtonSet_"
        tab = "grailsJQUITab_"
        progressBar = "grailsJQUIProgressBar_"
        slider = "grailsJQUISlider_"
    }
    namespace = "grails.jqueryui.components"
}

In your Config.groovy, you can override them.

jqueryui.namespace = "myCompany.jqueryui"
jqueryui.prefixes.autoComplete = "autocomplete"

Tag API

jquiAccordion (jQuery-UI Accordion)

• id : string : HTML Element & suffix for Javascript reference
• config : map : Config to be converted to JSON

• id : string : HTML Element & suffix for Javascript reference
• config : map : Config to be converted to JSON
• renderMarkup : boolean : Flag indicating whether tag should create its own markup

• id : string : HTML Element & suffix for Javascript reference
• config : map : Config to be converted to JSON

• id : string : HTML Element & suffix for Javascript reference
• config : map : Config to be converted to JSON

• id : string : HTML Element & suffix for Javascript reference
• config : map : Config to be converted to JSON
• renderMarkup : boolean : Flag indicating whether tag should create its own markup

• id : string : HTML Element & suffix for Javascript reference
• config : map : Config to be converted to JSON

• id : string : HTML Element & suffix for Javascript reference
• config : map : Config to be converted to JSON

• id : string : HTML Element & suffix for Javascript reference
• config : map : Config to be converted to JSON

• id : string : HTML Element & suffix for Javascript reference
• config : map : Config to be converted to JSON

Javascript Inclusion

<jqueryui:javascript/>

• Plugin is dependent on Grails jQuery plugin and Grails jQuery-UI plugin
• You dont have to use these plugins, you can manually include jQuery and jQuery-UI libraries instead

Version History

Version 0.1.4.1

• Fixed Collision w/ custom JSON Library

• Namespace & Prefixes available in Javascript
• Unit Tests

• Fixed bug dealing with renderMarkup attribute

• Remove JSON source - use JSON Jar

• Added Tag Support

• Initial Release