Web Content List Screenlet For Android

January 18, 2017

What is Screenlet ??

Liferay provides the screenlets, which are the readymade screen for the faster android app development for Liferay apps. Liferay Screens for Android contains several Screenlets that you can use in your Android apps.

Liferay screenlet is Java view classes, which can be inserted into a layout of an activity or fragment. They render a selected layout in the runtime and in Android Studio’s visual editor and react to UI events, sending any necessary server requests. You can set a Screenlet’s properties from its layout XML file and Java classes. The Screenlets bundled with Liferay Screens are collectively known collectively as the Screenlet Library. Let’s understand by implementing.

Environment Details:

Liferay portal version: Liferay 7 CE GA3
Android Studio version: 2.2.3

Prerequisite :

Configure your Android Studio project for using the Liferay Screens. Click here for a reference.
Configure Liferay instance to connect with for your android application.

Today we are going to look into detail how to use web content list screenlet in your app. Liferay provides many screenlets, which we are going to use

Let’s get started …

1. Create new android studio project “ScreenletDemo” with blank activity.

2. Add Liferay libraries for using screenlets by adding,

compile 'com.liferay.mobile:liferay-screens:+'

compile 'com.liferay.mobile:liferay-material-viewset:+'

In your build.gradle(app) file in dependencies,

When you Sync your project, you will have access to screenlets provided by a library.

3. Configure login Screenlet for logging into Liferay instance.

Configure UI for logging activity by adding the following code in your activity_main.xml

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

xmlns:liferay = "http://schemas.android.com/apk/res-auto"

android:id="@+id/activity_main"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context="st.com.screenletdemo.MainActivity">

<com.liferay.mobile.screens.auth.login.LoginScreenlet

android:id="@+id/login_screenlet"

android:layout_width="match_parent"

android:layout_height="match_parent"

liferay:layoutId="@layout/login_default" />

</RelativeLayout>

As in code highlighted code is for adding the readymade views to display in our apps. For using any Liferay functionality user must be authenticated. Login Screenlet takes care of it very well.

Configure server_context.xml file under your res/values folder

You will need to provide configuration details here, which screenlet takes as a reference.

<?xml version="1.0" encoding="utf-8"?>

</resources>

liferay_server : Server address of your Liferay instance is running.

liferay_company_id : Company id for the instance

liferay_portal_version : Liferay version server is running Liferay 6 (62), Liferay 7 (70)

Configure MainActivity.java file.
Screenlet provides the interfaces to get a result of web service calls by mobile SDK. For login, you need to implement LoginListener, which provides two methods that you need to implement.

First, set the listener for in onCreate method of MainActivity by

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

LoginScreenlet loginScreenlet = (LoginScreenlet) findViewById(R.id.login_screenlet);

loginScreenlet.setListener(this);

}

Now, you will get the callback for the login when you successfully logged in

@Override

public void onLoginSuccess(User user) {

Log.d(TAG,user.getFirstName());

Toast.makeText(getApplicationContext(),user.getScreenName()+"Successfully logged in",Toast.LENGTH_LONG);

}

Or in Failure.

@Override

public void onLoginFailure(Exception e) {

Log.d(TAG,e.getMessage());

Toast.makeText(getApplicationContext(),e.getMessage(),Toast.LENGTH_LONG);

4. Configure “Web content list” screenlet.

Create new activity named WebContentListActivity for listing the web content inside the activity.
Configure the UI in activity_web_content_list.xml with the screenlet ,

<com.liferay.mobile.screens.webcontent.list.WebContentListScreenlet

android:id="@+id/web_content_screenlet"

android:layout_height="match_parent"

android:layout_width="match_parent"

liferay:layoutId="@layout/webcontentlist_default"

liferay:autoLoad="true"

liferay:folderId="30342"

liferay:labelFields="Title,Summary"

There are several attributes you will need to consider when setting up the UI.

layoutId	@layout	The ID of the layout to use to show the View.
autoLoad	boolean	Whether the list loads automatically when the Screenlet appears in the app’s UI. The default value is true .
folderId	number	The ID of the web content folder to retrieve content from.
labelFields	string	The comma-separated names of the DDM fields to show. Refer to the list’s data definition to find the field names. For more information on this, see the article on structured web content . Note that the appearance of data from a structure’s fields depends on the layoutId .

Note: All attribute can be found at link

Configure the WebContentListActivity.java for web content listing.

You need to configure the listener for getting the event for a listing of the web content in your activity's onCreate() method as below.

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_web_content_list);

WebContentListScreenlet webContentListScreenlet = (WebContentListScreenlet) findViewById(R.id.web_content_screenlet);

webContentListScreenlet.setListener(this);

}

For listeners, you need to implement BaseListListener an interface in your activity. Using the interface you need to implement following methods in your activity.

@Override

public void onListPageFailed(int startRow, Exception e) {

Log.d(TAG,e.getMessage());

Called when the server call to retrieve a page of items fails.

This method’s arguments include the Exception generated when the server call fails.

}

@Override

public void onListItemSelected(Object element, View view) {

Log.d(TAG,"list item selected");

Called when an item is selected in the list.

This method’s arguments include the selected list item (Record).

}