Date post: | 18-Feb-2017 |
Category: |
Technology |
Upload: | cignex-datamatics |
View: | 1,246 times |
Download: | 0 times |
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”, [email protected], “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',
'[email protected]', 'test' );
Liferay.execute(successCallback, errorCallback,
'com.liferay.portal.model.User',
'getUserByEmailAddress', ['10154',
'[email protected]']);
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