RichUI Plugin

Added by Andreas Schmitt, last edited by Erik Pragt on May 12, 2008  (view change)

RichUI Plugin

AbstractRichUI Plugin^

This plugin adds a set of AJAX components which can be used to create rich user interfaces without having to deal with JavaScript libraries.

Installation RichUI Plugin^

To install the plugin type:

> grails install-plugin richui

Components RichUI Plugin^

The plugin contains the following components:

Some of these components require JavaScript libraries or CSS. RichUI contains all these libraries like YUI etc. so you don't have to download them separately. To include the required resources into your GSP the following technique is used:

<resource:componentName />

ComponentName stands for the name of a component. To include the required ressources for the AutoComplete component you would include the following markup in your HTML header:

<resource:autoComplete />

Accordion RichUI Plugin^

This component provides an accordion menu. It is based on http://www.hedgerwow.com/360/mwd/accordion/demo.php?page=1.

To use the Accordion component include the following markup in your GSP.

<!-- Accordion resources like JavaScript libraries and CSS -->
<resource:accordion skin="default" />

...

<richui:accordion>
    <richui:accordionItem caption="Sample 1">
    A sample text.
    </richui:accordionItem>

    <richui:accordionItem caption="Sample 2">
    Another sample text.
    </richui:accordionItem>

    <richui:accordionItem caption="Sample 3">
    Even another sample text.
    </richui:accordionItem>
</richui:accordion>

The Accordion tag supports the following attributes:

  • class (CSS class)
  • style (CSS style)

    The AccordionItem tag supports the following attributes:
  • caption (item caption)

Example

GSP:

<!-- Accordion resources like JavaScript libraries and CSS -->
<resource:accordion skin="default" />

...

<richui:accordion style="width: 500px;">
    <richui:accordionItem caption="Sample 1">
    A sample text.
    </richui:accordionItem>

    <richui:accordionItem caption="Sample 2">
    Another sample text.
    </richui:accordionItem>

    <richui:accordionItem caption="Sample 3">
    Even another sample text.
    </richui:accordionItem>
</richui:accordion>

Customization

If you don't like the standard skin of the accordion you can change it by adding a skin attribute to the resource tag.

//Default skin
<resource:accordion />

//Custom
<resource:accordion skin="custom" />

The last option allows you to use your own stylesheet. See webapp/css/accordion.css in the plugin directory for an example.

AutoComplete RichUI Plugin^

This component provides auto completion functionality for text fields. It is based on YUI.

To use the AutoComplete component include the following markup in your GSP.

<!-- AutoComplete resources like JavaScript libraries and CSS -->
<resource:autoComplete skin="default" />

...

<g:form>
    <richui:autoComplete name="name" action="${createLinkTo('dir': 'controller/action')}" />
</g:form>

This will render a HTML input tag with the name name and controller/action as datasource for auto completion. The AutoComplete tag supports the following attributes:

  • name (name of the input tag) required
  • action (datasource for auto completion) required
  • id (id of the input tag, defaults to name if not specified)
  • class (CSS class)
  • style (CSS style)
  • title (HTML title)
  • shadow (specifies if shadow should be used for displaying auto complete box, can be true or false)
  • minQueryLength (minimum query length before a query is send, can be an integer defaults to 0)
  • queryDelay (delay in seconds before a query is send, can be an integer defaults to 0)
  • delimChar (specifies the delimiter char e.g. ',' to separate multiple entries)
  • value (value of the input text)
  • forceSelection (forces selection of an suggested item, can be true or false)
  • typeAhead (specifies if type ahead feature should be used, can be true or false)
  • onItemSelect (a javascript function which is called when an item is selected, variable id is available if specified in controller)

Example

GSP:

<!-- AutoComplete resources like JavaScript libraries and CSS -->
<resource:autoComplete skin="default" />

...

<g:form>
    <richui:autoComplete name="person" action="${createLinkTo('dir': 'person/searchAJAX')}" />

    <!-- onItemSelect action  -->
    <richui:autoComplete name="searchperson" action="${createLinkTo('dir': 'person/searchAJAX')}" onItemSelect="document.location.href = \'${createLinkTo(dir: 'person/show')}/\' + id;" />

    <!-- Multiple entries separated by "," -->
    <richui:autoComplete name="persons" delimChar="," action="${createLinkTo('dir': 'person/searchAJAX')}" />
</g:form>

Controller:

class PersonController {

    def searchAJAX = {
        def persons = Person.findAllByNameLike("%${params.query}%")

        //Create XML response
        render(contentType: "text/xml") {
	    results() {
	        persons.each { person ->
		    result(){
		        name(person.name)
                        //Optional id which will be available in onItemSelect
                        id(person.id)
		    }
		}
            }
        }
    }
}

Customization

If you don't like the standard skin of the auto complete box you can change it by adding a skin attribute to the resource tag.

//Default YUI skin
<resource:autoComplete />

//Default RichUI skin (uses webapp/css/autocomplete.css in the plugin directory)
<resource:autoComplete skin="default" />

