GrailsUI 1.0 Released

The GrailsUI (GUI) Plugin has been silently under construction for a few months now, and it is ready for public consumption. It provides a collection of useful JavaScript widgets built using the Yahoo! UI library (2.6.0). Extensive documentation is on the Grails site.

GUI was built on three primary concepts, which were inspired by things I thought were lacking in some of the existing UI plugins.

Configuration Pass-Through

All attributes passed into GUI tags that are not explicitly recognized and consumed by the tag library are passed through to the underlying YUI object as config options. So if you know what you are doing, you can take advantage of any custom configuration available in the widget without worrying about whether GUI is doing it right. Your attribs will always be passed through and translated into a YUI config object literal. If you don’t know what this means, don’t worry about it! You can take advantage of the GrailsUI Plugin without even knowing you are using this feature.

Component Accessibility

Any component that maps directly to a YUI object is accessible throughout the page, referenced through the GRAILSUI namespace and the id passed into the tag. That means if you create a dataTable <gui:dataTable id="myDataTable"/>, you can reference it easily within JavaScript through the GRAILSUI namespace: GRAILSUI.myDataTable.

This allows you to create custom event handling for the GUI widgets that are created in your pages.

Easy Dependency Mapping

GrailsUI provides a resources tag where you can define the components used on the page. All you have to do is list the components, and it will take care of all the CSS and JavaScript dependencies, without redundancy.

This will prepare your page dependencies so you can use any of the specified components within it.

How to get Started?

All the information you need to get started using GUI is on the grails.org wiki page. Each GUI component is defined and explained, and you can also checkout a fully-functional GUI demo project from Google Code with working examples of all the components.

Would you like to contribute?

I would love to get more people working on GUI. If you would like to get started with it, you can checkout the source code here. Just type svn checkout http://svn.codehaus.org/grails-plugins/grails-grails-ui grails-ui-readOnly. There are plenty of issues on the GUI JIRA page, especially for version 1.1. I expect this list of bugs and feature requests to become rather long as the GrailsUI 1.0 becomes more widely used, and more people dig up problems. If you find a bug, please contact me or log an issue yourself under the “Grails Plugins” project, “Grails-UI” component. If you find a way to fix the issue, attach a patch to the JIRA and I’ll take a look at it.

Additional Credits

• Daniel Honig and I started building two different plugins along with the same intentions, and we combined them into GUI very early on. Daniel was responsible for the core concepts and logic behind the GUI dependency mapping system.
• Marcel Overdijk has a great blog post about hooking up a YUI DataTable using server-side pagination and sorting. I used this core logic when adding additional functionality in the GUI DataTable extension.
• Zach Leatherman had the initial idea for the dataTable row expansion.