Blogs

Liferay.Service(
    '/bookmarksentry/get-group-entries',
    {
        groupId: Liferay.ThemeDisplay.getScopeGroupId(),
        start: -1,
        end: -1
    },
    function(obj) {
        // do something with result object
    }
);

<aui:script use="liferay-portlet-url,liferay-service,aui-base">

public class AngularPortlet extends MVCPortlet {
     
    public void serveResource(ResourceRequest resourceRequest, ResourceResponse resourceResponse) throws IOException, PortletException {

        String resourceId = resourceRequest.getResourceID();    

        try {
            // check resourceID to see what code to execute, possibly using a parameter and return a JSON result

            String paramValue = resourceRequest.getParameter("paramName");         

            Gson gson = new Gson();
            String json = gson.toJson(result);

            resourceResponse.getWriter().print(json);
        } catch (Exception e) {
            LOGGER.error("Problem calling resource serving method for '" + resourceId + "'", e);
            throw new PortletException(e);
        }
    }
}

var url = Liferay.PortletURL.createResourceURL();
url.setResourceId('myResourceId');
url.setPortletId(pid);
url.setParameter("paramName", "paramValue");

$http.get(url.toString()).success(function(data, status, headers, config) {
    // do something with the result data
});

You promise?

When trying out these various REST services I quickly ran into problems regarding the asynchronous nature of Javascript and AngularJS. This is something that Primefaces has shielded me from most of the time, but that immediately turned out to be something that I needed to think about and apply rigorously in an AngularJS based portlet. Luckily this is a known 'problem' that has an elegant solution: promises. This means you just need to write and call your AngularJS service/factory in a certain way and all the necessary async magic will happen. For this we'll revisit the code we used to get bookmarks, this time also wrapped in a nice AngularJS factory in a separate Javascript file:

'use strict';

angular.module("app.factories", []).

factory('bookmarkFactory', function($q) {
    var getBookmarks = function() {

        var deferred = $q.defer();

        Liferay.Service(
            '/bookmarksentry/get-group-entries',
            {
                groupId: Liferay.ThemeDisplay.getScopeGroupId(),
                start: -1,
                end: -1
            },

            function(obj) {
                deferred.resolve(obj);
            }
        );

        return deferred.promise;
    };

    return {
        getBookmarks: getBookmarks
    };
});

Using this pattern, creating a deferred result and returning a promise to it from our method, we've made are call asynchronous. Now we just need to call it correctly from our controller using the then syntax:

var module = angular.module(id, ["app.factories"]);

module.controller("MainCtrl", ['$scope', 'bookmarkFactory',

    function($scope, bookmarkFactory) {
        bookmarkFactory.getBookmarks().then(function(data) {
            $scope.model.bookmarks = data;
        });
    }]
);

Lost in translation

Now that the most important points have been tackled I wanted to move on to something that is pretty important in the country where I'm from: i18n. In Belgium we have 3 official languages, Dutch, French & German, and usually English is also thrown into the mix for good measure. So I wanted to find out to add i18n to my AngularJS portlet and while doing so see if I could make it into a custom directive. The current version of this simple directive uses an attribute and only allows retrieving a key without providing and replacing parameters in the value.

module.directive('i18n', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attributes) {
            var message = Liferay.Language.get(attributes["i18n"]);
            element.html(message);
        }
    }
});

The directive above uses the Liferay.Language Javascript module to retrieve the value of the given resource key from the portlets language bundles and sets this as the value of the tag on which the directive is used. To be able to use this Liferay Javascript module we'll again need to add something to the use attribute of the aui:script tag to make sure it is loaded and available: liferay-language. Once we have this directive using it in our HTML partials is pretty simple:

<h2 i18n="title"></h2>

This piece of HTML, containing our custom i18n directive, will try to retrieve the value of the title key from the portlet's resource bundles that are defined in the portlet.xml. The important word in the previous sentence is try, because it seems there's a couple of bugs in Liferay (LPS-16513 & LPS-14664) which causes the Liferay.Language Javascript module to not use the portlet's resource bundles, but only the global ones. Luckily there is a simple hack to will allow us to still make this work: add a liferay-hook.xml file to the portlet and use it to configure Liferay to extend its own language bundles with our portlet's.

<?xml version="1.0"?>

<!DOCTYPE hook PUBLIC "-//Liferay//DTD Hook 6.2.0//EN" "http://www.liferay.com/dtd/liferay-hook_6_2_0.dtd">
<hook>
    <language-properties>Language.properties</language-properties>
</hook>

Can you hear me?

After taking all the previous hurdles you end up with a pretty usable portlet already, but the last thing I wanted to try was to get AngularJS portlets to talk to each other using IPC (Inter Portlet Communication) or something similar. As AngularJS is a Javascript framework the obvious choice would be to use the Liferay Javascript event system: Liferay.on & Liferay.fire. Integrating this in my controller turned out to be not as straightforward as I expected, but once I threw promises and $timeout into the mix I got the result I expected at the beginning. To fire an event just use the following in your code:

Liferay.fire('reloadBookmarks', { portletId: $scope.portletId });

You can use any event name you like, reloadBookmarks in our case. or even had multiple events. We also pass in the portletId ourself as this doesn't seem to be in the event data by default anymore and it can be useful to filter out unwanted events on the portlet that is the originator of the event. This event data can be basically any Javascript/JSON object you want.

Liferay.on('reloadBookmarks', function(event) {
    if (event.portletId != $scope.portletId) {
        $timeout(function() {
            bookmarkFactory.getBookmarks().then(function(bookmarks) {
                $scope.model.bookmarks = bookmarks;
            });
        });
    }
});

Conclusion

It took some time and a lot of Googling and trying out stuff, but in the end I can say I got AngularJS to work pretty good in a portal environment. It is usable, but for someone that is used to spending most of his time in Java and not Javascript it was quite a challenge, especially when something fails. The error messages coming from Javascript aren't always as clear as I'd want them to be and the IDE support (code colouring, code completion, debugging, ...) isn't up to what I'm used to when writing JSF/Spring based portlets. But I think the following image expresses my feelings pretty good:

More blogs on Liferay and Java via http://blogs.aca-it.be.