• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
XPages Mobile, #dd13
 

XPages Mobile, #dd13

on

  • 510 views

Tecniche e metodi per lo sviluppo XPages nel mondo Mobile ed un accenno a Worklight

Tecniche e metodi per lo sviluppo XPages nel mondo Mobile ed un accenno a Worklight

Statistics

Views

Total Views
510
Views on SlideShare
496
Embed Views
14

Actions

Likes
0
Downloads
0
Comments
0

2 Embeds 14

https://twitter.com 13
http://intl.feedfury.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />

XPages Mobile, #dd13 XPages Mobile, #dd13 Presentation Transcript

  • XPages Mobile Giuseppe Grasso
  • About Me Giuseppe Grasso Technologist, Italian LUG leader, unable to bio himself... and an IBM Champion! Follow me as @grassog Giuseppe.grasso@gmail.com
  • Agenda • • • • • • • • Considerazioni per lo sviluppo mobile Possibili approci XPages Extension Library mobile controls Boostrap JQueryMobile HTM5 offline Phonegap & Titanium IBM Worklight
  • Considerazioni per lo sviluppo mobile • Diciamo mobile ma intendiamo…
  • Possibili approci 1. 2. 3. Web mobile Nativo Ibrido
  • 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
  • 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
  • 3. Sviluppo Ibrido Vantaggi • Facilità di sviluppo • Portabilità • Integrazione • HTML5+ev Svantaggi • Curva di apprendimento • Politiche degli appstore • Deploy & Manutenzione
  • 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
  • XPages Extension Library mobile controls Svantaggi (imho): • Temi non particolarmente “precisi” • Performance • Documentazione
  • 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
  • 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
  • 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>
  • JQueryMobile: page xpages
  • JQueryMobile: inizializzazione Con gli ultimi rilasci di dojo, è necessario caricare jquerymobile *prima* di dojo (vedi http://hasselba.ch/blog/?p=1216)
  • 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"
  • 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
  • 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
  • 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”
  • 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">
  • 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.
  • 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);
  • Html5 localStorage Vantaggi • Semplice da usare • Ampiamente supportato (indexedDB e webSql sono deprecati) Svantaggi • Non è un database • Quanto storage ho a disposizione?
  • 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
  • PhoneGap / Apache cordoba • Container per applicazioni webizzate • Punti di integrazione con la piattaforma hardware/software esposti via javascript • Opensource
  • Titanium • Crosscompilatore da javascript/html/css a nativo • Integrazione con la piattaforma • proprietario
  • IBM Worklight • Basato su cordoba • Offre una vasta serie di servizi che augmentano phonegap
  • 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
  • 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)
  • 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
  • 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
  • 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
  • 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
  • Grazie agli sponsor per aver reso possibile i Dominopoint Days 2013! Main Sponsor Vad sponsor Platinum sponsor Gold sponsor