This website uses cookies to ensure you get the best experience. Learn More.
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:
All examples in this series were developed for Android, using Android Developer Studio 3 and Liferay DXP.
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:
In this first article, we will build a very simple Android app that uses:
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.
1. Add Liferay Screens dependency to your app’s build.gradle file.
2. Add Liferay configuration properties to strings.xml.
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!”.
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:
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:
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!