Gravl: Autocompleting and Funky Timelines

An article by Glen    7 Comments

If you haven’t had a chance to play with the RichUI plugin, you’ve got to take it for a spin – it’s just fantastic. I’ve been meaning to implement autocomplete for Gravl tags on new blog entries, and with the RichUI plugin (which uses Yahoo Autocomplete under the hood) it’s a total snack.

First you declare the RichUI taglibs in your gsp file (note: I’m using the undocumented delimChar setting so that I separate multiple tags with a space):

<resource:autoComplete skin="default" />
<richui:autoComplete name="tagList" delimChar=" " style="width: 100%"
    action="${createLinkTo(dir: params.blog+ '/blog/tagcomplete')}"/>

Then you add yourself a backend action that returns some xml representing the items for the list. I filter the tags by hand because I want to keep everything case insensitive, but your might be able to do the lot in a dynamic finder.

def tagcomplete = {
    Blog blogObj = Blog.findByBlogid(params.blog)
    def queryRegex = "(?i)${params.query}" // case insensitive...
    def tags = blogObj.tags.findAll { tag -> tag.name =~ queryRegex }
    render(contentType: "text/xml") {
        results() {
            tags.each {t ->
                result() {
                    name(t.name)
                }
            }
        }
    }
}

And you’ve got yourself an autocomplete for tags…

Not that we’ve got a nifty tag autocomplete, it’s time to take the timeline virtualisation tag for a spin… One the way into the timeline populate the start date for your entries…

def timeline = {
        Blog blogObj = Blog.findByBlogid(params.blog)
        def entries = BlogEntry.findAllByBlogAndStatus(blogObj, "published", [ sort: 'created', order: 'asc'])

        return [ blogObj: blogObj, startDate: entries[0]?.created  ]
    }

Then create the tags in your page to kick things off..

<resource:timeline />

<richui:timeline style="height: 500px; border: 1px solid #aaa" startDate="${startDate}" datasource="${createLinkTo(dir: params.blog+ '/timelineData')}" />
        <g:javascript>
            initTimeline();
        </g:javascript>

Which will callback to render the data on a timeline…

def timelineData = {

        def baseUri = request.scheme + "://" + request.serverName +
                 (request.serverPort != 80 ? ":" +  request.serverPort : "") +
                 grailsAttributes.getApplicationUri(request)

        Blog blogObj = Blog.findByBlogid(params.blog)
        def entries = BlogEntry.findAllByBlogAndStatus(blogObj, "published", [ sort: 'created', order: 'asc'])

        println "Timeline rendering for ${entries.size()} entries"

        render(contentType: "text/xml") {
            SimpleDateFormat sdf = new SimpleDateFormat("MMM dd yyyy HH:mm:ss", Locale.US)

            data() {
                entries.each { entry ->
                    event(start: sdf.format(entry.created),
                            title: entry.title,
                            link: baseUri + entry.toPermalink(),
                            "" )
                    }
            }
        }
    }

And you have one funky looking timeline… (click on the Timeline link on the right gutter if you want to play with the live one)

Well thats enough UI work for one day… Huge props to Andreas for an outstanding plugin!