//Custom
<resource:autoComplete skin="custom" />

The last option allows you to use your own stylesheet. See webapp/css/autocomplete.css in the plugin directory for an example. You can also modify this file directly if you like and use the second option.

Carousel RichUI Plugin^

This component displays items e.g. photos in a carousel. It is based on Prototype UI.

To use the Carousel component include the following markup in your GSP.

<!-- Carousel resources like JavaScript libraries and CSS -->
<resource:carousel />

...

<richui:carousel direction="horizontal">

    <richui:carouselItem>
        <img src="/richuitest/images/imgs/1.jpg" alt="One"/><br/>One
    </richui:carouselItem>

    <richui:carouselItem>
        <img src="/richuitest/images/imgs/2.jpg" alt="Two"/><br/>Two
    </richui:carouselItem>

    <richui:carouselItem>
        <img src="/richuitest/images/imgs/3.jpg" alt="Three"/><br/>Three
    </richui:carouselItem>

    <richui:carouselItem>
        <img src="/richuitest/images/imgs/4.jpg" alt="Four"/><br/>Four
    </richui:carouselItem>

</richui:carousel>

This will render a carousel which allows you to navigate through the items specified. You can put any kind of HTML or GSP into a carouselItem. The Carousel tag supports the following attributes:

  • direction (direction of the carousel, can horizontal or vertical) required
  • carouselStyle (CSS style for entire carousel)
  • carouselClass (CSS class for entire carousel)
  • itemsStyle (CSS style for carousel items)
  • itemsClass (CSS class for carousel items)

Example

GSP:

<!-- Carousel resources like JavaScript libraries and CSS -->
<resource:carousel />

...

<richui:carousel direction="vertical" carouselStyle="height: 450px;" itemsStyle="height: 400px;">

    <richui:carouselItem>
        <img src="/richuitest/images/imgs/1.jpg" alt="One"/><br/>One
    </richui:carouselItem>

    <richui:carouselItem>
        <img src="/richuitest/images/imgs/2.jpg" alt="Two"/><br/>Two
    </richui:carouselItem>

    <richui:carouselItem>
        <img src="/richuitest/images/imgs/3.jpg" alt="Three"/><br/>Three
    </richui:carouselItem>

    <richui:carouselItem>
        <img src="/richuitest/images/imgs/4.jpg" alt="Four"/><br/>Four
    </richui:carouselItem>

</richui:carousel>

Customization

If you don't like the standard skin of the carousel box you can change it by adding a skin attribute to the resource tag.

//Default skin
<resource:carousel />

//Classic skin (only available for horizontal orientation)
<resource:carousel skin="classic" />

DateChooser RichUI Plugin^

This tag allows you to select dates via a popup calendar. It is based on YUI and http://blog.davglass.com/files/yui/cal2.

To use the DateChooser component include the following markup in your GSP.

<!-- DateChooser resources like JavaScript libraries and CSS -->
<resource:dateChooser />

...

<g:form>
    <richui:dateChooser name="birthday" format="dd.MM.yyyy" />
</g:form>

This will render a HTML input tag with the name birthday which will display a popup calendar when it is selected. The selected date will be displayed in format dd.MM.yyyy. The DateChooser tag supports the following attributes:

  • name (name of the input tag) required
  • id (id of the input tag, defaults to name if not specified)
  • class (CSS class)
  • style (CSS style)
  • format (date format, currently only dd.MM.yyyy and MM/dd/yyyy are supported)
  • locale (the locale for month names, en and de are supported, defaults to request locale)
  • value (value of the input text, must be a Date)
  • firstDayOfWeek (specifies first day of the week, can be Su, Mo, Tu, We, Th, Fr or Sa)

Example

GSP:

<!-- DateChooser resources like JavaScript libraries and CSS -->
<resource:dateChooser />

...

<g:form>
    <richui:dateChooser name="birthday" format="dd.MM.yyyy" value="${new Date()}" locale="de" firstDayOfWeek="Mo" />
</g:form>

Flow RichUI Plugin^

This tag displays images similar to Apple's Coverflow. It is based on ProtoFlow.

To use the Flow component include the following markup in your GSP.

<!-- Flow resources like JavaScript libraries and CSS -->
<resource:flow />

...

<richui:flow reflection="true" slider="true" onClickScroll="true">

    <img src="/richuitest/images/imgs/1.jpg" alt="One"/>
    <img src="/richuitest/images/imgs/2.jpg" alt="Two"/>
    <img src="/richuitest/images/imgs/3.jpg" alt="Three"/>
    <img src="/richuitest/images/imgs/4.jpg" alt="Four"/>

</richui:flow>

This will render a coverflow which allows you to navigate by using the slider or clicking on the images. The Flow tag supports the following attributes:

  • caption (displays img alt-attribute as caption, can be true or false, defaults to false)
  • reflection (turns image reflection on and off, can be true or false, defaults to true)
    Broken
    reflection="false" doesn't seem to work.
  • onClickScroll (turns on lick scrolling on and off, can true or false, defaults to true)
  • startIndex (specifies initial scroll index, can be an integer, defaults to 2)
  • slider (turns slider visibility on and off, can be true or false)

