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;
    }
}