angularjs1

Liferay and AngularJS Made Simple: Connecting AngularJS to a Backend with REST and JSON

Introduction

Liferay is the leading Open Source Enterprise Portal. One may asked what an enterprise portal is and this question is very valid as it has been asked on every single Liferay project that I have worked. This blog post is not about defining what an enterprise portal is but it wouldn’t be a crime if we provided a brief definition:

An enterprise portal is a web application which provides services required by an enterprise such as: user management, authentication and authorisation services, ability to connect to third party applications and provide a single point of access to multiple applications, hence the “portal”.

The above is my own definition and it could be extended to encompass web content management, content management system (CMS) and single sign on (SSO). This post is about Liferay and the use of its web content management system (WCMS) to create single page applications using AngularJS. The motivation to create portlets using AngularJS instead of Java is as:

  • Portlet development using Java is very expensive
  • Not many Java developers with portlet experience
  • Java portlets development requires heavy duty tools such as build tools, IDE and JVM
  • Portlet developers need to be familiar with the Portlet API, lifecycle and framework

We will focus on Liferay available RESTful web services API but do remember that you can create your own custom web services using Liferay service builder SDK.

Liferay RESTFul API and Security

Liferay ReSTFul and SOAP API implement the same security as the core library:

  • API can be secured so that only authenticated users can access them (AUTHENTICATION)
  • API can be secured so that only users with the right roles can executed certain API calls (AUTHORIZATION)

When creating your own custom API, Liferay Services Builder will create the necessary permission for the web services API.
For a list of API available in Liferay, point your browser to the following

http://<your-server-address>:<your-server-port>/api/jsonws

Liferay will provide a means of testing the services calls when the above URL is loaded. Most services execution will require authentication or a secured token to be passed on with the calls. This level of a security is required in an enterprise environment. It is possible to stop Liferay from checking for the secured token in portal-ext.properties as

Auth.token.check.enabled=false

Software developments should promote code reuse, therefore by separating the business logic from the portlet code, developers can share the business logic with third party applications.

Why Use AngularJS to Create Web Applications (Not Portlets)?

This is not a tutorial on AngularJS. Developers should use the same approach for developing any AngularJS application to developing Liferay web applications.
AngularJS is a popular JavaScript framework promoting Object Oriented Development (OOD) and Model View Controller (MVC) to the JavaScript community. Java developers are already custom with the methodology through the use of Spring MVC and JSF for front end developments. Developers familiar with Google Web toolkit (GWT) should find themselves in familiar territory. Now to answer the question of why use AngularJS to create web applications on Liferay?
AngularJS is JavaScript and therefore can be executed in the browser without recompilation and redeployment. Liferay Web Content Management System (WCMS) provides an HTML editor and content versioning. Liferay JSONWS API runs on the same server and can be accessed through the JavaScript written in the WCMS. AngularJS modules can be written in a third party editor such Notepad++ and uploaded to Liferay Content Management System (CMS). The Liferay CMS provides a link to the latest version of the file which can be referenced in the HTML/ JavaScript code. By creating the web services in Java through Liferay Services Builder, the java developer can focus on the business logic – including testing. The front end developer can utilise his skills in HTML and JavaScript to develop the user interfaces and any necessary interactions with the backend through the ReSTFul services. There is a clear separation of work and accountability. The learning curve for the Java developers to create the services will be minimal. To preview the live code, the frontend developer only has to save the content (WCMS) and refresh the page to see the latest changes.
Here is a quick example:

 

 <div ng-app="" ng-controller="companiesController">  
   <ul>  
    <li ng-repeat="x in data">{{'title: ' +x.title + ', group Id: ' + x.groupId }}</li>  
   </ul>  
 </div>  
 <script>  
   function companiesController($scope,$http) {  
    $http.post("http://localhost:8080/api/jsonws/assetentry/get-company-entries/company-id/10157/start/0/end/5?p_auth=cbSXanJ2")  
    .success(function(response) {$scope.data = response;});  
   }  
   companiesController.$inject = ['$scope', '$http'];  
 </script><script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>  

