richui:treeView, expand and select

I extended the richui:treeView component a little bit as I wanted to be able to have a little control about extending and selecting nodes depending on what was happening on the rest of my page. I therefore followed the instructions on:

http://6by9.wordpress.com/2009/06/18/62/

Additionally to the extended attribute, I also added the selected attribute to the code:

builder.yieldUnescaped "    function createNode(text, id, icon, pnode, expand, select){\n"
builder.yieldUnescaped "        var n = new YAHOO.widget.TextNode(text, pnode, false);\n"
builder.yieldUnescaped "        n.labelStyle=icon;\n"
builder.yieldUnescaped " if(expand == \"true\"){\n"
builder.yieldUnescaped "  n.expanded = true;\n"
builder.yieldUnescaped " }\n"
builder.yieldUnescaped " if(select == \"true\"){\n"
builder.yieldUnescaped "  n.selected = true;\n"
builder.yieldUnescaped " }\n"

and a few lines later this one had to be modified twice:

builder.yieldUnescaped "    createNode(\"" + it.@name + "\", \"" + it?.@id + "\", \"" + it.@icon + "\", $parent, \"" + it.@expanded + "\", \"" + it.@selected + "\");\n"

Afterwards I was able to set the expanded and the selected property during XML generation as node properties. The expanded attribute is immediately accepted by the YUI widget, but selected is not. I found out that you have to look for the selected property yourself and then use the focus method to apply your selection to the actual node:

var selectedNode = YAHOO.widget.TreeView.getTree('tree').getNodeByProperty('selected',true);
if (selectedNode){
 selectedNode.focus();
}

With this, I was able to create the YUI treeView with nodes expanded and selected as I wanted.

javascript event mechanism for my application

The more and more I ajaxify my grails application,the harder it gets to keep all information on a site up-to-date. In my worst-case scenario there are dozens of dependencies and it is impossible to think of all of them. So the time for a event mechanism has finally come. Why haven't you done that a long time ago, you might ask. Well, I am not really familiar with javascript and as there is no in-editor correction like in my early Java days on Eclipse, I have had a hard time finding bugs in my code.

Lucky me: the cool guys from the YUI project have already taken the worst complexity of the problem of my shoulders. This means that I have used the YUI2 event utility. There are benefits I can not even imagine as a newbie, but features like automatic scope correction, object pass-throughs, etc. sound very cool and benefitial to me. Here is how I have set the whole thing up:

I have modified the main.gsp to introduce an event handler object. Putting it here makes sure that it will be available on every page:

I have not imported any js files as the necessary files have already been included by other grails plugins (mainly grails-ui). Read the doc if you have to.

One a page where I want to have event functionality I first declare an event (in this case it was within a taglib):

Now, whenever necessary I declare a callback function and register it with the event handler as listener:

The callback functions then usually make use of ${remoteFunction} to update a specific part of the page. I would not have guessed it, but if you got rid of spelling mistakes it works like a charm!

including javascript in gsp

Today I have tried out at least a hundred different ways for including js files into my main.gsp by hand. My approach looked like that:

I tried ${resource} first, but then I found this in grails Q&A:

Q: Why won't XXX Javascript Library Display Properly?

A: Sometimes third party javascript libraries depend upon other resources loaded directly from the javascript files themselves like stylesheets. Examples of libraries that do this would be the Yahoo UI libraries and niftycube. When the javascript attempts to load the URL Grails changes the URL so that the resource is not found. Try adding a link using the createLinkTo tag for the particular resource.

So it tried ${createLink}, but in the end nothing worked. I finally succeeded when I discovered that there was an extra taglib to do the trick with YUI JS files, which I was interested in:

The solution can be found in the most obvious place: http://www.grails.org/YUI+Plugin

Really wish I had looked there sooner :-)

Now I wonder if the problem was YUI specific and if my approach would work on other files. Maybe I'm going to find out some day...

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.

RichUI TreeView onLabelClick does not work with current YUI

Running into this problem again and again, I decided to finally write down what one has to change in order to make the onLabelClick work again:

The root of the problem is that in the current YUI the name of the action has changed. This is why you have to open the TreeViewRenderer.groovy in the src folder of the RichUI Plugin.

There you have to look for line 36 and switch "labelClick" with "clickEvent". Voilà.

Just a remark: If you want to access the id of the node late - please don't ask why - access node.node.additionalId in contrary to node.id or node.additionalId. Further change that line 37 accordingly.

YUI layout manager

Yesterday I discovered the YUI layout manager. It is a javascript solutions dividing your browser viewport into up to 5 parts (top, bottom, left, right and center). If you ask, why should I use that thing and not rely on div/css. Here are some advantages I can immediately see here:

1. It is super easy to produce the basic layout you like in <>
2. You get cool js effects like resizing, toggling, etc.
3. You can be sure that the layout works in every browser (YUI is reliable in this).
4. It looks super cool and is skinnable via CSS.

Here is what you have to do:

Include the following resources:

<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.8.0r4/build/utilities/utilities.js&2.8.0r4/build/container/container-min.js&2.8.0r4/build/resize/resize-min.js&2.8.0r4/build/layout/layout-min.js&2.8.0r4/build/menu/menu-min.js"/>

Include the following script:

<script type="text/javascript">
YAHOO.util.Event.onDOMReady(function() {
var layout = new YAHOO.widget.Layout({
units: [
{ position: 'top', height: 28, body: 'top1' },
{ position: 'right', header: 'Right', width: 300, resize: false, collapse: true, scroll: true, body: 'right1', animate: true, gutter: '5' },
{ position: 'bottom', height: 28, body: 'bottom1' },
{ position: 'left', header: 'Left', width: 200, body: 'left1', gutter: '5', resize: true, scroll: true, animate:true, collapse:true},
{ position: 'center', body: 'center1', gutter: '5 0', scroll: true }
]
});

layout.render();
});
</script>

The options are self-explaining and make the whole thing easy to configure. You can even nest layouts like in the attached screenshot.

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.