Using the JSON service APIs to reduce the need for page refreshes

We've been working in the last few days with our partner VASS defining the best design for a very large customer who had the requirement of avoiding full page reloads when the users interact with a given application.

The team at VASS had already decided to use Service Builder to save time developing the persistance layer and was looking for the best way to implement the frontend of the application. In this situation using the JSON API that is automatically generated for Service Builder is a perfect solution. It provides a ready-to-use JavaScript API that you can use as if it was local to the browser and it handles all the AJAX calls and serialization and deserialization. The implementation is in the server which allows you to use the full power of Java and associated technologies to implement any business requirement needed.

For those who have heard about DWR, this follows a similar strategy but if you are already using Service Builder everything is done for you and you just have to use the js API.

While thinking about this we realized that this is one of those little gems that Liferay has that is not very well known because it's not properly documented. So we decided to change that and let the world know about it. As an introduction here is a quick example.

Assuming you have the following method in the remote service:

public class ReportsEntryServiceImpl extends ReportsEntryServiceBaseImpl {
    public void print(String msg) {
        System.out.println("ReportsEntryService: " + msg);
    }
    ....
}

The method could be invoked from a JSP using the following method (to make it simpler we are linking to the js file directly):

<script src="/html/js/liferay/ext_service.js" language="JavaScript"> </script>

<script language="JavaScript">
    Liferay.Service.Reports.ReportsEntry.print(
        {
            msg: "Invoking a Liferay service via JavaScript",
        },
        function(message) {
            var exception = message.exception;

            if (!exception) {
                // Process Success
            }
            else {
                // Process Exception
            }
        }
    );
</script>

For more detailed information check the new wiki article: JSON Service API

Have fun!

 

 

[Jonas Yuan]

This is nice. Thank you, Jorge.

[Alex Wallace]

Another very cool feature is the ability to refresh a portlet w/o refreshing a full page. This is built into liferay as a refresh icon and is also used by the 'Add Application' feature to add new portlets to a page.

Lately wev'e been improving user experience with this feature. Having a lot of portlets already written that require full page refreshes, and changing them just a little bit to refresh themselfs and only themselfs after clicking a button has helped improved user experience w/o having to rewrite a lot of code.

We've created a few java methods that return the necessary javascript to refresh any portlet individually and teached a central method to be able to read parameters from the url after the portlet has been refreshed. We had been using that central method already so all we have to do is look for places in our code where we use request parameters to process something after a submit and wrap it with the JavaScript to do the submit with the individual portlet refresh.

While this is not as good as writing your interfaces using JSON fully, or writing your portlets using something like IceFaces, it is way better than full page submits and required very little changes to our existing code.

Another little liferay gem!

[Alex Wallace]

I forgot to say... The combination of the JSON calls to services and the portlet refresh is also perfect. You can cause the succesfull call to the JSON service trigger the portlet refresh if it makes sense.

For instance, we had a portlet that displays a complex table layout with data from services, and a small interface to approve / reject records above. While rewriting the portlet to pull the table data from JSON is the best solution, It was a 15 minute change to cause the approval process to go via JSON service and then refresh just that portlet so that the table below was updated with the approved data.

Again, a very cool combo!

[DO Hung Thuan]

i am a new member, i learning Json in liferay, u can tell me more json ? i don't know use json and any service example: JSONSerializer;ServiceHttp...i try search but i don't see anything.

[Jorge Ferrer]

Hi DO Hung,

You can find a lot of information about JSON in http://json.org/

You can also ask questions about Liferay's services in our forums: http://forum.liferay.com

[DO Hung Thuan]

Hi Jorge Ferrer ,
Can you send or post for me an porlet example for Json in liferay? i don't have more information use Json in liferay. i try find more but i don't see anything about Json in liferay. i try write a portle can get, update,delete table in database use Json and Ajax, Special how can i do refresh a portlet for new information but not refresh main page. thanks! my email: [e-mail]

[Jorge Ferrer]

Hey DO Hung,

Please use the forums for your questions. To have a higher chance of getting help I would recommend you to try it out yourself and then ask specific questions.