Example

GSP:

<!-- Flow resources like JavaScript libraries and CSS -->
<resource:flow />

...
<richui:flow reflection="true" slider="true" onClickScroll="false">

    <g:link action="showPhoto" controller="Photo"><img src="/richuitest/images/imgs/1.jpg" alt="One"/></g:link>
    <img src="/richuitest/images/imgs/2.jpg" alt="Two"/>
    <img src="/richuitest/images/imgs/3.jpg" alt="Three"/>
    <img src="/richuitest/images/imgs/4.jpg" alt="Four"/>

</richui:flow>

Font RichUI Plugin^

The Font tag allows you embed special fonts which are probably not available on client PCs. To accomplish this it creates images dynamically. It is inspired by http://rghosh.free.fr/groovyimages/index.html.

To use the Font component include the following markup in your GSP.

<richui:font text="Groovy is cool" fontName="Wargames" fontStyle="bold" size="36" color="#0000CC" />

This will generate an image displaying the text "Groovy is cool" using the Wargames font with font style bold, a size of 36pt and the color blue. The Font tag supports the following attributes:

  • text (text to display) required
  • fontName (name of the font) required
  • fontStyle (style of the font, can be plain, bold and italic, defaults to plain)
  • size (size of the font) required
  • color (font color in HEX, defaults to #000000 black)

Example

GSP:

<richui:font text="Hello Grails" fontName="Arial" size="12" />

GoogleMaps RichUI Plugin^

The GoogleMaps tag displays addresses on a map including search funtionality and driving directions. It is based on Google Maps API.

To use the GoogleMaps component include the following markup in your GSP.

<!-- GoogleMaps resources like JavaScript libraries -->
<resource:googlemaps key="your key" />

...

<richui:googlemaps lat="40.689299" lng="-74.044" />

This will render GoogleMaps displaying position 40.689299 (latitude) and -74.044 (longitude). For your key you have to supply your Google Maps key, which you can get here http://code.google.com/apis/maps/signup.html. First of all you have to include the resource tag which supports the following attributes:

  • key (your GoogleMaps key) required
  • version (GoogleMaps version, defaults to 2.x)

The GoogleMaps tag supports the following attributes:

  • lat (latitude)
  • lng (longitude)
  • zoomLevel (initial map zoom level, defaults to 13)
  • search (enable/disable search functionality, can be true or false, defaults to false)
  • draggable (determines if markers can be moved, can be true or false, defaults to false)
  • route (enable/disable driving directions, can be true or false, defaults to false)
  • directionsLocale (locale for driving directions, can be something like fr, de_DE, en_US etc., defaults to request locale)
  • class (CSS class for the whole component including search etc.)
  • style (CSS style for the whole component including search etc.)
  • mapStyleClass (CSS class for the map itself)
  • mapStyle (CSS style for the map itself)
  • markers (A list of maps of markers which should be displayed)
  • latId (DOM id of a HTML input tag to display current latitude)
  • lngId (DOM id of a HTML input tag to display current longitude)
  • showStartMarker (specifies whether start position should be displayed or not, can be true or false, defaults to true)

Example

GSP:

<resource:googlemaps key="your key" />

//Map with search functionality
<richui:googlemaps lat="40.689299" lng="-74.044" search="true" />

//Map with driving directions
<richui:googlemaps lat="40.689299" lng="-74.044" route="true" />

//Map with markers
<richui:googlemaps markers="[[latitude: 40.689299, longitude: -74.044, draggable: true, description: 'Statue of Liberty'],
[latitude: 40.69575, longitude: -74.056257, draggable: false, description: 'Liberty State Park']]" />

Customization

In order to display localized labels for search functionality and driving directions add the following lines to your messages.properties:

map.search.search=Search
map.search.ok=OK

map.route.start=Start
map.route.destination=Destination
map.route.ok=OK
map.route.clear=Clear

Portlet RichUI Plugin^

This tag allows you to build a user interface similar to iGoogle where content can be positioned via drag and drop. It is based on YUI.

To use the Portlet component include the following markup in your GSP.

<!-- Portlet resources like JavaScript libraries and CSS -->
<resource:portlet />

...

