Using JSON with JSF

This post will describe what to do if you want to use JSON in your web applications together with JSF. JSON (JavaScript Object Notation) is a way of doing information interchange between your programming language and javascript. In other words you can use it to access for example java objects in the world of javascript, and this will give you the possibility of creating more advanced web applications. Some basic knowledge of javascript is recommended.

  1. First thing to do is to download the JSON RPC library from JsonRpc and put it in your WEB-INF/lib directory (or the directory you use that holds the libs and is packaged together with the war-file). Also remember to add the library to the classpath of your project in Eclipse or other software frameworks you use to develop.
  2. Then secondly you need to include the jsonrpc.js javascript in the header of your page. The script can be found within the downloaded lib inside \json-rpc-java-1.0.1\webapps\jsonrpc. You include it by writing something similar like this in your header:
    <script type="text/javascript" src="${pageContext.request.contextPath}/javascript/jsonrpc.js"></script>
  3. Then you need to add the servlet configuration to the web.xml
    <servlet>
    
    	<servlet-name>com.metaparadigm.jsonrpc.JSONRPCServlet</servlet-name>
    
    	<servlet-class>com.metaparadigm.jsonrpc.JSONRPCServlet</servlet-class>
    
    </servlet>
    
    <servlet-mapping>
    
    	<servlet-name>com.metaparadigm.jsonrpc.JSONRPCServlet</servlet-name>
    
    	<url-pattern>/JSON-RPC</url-pattern>
    
    </servlet-mapping>
  4. Then, on top of your page (outside the <f:view> tags) you write:
    <jsp:useBean id="JSONRPCBridge" scope="session"class="com.metaparadigm.jsonrpc.JSONRPCBridge" />
  5. Then you must register the handler/backing bean you want the json to access. Do this inside the <f:view> tags but within jsp code tags
    </pre>
    <pre><%
    
    MyHandler myHandler = (MyHandler )FacesContext.getCurrentInstance().getApplication ()
    
    .getVariableResolver().resolveVariable(FacesContext.getCurrentInstance(),"myHandler ");
    
    JSONRPCBridge.registerObject("myHandler ", myHandler );%>
  6. From javascript side, you can now access you handler, set properties and execute methods like this:
    function JsonTest()
    
    {
    
    	try
    
    	{
    
    		//The input-parameter to the JSONRpcClient is basically the path to
    		//the servlet you registered in web.xml
    
    		jsonrpc = new JSONRpcClient("/YOUR_APPLICATION_CONTEXT_ROOT/JSON-RPC");
    
    		// Call a Java method
    
    		var result = jsonrpc.myHandler.getTestValue();
    
    		//Do something with result.....
    
    		jsonrpc.myHandler.setTestData("SET A PROPERTY TO SOMETHING");
    
    		jsonrpc.myHandler.execute(); //Execute a method
    	}
    
    	catch(e)
    
    	{
    
    		alert(e);
    
    	}
    
    }

Good luck!

Advertisements

8 Responses to “Using JSON with JSF”

  1. Ali Çevik Says:

    I can’t see this article’s relation with JSF.

  2. roneiv Says:

    Ali,

    The only thing that connects this article to JSF is how to retrieve your beans/handlers so that you can register them with JSON. Luckily you don’t have to do anything specific to use JSON with JSF.

    Can I ask what you were expecting?

  3. Leandro Says:

    Whay I have to do with MyHandler? It has to be a controller? I have to define it in faces-config?

  4. Leandro Says:

    1) Hi, have u got any example (source files)?
    I have problems with in JSF.

    2) Can I register the object in the backing bean?

    3) MyHandler must be a controller declared in faces-config?

  5. roneiv Says:

    Hi Leandro,

    Yes, you have to register Myhandler as a bean in your faces-config. The managed-bean name is myHandler, the managed-bean-class is where your class is (f.ex com.project.MyHandler), and then you set the managed-bean-scope to what you want 🙂

    Which object do you want to register in the backing bean? I’m not sure if I fully understand your question? 🙂

  6. Leandro Says:

    Roneiv:

    I can´t use jsp code in my jsf pages with , so in my bean constructor I did this:


    FacesContext facesContext =
    FacesContext.getCurrentInstance();
    ServletContext servletContext = (ServletContext) facesContext.getExternalContext().getContext();
    servletContext.setAttribute(“JSONRPCBridge”, json_bridge);
    json_bridge.registerObject(“hello”, this);

    And in my jsf file I didsomething like this:
    try
    {
    var jsonrpc = new JSONRpcClient(“http://localhost:8088/photos365-ui/JSON-RPC”);
    alert(jsonrpc);
    var result = jsonrpc.hello.sayHello(“siiiiiiii”);
    alert(result);
    }catch(e) {
    alert(“error: ” + e);
    }

    And the I got this message: “jsonrcp.hello has no
    properties”

    Do you know what Im doing wrong?

  7. roneiv Says:

    Leandro,

    At least the messageyo get (jsonrcp.hello has no
    properties) tells me that the jsonrpc client doesn’t find any registered object “hello”, or the jsonrpc client itself is null.

    I’ve never registered the object from the java-side before, but this should be okay I believe. 🙂 From what I can see the mistake is the way you get tje jsonrpc in the javascript.

    You do:
    var jsonrpc = new JSONRpcClient(”http://localhost:8088/photos365-ui/JSON-RPC”);

    But should do:
    var jsonrpc = new JSONRpcClient(”/photos365-ui/JSON-RPC”);

    Potentially, you could create a javascript functionthat retrieves the context-root, so that you don’t have to hardcode this. The function could be something like:

    function getHost() {
    var url = window.location.href;
    var nohttp = url.split(‘//’)[1];
    var host = nohttp.split(‘/’)[1];
    return ‘/’+host;
    }

    And then the way to get the jsonrpc client is:
    jsonrpc = new JSONRpcClient(getHost()+”/JSON-RPC”);

    Hope this helps you!

    Regards,

    Eivind

  8. Ingrid Says:

    Can you have the source of the class com.metaparadigm.jsonrpc.JSONRPCServlet please?

    Thanks


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: