Show/hide controls dynamically in JSF

We often need to show a set of controls dynamically based on what a user selects in a component in JSF. This example shows how to accomplish this in JSF and Seam, using the JBoss' EL extensions, which make life easier in your XHTML tags.

In this case, we're using an h:selectOneRadio control. We want to show and hide the rich:Panel controls; we wrap them in an a4j:outputPanel and then just re-render that when the user clicks a radio element. Note that for radio buttons, we have to use the onclick event; onchange is for h:selectOneMenu and other select controls.

<h:selectoneradio value="#{webencode.requestType}" id="rdoRequestType" styleclass="radio" layout="pageDirection">
<f:selectitem itemvalue="program" itemlabel="Series or Program">
<f:selectitem itemvalue="special" itemlabel="Special">
<a4j:support ajaxsingle="true" event="onclick" rerender="program">
</a4j:support>

<a4j:outputpanel id="program">
<rich:panel rendered="#{webencode.checkRequestType('program')}">
  program stuff goes here
</rich:panel>
<rich:panel rendered="#{webencode.checkRequestType('special')}">
  special stuff goes here
</rich:panel>
</a4j:outputpanel>

We can't call the equalsIgnoreCase() method on a string from within an EL expression, so we use a Seam method call that returns true/false based on string equality:

public Boolean checkRequestType(String requestType){
return (this.requestType.equalsIgnoreCase(requestType)) ? true : false;
}

With the a4j:support tag, we use AJAX to re-render the a4j:outputPanel when the user clicks the radio buttons. Then the custom checkRequestType() bean method is called and returns a Boolean based on the value of the radio button group.

Create the Apple nav menu in Photoshop

http://www.threestyles.com/tutorials/create-apples-navigation-bar-in-photoshop-from-scratch/

35+ startling free Photoshop brushes

http://www.tutoriallounge.com/2009/09/35-startling-free-adobe-photoshop-brushes/

Free and stunning Flash components

http://www.flashscope.com/free-flash-components-for-your-stunning-projects

Effective website home pages

http://www.earth-org.com/blogs/2009/09/effective-website-home-pages

Convert entity to selectItem in Seam

When using entity classes and Hibernate to display data in JBoss Seam, you can easily convert the entity to a selectItem element for use in a dropdown box, radio button group, or checkbox items. Here's an example:

<h:selectOneMenu >
  <f:selectItem itemLabel="" itemValue="#{null}"/>
  <s:selectItems var="tape" itemValue="#{tape.description}" 
  value="#{tapeformatList.resultList}" label="#{tape.description}" />
  <s:convertEntity/>
</h:selectOneMenu>

Note the null element to allow users to leave the selection blank. You can also achieve this by using the noSelectionLabel attribute. Also of note is the itemValue attribute on the Seam selectItems tag: This enables a custom value instead of the automatic numeric ID generated by Seam. In this case, the entity's description is used for the value.

Here's what this code generates in HTML:

<select name="tapeformatSearch:j_id14" size="1">    
 <option></option>
 <option value="VHS">VHS</option>
 <option value="DVD">DVD</option>
 <option value="Beta-SP">Beta-SP</option>
 <option value="Digi-Beta">Digi-Beta</option>

 <option value="HD-Cam">HD-Cam</option>
 <option value="DV-Cam">DV-Cam</option>
 <option value="Mini-DV">Mini-DV</option>
 <option value="DVC-PRO HD">DVC-PRO HD</option>
</select>

Fix IE 6 and 7

If you work to make your pages cross-browser compatible, then you need to know about Dean Edwards fantastic script to get earlier versions of IE to behave like IE7 or IE8. Now you can have transparent PNG in IE 6, add minimum width/height, etc. Very neat stuff, and it works! Get the script and details on Dean's site.