<richui:portlet views="[1, 2, 3, 4]" action="changeView" readOnly="false">

    <table style="width: 500px; border: none;">

        <tr>
            <td>
                <richui:portletView id="1" slotStyle="width: 250px; height: 250px;" playerStyle="width: 250px; height: 250px;">
                <h1>Content 1</h1>
                ...

                <img width="140" height="42" src="${createLinkTo('dir': 'images', file: 'grails_logo.jpg')}"/>
                </richui:portletView>
            </td>

            <td>
                <richui:portletView id="2" slotStyle="width: 250px; height: 250px;" playerStyle="width: 250px; height: 250px;">
                <h1>Content 2</h1>
                ...
                </richui:portletView>
            </td>
        </tr>

        <tr>
            <td>
                <richui:portletView id="3" slotStyle="width: 250px; height: 250px;" playerStyle="width: 250px; height: 250px;">
                <h1>Content 3</h1>
                ...
                </richui:portletView>
            </td>

            <td>
                <richui:portletView id="4" slotStyle="width: 250px; height: 250px;" playerStyle="width: 250px; height: 250px;">
                <h1>Content 4</h1>
                ...
                </richui:portletView>
            </td>
       </tr>
    </table>

</richui:portlet>

This will a table containing four portletViews which can be moved via drag & drop. The Portlet tag supports the following attributes:

  • views (portletView ids as list) required
  • action (action which should be called when a view is dropped)
  • readOnly (specifies whether drag & drop moving is enabled, can be true or false, defaults to false)
  • page (page identifier if multiple portlets are used e.g. in a tab view, defaults to 1)

The PortletView tag supports the following attributes:

  • id (view identifier, corresponds to one of the views list entries in the Portlet-tag) required
  • slotStyle (CSS style of a content slot, which is the container for the movable part)
  • slotClass (CSS class of a content slot, which is the container for the movable part)
  • playerStyle (CSS style of a content player, which is moveable)
  • playerClass (CSS class of a content player, which is moveable)

The content of PortletView can be any kind of HTML or GSP.

Example

GSP:

<!-- Portlet resources like JavaScript libraries and CSS -->
<resource:portlet />

...
<richui:portlet views="[1, 2]" action="changeView" readOnly="false">

    <richui:portletView id="1" slotStyle="width: 250px; height: 250px;" playerStyle="width: 250px; height: 250px;">
        <h1>Content 1</h1>
        ...

        <img width="140" height="42" src="${createLinkTo('dir': 'images', file: 'grails_logo.jpg')}"/>
    </richui:portletView>

    <richui:portletView id="2" slotStyle="width: 250px; height: 250px;" playerStyle="width: 250px; height: 250px;">
        <h1>Content 2</h1>
        ...
    </richui:portletView>

</richui:portlet>

PortletController

class PortletController {

    def changeView = {
        //Obtain id of view which has been moved (could be "1")
    	String drag = params.drag

        //Obtain id of view where view has been moved to (could be "slot_1_2")
        //where 1 stands for page 1 and 2 is view with id 2
        String drop = params.drop

        //Persist new view positions
        ...
    }

}

Customization

If you don't like the standard skin of the portlet you can change it by adding a skin attribute to the resource tag.

//Default skin
<resource:portlet />

//User defined skin
<resource:portlet skin="user" />

The last option allows you to use your own stylesheet. See webapp/css/portlet.css in the plugin directory for an example.

Redirect RichUI Plugin^

The redirect tag allows you to redirect to another URL.

To use the Redirect tag include the following markup in your GSP.

<richui:redirect url="${createLinkTo(dir:'login')}" />

This will redirect to the login page (login controller). The Redirect tag supports the following attributes:

  • url (to redirect to) required

ReflectionImage RichUI Plugin^

This tag adds reflection to images. It is based on http://cow.neondragon.net/stuff/reflection/.

To use the ReflectionImage tag include the following markup in your GSP.

<!-- ReflectionImage resources like JavaScript libraries and CSS -->
<!-- NOTE: Don't put resource tag into your HTML <head>, because it won't work
<resource:reflectionImage />

<richui:reflectionImage src="${createLinkTo('dir': 'images', file: 'grails_logo.jpg')}" />

This will render a reflection for the image specified in src. The ReflectionImage tag supports the following attributes and can be used in the same way as a normal img-tag, because all attributes will be passed through:

  • src (image source) required
  • reflectionHeight (reflection height in percent, can be an integer, defaults to 50)
  • reflectionOpacity (reflection opacity in percent, can be an integer, defaults to 80)

Example

GSP:

<!-- ReflectionImage resources like JavaScript libraries and CSS -->
<!-- NOTE: Don't put resource tag into your HTML <head>, because it won't work
<resource:reflectionImage />

<richui:reflectionImage src="${createLinkTo('dir': 'images', file: 'grails_logo.jpg')}" reflectionHeight="30" reflectionOpacity="50" />

RichTextEditor RichUI Plugin^

This tag provides a rich text editor component to enable users to format content. The editing features are not intended to be as sophisticated as those of the FCKeditor plugin. It is based on TinyMCE or YUI.




To use the RichTextEditor component include the following markup in your GSP.

<!-- RichTextEditor resources like JavaScript libraries and CSS -->
<resource:richTextEditor />

...

<richui:richTextEditor name="description" value="${note?.description}" width="525" />

This will render the RichTextEditor component. The RichTextEditor tag supports the following attributes:

  • name (editor name) required
  • id (HTML id, defaults to name)
  • value (editor content)
  • height (editor height in pixels)
  • width (editor width in pixels)

