Great new features in RichFaces 3.2: Inplace input and select

July 12th, 2008

Introduction

If you're using JBoss Seam to build sites, you're probably using the RichFaces components which are automatically included in Seam-Gen projects. RichFaces provides good-looking components which satisfy most of the Web 2.0 and AJAX needs of developers. RichFaces is great because it lets developers create complex AJAX interactions with tags which are as simple as plain old HTML tags. You want to create a toggle panel, for example? Put this in:

<rich:simpleTogglePanel switchType="client" 
                label="A RichFaces simpleTogglePanel">
This is a simple Web 2.0 type effect created using
RichFaces.  As you can see, this component is just
as easy to create as any ordinary HTML.
</rich:simpleTogglePanel>
        

and the result is:

RichFaces 3.2 added two particularlly great new input components: rich:inplaceInput and rich:inplaceSelect. We'll show how to use these great inputs, and we'll also create a new textarea input that uses the same input style.

rich:inplaceInput and rich:inplaceSelect

The documentation gives all the details on these components. I'll just show my favorite style of using them. Try it out, by double-clicking:

   

Use the small controls that pop up to the right to set the value, or to cancel the change. Try setting it to a blank value to see a validation error.

We use an A4J support component to AJAX-submit:

<h:form>
     <rich:panel style="width:6cm;"
         id="inplace-demo-panel">
         <rich:inplaceInput id="testInput" layout="block" 
                           value=""
                           required="true" 
                           showControls="true"
                           changedHoverClass="hover" 
                           viewHoverClass="hover"
                           viewClass="inplace" 
                           changedClass="inplace"
                           selectOnEdit="true" 
                           editEvent="ondblclick">
            <a:support 
                event="onviewactivated" 
                reRender="inplace-demo-panel"/>
        </rich:inplaceInput>
        <h:message style="color: red;"
                   for="testInput" />
        </rich:panel>
</h:form>
        

This is a great component of a form. You can display the values in a panel layout, and if the user wants to change a value, he double-clicks on it, enters it, and hits the submit control. It keeps your display looking like a display of information, not like a web form, and it provides a good way for a user to selectively edit one field at a time.

There's a select-one counterpart to the rich:inplaceInput field. Try this:

SpicyMediumMildNone

Please select

The source is similar to the text input:

<h:form>
    <rich:panel id="selectPanel" style="width:5cm;">
        <rich:inplaceSelect value=""
                            openOnEdit="true"
                            showControls="true" 
                            editEvent="ondblclick" 
                            layout="block"
                            viewClass="inplace" 
                            changedClass="inplace"
                            changedHoverClass="hover" 
                            defaultLabel="Please select"
                            viewHoverClass="hover">
            <f:selectItem itemValue="1" itemLabel="Spicy"/>
            <f:selectItem itemValue="2" itemLabel="Medium"/>
            <f:selectItem itemValue="3" itemLabel="Mild"/>
            <f:selectItem itemValue="4" itemLabel="None"/>
            <a:support 
                event="onviewactivated" 
                reRender="selectPanel"/>
        </rich:inplaceSelect>
        
    </rich:panel>
</h:form>
        

What about text areas?

These are great, but what about text areas? Unfortunately, there is no textarea input component.

What we want is a text area that allows this in-place style of editting. It should also accept Seam text, and show Seam text validation messages. Fortunately, with a little bit of JavaScript, we can build this.

First, here's what it looks like in action. Go ahead and double-click to edit. Make some changes. Use some Seam text. Make a Seam text error and click the "submit" control to see the validation error. An easy error is to leave an unclosed format directive, such as a single =.