Building Applications with

Liferay Screens

Jitesh Dadlani

Lead Consultant, CIGNEX Datamatics

Winner of Liferay Screens Contest (Android App)

Agenda

• The Mobile Wave – Global Trend

• Going Mobile with Liferay

o Responsive & Mobile Web

o Mobile SDK

o Liferay Screens

I See a Great Disturbance in the Force

Mobile Wave – The New Global Trend

7.2 Billion People have access to internet

connection

1 Billion Smartphones sold in 2014

(Source: Gartner)

Half Companies will go BYOD by 2017

(Source: Gartner)

Google is making „mobile friendly‟ a

criteria in SEO

Preference of Mobile for Consumption of Digital Content

Mobile Apps are finding much love among users of digital content

Choosing the Right Approach

Responsive

Design Web design aimed at

crafting sites to provide an

optimal viewing

experience - easy reading

& navigation across wide

range of devices

Mobile

Web Website tuned to work

well on the small screens

of a mobile device, can be

accessed any time by the

web browser of any

mobile device

Native Mobile

App A custom application built

for a specific type of

device, must be

downloaded & installed on

the phone before it can be

used

Hybrid

Application A mix of Mobile

Website & Native Mobile

application, leveraged to

deliver a mix of web

content and native

capabilities

Analyzing the Approach

Native Hybrid Web

Built using

Device Features

Development Cost

User Interface

Speed

App Store Access

Objective C, Java,

.NET HTML, CSS, JavaScript

(native wrapper) HTML, CSS, JavaScript

Analyzing the Approach (Cont…) App Features Native Hybrid HTML

Graphics Native APIs HTML, Canvas, SVG HTML, Canvas, SVG

Performance Fast Slow Slow

Native look and feel Native Emulated Emulated

Distribution App store Web/App Store Web

Device Access

Camera Yes Yes No

Notifications Yes Yes No

Contacts, calendar Yes Yes No

Offline storage Secure file storage Secure file system, shared SQL Shared SQL

Geolocation Yes Yes Yes

Gestures

Swipe Yes Yes Yes

Pinch, spread Yes Yes No

Connectivity Online and offline Online and offline Mostly online

Development skills ObjectiveC, Java HTML5, CSS, Javascript HTML5, CSS, Javascript

Mobile Landscape in Liferay

Source: Liferay

Responsive Design

Site responds

with optimal

layout plus

optimal page

elements.

Works Across

Desktop and

Mobile

Devices.

Layout Adapts

to the Device

form Factor.

User

Proportional

Grids, CSS,

Flexible

Images.

Responsive Web Design in Liferay

Responsive Design in Liferay

• Responsive Bootstrap Theme

• Based on Twitter Bootstrap

• Liferay 6.1 CE GA2+

Responsive Design of Financial Services Company

Liferay Device Detection/Rules Management

• Fully Supports HTML 5, CCS 3

• Out of the box theme is HTML 5

• REST Services

• Liferay Supports device detection and rule management

• Rules Management Plug integrates with open source WURFL

• Rules Include

o Template modifications

o Theme modifications

o Simple redirects

o Site redirects

Mobile Web Examples

(Japanese Semiconductor Company)

(US based Pharmaceutical Retail) (UK based Media Publishing Company)

Mobile SDK & Liferay Screens

Liferay in Mobility

• Liferay Mobile SDK [Native]

o Android and iOS

• Liferay Apache Cordova Plugin using Liferay Mobile SDK. [Hybrid Apps]

• Liferay Screens [Screenlets]

Liferay Mobile SDK

• Liferay Mobile SDK introduced in 6.2

• Provides APIs to native apps to access Liferay features

o Authentication

o Services Directory

o JSON Parsing

o Server Error Handling

• Generates device specific code to access any remote

service o Example: Session session = new SessionImpl

(http://localhost:8080”, test@liferay.com, “test”); BlogsEntryService

service = new BlogsEntryService(session); JSONArray jsonArray =

service.getGroupEntries(10184,0,0,-1,-1);

• Supports Android and iOS and other platforms are planned

in the future

Cordova Liferay Plugin

• Supported Platforms

o Android

o iOS

o Windows Phone

• Requirements

o This plugin requires Liferay SDK.

o Add Liferay SDK to your project: Liferay

SDK dev site

o In iOS, if you use pods, you must install

first all plugins that you will use in the

project because then it isn't possible to

include

o In Windows Phone 8 (WP8), you must

use this sdk version Ithildir

Liferay.connect(null, null, 'http://10.0.2.2:8080',

'test@liferay.com', 'test' );

Liferay.execute(successCallback, errorCallback,

'com.liferay.portal.model.User',

'getUserByEmailAddress', ['10154',

'test@liferay.com']);

function successCallback(data){ // .... json array

or json object depends of Liferay SDK method }

• https://github.com/salvatejero/cordova-

liferay-plugin

Liferay Screens

• Collection of visual components with backend logic for mobile developers consuming

Liferay API.

• Liferay Screens • Component Oriented

• Theme Based

• Liferay Powered

• The Liferay Screens library is:

o Reusable

o Extensible

o Themable

o Ready to connect and already wired to your back-end

o Open source

Architecture – Liferay Screens

Demo

Liferay Screens (Latest Features Update 6th Oct, 2015)

• Offline Mode Support

• Asset Publisher • Imagine that in your website you have added an asset publisher that shows web contents

that uses the structure “News Article” and then filter by category “Sports” and order by “Publish Date”, adding the “Latest sports articles” display to your mobile app is now a blaze!

• Support for multiple templates for web content • Create awesome mobile optimized templates in your Liferay Portal and then display your

content with those templates in your mobile apps. Yes, you are totally right... we are talking about iPhone, iPad, Android optimized templates!

Thank You

www.cignex.com

Access the health of your IT Portfolio – Take our quick Open Source Readiness Assessment

(OpeRA™)

Visit http://operaonline.cignex.com/

facebook.com/CIGNEXTechnologies youtube.com/cignexglobal twitter.com/cignex www.cignex.com