The resource tag supports the following attributes:

  • type (editor type, can be simple first screenshot, medium second screenshot, advanced third screenshot or full last screenshot)

Example

GSP:

<!-- RichTextEditor resources like JavaScript libraries and CSS -->
<resource:richTextEditor type="advanced" />

...

<richui:richTextEditor name="description" value="${note?.description}" width="525" />

Customization

To use YUI's RichTextEditor exchange the following line in grails-app/conf/RichuiConfig.groovy:

richTextEditorRenderer: "de.andreasschmitt.richui.taglib.renderer.RichTextEditorRenderer",

with

richTextEditorRenderer: "de.andreasschmitt.richui.taglib.renderer.RichTextEditorYUIRenderer",

Star rating RichUI Plugin^

This tag provides a star rating component to enable users to rate content. It is based on http://www.masugadesign.com/the-lab/scripts/unobtrusive-ajax-star-rating-bar.

To use the StarRating component include the following markup in your GSP.

<!-- Rating resources like JavaScript libraries and CSS -->
<resource:rating />

...

<richui:rating dynamic="false" units="5" rating="2" showCurrent="false" controller="rating" action="rate" />

This will render the star rating component displaying 5 stars and a current rating of 2 stars. The component is dynamic which means a user can rate and this rating will be asynchronusly submitted to controller rating and action rate. The StarRating tag supports the following attributes:

  • dynamic (specifies whether rating can be modified or not, can be true or false, defaults to false)
  • action (action to submit rating) required
  • controller (controller to submit rating) required
  • id (id of a domain object)
  • showCurrent (shows current rating as text, can be true or false, defaults to false)
  • units (determines the number of stars which will be displayed, can be 1-10, defaults to 5)
  • rating (current rating, can be a double number, defaults to 0)

Example

GSP:

<!-- Rating resources like JavaScript libraries and CSS -->
<resource:rating />

...

<!-- Is placed in a template which can be easily updated asynchronusly -->
<g:render template="rate" model="[song: song, rating: '2']" />

Template (e.g. _rate.gsp):

<richui:rating dynamic="true" id="${song.id}" units="3" rating="${rating}" controller="rating" action="rate" />

Controller:

class RatingController {

    def rate = {
        //Get rating value
        def rating = params.rating

        //Compute new average value
        ...

        //Use domain id to obtain domain object
        Song song = Song.get(new Long(params.id))
        //Save new rating
        ...


        //Render template with new average rating
        render(template: "rate", model: [rating: average])
    }
}

TabView RichUI Plugin^

This component creates tabbed views. It is based on YUI.

To use the TabView component include the following markup in your GSP.

<!-- TabView resources like JavaScript libraries and CSS -->
<resource:tabView />

...

<richui:tabView id="tabView">
    <richui:tabLabels>
        <richui:tabLabel selected="true" title="My Tab 1" />
        <richui:tabLabel title="Tab 2" />
        <richui:tabLabel title="Tab 3" />
    </richui:tabLabels>

    <richui:tabContents>
        <richui:tabContent>
	    <h1>My Tab 1</h1>
            This is tab 1.
	</richui:tabContent>

	<richui:tabContent>
	    And this is tab 2.
	</richui:tabContent>

	<richui:tabContent>
	    This is tab 3.
            <g:link action="list">A link</g:link>
	</richui:tabContent>
    </richui:tabContents>
</richui:tabView>

This will render a TabView with three tabs My Tab 1, Tab 2 and Tab 3. The TabView tag supports the following attributes:

  • id (DOM id for generated div)

The TabLabel tag supports the following attributes:

  • selected (specifies which tag is initially selected, can be true or false)
  • title (title of the tab) required

The content of a tab can be normal HTML or GSP tags.

Customization

If you don't like the standard skin of the tab view you can change it by adding a skin attribute to the resource tag.

//Default YUI skin
<resource:tabView />

//Default RichUI skin (uses webapp/css/tabView.css, webapp/js/yui/fonts/fonts-min.css and webapp/js/yui/tabview/assets/tabview-core.css in the plugin directory)
<resource:tabView skin="default" />

//Custom
<resource:tabView skin="custom" />

The last option allows you to use your own stylesheet. See webapp/css/tabView.css in the plugin directory for an example.

TagCloud RichUI Plugin^

This component creates a tag cloud displaying the occurrences of tags.

To use the TagCloud component include the following markup in your GSP.

<richui:tagCloud values="['Java': 5, 'Grails': 16, 'Groovy': 12]" />

This will render a tag cloud displaying the tags Java, Grails and Groovy. The TagCloud tag supports the following attributes:

  • values (the values to display) required
  • class (CSS class)
  • style (CSS style)
  • linkClass (CSS link class)
  • linkStyle (CSS link style)
  • controller (controller to which selected tag should be submitted)
  • action (action to which selected tag should be submitted)
  • sortField (specifies whether tags will be sorted by key or value, can key or value, defaults to key)
  • sortOrder (specifies sort order, can asc and desc, defaults to asc)
  • minSize (minimum tag font size, can be an integer, defaults to 0)
  • maxSize (maximum tag font size, can be an integer, defaults to 50)
  • showNumber (specifies whether ocurrence of a tag should be displayed or not, can be true or false, defaults to false)

