Jquery already provides auto suggest functionality. The question here is making functionality generic so that next time we have to use that its a breeze to use. Lets create a tag which can add the necessary jquery code for a text field to have auto suggest capability.

HTML code :

 <g:textField name="city" id="city" value="" />
<g:autoSuggest autoCompleteForId="city" searchObject="com.xebia.Address" searchProperty="city"/>

For searchObject property we must give the fully qualified class name of the domain object. Here we have Address as the domain objects which has a property city in it. The above tag is handled by the following closure in the Taglibrary.

Autocomplete Tag Library:

    def autoSuggest = { attrs , body ->
		def searchObject = attrs.searchObject
		def searchProperty = attrs.searchProperty
		def htmlId = attrs.autoCompleteForId
		def width = attrs.width
		def contextName = grailsApplication.config.grails.serverURL
		def actionName = attrs.action ? attrs.action : 'autoSuggest'
		def controllerName = attrs.controller ? attrs.controller : 'autocomplete' 

		String serviceUrl =  createLink(controller:controllerName, action:actionName , absolute:true)

		importScriptsAndCSS(out, contextName, pageScope);

		out << "<script>  jQuery(function() {"
		out << 	"\$(\"#"+ htmlId+ "\").autocomplete({ "
		out <<			  " serviceUrl: \'"+ serviceUrl +"\',"
		out << 		'''
					    minChars:1,
					    maxHeight:400,
					    zIndex: 9999,
					    deferRequestBy: 0,
					 '''
		if(width) {
			out << 	"width:"+width+","
		}

		out <<	"params: {searchObject:\'"+searchObject+"\',searchProperty:\'"+searchProperty  + "\'}, " 

		out << '''
						noCache: false
					});
			});
			 </script>
		'''

	} 

The method importScriptsAndCSS(out, contextName, pageScope) as the name suggests, adds the necessary css and javascript needed only once per page.
The auto suggest tag that we use in tandem with a text field captures the property that we need suggestions for on an domain object and adds necessary jquery code to hit a generic AutoSuggestController which will return the matching options in JSON format to jquery. Now lets look at the generic AutoSuggestController code.

AutoSuggestController

  def autoSuggest = {
		log.debug("Inside the auto complete controller")
		def searchObject = params.searchObject
		def searchProperty = params.searchProperty
		def queryValue = params.query

		def searchCriteria = grailsApplication.getClassForName(searchObject).createCriteria()
		log.debug "query value is ${queryValue}"
		def results = searchCriteria.list{
			projections {
				groupProperty(searchProperty)
			}
			ilike(searchProperty, "%${queryValue}%")
			maxResults(5)
		}
		log.debug("Auto suggest Results  : "+results)
		render createJSONForResults(results, queryValue , searchProperty)
	}

The above code snippet is the action that will be accessed by the jquery which also passes the search Property and Search Object to the controller. Dynamically we determine the domain object by this line of code grailsApplication.getClassForName(searchObject).createCriteria()

We get the domain object from the fully qualified class name and then create a criteria on the grails domain object. In this criteria we attempt to get the list of objects for which the searchProperty(city) matches. Once we get the list of objects we have to convert the list into JSON object format, so that that is passed back to the jquery to render the auto suggestions.

JSON format can be achieved like this

   private String createJSONForResults(def results, String queryValue, String searchProperty) {
		def resultsArray = results.toArray()
		StringBuilder resultsJSONObject = new StringBuilder("{ query : \'${queryValue}\' , suggestions: [")
		if(resultsArray.length > 0) {
			for(int i=0;i<resultsArray.length-1;i++) {
				String currentProperty = resultsArray[i]
				currentProperty = "'" + currentProperty + "',"
				resultsJSONObject.append(currentProperty)
			}

			def lastResult = resultsArray[resultsArray.length-1]
			String lastElement = "'" + lastResult + "']}"
			resultsJSONObject.append(lastElement)
			return resultsJSONObject.toString()
		} else {
			resultsJSONObject.append("]}")
		}
	}

This piece of functionality can be used across the Grails applications and can be resued heavily in a single application as well following the DRY principle.

Conclusion
Following the same way of using a taglibrary and generic controller we can implement the other functionalities like rating objects, using adding favourites and many more using Grails dynamism.

