IBM Lotus Notes Domino XPages and XPages for Mobile

5,269
-1

Published on

Chris Toohey (online at dominoGuru.com) presents an overview on IBM Lotus Notes Domino XPages and XPages development for Mobile Device apps.

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,269
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
0
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

IBM Lotus Notes Domino XPages and XPages for Mobile

  1. 1. XPages and XPages for Mobile Chris Toohey www.dominoGuru.com
  2. 2. XPages & XPages for Mobile <ul><li>What exactly are XPages? (And why you should care...) </li></ul><ul><li>“ More than a facelift” </li></ul><ul><li>Taking XPages to Mobile Devices </li></ul><ul><li>Progressive Enhancement </li></ul><ul><li>How to get started... </li></ul><ul><li>Wrap up </li></ul>
  3. 3. XPages & XPages for Mobile <ul><li>What exactly are XPages? (And why you should care...) </li></ul><ul><li>“ More than a facelift” </li></ul><ul><li>Taking XPages to Mobile Devices </li></ul><ul><li>Progressive Enhancement </li></ul><ul><li>How to get started... </li></ul><ul><li>Wrap up </li></ul>
  4. 4. What exactly are XPages? <ul><li>A “variable” Design Element, replacing: </li></ul><ul><ul><li>Forms </li></ul></ul><ul><ul><li>Pages </li></ul></ul><ul><ul><li>Navigators </li></ul></ul><ul><ul><li>Views </li></ul></ul>
  5. 5. What exactly are XPages? <ul><li>XPage Design Elements consist of: </li></ul><ul><ul><li>HTML </li></ul></ul><ul><ul><li>CSS </li></ul></ul><ul><ul><li>JavaScript </li></ul></ul><ul><ul><li>ServerSide JavaScript </li></ul></ul><ul><ul><li>Controls (native & custom) </li></ul></ul><ul><li>XPages use Themes </li></ul><ul><ul><li>Default rendering relies on Themes & Dojo </li></ul></ul>
  6. 6. What are Controls? <ul><li>Pre-built & Developer-defined </li></ul><ul><ul><li>XPage XML, HTML, CSS, & JavaScript </li></ul></ul><ul><ul><li>Think “Subform” </li></ul></ul><ul><li>Available from the Controls Palette in DDE </li></ul><ul><li>Allow “Nesting” and “Repeated Use” </li></ul>
  7. 7. What is Dojo? <ul><li>JavaScript Toolkit natively used by XPages </li></ul><ul><ul><li>Open Source </li></ul></ul><ul><ul><li>Globally Adopted/Supported </li></ul></ul><ul><li>Rendering of UI/UX </li></ul><ul><ul><li>Field-level validation </li></ul></ul><ul><ul><li>Alternate-input types </li></ul></ul><ul><ul><li>Web 2.0 animation </li></ul></ul>
  8. 8. What are Themes? <ul><li>Pre-built & Developer-defined </li></ul><ul><ul><li>Build-upon/expand or replace existing Themes </li></ul></ul><ul><ul><li>Think “XSLT” for XPages and Controls </li></ul></ul><ul><ul><ul><li>included Resources (ie., Stylesheets) </li></ul></ul></ul><ul><ul><ul><li>className for Controls </li></ul></ul></ul><!-- Basic Text --> < control > < name > Text </ name > < property > < name > styleClass </ name > < value > xspText </ value > </ property > </ control > <!-- FireFox Specific --> < resource rendered = &quot;#{javascript:context.getUserAgent().isFirefox()}&quot; > < content-type > text/ css </ content-type > < href > /. ibmxspres /global/theme/ webstandard /xspFF. css </ href > </ resource >
  9. 9. Hello World <ul><li>“ example.xsp” XPage </li></ul><ul><ul><li>XPage XML </li></ul></ul><ul><ul><li>Pass-thru HTML markup </li></ul></ul><? xml version = &quot;1.0&quot; encoding = &quot;UTF-8&quot; ?> < xp:view xmlns:xp = &quot;http://www.ibm.com/xsp/core&quot; xmlns:xc = &quot;http://www.ibm.com/xsp/custom&quot; > < p > Hello World! </ p > </ xp:view >
  10. 10. The end result... <! DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot; &quot;http://www.w3.org/TR/html4/loose.dtd&quot; > < html lang = &quot;en&quot; > < head > < title ></ title > < script type = &quot;text/javascript&quot; src = &quot;/domjs/dojo-1.3.2/dojo/dojo.js&quot; djConfig = &quot;locale: 'en-us'&quot; ></ script > < script type = &quot;text/javascript&quot; src = &quot;/domjs/dojo-1.3.2/ibm/xsp/widget/layout/xspClientDojo.js&quot; ></ script > < link rel = &quot;stylesheet&quot; type = &quot;text/css&quot; href = &quot;/domjava/xsp/theme/webstandard/xsp.css&quot; > < link rel = &quot;stylesheet&quot; type = &quot;text/css&quot; href = &quot;/domjava/xsp/theme/webstandard/xspLTR.css&quot; > < link rel = &quot;stylesheet&quot; type = &quot;text/css&quot; href = &quot;/domjava/xsp/theme/webstandard/xspSF.css&quot; > </ head > < body class = &quot;xspView tundra&quot; > < form id = &quot;view:_id1&quot; method = &quot;post&quot; action = &quot;/XPages%20Presentation.nsf/example.xsp?SessionID=CNB3RK18A0&quot; class = &quot;xspForm&quot; enctype = &quot;multipart/form-data&quot; > < p > Hello World! </ p > < input type = &quot;hidden&quot; name = &quot;$$viewid&quot; id = &quot;view:_id1__VUID&quot; value = &quot;!cnb3rm1kg0!&quot; > < input type = &quot;hidden&quot; name = &quot;$$xspsubmitid&quot; > < input type = &quot;hidden&quot; name = &quot;$$xspexecid&quot; > < input type = &quot;hidden&quot; name = &quot;$$xspsubmitvalue&quot; > < input type = &quot;hidden&quot; name = &quot;$$xspsubmitscroll&quot; > < input type = &quot;hidden&quot; name = &quot;view:_id1&quot; value = &quot;view:_id1&quot; > < script type = &quot;text/javascript&quot; > function clearFormHiddenParams_view__id1(curFormName) { var curForm = document.forms[curFormName]; } </ script > </ form > </ body > </ html >
  11. 11. Beyond the Design Element <ul><li>XPages as a development methodology: </li></ul><ul><ul><li>Establish fundamental Model-View-Controller architectures for LND applications. </li></ul></ul><ul><ul><li>Leverage new and existing NotesData through defined Data Sources </li></ul></ul><ul><ul><li>Simplify application maintenance via a return to the “single Design Element per client” while enabling client-specific feature functionality. </li></ul></ul>
  12. 12. The power of XPages <ul><li>XPages can... </li></ul><ul><ul><li>Define a remote Notes Data Source </li></ul></ul><ul><ul><li>Proxy Create, Read, Update, & Delete NotesData Requests </li></ul></ul><ul><ul><li>Update User Interfaces while maintaining “production” applications. </li></ul></ul>
  13. 13. But why should you care? <ul><li>XPages are the future of the Lotus Notes Domino platform. </li></ul><ul><li>XPages employ industry standard development tools & transferable developer skills. </li></ul><ul><li>XPages can rapidly produce applications for faster turn-around from “business need” to “solution”. </li></ul>
  14. 14. XPages & XPages for Mobile <ul><li>What exactly are XPages? (And why you should care...) </li></ul><ul><li>“ More than a facelift” </li></ul><ul><li>Taking XPages to Mobile Devices </li></ul><ul><li>Progressive Enhancement </li></ul><ul><li>How to get started... </li></ul><ul><li>Wrap up </li></ul>
  15. 15. What is a “Lotus Notes” UI? <ul><li>The majority of Lotus Notes applications use a 3-pane layout: </li></ul><ul><ul><li>Left Navigation </li></ul></ul><ul><ul><li>Top Action Bar </li></ul></ul><ul><ul><li>Center Data Grid </li></ul></ul>
  16. 16. What is a “Lotus Notes” UI? <ul><li>The majority of Lotus Notes applications use a 3-pane layout: </li></ul><ul><ul><li>Left Navigation </li></ul></ul><ul><ul><li>Top Action Bar </li></ul></ul><ul><ul><li>Center Data Grid </li></ul></ul>
  17. 17. What is a “Lotus Notes” UI? <ul><li>The majority of Lotus Notes applications use a 3-pane layout: </li></ul><ul><ul><li>Left Navigation </li></ul></ul><ul><ul><li>Top Action Bar </li></ul></ul><ul><ul><li>Center Data Grid </li></ul></ul>
  18. 18. Employees: After Hours
  19. 19. But when they come into work... <ul><li>Clunky, “4.6”-era Databases </li></ul><ul><ul><li>Navigator-based </li></ul></ul><ul><ul><li>Non-intuitive compared to today's apps. </li></ul></ul>
  20. 20. But when they come into work... <ul><li>Clunky, “4.6”-era Databases </li></ul><ul><ul><li>Navigator-based </li></ul></ul><ul><ul><li>Non-intuitive compared to today's apps. </li></ul></ul>
  21. 21. But when they come into work... <ul><li>Clunky, “4.6”-era Databases </li></ul><ul><ul><li>Navigator-based </li></ul></ul><ul><ul><li>Non-intuitive compared to today's apps. </li></ul></ul>(That was the same app!)
  22. 22. Meet or exceed the expectation <ul><li>“Updating” an application means more than “just a facelift” ; it is an opportunity... </li></ul><ul><li>Empower your users! </li></ul><ul><li>Display the capabilities of IT! </li></ul>
  23. 23. XPage Applications <ul><li>IdeaJam from Elguiji </li></ul><ul><ul><li>Crowd-sourcing ideas from a community. </li></ul></ul><ul><ul><li>Contemporary User Interface & design. </li></ul></ul><ul><ul><li>Built on XPages! </li></ul></ul>
  24. 24. XPage Applications <ul><li>XPages Wiki Template </li></ul><ul><ul><li>Allow users to easily author & maintain business information. </li></ul></ul><ul><ul><li>IBM's OneUI Theme </li></ul></ul><ul><ul><li>Open Source </li></ul></ul>
  25. 25. XPage Applications <ul><li>xTalk Discussion Forum Template </li></ul><ul><ul><li>Allow users to collaborate via familiar UX. </li></ul></ul><ul><ul><li>Enhanced OneUI Theme </li></ul></ul><ul><ul><li>Open Source </li></ul></ul>
  26. 26. Example: Personal Address Book <ul><li>Contact Form consists of over 33 UI fields! </li></ul><ul><ul><li>Excellent for tracking contact info </li></ul></ul><ul><ul><li>Painful for Web Browser Clients </li></ul></ul><ul><ul><li>Horrible for Mobile Device Clients </li></ul></ul>
  27. 27. Architecture Considerations <ul><li>Direct Access </li></ul><ul><li>HTTP Request Proxy </li></ul>vs. Direct Access HTTP Request Proxy IBM Lotus Notes Domino NRPC lends to HTTP Request Proxy architectures
  28. 28. Remote Data Sources <ul><li>“ Other” allows you to define external/ remote Data Sources </li></ul>< xp:this.data > < xp:dominoView var = &quot;contacts&quot; databaseName = &quot;mpab.nsf&quot; viewName = &quot;People&quot; > </ xp:dominoView > </ xp:this.data >
  29. 29. Using Remote Data Sources <ul><li>Using “contacts” Variable... </li></ul>< xp:repeat id = &quot;contacts&quot; rows = &quot;30&quot; value = &quot;#{contacts}&quot; var = &quot;thisDoc&quot; > < li class = &quot;menu&quot; > < xp:link escape = &quot;true&quot; id = &quot;link_person&quot; styleClass = &quot;name&quot; > < xp:this.text > <![CDATA[ #{javascript:var ln = thisDoc.getDocument().getItemValueString(&quot;LastName&quot;); var fn = thisDoc.getDocument().getItemValueString(&quot;FirstName&quot;); return ln + &quot;, &quot; + fn;} ]]> </ xp:this.text > < xp:eventHandler event = &quot;onclick&quot; submit = &quot;true&quot; refreshMode = &quot;complete&quot; > < xp:this.action > < xp:openPage name = &quot;/person.xsp&quot; target = &quot;editDocument&quot; documentId = &quot;#{javascript:thisDoc.getDocument().getUniversalID();}&quot; > </ xp:openPage > </ xp:this.action > </ xp:eventHandler > </ xp:link > </ li > </ xp:repeat >
  30. 30. ... with some CSS
  31. 31. Exporting via XPages <ul><li>Once you control the Content Type, anything is possible! </li></ul>< xp:openPage name = &quot;/export.xsp&quot; > </ xp:openPage >
  32. 32. XPages & XPages for Mobile <ul><li>What exactly are XPages? (And why you should care...) </li></ul><ul><li>“ More than a facelift” </li></ul><ul><li>Taking XPages to Mobile Devices </li></ul><ul><li>Progressive Enhancement </li></ul><ul><li>How to get started... </li></ul><ul><li>Wrap up </li></ul>
  33. 33. Mobile Browser Apps <ul><li>Most developers are moving to “mobile browser apps” vs. native device apps for the following reasons: </li></ul><ul><ul><li>Centrally-controlled & maintained for ease of maintenance. </li></ul></ul><ul><ul><li>All smartphones support web browsing. </li></ul></ul><ul><ul><li>Transferable skills: HTML, CSS, & JavaScript </li></ul></ul><ul><ul><li>(sound familiar?!) </li></ul></ul>
  34. 34. Support for HTML5 <ul><li>As more browsers support HTML5... </li></ul><ul><ul><li>“Rich client” experience </li></ul></ul><ul><ul><ul><li>Natively-rendered advanced UI controls </li></ul></ul></ul><ul><ul><li>Native offline data storage </li></ul></ul><ul><ul><ul><li>Out of coverage area? No problem! </li></ul></ul></ul>
  35. 35. WebKit <ul><li>Desktop Web Browsers </li></ul><ul><ul><li>Safari </li></ul></ul><ul><ul><li>Chrome </li></ul></ul><ul><li>Mobile Devices </li></ul><ul><ul><li>iPhone / iPad / iPod Touch / iOS </li></ul></ul><ul><ul><li>BlackBerry OS6 </li></ul></ul><ul><ul><li>Symbian OS / S60 (via port) </li></ul></ul>
  36. 36. iWebKit <ul><li>Webkit-friendly CSS Framework </li></ul><ul><ul><li>http://iwebkit.net </li></ul></ul>
  37. 37. Framework Naming Schemes <ul><li>JavaScript & CSS Frameworks are often path-sensitive. </li></ul><ul><li>Stylesheets </li></ul><ul><ul><li>css/(stylesheet) </li></ul></ul><ul><li>JavaScript library </li></ul><ul><ul><li>javascript/(JavaScript) </li></ul></ul><ul><li>Image resources </li></ul><ul><ul><li>images/(image) </li></ul></ul>
  38. 38. Demo
  39. 39. XPages & XPages for Mobile <ul><li>What exactly are XPages? (And why you should care...) </li></ul><ul><li>“ More than a facelift” </li></ul><ul><li>Taking XPages to Mobile Devices </li></ul><ul><li>Progressive Enhancement </li></ul><ul><li>How to get started... </li></ul><ul><li>Wrap up </li></ul>
  40. 40. Client Limitations <ul><li>While all smartphones browser render HTML, CSS, and JavaScript... </li></ul>vs. Know your platforms limits & plan accordingly!
  41. 41. The User Agent <ul><li>Each client reports a specific User Agent </li></ul><ul><li>Content based on User Agent </li></ul><ul><ul><li>The “webstandard” Theme renders specific classNames and includes User Agent-customized Stylesheets. </li></ul></ul><!-- IE Specific --> < resource rendered = &quot;#{javascript:context.getUserAgent().isIE(0,6)}&quot; > < content-type > text/ css </ content-type > < href > /. ibmxspres /global/theme/ webstandard /xspIE06. css </ href > </ resource >
  42. 42. Using the User Agent <ul><li>Capturing the User Agent </li></ul><ul><ul><li>CGI Variable: HTTP_User_Agent </li></ul></ul><ul><ul><li>SSJS: this.request.getHeader(“User-Agent”); </li></ul></ul><ul><ul><li>var body = &quot;&quot; ; var UA = this .request.getHeader( &quot;User-Agent&quot; ).toLowerCase(); if (UA.indexOf( 'iphone' ) != -1) { body = iphone_friendly; }; if (UA.indexOf( 'ipad' ) != -1) { body = ipad_friendly; }; if (UA.indexOf( 'blackberry' ) != -1) { body = blackberry_friendly; }; ... writer.write(body); </li></ul></ul>
  43. 43. Progressive Enhancement <ul><li>Think Nintendo Wii vs. Microsoft Xbox 360 </li></ul><ul><ul><li>The Wii remote and nunchuk allow for enhanced, interactive gameplay while the Xbox 360 supports higher-resolution graphics </li></ul></ul><ul><li>Leverage platform or device-specific functionality without changing the core application </li></ul><ul><ul><li>For devices with a GPS antenna, you can include location information </li></ul></ul><ul><ul><ul><li>Your app would not rely on GPS data! </li></ul></ul></ul><ul><ul><li>For devices with a touchscreen, you can rely on a touchscreen-friendly UI design </li></ul></ul><ul><ul><ul><li>Do not abandon your non-touchscreen users! </li></ul></ul></ul>
  44. 44. XPages & XPages for Mobile <ul><li>What exactly are XPages? (And why you should care...) </li></ul><ul><li>“ More than a facelift” </li></ul><ul><li>Taking XPages to Mobile Devices </li></ul><ul><li>Progressive Enhancement </li></ul><ul><li>How to get started... </li></ul><ul><li>Wrap up </li></ul>
  45. 45. Recommendations <ul><li>Keep it simple! </li></ul><ul><ul><li>Do not add a “slider” control when a combobox/SELECT Element will address the need. </li></ul></ul><ul><li>Your first XPages app should be an update of an existing NotesDatabase application. </li></ul><ul><ul><li>The feature functionality is finite and well-defined. </li></ul></ul><ul><ul><li>You will immediately improve user experience. </li></ul></ul>
  46. 46. Examples & Resources! <ul><li>http://www.openNTF.org </li></ul><ul><li>http://www.xpagesblog.com </li></ul><ul><li>http://www.ideajam.net </li></ul><ul><li>http://www.planetlotus.org </li></ul><ul><li>Sametime: </li></ul><ul><ul><li>sametime.lotus.com </li></ul></ul><ul><ul><li>im.bleedyellow.com </li></ul></ul>
  47. 47. XPages & XPages for Mobile <ul><li>What exactly are XPages? (And why you should care...) </li></ul><ul><li>“ More than a facelift” </li></ul><ul><li>Taking XPages to Mobile Devices </li></ul><ul><li>Progressive Enhancement </li></ul><ul><li>How to get started... </li></ul><ul><li>Wrap up </li></ul>
  48. 48. XPages and XPages for Mobile <ul><li>XPages will allow you to improve your existing IBM Lotus Notes Domino applications without code changes to your production environment! </li></ul><ul><li>XPages leverage transferable skills such as web development (HTML, CSS, JavaScript). </li></ul><ul><li>XPages allow you to integrate 3rd-party frameworks & code libraries. </li></ul><ul><li>XPages are the future of IBM Lotus Notes Domino! </li></ul>
  49. 49. Questions? <ul><li>Chris Toohey [email_address] http://www.dominoGuru.com </li></ul>

×