Example

GSP:

<style>
.tag {
    height: 150px; background: #DDDDDD; border: 1px solid #BBBBBB; width: 400px;
}

.tagLink {
    text-decoration: none; margin-left: 3px; margin-right: 3px; color: #656565;
}
</style>

<richui:tagCloud values="['Java': 5, 'Grails': 16, 'Groovy': 12]" class="tag" linkClass="tagLink" controller="tag" action="filter" sortField="key" sortOrder="desc"/>

Controller:

class TagController {

    def filter = {
        //Get selected tag
        String tag = params.selectedTag

        ...
    }
}

Timeline RichUI Plugin^

This component creates a timeline which shows events. It is based on SIMILE.

To use the Timeline component include the following markup in your GSP.

<!-- Timeline resources like JavaScript libraries and CSS -->
<resource:timeline />

...

<body onload="initTimeline();">

<richui:timeline style="height: 350px; border: 1px solid #aaa" datasource="http://localhost:8080/richuitest/person/events" />

This will render a SIMILE timeline using http://localhost:8080/richuitest/person/events as datasource. The Timeline tag supports the following attributes:

  • startDate (initial date position, can be a Date defaults to new Date())
  • datasource (XML data which specifies events that will be displayed) required
  • class (CSS class)
  • style (CSS style)
  • eventBandWidth (width of the event band in percent, defaults to 70)
  • eventIntervalUnit (specifies the unit of an interval, can be day, week, month and year, defaults to month)
  • eventIntervalPixels (width of an interval in pixels, defaults to 100)
  • legendBandWidth (width of the legend band in percent, defaults to 30)
  • legendIntervalUnit (specifies the unit of an interval, can be day, week, month and year, defaults to year)
  • legendIntervalPixels (width of an interval in pixels, defaults to 200)

You have to specify at least width and height using class or style otherwise the timeline won't be displayed. Make sure that the body onload attribute will be included in the resulting HTML. If you are using Grails' default layout you have to change the body tag in your main.gsp to:

<body onload="${pageProperty(name:'body.onload')}">

Example

GSP:

<!-- Timeline resources like JavaScript libraries and CSS -->
<resource:timeline />

...

<body onload="initTimeline();">

<richui:timeline style="height: 350px; border: 1px solid #aaa" startDate="${new Date() - 20}" datasource="http://localhost:8080/richuitest/person/events" eventBandWidth="85" eventIntervalPixels="200" legendBandWidth="15" legendIntervalPixels="500" eventIntervalUnit="month" legendIntervalUnit="year" />

Controller:

import java.text.SimpleDateFormat

class PersonController {

    def events = {
        render(contentType: "text/xml") {
            data() {
                //Special date format which is needed for the timeline control
	        String startDate = new SimpleDateFormat("MMM dd yyyy HH:mm:ss", Locale.US).format(new Date()) + " GMT"
		event('start': startDate, 'title':"Nice title", 'link':"http://localhost:8080/richuitest/person/show/1", "This is a description")

                startDate = new SimpleDateFormat("MMM dd yyyy HH:mm:ss", Locale.US).format(new Date() + 20) + " GMT"
                event('start': startDate, 'title':"Hello World", 'link':"http://localhost:8080/richuitest/person/show/2", "This is another description")

                //Start and end date
                startDate = new SimpleDateFormat("MMM dd yyyy HH:mm:ss", Locale.US).format(new Date() + 40) + " GMT"
                String endDate = new SimpleDateFormat("MMM dd yyyy HH:mm:ss", Locale.US).format(new Date() + 45) + " GMT"
                event('start': startDate, 'end': endDate, 'title':"Hello again", 'link':"http://localhost:8080/richuitest/person/show/3", "This is another description")
	    }
        }
    }
}

Tooltip RichUI Plugin^

This component creates a JavaScript tooltip.It is based on YUI

To use the Tooltip component include the following markup in your GSP.

<!-- Tooltip resources like JavaScript libraries and CSS -->
<resource:tooltip />

...

<a id="sample" href="#" title="This is a tooltip">A link</a>
<richui:tooltip id="sample" />

This will show a tooltip when you hover over the link. The Tooltip tag supports the following attributes:

  • id (DOM id of the HTML element for which the tooltip should be displayed. The text is specified via the HTML title attribut) required

TreeView RichUI Plugin^

This component creates a tree view based on data given in XML. It is based on YUI.

To use the TreeView component include the following markup in your GSP.

<!-- TreeView resources like JavaScript libraries and CSS -->
<resource:treeView />

...

<richui:treeView id="tree" xml="${data}"/>

