IBM Lotus Notes Domino XPages and XPages for Mobile

XPages and XPages for Mobile Chris Toohey www.dominoGuru.com

XPages & XPages for Mobile What exactly are XPages? (And why you should care...) “ More than a facelift” Taking XPages to Mobile Devices Progressive Enhancement How to get started... Wrap up

What exactly are XPages? A “variable” Design Element, replacing: Forms Pages Navigators Views

What exactly are XPages? XPage Design Elements consist of: HTML CSS JavaScript ServerSide JavaScript Controls (native & custom) XPages use Themes Default rendering relies on Themes & Dojo

What are Controls? Pre-built & Developer-defined XPage XML, HTML, CSS, & JavaScript Think “Subform” Available from the Controls Palette in DDE Allow “Nesting” and “Repeated Use”

What is Dojo? JavaScript Toolkit natively used by XPages Open Source Globally Adopted/Supported Rendering of UI/UX Field-level validation Alternate-input types Web 2.0 animation

What are Themes? Pre-built & Developer-defined Build-upon/expand or replace existing Themes Think “XSLT” for XPages and Controls included Resources (ie., Stylesheets) className for Controls  < control > < name > Text </ name > < property > < name > styleClass </ name > < value > xspText </ value > </ property > </ control >  < resource rendered = "#{javascript:context.getUserAgent().isFirefox()}" > < content-type > text/ css </ content-type > < href > /. ibmxspres /global/theme/ webstandard /xspFF. css </ href > </ resource >

Hello World “ example.xsp” XPage XPage XML Pass-thru HTML markup <? xml version = "1.0" encoding = "UTF-8" ?> < xp:view xmlns:xp = "http://www.ibm.com/xsp/core" xmlns:xc = "http://www.ibm.com/xsp/custom" > < p > Hello World! </ p > </ xp:view >

The end result... <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" > < html lang = "en" > < head > < title ></ title > < script type = "text/javascript" src = "/domjs/dojo-1.3.2/dojo/dojo.js" djConfig = "locale: 'en-us'" ></ script > < script type = "text/javascript" src = "/domjs/dojo-1.3.2/ibm/xsp/widget/layout/xspClientDojo.js" ></ script > < link rel = "stylesheet" type = "text/css" href = "/domjava/xsp/theme/webstandard/xsp.css" > < link rel = "stylesheet" type = "text/css" href = "/domjava/xsp/theme/webstandard/xspLTR.css" > < link rel = "stylesheet" type = "text/css" href = "/domjava/xsp/theme/webstandard/xspSF.css" > </ head > < body class = "xspView tundra" > < form id = "view:_id1" method = "post" action = "/XPages%20Presentation.nsf/example.xsp?SessionID=CNB3RK18A0" class = "xspForm" enctype = "multipart/form-data" > < p > Hello World! </ p > < input type = "hidden" name = "$$viewid" id = "view:_id1__VUID" value = "!cnb3rm1kg0!" > < input type = "hidden" name = "$$xspsubmitid" > < input type = "hidden" name = "$$xspexecid" > < input type = "hidden" name = "$$xspsubmitvalue" > < input type = "hidden" name = "$$xspsubmitscroll" > < input type = "hidden" name = "view:_id1" value = "view:_id1" > < script type = "text/javascript" > function clearFormHiddenParams_view__id1(curFormName) { var curForm = document.forms[curFormName]; } </ script > </ form > </ body > </ html >

Beyond the Design Element XPages as a development methodology: Establish fundamental Model-View-Controller architectures for LND applications. Leverage new and existing NotesData through defined Data Sources Simplify application maintenance via a return to the “single Design Element per client” while enabling client-specific feature functionality.

The power of XPages XPages can... Define a remote Notes Data Source Proxy Create, Read, Update, & Delete NotesData Requests Update User Interfaces while maintaining “production” applications.

But why should you care? XPages are the future of the Lotus Notes Domino platform. XPages employ industry standard development tools & transferable developer skills. XPages can rapidly produce applications for faster turn-around from “business need” to “solution”.

What is a “Lotus Notes” UI? The majority of Lotus Notes applications use a 3-pane layout: Left Navigation Top Action Bar Center Data Grid

But when they come into work... Clunky, “4.6”-era Databases Navigator-based Non-intuitive compared to today's apps.

But when they come into work... Clunky, “4.6”-era Databases Navigator-based Non-intuitive compared to today's apps. (That was the same app!)

Meet or exceed the expectation “Updating” an application means more than “just a facelift” ; it is an opportunity... Empower your users! Display the capabilities of IT!

XPage Applications IdeaJam from Elguiji Crowd-sourcing ideas from a community. Contemporary User Interface & design. Built on XPages!

XPage Applications XPages Wiki Template Allow users to easily author & maintain business information. IBM's OneUI Theme Open Source

