J4Fry Facelets Combo Tag

Characteristics

Attribute Value
Project name J4Fry Facelets Combo [Subproject of J4Fry JSFComponents]
Prerequisites JDK >= 1.4, JSF >= 1.1
Started with revision 1.2_02
CVS module JSFComponents
Responsible developer Ganesh Jung

Combo Tag aims

JSF Tag development has shown to be a tedious task that provides many fallpits and requires tag adaption with each major JSF release. The fry:combo tag is meant to become the starting point for a completely new kind of of tag library. Instead of writing Java code that outputs the necessary HTML markup we write Facelets containing XML markup that combines HTML and JSF tags. It's a kind of JSF Snippet interweaved with HTML. By now (in June 2008) I don't know any other free project aiming at setting up this kind of tag library though I'm convinced that this kind of tag development will be the main stream by 2010. Being based on the standard JSF tag library the tag doesn't need to care for the encode an decode phases of the JSF lifecycle and updates to the JSF API won't affect it as long as the standard JSF tags remain available, which is most likely. Writing Java web applications switched from procedural to declarative style when JSPs replaced servlets. But until now tag development remained a procedural task. It's with this new tag style that declarative programming is introduced to tag development for Java web applications..

Example

There is a working example of the fry:combo facelets tag here.

Usage

Refer to the general JSF Components installation for installation instructions.

Additionally this tag needs Facelets support. Please refer to th facelets documentation for help in installing facelets.

The Facelets Combo tag features a combo box which combines an field for text input and a selection list thus providing default values as well as individual text. You can provide value bindings for the input field (String "inputValue"), for the data list (List "dataList") and for the URLs of the toggle images that appear next to the input field (Strings "imagePlus" and "imageMinus"). We found the standard JSF datatable to be weak on setting styles for all HTML tags that form the table, so we put extra effort on providing access to all styles. You may set style classes for the input field ("fieldClass"), for the images ("imageClass"), for the table ("bottomClass") and for the tables row classes ("rowClasses"). The input field and the toggle images are combined in a small two column table with its own style class ("topClass") and the field and image table cells have separate styles too ("fieldCellClass" and "imageCellClass"). You also need to set a "name" attribute that is different for each combo in a page. The "rowKey" attribute defines the value expression that identifies the table column that the input field should be set to when a row of the select list is selected. Use the value binding "item" to access the current table row. To access the property "key" of the table row object you would use the expression "item.key". Nested inside the fry:combo tag you may use 2 different ui:define blocks:

<ui:define name="tr"> defines one row of the selection table. Unlike normal select boxes the fry:combo tag supports a multi column selection list. Again the value binding "item" is used to access the current table row. Write your columns in HTML style, e.g.:

<td class="col1Class">#{item.col1}</td>
<td class="col2Class">#{item.col2}</td>

You may connect the input field to an AJAX event by using <ui:define name="fieldExtension">.

Here's a full example how to use the fry:combo tag:

<fry:combo name="combobox1" inputValue="#{comboBean.value1}"
  dataList="#{comboBean.veges}" fieldClass="comboField"
  imageClass="comboImg" rowClasses="odd, even" bottomClass="comboTable"
  topClass="comboTable" fieldCellClass="top1" imageCellClass="top2"
  imagePlus="J4Fry/Resource/j4fry_plus.jpg" rowKey="item.key"
  imageMinus="J4Fry/Resource/j4fry_minus.jpg">
  <ui:define name="fieldExtension">
    <fry:ajax event="onchange" reRender="combo2" action="#{comboBean.refresh2}"
      loadingbarId="#{scriptHelper.clientIdForBindings['loadingBar']}"
      alarmThreshold="error"></fry:ajax>
  </ui:define>
  <ui:define name="tr">
    <td class="col2">#{item.name}</td>
    <td class="col1">
      <h:outputText value="#{item.weight}" converter="org.j4fry.Number">
        <f:attribute name="Pattern" value="#,##0.00#" />
        <f:attribute name="Language" value="#{lookup.enum['labels']
          .language[langBean.language]['langkey'][LOOKUP_VALUE]}" />
        <f:attribute name="Country" value="#{lookup.enum['labels']
          .language[langBean.language]['countrykey'][LOOKUP_VALUE]}" />
      </h:outputText>
    </td>
  </ui:define>
</fry:combo>