RichFacesCookbook/JsFunctionJson

    Forum post where the source of this wiki page can be found:

    http://jboss.com/index.html?module=bb&op=viewtopic&t=124919

     

    The below code uses jsFunction to call the jsonTest backing bean that generates some random data in a JSON String.

    That JSON String is then passed to the updateFields method, which evaluates it and populates some html tags with its content.

     

    XHTML Code:

    <ui:composition xmlns="http://www.w3.org/1999/xhtml"
          xmlns:ui="http://java.sun.com/jsf/facelets"
          xmlns:h="http://java.sun.com/jsf/html"
          xmlns:f="http://java.sun.com/jsf/core"
          xmlns:rich="http://richfaces.ajax4jsf.org/rich"
           xmlns:a4j="http://richfaces.org/a4j">
    
         <ui:define name="content">
    
              <script lang="javascript" >
    
                   function updateFields(data){
                   var myObj = eval("("+ data +")");
    
                   document.getElementById('cpty').innerHTML = myObj.cpty;
                   document.getElementById('exposure').innerHTML = myObj.exposure;
                   document.getElementById('limit').innerHTML = myObj.limit;
    
                   }
              </script>
    
              <a4j:form>
              <a4j:jsFunction name="testJsFunc"
                  action="#{jsonTest.actionMethod}"
                  data="#{jsonTest.jsonData}"
                     ajaxSingle="true"
                     ignoreDupResponses="true"
                     eventQueue="foo"
                  oncomplete="updateFields(data);" >
               <a4j:actionparam name="Param1" assignTo="#{jsonTest.cptyParam}"></a4j:actionparam>
             </a4j:jsFunction>
              </a4j:form>
    
              <table>
    
                   <tr>
                        <td>
                             <a href="#" onclick="testJsFunc('VALUE1')">Set for VALUE1</a>
                        </td>
                   </tr>
                   <tr>
                        <td>
                             <a href="#" onclick="testJsFunc('VALUE2')">Set for VALUE2</a>
                        </td>
                   </tr>
                   <tr>
                        <td>
                             <a href="#" onclick="testJsFunc('VALUE3')">Set for VALUE3</a>
                        </td>
                   </tr>
                   <tr>
                        <td>
                             <a href="#" onclick="testJsFunc('VALUE4')">Set for VALUE4</a>
                        </td>
                   </tr>
              </table>
    
              <table>
                   <tr>
                        <th>Counterparty</th>
                        <th>Exposure</th>
                        <th>Limit</th>
                   </tr>
                   <tr>
                        <th>
                             <h:outputText id="cpty" value=""></h:outputText>
                        </th>
                        <th>
                             <h:outputText id="exposure" value=""></h:outputText>
                        </th>
                        <th>
                             <h:outputText id="limit" value=""></h:outputText>
                        </th>
                   </tr>
              </table>
         </ui:define>
    
    </ui:composition>
    
    

     

    Managed bean:

     

    If you are not familiar with the annotations, they are from the Seam framework and can be

    removed and replaced with a managed bean definition in faces-config.xml.

     

    
    import java.util.HashMap;
    import java.util.Map;
    import java.util.Random;
    
    import org.jboss.seam.ScopeType;
    import org.jboss.seam.annotations.Name;
    import org.jboss.seam.annotations.Scope;
    import org.richfaces.json.JSONException;
    import org.richfaces.json.JSONObject;
    
    @Name("jsonTest")
    @Scope(ScopeType.EVENT)
    public class JsonTest {
    
        public String cptyParam;
    
        public String jsonData;
    
        public String actionMethod(){
            Random rand = new Random(System.currentTimeMillis());
    
            Map<String,String> data = new HashMap<String,String>();
            data.put("cpty", cptyParam);
            data.put("exposure", ""+(rand.nextFloat()*10) );
            data.put("limit", ""+(rand.nextInt(50)));
    
            jsonData = toJSON(data);
    
            return null;
        }
    
        public String toJSON(Map<String,String> data){
    
          JSONObject dataToJSON = new JSONObject();
          try{
            dataToJSON.put("cpty", data.get("cpty"));
            dataToJSON.put("exposure", data.get("exposure"));
            dataToJSON.put("limit", data.get("limit"));
          }
          catch (JSONException e){
           //TODO Approriate exception handling
            e.printStackTrace();
          }
          return dataToJSON.toString();
        }
    
        public String getCptyParam() {
            return cptyParam;
        }
    
        public void setCptyParam(String aCptyParam) {
            cptyParam = aCptyParam;
        }
    
        public String getJsonData() {
            return jsonData;
        }
    
        public void setJsonData(String aJsonData) {
            jsonData = aJsonData;
        }
    }