This will display a tree view displaying the data specified in data. The TreeView tag supports the following attributes:

  • id (DOM id of the div)
  • xml (data which should be displayed) required
  • onLabelClick (a javascript function which is called when a node label is clicked, variable id is available if specified in controller)

Example

GSP:

<resource:treeView />

...

<richui:treeView xml="${data}"/>

<!-- onLabelClick shows person when label is clicked -->
<richui:treeView xml="${data}" onLabelClick="document.location.href = \'${createLinkTo(dir: 'person/show')}/\' + id;"/>

<!-- onLabelClick depending on the depth of a node (root is 0) -->
<richui:treeView xml="${data}" onLabelClick="if(node.depth == 2) document.location.href = \'${createLinkTo(dir: 'person/show')}/\' + id;"/>

Controller:

import groovy.xml.MarkupBuilder

class PersonController {

    def list = {
    	def writer = new StringWriter()
	def xml = new MarkupBuilder(writer)
    	xml.person(name: "John Doe"){
    	    books(name: "Books"){
    	        book(name:"Book 1")
                //Optional id
    		book(name:"Book 2", id: 1)
    	    }
    	}

        if(!params.max)params.max = 10
        [ "data": writer.toString(), personList: Person.list( params )]
    }
}

Customization

If you don't like the standard skin of the tree view you can change it by adding a skin attribute to the resource tag.

//Default YUI skin
<resource:treeView />

//Default RichUI skin (uses webapp/css/treeView.css in the plugin directory)
<resource:treeView skin="default" />

//Custom
<resource:treeView skin="custom" />

The last option allows you to use your own stylesheet. See webapp/css/treeView.css in the plugin directory for an example. You can also modify this file directly if you like and use the second option.

Plugin version history RichUI Plugin^

  • Apr. 24, 2008 (version 0.4)
    • Accordion added
    • Timeline supports eventBandWidth, eventIntervalUnit, eventIntervalPixels, legendBandWidth, legendIntervalUnit and legendIntervalPixels
    • Bug fixes
      • Grails, RichUI & existing HBM-Files
      • TagCloud controller attribute has no effect
  • Mar. 31, 2008 (version 0.3)
    • Timeline javascript files are now served locally
  • Mar. 24, 2008 (version 0.3)
    • Updated to Grails 1.0.2
    • YUI updated to 2.5.1
    • AutoComplete supports forceSelection, typeAhead and title (thanks to Sanjay Mysoremutt)
    • DateChooser supports firstDayOfWeek setting
    • New components
      • Carousel
      • Flow
      • Portlet
      • ReflectionImage
      • RichTextEditor
  • Feb. 05, 2008 (version 0.2)
    • Updated to Grails 1.0
    • Jetty issue fixed
    • TagCloud issue fixed
    • Rating component improved
  • Jan. 23, 2008 (version 0.2)
    • AutoComplete supports onItemSelect attribute to specify a custom javascript function
    • DateChooser defaults to no date and locale defaults to request locale
    • GoogleMaps directionsLocale defaults to request locale
    • TreeView supports onLabelClick attribute to specify a custom javascript function
    • Bug fixes
  • Jan. 6, 2008 (version 0.1)
    • Initial version released
Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.

