This document discusses approaches to mobile development, including web mobile, native, and hybrid approaches. It then covers specific mobile development frameworks and tools that can be used with IBM Notes/Domino including the XPages Extension Library mobile controls, Bootstrap, jQuery Mobile, HTML5 offline capabilities, PhoneGap/Apache Cordova, Titanium, and IBM Worklight. IBM Worklight is described as providing services to augment PhoneGap, including tools like Worklight Studio, the Worklight Application Center, capabilities of the Worklight runtime and server, and the Worklight Console.

1. XPages Mobile
Giuseppe Grasso

2. About Me
Giuseppe Grasso
Technologist, Italian LUG
leader, unable to bio
himself... and an IBM
Champion!
Follow me as @grassog
Giuseppe.grasso@gmail.com

3. Agenda
•
•
•
•
•
•
•
•
Considerazioni per lo sviluppo mobile
Possibili approci
XPages Extension Library mobile controls
Boostrap
JQueryMobile
HTM5 offline
Phonegap & Titanium
IBM Worklight

4. Considerazioni per lo sviluppo mobile
• Diciamo mobile ma intendiamo…

5. Possibili approci
1.
2.
3.
Web mobile
Nativo
Ibrido

6. 1. Sviluppo web mobile
Vantaggi
• Minore curva di
apprendimento
• Facilità di sviluppo
• Ottima portabilità
• Deploy & Manutenzione
• HTML5+ev
Svantaggi
• Prestazioni
• Look & feel
• Accesso alle risorse
hardware

7. 2. Sviluppo nativo
Vantaggi
• Performance
• Integrazione con la
piattaforma (hardware
e servizi software)
• Look & feel
Svantaggi
• Curve di apprendimento
• Tempi di sviluppo
• Portabilità
• Politiche degli appstore
• Deploy & Manutenzione

8. 3. Sviluppo Ibrido
Vantaggi
• Facilità di sviluppo
• Portabilità
• Integrazione
• HTML5+ev
Svantaggi
• Curva di apprendimento
• Politiche degli appstore
• Deploy & Manutenzione

9. XPages Extension Library mobile controls
•
•
•
•
•
Custom controls “già pronti”
Temi iOs e Android
Renderer mobili (es per le viste)
Ben integrati nel Domino Designer
Semplici da usare

10. XPages Extension Library mobile controls
Svantaggi (imho):
• Temi non particolarmente “precisi”
• Performance
• Documentazione

11. boostrap
•
•
•
•
Framework css+javascript
Supporto mobile nativo
Facile da usare
Ampia disponibilita di
–
–
–
Documentazione
Temi di terze parti
Plugin
• Disponibile già pronto come extension library:
– http://bootstrap4xpages.com/
– http://www.openntf.org/internal/home.nsf/project.xsp?action=openDocum
• Vedi Tips&Tricks di Daniele Grillo per come installare
• Nice starting point

12. JQueryMobile
Vantaggi
• Framework “maturo”
• Numerosi “controlli”
• Ampia documentazione
• Plugins
Svantaggi
• Approcio “pesante” sul
DOM
• Convivenza con dojo e
XSP non sempre facile
• Forte uso degli attributi
data-xxx  R8.5.2

13. JQueryMobile: page
• Come i mobile controls delle xpages, anche
jquerymobile si basa sul concetto di “pagina”
<div data-role="page">
<div data-role="header">...</div>
<div data-role="content">...</div>
<div data-role="footer">...</div>
</div>

14. JQueryMobile: page xpages

15. JQueryMobile: inizializzazione
Con gli ultimi rilasci di dojo, è necessario
caricare jquerymobile *prima* di dojo (vedi
http://hasselba.ch/blog/?p=1216)

16. JQueryMobile: ajax
L’ajax di JQueryMobile non va daccordo con le XPages:
• Jquerymobile normalmente carica le “pagine” ovvero quanto
compreso fra nel tag
<div data-role="page">…</div>
• Il javascript generato dalle XPages è in fondo all’html, prima
del tag di chiusura del body, esterno al tag <div datarole="page">:
<script type="text/javascript">
XSP.addOnLoad(function() {
XSP.attachEvent(….);
});
</script>
</body>
</html>
• Un modo di “risolvere” è usando rel="external" o
data-ajax="false"

17. Disabilitare dojo
• Per singola XPage:
<xp:this.beforePageLoad>
<![CDATA[#{javascript:
facesContext.getRequestParameters().setJsLibrary(0);}]]>
</xp:this.beforePageLoad>
• Per l’intero nsf:
xsp.client.script.libraries=none
dentro al file
WebContentWEB-INFxsp.properties

