Grails Plugin for jQuery UI Widgets

  • Tags : /
  • Latest : 0.1.4.1
  • Last Updated: 08 September 2011
  • Grails version : 1.3.7 > *
  • Authors : null
4 votes
Dependency :
compile ":jqueryui-widget:0.1.4.1"

Documentation

Summary

Description

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

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
jquiAutoComplete (jQuery-UI AutoComplete)
  • 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
jquiButton (jQuery-UI Button)
  • id : string : HTML Element & suffix for Javascript reference
  • config : map : Config to be converted to JSON
jquiButtonSet (jQuery-UI ButtonSet)
  • id : string : HTML Element & suffix for Javascript reference
  • config : map : Config to be converted to JSON
jquiDatePicker (jQuery-UI DatePicker)
  • 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
jquiDialog (jQuery-UI Dialog)
  • id : string : HTML Element & suffix for Javascript reference
  • config : map : Config to be converted to JSON
jquiProgressBar (jQuery-UI ProgressBar)
  • id : string : HTML Element & suffix for Javascript reference
  • config : map : Config to be converted to JSON
jquiSlider (jQuery-UI Slider)
  • id : string : HTML Element & suffix for Javascript reference
  • config : map : Config to be converted to JSON
jquiTab (jQuery-UI Tab)
  • id : string : HTML Element & suffix for Javascript reference
  • config : map : Config to be converted to JSON

Javascript Inclusion

Plugin Javascript must be included on the page
<jqueryui:javascript/>
Additionally…
  • 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
Version 0.1.4
  • Namespace & Prefixes available in Javascript
  • Unit Tests
Version 0.1.3
  • Fixed bug dealing with renderMarkup attribute
Version 0.1.2
  • Remove JSON source - use JSON Jar
Version 0.1.1
  • Added Tag Support
Version 0.1
  • Initial Release