Glen Smith (Gravl Related category)

Gravl: Funky Image Preview and Inplace Editing

2008-01-29T11:06:00Z

I've been having fun implementing my first cut at Image/File management for Gravl, and along the way I've learnt about LightBox and the Scriptaculous InPlaceEditor stuff.

First up, I needed a way of doing an image preview, so I could see what all of those PNGs really meant. Lightbox gives you a great way of "overlaying" the preview image as a popup without the need to refresh the page. Very snazzy. I followed the instructions and I was up and running in a few minutes.

Everything will make more sense with a little screencast (1.5mb)

Next stop was handling image renaming. I was really after a way to edit the actual filename inplace. Enter InPlaceEditor. This call lets you specify the id of the object you want to edit inplace, along with the url to do the ajax call against (which will get passed the user's updated value in a params.value). If all is well, you return the changed value and life continues.

Well that was quite a lunch hour. I have a basic image management solution to keep me going so I can now upload the images for this blog entry without needing an SCP client!

Happy Previewing in Grails!

Gravl: Autocompleting and Funky Timelines

2008-01-23T02:24:00Z

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!

Gravl: Fulltext Search Redux with Searchable

2008-01-22T08:54:00Z

Thanks to a fantastic tip from Karl on yesterday's post, I've got the searchable plugin up and running on my Grails-RC3 install! Here's the fix from Karl:


i‘ve got a working Searchable-0.4-SNAPSHOT wo. npe, this is working with the RCs too.
In the plugin‘s java directory u need to slightly modify the 
org/codehaus/groovy/grails/plugins/searchable/compass/SearchableCompassUtils.java file.

Here is the “patched” version:
http://rafb.net/p/prsZip92.html (nopaste url)

So I patched my version, and I'm up and running. Getting Gravl converted over was a snack. Basically, I just had to remove all my custom code! And, of course, add the magic static searchable=true to my BlogEntry object.

After I patched the plugin, I ran grails install-searchable-config to get a SearchableConfiguration file in my conf directory. From there I could change the compassConnection setting to point to the place I like to store my indexes.

My search action could then shrink to:


def search = {

        def query = params.query
        def blogid = params.blog
        
        def results = BlogEntry.search(query, params) 

        return [ results: results, query: query ]
    }

The results you get back in ${results.results} are first class domain objects! So it's pretty much just a matter of a little markup...


<g:each var="result" in="${results.results}">

                <div class='hit'>

                    <div class='hitEntry'>
                        <div class='hitTitle'>
                            <a href='${request.contextPath}/${result.toPermalink()}'>
                                ${result.title}
                            </a>
                        </div>
                        <div class='hitInfo'>
                            <g:niceDate date="${result.created}"/>
                        </div>
                        <p class='hitBody'></p>
                    </div>
                </div>

            </g:each>

Add a g:paginate into the mix, and you're cooking!

One thing I have lost in the conversion is the ability to do hit term highlighting. I know Compass supports it, so it might just be a matter of digging in a little deeper! I'd also like to be able to store some DynamicMetaData with the index (blogEntry.blog.blogid), but haven't managed to get the annotations working just yet...

Anyways... a huge code saving. Give it a try on the top right. And thanks Karl, you're a champion!

Happy searching!

Gravl: Adding Fulltext Search

2008-01-21T08:54:00Z

I've just finished adding fulltext search to Gravl, and, while is still needs some more CSS tweaks, it's working just great. I took the chance to have a good look at the Searchable plugin and it looks awesome! Sadly, it just kept NPEing at me and complaining that it couldn't find java.lang.Class! Perhaps it's a victim of the RC-flux, no doubt it will resurface as 1.0 settles in.

Anyways, I ripped the SearchService out of Groovyblogs, and I was up and running in an hour. I must bundle that thing into a LuceneSearch plugin someday... it's really very handy. Feel free to have a search in that box at the top right, "Pebble" gives you a good chance to see the paginate in action.

So that last real piece of the Gravl puzzle is image upload and management. But right now I've got to get cracking on my "Grails Extreme Makeover" talk for G2X.

Search on!

Gravl: Referers, Geocoding, Charts

2008-01-16T19:10:00Z

Continuing my obsession with the power of Grails filters, it was time to add some referer tracking and ipaddress Geocoding to Gravl to see where people are coming from. So I created a new RefererFilters class in conf and I was up and running. I already had a little CacheService happening, so I created a new 24 hour cache, scooped up some interesting browser header data, and squirrelled it away for later:


 // Scoop up Referer and User-Agent and remote IP
def userAgent = request.getHeader("User-Agent")
def referer = request.getHeader("Referer")
def ip = request.getRemoteAddr()

// Grails adds request.forwardURI to keep the orig URI
def url = request.forwardURI 

// put in the cache, not use of applicationContext to lookup service bean
CacheService cacheService = applicationContext.getBean('cacheService')
cacheService.putToCache("referers", 60*60*24, Calendar.getInstance(),
				[ userAgent: userAgent, referer: referer, ip: ip, url: url ])

One thing to notice in the above, service injections don't happen in the filter chain, but you are provided with an applicationContext that you can use to look up your services by name.

Anyways, now I've got some stats, it's time to do some crunching... Referers was the first target to add to my stats page... though the css needs some work to fit the counters in :-)