18. Html5 offline
2 componenti:
• Cache manifest
– Salva un insieme di files che vengono caricati dallo
storage locale
• localStorage (Web Storage)
– Contenitore indicizzato per chiave-valore

19. Html5 offline: cache manifest
Vantaggi
• Consente di navigare
offline
• Le risorse vengono
caricate localmente
invece che dalla rete
• Riduzione del carico sul
server
Svantaggi
• Scarso controllo
• Implementazione “tutto
o niente”

20. Html5 offline: cache manifest
• Il cache.manifest file (da servire con content-type: text/cache-manifest ):
CACHE MANIFEST
# 20130926
# risorse da cacheare
index.html
css/style.css
# risorse da cachere
CACHE:
images/logo1.png
images/logo2.png
images/logo3.png
# risorse alternative da caricare quando offline
FALLBACK:
/ /offline.html
# risorse obbligatoriamente online.
NETWORK:
*
• Viene linkato nel tag html:
<html lang="it" manifest="/dominopoint/mconnect.nsf/manifest.xsp">

21. Html5 offline: cache manifest controllo
Controllo della cache:
var appCache = window.applicationCache;
switch (appCache.status) {
case appCache.UNCACHED: // UNCACHED == 0
return 'UNCACHED';
break;
case appCache.IDLE: // IDLE == 1
return 'IDLE';
break;
case appCache.CHECKING: // CHECKING == 2
return 'CHECKING';
break;
case appCache.DOWNLOADING: // DOWNLOADING == 3
return 'DOWNLOADING';
break;
case appCache.UPDATEREADY: // UPDATEREADY == 4
return 'UPDATEREADY';
break;
case appCache.OBSOLETE: // OBSOLETE == 5
return 'OBSOLETE';
break;
default:
return 'UKNOWN CACHE STATUS';
break;
};
appCache.update(); // Attempt to update the user's cache.
appCache.swapCache(); // The fetch was successful, swap in the new cache.

22. Html5 offline: cache manifest eventi
// Fired after the first cache of the manifest.
appCache.addEventListener('cached', handleCacheEvent, false);
// Checking for an update. Always the first event fired in the sequence.
appCache.addEventListener('checking', handleCacheEvent, false);
// An update was found. The browser is fetching resources.
appCache.addEventListener('downloading', handleCacheEvent, false);
// The manifest returns 404 or 410, the download failed,
// or the manifest changed while the download was in progress.
appCache.addEventListener('error', handleCacheError, false);
// Fired after the first download of the manifest.
appCache.addEventListener('noupdate', handleCacheEvent, false);
// Fired if the manifest file returns a 404 or 410.
// This results in the application cache being deleted.
appCache.addEventListener('obsolete', handleCacheEvent, false);
// Fired for each resource listed in the manifest as it is being fetched.
appCache.addEventListener('progress', handleCacheEvent, false);
// Fired when the manifest resources have been newly redownloaded.
appCache.addEventListener('updateready', handleCacheEvent, false);

23. Html5 localStorage
Vantaggi
• Semplice da usare
• Ampiamente
supportato
(indexedDB e webSql
sono deprecati)
Svantaggi
• Non è un database
• Quanto storage ho a
disposizione?

24. Html5 localStorage
Due oggetti
• localStorage  persistente
• sessionStorage  cancellato a chiusura sessione
codice
• var value = localStorage.getItem(“key”);
• localStorage.setItem(“key”, value);
• localStorage.removeItem(“key”)
• localStorage.length //numero di elementi
• localStorage.key(i) //ritorna la i-esima chiave

25. PhoneGap / Apache cordoba
• Container per applicazioni webizzate
• Punti di integrazione con la piattaforma
hardware/software esposti via javascript
• Opensource

26. Titanium
• Crosscompilatore da javascript/html/css a
nativo
• Integrazione con la piattaforma
• proprietario

27. IBM Worklight
• Basato su cordoba
• Offre una vasta serie di servizi che
augmentano phonegap

