Liferay Mobile – Creating Great Omnichannel Experiences - Part 1: Liferay Screens

This blog entry is part of a three-part blog series that explores some of the great features provided by Liferay Screens and Liferay Mobile SDK. In this this series, I will cover:

  • Liferay Screens – Use screenlets in your native Android or iOS app to leverage content and services available on your Liferay server
  • Liferay Push Notifications – Push offers and notifications directly to user handsets
  • Liferay Audience Targeting – Deliver targeted content and create personalised experiences within your native Android or iOS app

All examples in this series were developed for Android, using Android Developer Studio 3 and Liferay DXP.

 

Part 1 – Liferay Screens

Liferay Screens is a powerful mobile framework that makes it really easy to incorporate your Liferay server as an enterprise backend for your native mobile app. It is a collection of “screenlets” – i.e., native mobile components – that can be used in both Android and iOS apps. These screenlets include Login, Blog Entry, Form Display, Web Content Display and much much more. For a full list of screenlets, take a look at the Screens Github project

For any mobile-centric business looking to create delightful end user experiences, Screens provides many benefits, some of which are as follows:

  • Decreased development time. Reduce software development effort by incorporating existing Liferay functionality into your app - e.g., mobile authentication through Login and Sign-Up screenlets.
  • Single source of truth for your content. By re-using content from your Liferay server, it only needs to be authored and maintained in one place.
  • Update your app more easily. Avoid having to rebuild and re-submit your app to the iOS App Store or Google Play Store when you want to make a change - use Liferay to update your app’s content in real time.

In this first article, we will build a very simple Android app that uses:

  • Login screenlet to authenticate users of our app against a backend Liferay server
  • Web Content Display screenlet to display content - authored on our Liferay server - within our app

 

Set up the project

1.       In Android Developer Studio (v3.0 at time of writing), create a new project.

 

 

2.       Select desired SDK verison (API 23 used in this example).

 

3.       Select an Actvity type  - Empty Activity for this example.

 

4.       Accept default activity configuration and click Finish.

 

 

Add Liferay Screens framework and server details

1.       Add Liferay Screens dependency to your app’s build.gradle file.

2.       Add Liferay configuration properties to strings.xml.

 

Add Login functionality

1.       Add LoginActivity class to your project.

package com.jfeeney.liferay.mobile;

import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.Toast;

import com.jfeeney.liferay.mobile.R;
import com.liferay.mobile.screens.auth.login.LoginListener;
import com.liferay.mobile.screens.auth.login.LoginScreenlet;
import com.liferay.mobile.screens.context.User;

public class LoginActivity extends AppCompatActivity implements LoginListener
{

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_login);
        LoginScreenlet loginScreenlet=(LoginScreenlet)findViewById(R.id.login_screenlet);
        loginScreenlet.setListener(this);
    }

    @Override
    public void onLoginSuccess(final User user) {
        String message = String.format("Login successful", user.getEmail());
        Toast.makeText(LoginActivity.this,message,Toast.LENGTH_SHORT).show();

        startActivity(new Intent(LoginActivity.this, MainActivity.class));
    }

    @Override
    public void onLoginFailure(final Exception e) {
        String message="Incorrect username/password";
        Toast.makeText(LoginActivity.this,message,Toast.LENGTH_SHORT).show();
    }
}

 

2.       Add a corresponding activity)login layout to your project.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.jfeeney.liferay.mobile.LoginActivity">

    <com.liferay.mobile.screens.auth.login.LoginScreenlet
        android:id="@+id/login_screenlet"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        />

</android.support.design.widget.CoordinatorLayout>

 

3.       Configure your app to invoke the login screen when the app is launched. In your project AndroidManifest.xml, replace:

<activity android:name=".MainActivity">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity>

with:

<activity     android:name="com.jfeeney.liferay.mobile.LoginActivity"     android:label="Login">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity>

<activity     android:name="com.jfeeney.liferay.mobile.MainActivity" />

 

4.       All that remains now is to test your app’s new login functionality. Run your app – you will be presented with a login activity shown below - and authenticate using credentials stored on your Liferay server. Upon successful login, you will see a brief “Login successful" popup message, followed by an activity with the text “Hello World!”.

 

Create web content

Now that users can login to our app, the next step is to use Liferay Screens to present them with some meaningful content. To do this, we must first create the content on our Liferay server.

1.       On your Liferay DXP server, navigate to the site that you are referencing in your mobile app (liferay_group_id).

2.       Create a new Web Content article (Content > Web Content > New > Basic Web Content) with the following HTML: https://github.com/johnfeeney/liferay-screens-demo-content/blob/master/web-content-article.html

3.       Format and render the content nicely by attaching a template with the following code: https://github.com/johnfeeney/liferay-screens-demo-content/blob/master/web-content-article-template.ftl

Font Awesome is referenced in this template – if you wish to use it you will need to add the CSS file it to the theme for your site.

4.       Ensure the permissions for your content on Liferay are applicable for the users of your mobile app. 

5.       When finished, you should have web content that appears in a desktop browser as follows:

 

Display web content in mobile app

Now that we’ve created our content, it’s time to add a placeholder for it in our mobile app.

1.       In activity_main.xml layout, add a liferay namespace to the root element.

2.       Add the Web Content Display screenlet to the activity_main layout (replace the articleId with your own).

<com.liferay.mobile.screens.webcontent.display.WebContentDisplayScreenlet     android:layout_width="match_parent"     android:layout_height="match_parent"     liferay:articleId="264244"     />

3.       And that’s it! Run your app again, login and you should see your Liferay-authored content as follows:

 

Conclusion

As you can see, it’s really easy to get up and running with Liferay Screens and to leverage the features and services of your Liferay server from within your mobile app. 

The source code for the Android app used in this simple example can be found here: https://github.com/johnfeeney/liferay-screens-demo

Feel free to clone or fork the code, create your own app and play around with the other Screenlets on offer.

Have fun!