<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.

<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))" />

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

<a4j:push address="chat"

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

    <a4j:ajax event="datavailable" render="chat" />

</a4j:push>

This example uses the dataavailable event handler to trigger an AJAX request and partial page update.

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:

<a4j:push id="pushJms" address="pushJms"

            ondataavailable="jQuery(#{rich:element('serverDate')}).text(event.rf.data)" />

            

<a4j:outputPanel id="serverDate" layout="block">

    <i>waiting for event...</i>

</a4j:outputPanel>

TopicSession session;

TopicPublisher publisher;


public void sendCurrentDate() throws JMSException {

    String currentDate = new Date().toString();

    ObjectMessage message = session.createObjectMessage(message);

    publisher.publish(message);

}

This example demonstrates a simple use of the <a4j:push> causing immediate update of page content.