28. IBM Worklight: componenti
Worklight Studio
iOS
Android
HTML5, Hybrid,
and Native
Coding
Optimization
Framework
Blackberr
y
Windows
Phone
Development Team
Provisioning
Enterprise App Provisioning
and Governance
App Feedback Management
Adapter Library for
backend connectivity
Encrypted and
Syncable Storage
3
4
Stats Aggregation
Enterprise Backend Systems &
Cloud Services
JSON Translation
Cross-Platform
Compatibility Layer
Server Integration
Framework
Reporting for Statistics
and Diagnostics
Worklight Server
Mashups and service
composition
Device Runtime
Runtime Skinning
Mobile Web
Desktop Web
User authentication
and mobile trust
2
Worklight Application
Center
Windows
8
Java ME
Integrated Device
SDKs
3rd Party Library
Integration
1
Application Code
SDKs
Client-Side
App Resources
Direct Update
Mobile
Web Apps
Unified Push
Notifications
5
Worklight Console
Reporting and
Analytics
Push /SMS
Management
App Version
Management

29. Worklight studio
SDKs
• Eclipse Based IDE
• Native, hybrid and standard web development
• Environment-specific optimization
• Common code with overrides/extensions
• Native development options
• Runtime skins
• 3rd-party library integration
Worklight Studio
HTML5, Hybrid, and
Native Coding
Optimization
Framework
Android
Blackberry
Windows
Phone
Integrated Device
SDKs
3rd Party Library
Integration
WYSIWG Editor
and Simulator
Functional
Testing
1
iOS
Windows 8
Java ME
Mobile Web
Desktop Web
• Device SDK integration
• Access to emulators and debugging tools
• Supports auto-complete and validation
• The IDE includes the Tools, Worklight Server and database (No separate
installs required anymore)

30. Worklight application center
The Worklight Application Center
enables companies to easily set up
an enterprise app store for their
enterprise and development teams.
The Application Center provides:
• Administrators with fine-grained
control over the distribution of mobile
apps across the enterprise, including
ACL and LDAP support;
• Employees with one-stop shopping
for the latest apps needed by their
department and optimized for their
device;
• Developers with an easy way to
distribute mobile builds and elicit
feedback from development and test
team members.
Worklight Application
Center
Development Team
Provisioning
Enterprise App Provisioning
and Governance
App Feedback Management
2

31. Worklight runtime
Organizations can develop “custom shells” that
include corporate services, such as
authentication and security services, integration
services, and branding. Web developers can
then use sanctioned shells to develop the
business logic of the application using only
HTML5
• Inner Application:
–
–
–
–
•
Implements the application’s logic
Common web code
Utilizes External Shell API’s
Required to comply with shell parameters
External Shell:
–
–
–
–
Install as a native App (IPA/APK file)
Customizable container
Provides JS access to native functionality
Branding, Security, Authentication

32. Worklight Server
User Authentication
and Mobile Trust
Mashups and Service
Composition
JSON Translation
Adapter Library for
Backend Connectivity
Client-Side
App Resources
Stats Aggregation
• Adapters with support for SOAP,
REST, SQL, JMS, CASTIRON,
Node.js (preview in 6.0) and
more
• Performs Data Transformation to
streamline back-end data for
mobile consumption
• Server and device Security
control
• Supports Physical Clustering for
high availability
• Controls Application Deployment
and Versioning
• Push Notification administration
• Analytics including user adoption
and usage data
Enterprise Backend Systems &
Cloud Services
Worklight server
Direct Update
Mobile
Web Apps
Unified Push
Notifications

33. Worklight Console
• Application Version Management
– Install, update, disable, enable
Device Runtime
Cross-Platform
Compatibility
ServerLayer
Integration
F ramework
– Deployed applications
– Installed adapters
– Push notifications
Encrypted and
Syncable Storage
Runtime Skinning
4
Mashups and
Service
Composition
JSON Translation
Geolocation Services
Adapter Library for
Backend
Connectivity
Stats Aggregation
Worklight Server
User Authentication
and Mobile Trust
3
Application Code
Push management
Configurable audit log
Administrative dashboards for:
E nterprise Backend Systems
& Cloud Services
•
•
•
Client-Side
App Resources
5
W orklight Console
Direct Update
U nified Push and SMS Notification
Mobile
Web Apps
Unified Push
Notifications
Development and Operational Analytics
App Version Management

34. Grazie agli sponsor per aver reso possibile i
Dominopoint Days 2013!
Main Sponsor
Vad sponsor
Platinum sponsor
Gold sponsor