Now what to do with those ip addresses I was gathering? Picking up on the stuff Simon is doing in the latest Pebble, I thought it might be nice to add some geocoding to that referers list so I can see which country my traffic is coming from.

Turns out there's a very simple little Java library available from MaxMind called GeoLite Countries. I mavenized the source into a jar, then dropped the resources file into my /src/java/resources. I already had the ip addresses I'd gathered from headers into my cache, so to convert them to a country name, it was time to create a CountryLookupService to wrap all the calls to the GeoLite library:


class CountryLookupService {
	
    LookupService lookupService

    private LookupService getLookupService() {
        if (lookupService == null) {
            // assume you put your data file in /src/java/resources
            def url = this.class.getResource("/resources/geoIp/GeoIP.dat")
            log.debug ("Looking for GeoIP database at: $url")
            lookupService = new LookupService(new File(url.toURI()),LookupService.GEOIP_MEMORY_CACHE);
        }
        return lookupService
    }

    def getCountryName(String ipAddress) {
        log.debug "Looking up address for ${ipAddress}"
        return getLookupService().getCountry(ipAddress).getName()
    }
}

And we're off and running. The GeoCoding API requires you to supply a current GeoIP.dat file, and the sample above shows you how to load it from your Grails /src/java/resources folder to keep everything all relative. I'm not sure where the agreed convention is on resource placement in Grails, but there is as good as any for now... After that I just needed to iterate my cache, and we have ourselves a hashmap of countryname to hitcount:

Once you've crunched all that data, it'd be nice to produce some slick charts to make it all digestable. And what quicker way to chart it than with James Williams uber cool Google Charts Plugin.

If you haven't used Google Charts before, the idea is just so good and so simple. Create an img tag with the src that points off to http://chart.apis.google.com/chart? then add url params to tell it your chart size, type, title, etc. and Google will render a png on the fly for you.

James plugin makes that process very simple and painless. I take my hashmap of countries (which carries countryName -> hitCount) and feed it straight into his taglib:


<g:pieChart type="3d" title='Hits By Country' size="${[700,300]}"
   labels="${countries.keySet()}" dataType='simple' data='${countries.values().asList()}' />

And the result?

So perhaps a pie chart might not be the best selection... :-)

Wow.. that was all quite an adventure in Referers, Geocoding, and Charting! I'll be talking about some of these adventures at G2X, so if you're in North America next month, make sure you drop over and say hi!

Happy Grails Stats crunching!