It took some time to figure out the problem. The code coverage plugin(present in the .grails folder) has the cobertura jars in its lib directory. By mistake the cobertura jar with a different version is checked in to the lib directory of the project. So there was a version conflict and hence cobertura was not loading the class informations. Once i removed the unnecessary cobertura jar in the projects lib directory, cobertura was generating reports normally. This could be one of the reasons for cobertura not loading the classes. Hope this helps if you are facing similar problem.

The prerequisite for this feature is to have the acegi plugin installed. In my last post , after the getting the facebook user details we redirect to facebook controller passing his details(facebook user id, sessionKey etc) as params :

document.location.href="${params.lang}/facebook/subscription?firstname="+firstname+"&lastname="+lastname+"&fbuid="+uid+"&sessionkey="+sessionkey+"&pic="+pic;

Here we are passing the facebook user id as fbuid. Assuming the user class in the application is UserAccount, we can have a fbuid property on UserAccount. From the param fbuid we can get the existing user.We can also choose to connect fbuid to an existing user in our application. For that we may need to authenticate user normally into our app and then updating his UserAccount.fbuid from the param fbuid. We can use a popup mechanism to give the user the option to connect his facebook uid to his existing account or create a new account with his facebook user id.

Lets assume that we already have an Useraccount and we have its correspondint fbuid attached to it. How can we create his authentication object. Here is the code which can be part of as service class(utilityService for eg.)

In FacebookController

subscription = {

def account = UserAccount.findByFbuid(params.fbuid)
   if (account) {
     // assuming user has list of authohorities or roles ...
     utilityService.authenticateFacebookUser(params.fbuid, params.sessionkey, account.authorities)
   }
}

The idea here is that from fbuid we can get his account(Since user has a fbuid property). From that we can get his authority and then authenticate him using the following method in utilityService.

public void authenticateFacebookUser(long uid, String sessionKey, GrantedAuthority[] authorities) {
    def token = new FacebookAuthenticationToken(authorities, uid, sessionKey)
    FacebookAuthenticationToken authentication = facebookAuthProvider.authenticate(token)
    SCH.context.authentication = authentication
}

Here FacebookAuthenticationToken and facebookAuthProvider are the classes provided by acegi grails plugin & SCH is the alias for Security Context Holder. By this way an user can be linked with his facebook id and authenticated.

How ever there are some changes that could be needed. In our existing application we are using acegi plugin and we use the AuthorizeTagLib.grrovy. We have to extend this to include the facebook authenticated users. Other wise when we use this existing logic we will get missing property exception on aunthentication object, as the authentication object is different in case of facebook and normal authentication object.

For example the isLoggedIn() method in AuthorizeTagLib.groovy can be extended like this.

public boolean isLoggedIn() {
def authenticationObject = SCH?.context?.authentication
return (authenticationObject instanceof FacebookAuthenticationToken || authenticateService.isLoggedIn())

}

As the case may be other methods of the AuthorizeTagLib may have to be extended as well. This applies for classes facebookAuthenticationProvider and UserDetailsService of Acegi plugin.By this the user of our application can be authenticated by his facebook credentials and he can use our site normally.

Summary:In this post we basically talked about the idea of connecting a userAccount to user’s facebook id, and authenticating user by his facebook credentials also.

First step would be to get the facebook connect button on to our home page. The code for this is below.

Getting the facebook connect button on our home page and its functionality

 <fb:login-button onlogin="facebook_onlogin();"></fb:login-button>

Ofcourse we need to add the facebook namespace to our gsp/html page.

 xmlns:fb="http://www.facebook.com/2008/fbml" 

1) fb:login-button is an XFBML tag, we need some Facebook-specific JavaScript to actually render it. This line does the trick.

<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"></script>

2) Create a cross domain receiver file, which is necessary for secure cross-domain communication with Facebook

create a file with a name xd_receiver.htm and put the following contents into it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <body> <script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/XdCommReceiver.js" type="text/javascript"></script> </body> </html>  

3) Every connect website is a facebook application and an API key is required. Fortunately we can easily generate an API key from
here , fill in details and submit the application.

4) We need to tell facebook about our API key. We need to put this code in the <body> tag.

<script type="text/javascript">FB.init("3f0ba1d70537bbf9381bca2bbb9f9a93","xd_receiver.htm");</script>

