<h:panelGrid columns="2">

    <h:inputText id="myinput" value="#{userBean.name}">

        <a4j:ajax event="keyup" render="outtext" />

    </h:inputText>

    <h:outputText id="outtext" value="#{userBean.name}" />

</h:panelGrid>

<h:form id="form">

    <a4j:commandButton value="Set name to Alex" reRender="rep">

        <a4j:param name="username" value="Alex" assignTo="#{paramBean.name}"/>

    </a4j:commandButton>

    <h:outputText id="rep" value="Name: #{paramBean.name}"/>

</h:form>

public class ParamBean {

    private String name = "John";


    public String getName() {

        return name;

    }


    public void setName(String name) {

        this.name = name;

    }

}

When the Set name to Alex button is pressed, the application sets the name parameter of the bean to Alex, and displays the name in the output field.

<h:form>

   <a4j:commandButton value="Show Screen Size" render="infoPanel">

      <a4j:param name="w" value="screen.width"

                 assignTo="#{paramBean.screenWidth}" noEscape="true" />

      <a4j:param name="h" value="screen.height"

                 assignTo="#{paramBean.screenHeight}" noEscape="true" />

   </a4j:commandButton>



   <h:panelGrid columns="2" id="infoPanel">

      <h:outputText value="Width:" />

      <h:outputText value="#{paramBean.screenWidth}" />

      <h:outputText value="Height:" />

      <h:outputText value="#{paramBean.screenHeight}" />

   </h:panelGrid>

</h:form>

The command button triggers the <a4j:param> behaviors and renders the output text. The <a4j:param> behaviors pass client-side parameters for the screen width and height through the backing bean. These parameters are then used to populate the output text values.

<table width="400">

   <tbody>

      <tr>

         <td>

            <span onmouseover="updateName('Kate')"

                  onmouseout="updateName('')">Kate</span>

         </td>

         <td>

            <span onmouseover="updateName('John')"

                  onmouseout="updateName('')">John</span>

         </td>

         <td>

            <span onmouseover="updateName('Alex')"

                  onmouseout="updateName('')">Alex</span>

         </td>

      </tr>

      <tr>

         <td colspan="3">

            Name: <b><h:outputText id="showname" value="#{functionBean.text}" /></b>

         </td>

      </tr>

   </tbody>

</table>

<h:form>

   <a4j:jsFunction name="updateName" render="showname">

      <a4j:param name="name" assignTo="#{functionBean.text}"/>

   </a4j:jsFunction>

</h:form>

The output text for the name is changed depending on which table cell the user hovers over with the mouse. The <a4j:jsFunction> component manages the updating and display of the name.

This example describes the JMS server configuration required for a simple chat room. The chat room requires topics on the JMS server for the push functionality to check for new messages. Create a new JMS topic using the following settings:

Add a single role for the topic in the same form using the following settings:

<rich:list value="#{chatBean.users}" var="user" id="users" type="unordered">

   #{user.nick}

</rich:list>

...

<a4j:push address="#{chatBean.listSubtopic}@chat"

          onerror="alert(event.rf.data)">

   <a4j:ajax event="dataavailable" render="users" execute="@none" />

</a4j:push>

public String getListSubtopic() {

   return this.getUserName() + SUBTOPIC_SEPARATOR + channelName + "List";

}


@Override

protected void onUserList(String channel, User[] users) {

   try {

      getTopicsContext().publish(new TopicKey("chat", getListSubtopic()), null);

   } catch (MessageException e) {

      LOGGER.error(e.getMessage(), e);

   }

}


@Override

protected void onJoin(String channel, String sender, String login, String hostname) {

   try {

      getTopicsContext().publish(new TopicKey("chat", getListSubtopic()), null);

      Message messageObject = new Message("joined channel", sender, 

         DateFormat.getInstance().format(new Date()));

      getTopicsContext().publish(new TopicKey("chat", getMessagesSubtopic()), messageObject);

   } catch (MessageException e) {

      LOGGER.error(e.getMessage(), e);

   }

}

The example demonstrates a simple use of the <a4j:push> component to manage a list of users in a chat room. The <a4j:push> component refers to the #{chatBean.listSubtopic}@chat address, which has been created on the JMS server. It then uses the sub-topics to separate messages across different topics.

When a new message arrives, the <a4j:ajax> behavior causes the user list to update. If an error occurs, the user is alerted.

<a4j:push address="#{chatBean.messagesSubtopic}@chat"

          onerror="alert(event.rf.data)"

          ondataavailable="jQuery('&lt;div/&gt;').

             prependTo('.#{chatBean.channelName}Output').text(

             getMessageString(event.rf.data))" />

The example uses the dataavailable event attribute with JavaScript to update messages in a chat room. The event.rf.data parameter contains JMS message data serialized to JavaScript.