You can copy the above in a new web content article and see the result displayed on the page. Make sure to change red bold values to your system specific:

  • Company id: for ease of testing, you can retrieve that value from the control panel
  • P_auth: this value can be looked up programmatically as it will change every time the user logs into the portal

Traditionally, the simple code above would require a JavaServer page or JSF application which is slow for rapid prototyping. In software testing, portlets controller are one of the most complex components to test. By creating a clear separation between components, testers and automated tools can test each components individually. The sample code pulls information from Liferay REST web services and displays a list of registered companies on the page.

Conclusion

Liferay has a rich set of features which allows developers to create enterprise components and applications. When working with ReSTFul services, Liferay Web Content Management editor can act as an Integrated Development Environment in the browser. AngularJS is approaching maturity and it is very popular with web developers. Liferay 7 (next release as of writing ) will be introducing single page portlets but this is already possible with AngularJS and ReSTFul web services API. Needless to say that you can use any web browser to create content in Liferay CMS and debug your code in real time using tools such as Firebug.

4124677046_69aa7a07b3

GWT Visualization Example – Annotated Time Line Chart Tutorial

If you are a server-side Java developer such as myself, I am sure you want an easy way to create AJAX based application but pure JavaScript (ECMAScript) is not your strong skills. The beauty of JavaScript is that it runs on any web server, no need for a servlet container or anything of that sort.

So, I have been writing AJAX based UI using the GWT framework for the past year and half. I am still not a web developer but I understand enough CSS to spice up my site. Anyway, I am writing this tutorial because I think that the GWT Visualization team, even tough they did a good job, over complicates the creation of charts in their tutorial. I was trying to create an Annotated Time Line chart so I looked up my previous code I wrote for the GWT Portlet JSR-168, see here. I also decided to run a search (don’t be evil, Google is your friend) to try to find different examples and hopefully some nice custom charts. First of all, based on the search result; I thought that some of examples, including Google’s own, were confusing and over complex. Most examples uses AJAXLoader to load the Visualization API, but you shouldn’t have to use this. This is the simplest way to create a GWT Annotated Time Line Chart.

gwt annotated time line chart

1. Using your favorite development tool with support for GWT framework, create a new Java web application, you can export the compiled JavaScript later to a non-based web application, if you use an IDEW you should code-completion support.

2. Make you sure you have included the GWT Visualization API module in your classpath.

3. In your project source code root directory, you should <AppNamexxxx>.gwt.xml file. make sure to add teh following line to it in order to make the  module available to your application.

<inherits name=”com.google.gwt.visualization.Visualization”/>

4. In order to keep this tutorial short and straight to point, I have included the chart creation code in my <AppNamexxxx>EntryPoint.java class

public class MainEntryPoint implements EntryPoint
{
    
    
    /**
    * Creates a new instance of MainEntryPoint
    */
    public MainEntryPoint()
    {
        
        
    }
    
    
    
    /**
    * The entry point method, called automatically by loading a module
    * that declares an implementing class as an entry-point
    */
    public void onModuleLoad()
    {
        
        Runnable onLoadCallback = new Runnable()
        {
            
            
            public void run()
            {
                
                DataTable data = createHistoryTable(result);
                AnnotatedTimeLine.Options options = AnnotatedTimeLine.Options.create();
                options.setDisplayAnnotations(true);
                options.setDisplayZoomButtons(true);
                options.setScaleType(AnnotatedTimeLine.ScaleType.ALLFIXED);
                options.setLegendPosition(AnnotatedTimeLine.AnnotatedLegendPosition.SAME_ROW);
                AnnotatedTimeLine atl = new AnnotatedTimeLine(data, options, “600px”, “200px”);
                RootPanel.get().add(atl);
                
            }
            
            
            
        }      
        ;
        VisualizationUtils.loadVisualizationApi(onLoadCallback, AnnotatedTimeLine.PACKAGE);
        
    }
    
    
    