This tells the facebook about out API key and the location of the out cross domain receiver file.

By this piece of code we can get the fbConnect button on our home page. But when you click it nothing happens as we need to add a the functionality for the function facebook_onlogin()

function facebook_onlogin() {
var uid = FB.Facebook.apiClient.get_session().uid ;
var sessionkey = FB.Facebook.apiClient.get_session().session_key;FB.Facebook.apiClient.users_getInfo(uid, new  Array('first_name','last_name','email','pic_square_with_logo'), function(result, ex) {
var firstname = result[0]['first_name']
var lastname = result[0]['last_name']
var pic = result[0]['pic_square_with_logo']
document.location.href="${params.lang}/facebook/subscription?firstname="+firstname+"&lastname="+lastname+"&fbuid="+uid+"&sessionkey="+sessionkey+"&pic="+pic;});
}

The code is self explainatory. To be brief, here we are using the javascript library FeatureLoader.js.php to contact the Facebook and get details of a facebook user like his first name, last name, his profile picture etc.

We also get his facebook id using  var uid = FB.Facebook.apiClient.get_session().uid ;

If the user doesnt have a facebook session already it prompts the popup to log on to facebook. If you want to know how it is done look through the sourcecode here. If he is logged in we can get the details of the facebook user like facebook id, first name, last name, email etc.

The trick here is to pass on the details to our custom controller, lets name it FacebookController. More precisely this is the code that is doing that.

document.location.href="${params.lang}/facebook/subscription?firstname="+firstname+"&lastname="+lastname+"&fbuid="+uid+"&sessionkey="+sessionkey+"&pic="+pic;});

The action name in facebook controller is subscription and in here we can choose to authenticate him in to our application by connecting him to an existing user. This is to say, user doesn't need to log in to grails application by his username and password rather use his facebook. I will explain how this can be done in my next blog.

For example purpose I choose to show a barchart here which shows goals scored by Striker in a Season by name.  We need to add the chart to our view page. Taglibrary of grails is of a great help here especially if we are using the chart at various places in our application.So first let us write a Taglibrary OFCTaglibrary.groovy and add a closure chart. Ofcourse this is put under the Taglibrary folder for grails for convention purposes.

public class OFCTaglibrary {
  static namespace = "grailsOfc"
  def chart = { attrs ->
  if (!attrs.name)
     throwTagError("Tag [chart] is missing required attribute [name]")
    String name = attrs.remove('name')
    String width = attrs.width ? attrs.remove("width") : "350"
    String height = attrs.height ? attrs.remove("height") : "200"
    String url = attrs.url? attrs.remove("url") : ""
    String flashFileName = "open-flash-chart.swf"
    out << "<div id='$name' name='$name'></div>\n"
    out << """
    <script type="text/javascript">
    var params = {};
    params.wmode = "transparent";
    swfobject.embedSWF("${request.contextPath}/${flashFileName}", "$name", "$width","$height","9.0.0", "expressInstall.swf", {"data-file":"$url"},params);</script>
    """
  }
}

Now we have created a tag library which we can use in view  pages to insert the OFC chart .  I will expain the attributes  in the closure a little later.(rather i feel it is self expainatory )

This is the piece of code that we should put in the view to show a OFC chart.

<grailsOfc:chart name="barChart" url="${createLink(controller:'stats',action: 'bar_graph')}" width="${chartWidth}" height="174" />

So when this page is rendered grails looks for the Taglibrary with namespace grailsOfc. In this Taglibrary it looks for the chart closure, and puts the code for the swf object in the view. The  open-flash-chart.swf it looks for the data-file in the url

${createLink(controller:'stats',action: 'bar_graph')}