Comments (8)

 

  1. Jan 06, 2008

    dellsoft says:

    good! thanks!

    good!

    thanks!

  2. Jan 15, 2008

    Carl Garcia says:

    if the plugins.grails.org server is down, you can install the plugin in the foll...

    if the plugins.grails.org server is down, you can install the plugin in the following manner:

    >grails install-plugin http://svn.codehaus.org/grails-plugins/grails-richui/tags/LATEST_RELEASE/grails-richui-0.1.zip

  3. Feb 17, 2008

    Juha Mynttinen says:

    In AutoComplete example, there's an error. The string searchAjax and searchAJAX ...

    In AutoComplete example, there's an error. The string searchAjax and searchAJAX are used as the identifier for the same things. Doesn't work at least on Linux. The method name must be searchAjax, or the link in the view must point to searchAJAX.

  4. Mar 03, 2008

    Sanjay Mysoremutt says:

    The Tooltip wasn't working with the Autocomplete plugin. "Enter the number to s...

    The Tooltip wasn't working with the Autocomplete plugin.

    "Enter the number to search for"  name="queryTxt" action="${createLinkTo('dir': 'claim/searchFileNumber')}"/>"searchClaim" value="search claim"  title="Search for the specified claim"/>
  "queryTxt"/>

    ...was not working...

    The tooltip depends on a title attribute, which autocomplete wasn't rendering. Fixed this by adding the following code...

    title: "${attrs?.title}", "")

    ...in...

    Location: Project\plugins\richui-0.2\src\groovy\de\andreasschmitt\richui\taglib\renderer\AutoCompleteRenderer.groovy

    Class: de.andreasschmitt.richui.taglib.renderer.AutoCompleteRenderer

    Method:protected void renderTagContent

    builder."div"(""){
            input("class": "${attrs?.'class'}", style: "${attrs?.style}",
                   type: "text", id: "${attrs?.id}", name: "${attrs?.name}",
                    value: "${attrs?.value}", title: "${attrs?.title}", "")
            "div"("class": "searchcontainer yui-skin-sam", id: resultId, ""){}

    Also added

            if(!attrs?.title){
            attrs.title = ""
        }
 
 

    in def autoComplete to project\plugins\richui-0.2\grails-app\taglibAutoCompleteTagLib.groovy



    And then it worked fine. (Thanks a lot for these wonderful excellent plugins!)

  5. Mar 03, 2008

    Sanjay Mysoremutt says:

    Wanted to avoid building the XML manually but using the render as XML, added two...

    Wanted to avoid building the XML manually but using the render as XML, added two attributes:

    Objective was to use this in the controller:

            def persons = Person.findAllByNameLike("%${params.query}%")

        render(persons as XML)

    Needed the introduction of two new attributes objectName and columnName...

    <richui:autoComplete
name="person" objectName="person" columnName="name"
action="${createLinkTo('dir': 'person/searchPerson')}" />

    Changes required in local copy of the plugin:

    Added the following in AutoCompleteTagLib.groovy

            if(!attrs?.objectName){

            attrs.objectName = "result"

        }



        if(!attrs?.columnName){

            attrs.columnName = "name"

        }

    And the following in AutoCompleteTagRenderer.groovy 

    builder.yieldUnescaped
"    autoCompleteDataSource = new
YAHOO.widget.DS_XHR(\"${attrs?.action}\", [\"${attrs?.objectName}\",
\"${attrs?.columnName}\", \"id\"]);\n"


  6. May 12, 2008

    Erik Pragt says:

    Hi Andreas, Could you add the following to the AutoCompleteRenderer.groovy, aro...

    Hi Andreas,

    Could you add the following to the AutoCompleteRenderer.groovy, around line 28?

    if(attrs?.scriptQueryParam) {
  builder.yieldUnescaped "    autoCompleteDataSource.scriptQueryParam = \"${attrs?.scriptQueryParam}\";\n"
}

    This wil allow the query parameter to be specified, instead of using the default 'query' parameter name. An alternative could probably be to use the 'name' parameter of the input field. I couldn't find out what this was used for.

    Thanks,

    Erik

  7. Jun 11

    Patrick Haggood says:

    Excellent plugin lib; I could copy/past each sample into a controller and/or GSP...

    Excellent plugin lib; I could copy/past each sample into a controller and/or GSP and each worked great. My only wish was that RichUI supported a rich grid somewhat like FlexGrid

  8. Jun 12

    Tom Duerr says:

    I'm using the tabview component and I needed two additional pieces of functional...

    I'm using the tabview component and I needed two additional pieces of functionality

    • A current default tab - so when the page was refreshed , the user would remain on the same tab
    • A default action for each tab 

    With Andreas's help, I was was able to come up with the following and I thought I would share in case anyone else needs this functionality.

    In TabViewRenderer.groovy , replace this line

    builder.yieldUnescaped "&nbsp;&nbsp;&nbsp; var tabView = new YAHOO.widget.TabView(\"${attrs.id}\" );\n"&nbsp;&nbsp;

     with this (adding the activeIndex parameter)

    builder.yieldUnescaped "    var tabView = new YAHOO.widget.TabView(\"${attrs.id}\", {activeIndex:\"${attrs.curTab}\"});\n"  

    So now you can instantiate the tabview as folows

    <richui:tabView id="tabView" curTab="${curTab}" event="processTab(this);">

     where curTab is the index of the tab that you want to be displayed by default. Tab index is zero based.

    I retrieve the current tab in the session  (It get sets in the session by using a javascript event to call a controller - see below)

    &nbsp;<g:if test="${session.curTab}">
&nbsp;&nbsp;&nbsp;&nbsp; <g:set var="curTab" value="${session.curTab}" />
</g:if>
<g:else>
&nbsp;&nbsp;&nbsp;&nbsp; <g:set var="curTab" value="0"&nbsp; />
</g:else>

    Also note the "event" param which can be a javascript function that you want called when the user clicks on this tab.

    In my case, this javascript, makes an Ajax call to a controller to set the current tab in the session and then makes another Ajax request to get the data for the tab 

    function processTab(obj) {

tabs = tabView.get('tabs');
idx = tabView.get('activeIndex');

// add the current tab to the session
new Ajax.Request('/tpimgr/tabView/currentTab', { method:'get' ,parameters: {currentTab: idx}});&nbsp; &nbsp; &nbsp;

// if the current tab is the tab I want - then lets kick off
// the ajax call

if (tabs\[idx\].get('label') == "Logs") {
new Ajax.Updater('tab3','/tpimgr/logTrace/list',{asynchronous:true,evalScripts:true,onComplete:function(e){document.body.style.cursor = 'default';},onLoading:function(e){document.body.style.cursor = 'wait';}});
}

     Thanks,

    Tom Duerr

    tdsystemsgroup.com