    // This method will create the Data used by the chart
    private DataTable createHistoryTable()
    {
        
        DataTable data = DataTable.create();
        data.addColumn(AbstractDataTable.ColumnType.DATE, “Date”);
        data.addColumn(AbstractDataTable.ColumnType.NUMBER, “Price”);
        data.addColumn(AbstractDataTable.ColumnType.NUMBER, “Low”);
        data.addColumn(AbstractDataTable.ColumnType.NUMBER, “High”);
        data.addRows(5);
                  
            DateTimeFormat dtf = DateTimeFormat.getFormat(“yyyy-MM-dd”);
            data.setValue(0, 0, dtf.parse(“2009-11-21”));
            data.setValue(0, 1, 100);
            data.setValue(0, 2, 120);
            data.setValue(0, 3, 90);

            data.setValue(1, 0, dtf.parse(“2009-11-22”));
            data.setValue(1, 1, 90);
            data.setValue(1, 2, 110);
            data.setValue(1, 3, 100);

            data.setValue(2, 0, dtf.parse(“2009-11-23”));
            data.setValue(2, 1, 100);
            data.setValue(2, 2, 180);
            data.setValue(2, 3, 80);

            data.setValue(3, 0, dtf.parse(“2009-11-20”));
            data.setValue(3, 1, 130);
            data.setValue(3, 2, 100);
            data.setValue(3, 3, 130);
          

            data.setValue(4, 0, dtf.parse(“2009-11-19”));
            data.setValue(4, 1, 130);
            data.setValue(4, 2, 170);
            data.setValue(4, 3, 150);
            
        }
        return data;  
    }  
}

Don’t forget to import all the necessary classes and voila!

I hope this will save you some time in creating your charts.

 

Dream_Job_Icon

Java Interview: tips for the interviewer

This is a brief entry about how an interviewer should conduct a Java based interview. I have been on both side of the table and this is only based on my own observations.  I think most interviews that I attended in the past, and possibly some I have conducted myself, focus on the basic concept. I accept that developers should be aware of the language principles, but how can an interviewer test more advanced principles?

The interview time have to be split into: 

  1. Theoretical conceptsThis 1st phase is about asking the common questions about OOP concepts, differences between interfaces and abstract classes, differences between List and Set, multithreading and so on. If it is required to store answers, do provide a written paper and avoid multiple choice questions. In my experience, open-ended questions allow the developer to express his knowledge better. Multiple choice questions provide unnecessary hints to question answers. Even if I did forget a terminology or a definition by looking at the various answers provided, I can pick the right answer 9/10 times. Theories are central to practices but make sure can be related to the role you are recruiting for.An important point when interviewing a developer, if you have a developer present during the interview, avoid asking domain specific question unless it is something common. I had some interview with senior and lead developers asking questions about a programming problem they have recently encountered and were able to fix after spending months working on it, how am I supposed to know about that unless I have encountered the same issues in the past.
  2. Practical test
    In order to test a developer capability for the role, it is a must that he/she undertakes a practical test. You do not need to give the developer code with bugs for him/ her to fix, I believe this approach is not very useful. I would suggest that all interviewers prepare the developer to take a practical test using their favourite tools (provide two of the most common open source IDE) and provide them with a simple problem domain. In my experience, I had to write some simple factorial algorithm (a single recursive method) to a domain centric web service application (no DB, store data in memory instead) and to more advance concepts. If application multithreading is part of the main day to day job, then ask the developer to write a simple application that shows that.
    This practice exposes several features of the developer; from its reasoning by writing simple algorithm to coding practice (commenting and Java best practices) and problem solving.

After all, I believe that programming is more about logical reasoning and coding. The more senior we get in our profession, the harder it is to answer simple questions with straightforward answers; we get carried away and provide a complex answer to something so simple. We cannot talk baby talk anymore; our tongue is full of jargon. All developers should follow the KISS principle when answering theoretical questions but ultimately they should excel in the practical test. If they are good enough, they should use a text editor to write their codes and compile it through the shell (JVM command line).
Another thing that all interviewers should know; developers have very good memories and therefore can memorise more than 115 interview questions; I would recommend you to focus more on a practical test.

This was a brief entry for interviewers. The web is full of tips and questions for the interviewees and I do not see any point in duplicating them here.  As usual, this is based on my experience and belief, you are always welcome to comment. Also, support my blog by visiting my advertisers (by clicking on the link on the right) they might have something that you might need.

