preventing grails-ui tooltip from disappearing

Today I tried to prevent the grails-ui tooltip from disappearing after 5 seconds when the mouse is not moved. From the YUI doc I knew I had to alter a parameter 'autodismissdelay', but I haven't found a way to pass this parameter with the taglib. Unfortunately the only way I succeeded was to alter the ToolTip.js in grails-ui-1.2-SNAPSHOT\web-app\js\grailsui where I changed the value from 5000 to -1.

grails-ui autocomplete with "onSelect" event

Today I had my first try in integrating an autocomplete feature. I was more successful than expected due to the very easy to use grails-ui library. You have to put code like that in your controller to serve data to the taglib:

def searchResultsAsJSON = {
     def jsonList = Gene.list().findAll{it.name.startsWith(params.query)}.collect{[id: it.id, label: it.name]}
     
     def jsonResult = [
         results: jsonList
     ]
     render jsonResult as JSON
 }

As you can see you need to provide your data JSON formatted. You also have to use the parameter "query" to filter results that fit what the user has already typed in. Furthermore you can collect only those properties of your domain class that are really necessary for the autocomplete. These are namely an id and a label to display and search. Okay now that we've seen this part, let's have a look at the GSP:

<gui:autoComplete
            minQueryLength="3"
         queryDelay="0.5"
         id="quickSearch"
         resultName="results"
         labelField="label"
         idField="id"
         controller="quickSearch"
         action="searchResultsAsJSON"
  />

Here you can see different options that you can influence, e.g. how many letters one has to type in before the taglib starts AJAX-calling. Although more or less self-explaining, I will say a few words about those properties:

• idField is the name of the ID field in the JSON output
• labelField is the name of the label that is displayed for search in the JSON output
• resultName is the name of the top node used in JSON. In the above example this was results.

At this stage I was already quite happy with my results, but I wanted one more feature that was unfortunately not included. I wanted to define some action when a selection has been made by the user. Therefore I added some javascript to the page:

YAHOO.util.Event.onDOMReady(function() {
   GRAILSUI.quickSearch.itemSelectEvent.subscribe(function(type, args) {
      ${remoteFunction(controller:"quickSearch", action:"showResult", params: '\'name=\'+GRAILSUI.quickSearch.getInputEl().getValue()', update: [success:'body',failure:'body'])};
   });
 });

It took some time to find out how to do this, but finally it worked. What one has to know is:

What event do I have to subscribe to and even more complicated how do I access information about the selected entry? The event's name was itemSelectEvent and I managed to access the DOM element to get the selection's value, but I would be very interested to access the ID of the selected entry, too. Up until now, I could not find the ID anywhere in the DOM. Any comments on this problem are welcome!

add drag and drop functionality to GRAILS-UI datatable editors

In my application I have added a GRAILS-UI datatable with in-line cell editing functionality at the bottom of my page. Problem was that the date picker element, which is a big fat, didn't fit onto the page and was unusable though. I asked the mailing list for help about that and Matthew Taylor adviced me to try and manipulate the position via CSS. That did not work for me as I figured out that the position was hard-coded in the style property of the div tag.


When I googled for a solution I found a post where it is explained how drag and drop functionality can be added to a YUI calendar widget. I adapted the solution here. Unfortunately I found no better way as to manipulate GRAILS-UI's source code. I edited DataTableTagLib.groovy around line 215 like this:

case 'date':
 editorConstruction += """
  var ${editorName} = 
  new YAHOO.widget.DateCellEditor();\n
  ${editorName}.subscribe('showEvent', function()
  {var dd = new YAHOO.util.DD(
  ${editorName}.getContainerEl());});\n"""
break;

With this, the date picker has become draggable and can be of use for my users again.

grails-ui menubar and ajax with remoteFunction

I wanted to turn the links of the grails-ui menubar into ajax remoteFunctions or remoteLinks. This was - once more - far more complicated than I had anticipated. Fortunately almighty google brought me to the solution. The ugly thing: One has to change the code like stated in the jira. Now another ugly thing about the solution is - as indicated by the author - that one still has to provide a url. Not a problem I thought, but the whole thing did not work at all. I had to spend some time, before I could figure out what was going on:

Both - the URL and the remoteFunction - are executed. The remote function comes first (which is a good thing as we will see), but then the URL kicks in and you have a double page change behaviour. The fix is as easy as you can imagine (I wish someone had told me). You have to add 'return false' at the end of the remote function. This stops the URL href feature from being executed at all. Voilà remote function can reign in peace now.

grails-ui datatable in-line cell editing and dropdowns

Another post about almost the same topic. How to feed the dropdown options for the in-line editing with values from the database. It is quite simple, although I was running in the wrong direction for some time and I was not the first one with this problem.

The simple answer is: you have to add a groovy collection to your model like this (I wanted to be able to choose a user, so I collected user names from the spring security core user class)

def userNames = User.list().collect{it.username}
render(template: '/layouts/template', model: [userNames: userNames])

Now you can do it like this:

..., config:[dropdownOptions: userNames, disableBtns:true]],...

grails-ui datatable in-line cell editing and dates

Today I am playing with the cool in-line cell editing feature of gui:datatable. I wasn't able to get the datePicker working however until I found the solution in a comment on Matthew Taylor's blog.

Apparently, one has to transform the date into a JSON compatible shape. Lucky for us, Matthew has already provided us with such a method:

grailsUITagLibService.dateToJs(myDateObject)

Okay, parsing the String back to a date in the controller was hard work for me. What has been suggested by Matthew in his DemoController produces exceptions. I had to put some own effort into this:

else if(params.field == "date")
         {
          def simpleDateFormat = new java.text.SimpleDateFormat("E MMM dd yyyy HH:mm:ss ZZZZZZZ", Locale.ROOT);

          Date date = simpleDateFormat.parse(params.newValue)
          passage.date = date
         }

Use grailsui Menubar in taglib

The common way of using the grailsui menubar is to incorporate the offered tags like or directly into a template. For my purposes, where I wanted to create a menu based on database properties, I wanted to build a menubar within my own taglib. Although tags can be easily accessed like for example g.createLink(), I had to study the source code of MenuTagLib.groovy to find out what parameters were expected of me. The example shows how it works:

out << gui.menubar(id: 'topMenuBar', renderTo:'top1'){ gui.submenu(label: 'Links'){ gui.submenu(label: 'Search'){ gui.menuitem(url:'http://www.google.de', helpText: 'Google'){ 'Google' } } } }

Here is what caused me some problems: You have to define the parameter helpText (can also be ''). A url is needed, to trigger some controller action you can use createLink. Still have to figure out how to use remoteLink here. The label of the menuitem is not a parameter, but the body of the menuitem {}.

And a last remark: As the menubar did not work properly with my yui layout manager, I had to change two things. First I had to add the parameters zIndex:1 and scroll:null to the layout definition:

{ position: 'top', height: 24, body: 'top1', zIndex: 1, scroll: null },

zIndex tells the layout manager which element overlaps and the default is 0. As this is my onley zIndex higher than 0, the menu will overlap all other parts. Furthermore, scroll: null enables the menu to escape the borders of the div container.

I mentioned a second thing to change: Only if you add the parameter renderTo: 'top1' to the menubar definition, the menubar becomes active.

changing the style of yui treeview

In my project I make use of the YUI-TreeView widget. The CSS files of YUI are - let's say overwhelming. I found a nice description of how to find the correct style classes with Firebug. Here is an example where the developers explain how to obtain a folder style tree view.

I really just wanted to perform a small little change: The focus bg color of the selected tree nodes. This is what you have to override in your CSS:

.ygtvfocus{background-color:#B4CCFF;}

missing js files (bubbling library)

As javascript is not entirely my mother tongue, I am using the wonderful GrailsUI plugin to bring some magic to my web project. The plugin itself is making heavy use of the YUI library and the bubbling extension. Therefore, it needs the respective js files in the web-app/js directory.

Today, I messed up my plugin configuration (Subclipse decided to ruin my day) . As a consequence I reinstalled all plugins,. I was quite unhappy with the result, as the GSPs just ignored all the components. Using Firebug, I found out that the js files of bubbling were all missing.

It turned out that the files that were expected to be in the subfolder web-app/js/yui-cms/2-1 were actually in 2.1. Renaming the folder solved that problem.