createLink is a GrailsTag which we can use to call an action on Grails Controller. The idea here is we can put the logic to get the data from the server.
We shall now look at the StatsController code.

 def bar_graph = {
 def players = Player.findAll() //could be a more complex logic. This is just to get a filtered list of players

 def x_axis_labels = []
 List values = []
 players.each {
   x_axis_labels.add( it.playerName)
   Map bar = [:]
   bar.put("top", it.goals())
   bar.put("colour", "#0080F7")
   values.add(bar)
 }

 String backgroundColour = "#FFFFFF"
 List elements = [];

 def barChart = [ type: "bar", values: values, tip: "#val# Goals", colour: "#E3E2DD", alpha:1 ]
 elements.add(barChart);

 //    x Axis
 Map xAxis = ['tick-height': 0, colour: "#74665D", stroke: 1, 'grid-colour': "#FFFFFF",
               labels: [labels: x_axis_labels, visible:true]]

 //y Axis
 Map yAxis = [ 'tick-height': 0, colour: "#74665D", stroke: 1,'grid-colour': "#E0DDD8", min: 0, max: 50, steps: 15,
                labels:[text: "#val#"]]

 //assemble the chart
 HashMap goalChart = [:]

 if (values.size() == 0) {

 goalChart['title'] = [text:"noDataExists"]
 }

 goalChart = [ x_axis:xAxis, y_axis:yAxis, elements:elements, bg_colour:"#FFFFFF" ]

 render goalChart as JSON; //grails provides converters to convert map in to JSON format.

 }

To summarize here we are building the adding x-axis, y-axis and its labels, adding them to the chart
which can be anything (bar or pie) in a map and convert this to JSON format.

The graph would look like this :

Problem :
By this way we can show the Bar graph easily. How ever I faced a problem here.I couldn’t get a scroll on x-axis inside the chart.
The chart width was increasing. I couldn’t find an option for the scroll for OFC chart. So I did a workaround. I put this OFC
chart inside a <div> and and in the div i gave the style properties as : overflow-x:scroll; overflow-y:hidden; width : 550px;
This put the chart inside the div with a scroll if the chart widht is increased to more than 550px. I dont know if this option
is there in OFC. But i used this workaround and client was OK with that.

Conclusion :

Finally i feel if your client is not ready to pay for the charts, OFC is a great option. With this we can achieve all sorts of graphs.For more examples you can visit the OFC site

This blog discusses the the Practicality of this Metaprogramming in the Grails projects based on my experiences.

Let me explain briefly how we can achieve Metaprogramming in Groovy in a brief way.

Every method invocation and property access in Groovy is done through metaclass. This metaclass contains the properties and methods of the class. Using this metaClass we can add,ovverirde methods to an object and thereby change object behaviour at runtime.
For example :

we can add a method to an object using its metaClass and a closure

class Module {
String name
}
Module.metaClass.album = {
//add the logic for this dynamic method album
}

Some of the scenarios where we can use Metaprogramming in my Grails project(indirectly) are

1) Using Dynamic methods for domain objects provided by GORM

Module.findAllByNameLike("%Groovy%");
def module = new Module(name:'groovy',url:'someurl').save()

In controllers and Services we can use these dynamic methods and it makes life very simple.

2) Groovy has added the some methods to final classes like java,lang.Integer, java,lang.String.

Groovy added closure methods to metaClass of these classes.

3.times {
//put your business logic here
}

We can use this helpful methods of Groovy in our application. The readability is increased here and syntax is simple.

Consider a situation if we have to add these dynamic methods to business objects in our application. Yes we can very well add these methods dynamically and do our business logic but it comes at huge cost.

I strongly feel that using these metaClass mechanism in our business logic has more bad consequesnces than good. It makes code impossible to read and understand (Groovy is already a bit difficult than Java )and difficult to manage later on. I think its better to have appropriate design of domain objects and services rather use this metaClass stuff at all for having dynamic method behavior for object. Practically i don’t see any advatage to use metaClass to add dynamic methods in our application even if we have a use case because we keep changing our application code frequently unlike the Grovvy library class that we use. I also wonder what kind of applications heavily needs this change of behaviour of objects.

One area where I think we can use this metaClass mechanism is in Unit testing your Grails application. We can ovveride the existing method of dependant object using the metaclass and mock the behaviour of any object. (Only if you are bored with normal mocking mechanism and if you fancy using metaClass)

Conclusion :

Metaprogramming sounds so cool and you would be tempted to use it some how in your project(at least i was). I feel that we have to use this very judiciously so that we don’t make our codebase ‘hardToUnderstand’ and ‘hardToManage’ and ‘hardToTest’. If you(who used Grails in projects ) disagree with me, please feel free to put the counter argument and usecase where you used the metaClass to add dynamic methods in your Grails application