June 19, 2010

Just a reminder

Always investigate the error messages.

June 16, 2010

Google Closure menu with one selected item

Google Closure provides some UI widgets which you can use on your pages. One of such widgets is a menu widget.

In short, to produce a menu you'd need two pieces of code:

Here is an HTML piece:

<ul id="menu">
   <li class="goog-menuitem goog-option" id="item1">Item 1</li>
   <li class="goog-menuitem goog-option" id="item2">Item 2</li>
   <li class="goog-menuitem goog-option" id="item3">Item 3</li>
</ul>

And here is a JavaScript piece using Closure Library:
var menu = new goog.ui.Menu();
menu.decorate(goog.dom.getElement('menu'));


This will produce a menu which will maintain styles and dispatch events. The goog-option class makes menu items selectable. When a user clicks on an any element, the clicked element will get goog-option-selected style.
But when a user clicks on another item, that item's element will get this style too and you will end up with two selected elements. This is the default behavior and it is suitable for most of menu-like cases.

But what if you have a menu with single-select options, like a plain old HTML radio-group?
Then you need to handle selected items manually. I chose to implement a menu listener to manually deselect all previously selected elements:


goog.events.listen(menu, goog.ui.Component.EventType.ACTION, function(e) {
   /** @type {string} */
   var text = goog.dom.getTextContent(e.target.getElement());
   menu.forEachChild(function(c) {
       if (c != e.target) {
           c.setSelected(false);
           c.setChecked(false);
       }
   });
   caption.getElement().innerHTML = text;
} );

June 15, 2010

A script to compile Google Closure based project

Here is my script to build Google Closure based project: << EOF
#!/bin/sh

function showHelp() {
echo "
Usage:
$0 MAIN_JS_FILE [MODE];
MAIN_JS_FILE - A JavaScript file to compile.
MODE - If set to \"debug\" will omit compilation step and produce human readable script. This mode will not perform any checks on your JS code
Examples:

Compile in debug mode:
./compile.sh js/test.js debug

Compile with javascript checks and optimizations:
./compile.sh js/test.js
";
}

test -z "$1" && echo "MAIN_JS_FILE is required" && showHelp && exit 1;
test -f "$1" || echo "MAIN_JS_FILE is not a file" && showHelp && exit 1;

export dir=..
export compiler=$dir/compiler.jar
export closureLibraryHome=$dir/closure-library/closure
export calcdeps=$closureLibraryHome/bin/calcdeps.py
export target=./www/compiled.js

export mode="compiled"
test "$2" == "debug" && export mode="script"

echo running in $dir in $mode mode

python $calcdeps -i "$1" -p "js" -p "$closureLibraryHome" -o $mode --output_file="www/compiled.js" -c "$compiler" -f "--js_output_file" -f "$target" -f "--compilation_level" -f "ADVANCED_OPTIMIZATIONS" -f "--warning_level" -f "VERBOSE"

EOF