XPage Applications xTalk Discussion Forum Template Allow users to collaborate via familiar UX. Enhanced OneUI Theme Open Source

Example: Personal Address Book Contact Form consists of over 33 UI fields! Excellent for tracking contact info Painful for Web Browser Clients Horrible for Mobile Device Clients

Architecture Considerations Direct Access HTTP Request Proxy vs. Direct Access HTTP Request Proxy IBM Lotus Notes Domino NRPC lends to HTTP Request Proxy architectures

Remote Data Sources “ Other” allows you to define external/ remote Data Sources < xp:this.data > < xp:dominoView var = "contacts" databaseName = "mpab.nsf" viewName = "People" > </ xp:dominoView > </ xp:this.data >

Using Remote Data Sources Using “contacts” Variable... < xp:repeat id = "contacts" rows = "30" value = "#{contacts}" var = "thisDoc" > < li class = "menu" > < xp:link escape = "true" id = "link_person" styleClass = "name" > < xp:this.text > <![CDATA[ #{javascript:var ln = thisDoc.getDocument().getItemValueString("LastName"); var fn = thisDoc.getDocument().getItemValueString("FirstName"); return ln + ", " + fn;} ]]> </ xp:this.text > < xp:eventHandler event = "onclick" submit = "true" refreshMode = "complete" > < xp:this.action > < xp:openPage name = "/person.xsp" target = "editDocument" documentId = "#{javascript:thisDoc.getDocument().getUniversalID();}" > </ xp:openPage > </ xp:this.action > </ xp:eventHandler > </ xp:link > </ li > </ xp:repeat >

Exporting via XPages Once you control the Content Type, anything is possible! < xp:openPage name = "/export.xsp" > </ xp:openPage >

Mobile Browser Apps Most developers are moving to “mobile browser apps” vs. native device apps for the following reasons: Centrally-controlled & maintained for ease of maintenance. All smartphones support web browsing. Transferable skills: HTML, CSS, & JavaScript (sound familiar?!)

Support for HTML5 As more browsers support HTML5... “Rich client” experience Natively-rendered advanced UI controls Native offline data storage Out of coverage area? No problem!

WebKit Desktop Web Browsers Safari Chrome Mobile Devices iPhone / iPad / iPod Touch / iOS BlackBerry OS6 Symbian OS / S60 (via port)

iWebKit Webkit-friendly CSS Framework http://iwebkit.net

Framework Naming Schemes JavaScript & CSS Frameworks are often path-sensitive. Stylesheets css/(stylesheet) JavaScript library javascript/(JavaScript) Image resources images/(image)

Client Limitations While all smartphones browser render HTML, CSS, and JavaScript... vs. Know your platforms limits & plan accordingly!

The User Agent Each client reports a specific User Agent Content based on User Agent The “webstandard” Theme renders specific classNames and includes User Agent-customized Stylesheets.  < resource rendered = "#{javascript:context.getUserAgent().isIE(0,6)}" > < content-type > text/ css </ content-type > < href > /. ibmxspres /global/theme/ webstandard /xspIE06. css </ href > </ resource >

Using the User Agent Capturing the User Agent CGI Variable: HTTP_User_Agent SSJS: this.request.getHeader(“User-Agent”); var body = "" ; var UA = this .request.getHeader( "User-Agent" ).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);

Progressive Enhancement Think Nintendo Wii vs. Microsoft Xbox 360 The Wii remote and nunchuk allow for enhanced, interactive gameplay while the Xbox 360 supports higher-resolution graphics Leverage platform or device-specific functionality without changing the core application For devices with a GPS antenna, you can include location information Your app would not rely on GPS data! For devices with a touchscreen, you can rely on a touchscreen-friendly UI design Do not abandon your non-touchscreen users!

Recommendations Keep it simple! Do not add a “slider” control when a combobox/SELECT Element will address the need. Your first XPages app should be an update of an existing NotesDatabase application. The feature functionality is finite and well-defined. You will immediately improve user experience.

Examples & Resources! http://www.openNTF.org http://www.xpagesblog.com http://www.ideajam.net http://www.planetlotus.org Sametime: sametime.lotus.com im.bleedyellow.com

XPages and XPages for Mobile XPages will allow you to improve your existing IBM Lotus Notes Domino applications without code changes to your production environment! XPages leverage transferable skills such as web development (HTML, CSS, JavaScript). XPages allow you to integrate 3rd-party frameworks & code libraries. XPages are the future of IBM Lotus Notes Domino!

Questions? Chris Toohey [email_address] http://www.dominoGuru.com

IBM Lotus Notes Domino XPages and XPages for Mobile

Recommended

More Related Content

What's hot (20)

Similar to IBM Lotus Notes Domino XPages and XPages for Mobile (20)

Recently uploaded (20)

IBM Lotus Notes Domino XPages and XPages for Mobile