JSF CommandLink onclick event

Note: this is fixed in JSF 1.2 but for those of us not there yet …

The JSF CommandLink (h:commandLink) tag allows a link to act like an html form submit button. Much to my dismay I discovered that this tag doesn’t support the JavaScript onclick event. This is probably because JSF adds functionality for this event to simulate the form submit.

To solve this problem I wrote a JavaScript function that accepts an html element (CommandLink element) and a function I want to run onclick. After receiving these two arguments it will evaluate IF onclick functionality currently exists. If so, then it will ensure the function parameter passed in will be executed before the JSF provided onclick functionality. If not, then only the passed in function will be executed. Below is the JavaScript:

// random method I want to run onclick
someFunction = function() {
    alert('jsf ... yeah?');
}

// jsf commandLink onclick hack
jsfCommandLinkHack = function(link, onClickFunction) {
    // check the link exists
    if (link) {
        // get current (JSF) onclick functionality
        var clickFn = link.onclick;
	if (clickFn) { // add new functionality
		link.onclick = function() {
                     return (onClickFunction() == false) ? false : clickFn();
                }
        } else {
	    link.onclick = function() { return onClickFunction(); }
	}
    }
}

// handler
// element = form element
jsfCommandLinkHack(element, someFunction);

Version Control

With Version Control being a hot topic around my office I’ve been collecting links. Thought I’d put them out here so I don’t lose them.

• SVN Book
• Fossil
• Branching Patterns

Ajax Experience 2009 … Day 3

The third and final day of the conference had a couple of highlights for me.

SpritMe – Steve Sounders

Steve sounders gave a quick presentation on his SpriteMe tool, which was really cool. SpriteMe basically takes a look at an entire web page and figures out the best way to reorganize images that doesn’t sacrifice page layout, but decreases the number of http requests it takes to load a web page (thus decreasing page load time). Since I can’t do this presentation justice you’ll just have to check out the spriteme link: http://spriteme.org

Phone Gab – Brian Leroux

This presentation started by explaining the problems with mobile phone development (behind the times, several mobile platforms … iPhone, Palm Pre, Android, etc.) and how PhoneGap can help solve these problems. Presenter went into some detail presenting the highlights and relative low-lights of PhoneGap.

The highlights included that PhoneGap is open source, can handle mobile development on multiple platforms, and every app can be written in html, css and javascript while still taking advantage of each platforms strengths. The low-lights being lack of testing and documentation, which were mostly due to the developers not thinking the concept with work and thus didn’t bother. To check out their site for more information on PhoneGap: http://www.phonegap.com/

ARIA: Pushing Accessibility Even Further – Joe McCann

ADA is the least you can do. But really not that great for Ajax applications. WAI-ARIA spec is the top of the mountain. Most screen readers can handle this format.

Accessible Rich Internet Applications – addresses the accessibility of dynamic Web content for people with disabilities. This is a newer W3C standard for supporting web accessibility.

WAI-ARIA: http://www.w3.org/WAI/intro/aria.php

Slides: http://www.slideshare.net/ajaxexperience2009/joe-mc-cann-tae-aria-presentation

Progressive Enhancement

All the presenters that dealt with any JavaScript or front end enhancements consistently talked about Progressive Enhancement. It’s a pretty interesting topic that I haven’t been incorporating in my development up until this point. In fact, I didn’t even know much about it until this conference. So I pulled the following link, which I thought gave a good explanation. I’m totally on the Progressive Enhancement boat. I love the concept of producing HTML as dumb as possible then use CSS and JavaScript to add functionality based on browser functions rather then user-agent.

http://www.alistapart.com/articles/understandingprogressiveenhancement

Ajax Experience 2009 … Day 2

On day 2 of the Ajax Experience it started out with a presentation on ECMAScript Harmony and the Future of JavaScript. This presentation went into a lot of detail on the new standards in JavaScript. However, it didn’t cover the newer features.

I also attended a presentation on Web Compatibility and Performance Testing given by Imad Mouline and Ryan Breen of Gomez Inc. This was a good presentation on evaluating browser speeds. Not surprised to see that Google Chrome and Apple Safari showed the fastest browser times and that IE and Firefox were the slowest. This session also covered topics such as time to first byte and domain sharding.

Just after lunch I hit the vendor session IE8 given by Chris Bowen. This was a quick session by nature (all the vendor tech sessions were only a half hour). Chirs did a good job of showing the new developer tools in IE8. Two things I was glad to see is that the developer tools are finally on par with those offered by Firebug and that IE8 can emulate IE7.

The highlight on the second day for my money was Object Oriented CSS given by Nicole Sullivan.  The presentation offered a shift away from how I normally think of CSS (styling by element) to focusing on styling by class. The benfit being smaller more managable CSS files and fewer defined styles.

• Avoid Styling by location.
• Define defaults.
• If two styles are so close (aka heading 3 and heading 4 should have more of a difference then 1 pixel) then throw one out and only use one.
• When adding classes to a style you may not know what one will take precedence.
• Slideshow

The final presentation of the day that I attended was on JavaScript patterns given by Stoyan Stefanov. This presentation quickly covered JavaScript patterns and anti-patterns. His website pretty much summed up his presentation. Also, here is the slideshow.

Perform while loop in the Selenium IDE

Using the Selenium IDE plugin with Firefox I was able to create a test script that loops through values held in a JavaScript array. I was then able to use each value from the array in a simple test. Below is a brief description on how to perform this task.

First, you’ll need to go out and add a JavaScript extension library to your Selenium IDE to support the while loop. You can find the JavaScript file and a ‘how-to’ here:

http://51elliot.blogspot.com/2008/02/selenium-ide-goto.html

Second, write your test script.  My test is just a quick simple script that will: iterate through a JavaScript array of Twitter account names, log to the Selenium IDE console the account name, open up that account’s Twitter page, and select each accounts following link. The script isn’t very elaborate, but you get the point.

You’ll notice (see below) that the script generously uses the getEval command provided by the Selenium IDE. This command tells the IDE to execute the JavaScript provided in the Target field. I also use the javascript{} notation in the Target field to get at my defined variables.

Here’s a screenshot of what my test looks like in the Selenium IDE:

While Loop In Selenium

There are certainly other  Selenium commands that could have been used here to accomplish the same thing. Besides the getEval command the Selenium IDE supports a store command for storing variables as well as some short cut notation for getting at those variables. There is also a runScript command that works similar to the getEval command. You’ll need to research those on your own and decide what works best for you.