netbeans-choose-server

Building Portlet 1.0 (JSR168) with GWT 1.7 on NetBeans 6.7

In this tutorial, I will build a Portlet 1.0 (JSR168) which I will then deploy on Liferay and OpenPortlet Container. Alternatively, the portlet should be able to run on any other JSR168 compliant portlet container. I like the “Hello World” tutorial that we are accustomed to but I wanted to do something different this time. I decided to build the a GWT 1.7 based portlet which also make use of the Google Visualization API for GWT.
In order to follow this tutorial, you will need the following:

This is not a tutorial about GWT or JSR168 Portlet but a focus on how to make them both work together to provide a nice UI. Prior knowledge of building and deploying portlet applications and developing GWT applications is required.
Once the development environment is ready, launch NetBeans and create a new web application project with Portlet and GWT support. Follow these steps in order to create web application with Portlet and GWT support.

  1. Create a new web project
  2. Give a project name and click next
  3. Choose your deployment portlet container and click next

  1. Add Google Web Toolkit (GWT) framework to your project

  1. Add Portlet Support to your project, chise any version and tick the boxes to create portlet and jsps. Fill in any required fields and click finish


NetBeans then generates all the required files in order to build the application. Initially, the two frameworks; Portlet and GWT are unaware of each other. Depending on your folder structure the following will be different. Here is a screenshot of my project structure in NetBeans.


My project is called LiferayHomePortlet as my Portlet Container is Liferay 5.2. My root package is com.etapix. This package will be used by GWT as the default package and will create the client and server packages as follow:

  • Com.etapix.client: this is package will have all my client side code including my xxxxEntryPoint.java class (xxxx being the name that you have chosen for your GWT)
  • Com.etapix.server: this package will not be used for the purpose of this tutorial

xxxx.gwt.xml (xxxx should be replaced with the name you are chosen will setting up the GWT framework for the project) was created in my root package “com.etapix”

NetBeans portlet generation feature has created, among other files, three jsps file under the WEB-INF/jsp folder

  • xxxxPortlet_edit.jsp
  • xxxxPortlet_help.jsp
  • xxxxPortlet_view.jsp

and the java class which will be used to render the portlet are allocated in com.etapix.liferay.portlet folder as LiferayHomePortlet.java.

In order for the portlet to display the chart from the GWT Visualization API, I have changed the generated code from portletEntrtyPoint.java. Once the changed to the GWT file was done, change the following file:

  • xxxxPortlet.java to include the following line in the “doView” method. Here is how you doView method should look like

    public void doView(RenderRequest request, RenderResponse response) throws PortletException, IOException {

    response.setContentType(“text/html”);

    PortletRequestDispatcher dispatcher =

    getPortletContext().getRequestDispatcher(“/WEB-INF/jsp/LiferayHomePortlet_view.jsp”);

    PrintWriter writer = response.getWriter();

    writer.println(“<script language=’javascript’ src='” + request.getContextPath() + “/com.etapix.portlet/com.etapix.portlet.nocache.js’></script>”);

    dispatcher.include(request, response);

    }

  • xxxxPortlet_view.jsp. This is what your code should look like

    <%@page contentType=”text/html”%>

    <%@page pageEncoding=”UTF-8″%>

    <%– Uncomment below lines to add portlet taglibs to jsp

    <%@ page import=”javax.portlet.*”%>

    <%@ taglib uri=”http://java.sun.com/portlet_2_0″ prefix=”portlet”%>

    <portlet:defineObjects />

    <%PortletPreferences prefs = renderRequest.getPreferences();%>

    –%>

    <div id=”gwt”></div>

Once the changes are completed, build your application and deploy it to your portlet container of your choice.

This is what it looks like in Liferay Portlet container

this is what it looks in OpenPortal Portlet Container.


This was my first blog tutorial as I am looking to provide more tutorials in the future. I hope you found this helpful. I have included the NetBeans project folder for your to play with.
download NetBeans project

Please support my blog and its advertisers by clicking on the interesting products/ services on the right (Google ads).  Cheers.