© 2013 IBM Corporation

JMP103Get the Jump on Mobilizing Your Notes and Domino Applications Today!

Howard Greenberg | TLCCPaul Della-Nebbia | TLCC

1

Howard Greenberg & Paul Della-Nebbia

– Teaching Notes and Domino since 1994

– Partners at TLCC, the Leader in Notes and Domino Training

– And Now, the Leader in XPages Training

@TLCCLtd @PaulDN

Your Speakers:

TLCC XPages Offerings

Seven XPages Courses!

‒ Introduction to XPages Development … FREE !!

‒ Rapid XPages Development using Application Layout and Dojo UI Controls NEW!!

‒ JavaScript for XPages Development

‒ Developing XPages Using Domino Designer 8.5

‒ XPages Development 2 for Notes and Domino 8.5

‒ Mobile XPages for Domino 8.5

‒ Java 1 for XPages Developers

Self Paced Training

‒ Learn anywhere!

‒ An Instructor is a click away

Instructor Led (Private)

‒ Online or at your site

TLCC Mentoring Services

3

Agenda

4

Understand the Mobile Development Landscape

IBM Upgrade Pack 1 vs. Extension Library

Testing Mobile Web Apps.

Introduce the Mobile controls

Display views and documents in mobile devices

Convert a Notes application to mobile

Demonstration of advanced mobile XPages techniques

What’s New in IBM Notes and Domino 9

Prerequisites

Experienced Notes/Domino Developers

Some experience with XPages

5

Overview of Mobile Applications

6

Native Mobile Applications and Mobile Web Applications

Hybrid applications

Mobile devices and browsers

Differences and considerations between Upgrade Pack 1 and OpenNTFExtension Library

Native Mobile Applications

Stored locally on device

Access data either stored locally or on web/intranet

Deployed via Application Store (eg. iTunes)

Program using device-specific SDK and specific language:

Objective C for iOS

Java for Android

Can work offline when data is stored on device

Can access hardware devices like camera and GPS

7

Mobile Web Applications

Stored on web server and use device’s web browser

Access data stored on web/intranet

HTML5 allows for local device storage

Deployed via a web server using a URL

Developed using HTML, JavaScript and CSS

Requires connectivity

Typically are not device dependent

8

Hybrid Mobile Web Applications

Uses development framework like PhoneGap or Titanium

Web programming languages wrapped into native device application

Deployed using app store

Cross-platform compatible – framework handles device differences

Frameworks allow access to device hardware features

9

Domino Specific Native App Builders

• TeamStudio Unplugged

– Creates Native Apps using XPages!

http://unplugged.teamstudio.com/

• Domino To Go

– Uses JavaScript/Titanium to build native apps

– Accesses Domino data and stores locally

From You At Notes - http://youatnotes.com/dominotogo

• See various Taking Notes Podcasts, index at:

http://bruceelgort.com/2012/10/09/updated-ibm-notesdomino-mobile-solutions-podcast-roundup/

10

Mobile Web Browsers

Any iOS device from Apple

Android devices

Blackberry browsers from version 6 forward

Google Chrome and Apple Safari desktop browsers

11

WebKit-based browsers and devices:

• Domino Designer 8.5.3 and Domino Server 8.5.3

– Upgrade Pack 1or

– 8.5.3 Extension Library

• IBM Notes and Domino 9 beta

– Upgrade Pack 1+ Included

– All you need for Mobile XPages, nothing else required

12

Mobile XPages Requirements

Testing Mobile Applications …

Four testing solutions:

Use actual mobile devices

– delivered from Domino server or Designer

Use mobile device simulator/emulator

– From Device SDK

Use desktop browsers - “spoofing”

XPages mobile simulator

– modified from Extension Library demo app

13

Solution 1: Use actual Devices

14

Solution 2: Use Mobile Device Emulator

15

Solution 3: Desktop Browser and “Spoofing”

16

Solution 4: Use XPages Mobile Simulator

17

Hands-on Demo

• Try out the application we will discuss today

• Point your mobile browser to:

www.tlcc.com/demo

18

Enable an Application for Mobile Development

19

12

Enable application for Extension Library controls

Set Mobile Page Prefix in xsp.properties

Mobile XPages Controls

20

Single Page Application

21

Page Heading and Static Line Item

22

Rounded List <xe:djxmRoundRectList>

23

Tab Bar and Tab Bar Button

24

Single Page Application Layout

25

Mobile Page Navigation and Transitions

26

Introduction to the Data View control

27

28

SAME Data View control enabled in mobile application

29

Data View with necessary design adjustments

Procedure: Displaying a View

Add a Data View control

Set data source properties

Set rows property

Add viewSummaryColumn:

– Set columnName property

30

Procedure: Add a “Show more rows” Button

Drop a Link control to editable area next to pagerBottom component.

• Provide a ‘Label’ value.

Add CSJS simple action for the link’s onclickevent.

• Choose ‘Add rows to a data iterator’ action.

• Set for property to the data view id.

• Set disabled property to link control’s id.

31

Procedure: Displaying a Document …

Add Mobile Page control to XPage.

– Set pageName and resetContentproperties.

Add Panel inside mobile page.

– Add Domino Document data source.

Provide navigation back to “view” page.

32

Procedure: Displaying a Document – cont.

For “view” page, specify page to open when document is selected.

Set openDocsReadonly property for Data View control.

33

Mobile Security Same as any Domino Application

– ACL

– Authenticated user

userBean provides user information (not just for mobile!)

Example - userBean.commonName

Note – does not inspect authors fields

34

Returns a String

commonName

distinguishedName

abbreviatedName

canonicalName

effectiveUserName

accessLevelAsString

Returns a Number

accessLevel

Returns an Array of Strings

accessRoles

Returns a Boolean

canCreateDocs

canDeleteDocs

canCreatePrivAgents

canCreatePrivFoldersViews

canCreateSharedFoldersViews

canCreateScriptAgents

canReadPublicDocs

canWritePublicDocs

canReplicateCopyDocs

Adding a “Create New” or “+” button

Use a button in the Heading , label is “+”

Show only when user can create documents (userBean.canCreateDocs)

Switch to mobile “document” page

35

Editing and Deleting Considerations

Use buttons in the Tab Bar to switch to edit mode or delete

– Hide as needed using userBean and examine authors fields if needed

Delete with the Delete simple action followed by move to page

Server-side Validation works best

Controls to Avoid for Creating/Editing (do not render correctly)

– Date Time Pickers

– Rich Text Editor (some support in Notes and Domino 9)

Use the Multi-Line Edit Box instead of Rich Text

36

Combo Box and List Box

Work the same for single choice

List Box for multiple choices

37

HTML 5 and other mobile features

Use a Link control with tel: in front of the phone number to allow user to call by clicking (show in read mode, hide in edit mode)

– <a id="view:_id1:appPage2_content:PhoneReadMode" href="tel:609-555-9822">609-555-9822</a>

– “sms” for text messaging, “emailto” for emails

HTML 5 Input Types

– iOS devices, Some work on Android

– Examples below of tel, number, and range

– Set the type in All Properties for the Edit Box control

IBM Notes and Domino 9 Enhancements

Mobile Controls renamed in Controls Palette

New Control – Toolbar Button

Dojo 1.8

– Can use new Dojo mobile controls

Rounded List Item must be In Rounded List

– Will not work on its own

CKEditor (rich text) has some support

– Still very buggy in mobile

39

Mobile XPages Connect 2013 Sessions

Repeat of this session, today at 4:00 PM

BP210 : Using a Mobile Approach: Strategies for Mobilizing Your IBM Domino Applications

Show 112: Building Your First Mobile Application Using XPages

AD404 : NSF2IPA: Delivering Your Existing IBM Domino Application as a Mobile App.

AD201 : What's New in Domino Application Development and Domino Designer Social Edition

SPOT103: Delivering the Offline Mobile Experience with Teamstudio Unplugged

Not Mobile but Suggested for all XPagers

BOF209 : Getting Started With XPages - How and What to Learn?

BP202 : XPages Development: Modernize Yourself!

BP208 : XPages Blast

JMP401 : Master Class: XPages Performance - Inside Out

JMP402 : Master Class: Managed Beans and XPages: Your Time Is Now

Contact Information

Howard

Email: howardg@tlcc.com

Phone: 561-953-0096

Twitter: @TLCCLtd

41

Paul

Email: paul@tlcc.com

Phone: 561-953-0098

Twitter: PaulDN

#XPages

@PaulDN

@TLCCLtd

Time for YOUR Questions!

43

• © IBM Corporation 2013. All Rights Reserved.

• The information contained in this publication is provided for informational purposes only. While efforts were made to verify the completeness and accuracy of the information contained in this publication, it

is provided AS IS without warranty of any kind, express or implied. In addition, this information is based on IBM’s current product plans and strategy, which are subject to change by IBM without notice. IBM

shall not be responsible for any damages arising out of the use of, or otherwise related to, this publication or any other materials. Nothing contained in this publication is intended to, nor shall have the effect

of, creating any warranties or representations from IBM or its suppliers or licensors, or altering the terms and conditions of the applicable license agreement governing the use of IBM software.

• References in this presentation to IBM products, programs, or services do not imply that they will be available in all countries in which IBM operates. Product release dates and/or capabilities referenced in

this presentation may change at any time at IBM’s sole discretion based on market opportunities or other factors, and are not intended to be a commitment to future product or feature availability in any

way. Nothing contained in these materials is intended to, nor shall have the effect of, stating or implying that any activities undertaken by you will result in any specific sales, revenue growth or other results.

• If the text contains performance statistics or references to benchmarks, insert the following language; otherwise delete: Performance is based on measurements and projections using standard IBM

benchmarks in a controlled environment. The actual throughput or performance that any user will experience will vary depending upon many factors, including considerations such as the amount of

multiprogramming in the user's job stream, the I/O configuration, the storage configuration, and the workload processed. Therefore, no assurance can be given that an individual user will achieve results

similar to those stated here.

• If the text includes any customer examples, please confirm we have prior written approval from such customer and insert the following language; otherwise delete: All customer examples described are

presented as illustrations of how those customers have used IBM products and the results they may have achieved. Actual environmental costs and performance characteristics may vary by customer.

• Please review text for proper trademark attribution of IBM products. At first use, each product name must be the full name and include appropriate trademark symbols (e.g., IBM Lotus® Sametime®

Unyte™). Subsequent references can drop “IBM” but should include the proper branding (e.g., Lotus Sametime Gateway, or WebSphere Application Server). Please refer to

http://www.ibm.com/legal/copytrade.shtml for guidance on which trademarks require the ® or ™ symbol. Do not use abbreviations for IBM product names in your presentation. All product names must be

used as adjectives rather than nouns. Please list all of the trademarks that you use in your presentation as follows; delete any not included in your presentation.Please review text for proper trademark

attribution of IBM products. At first use, each product name must be the full name and include appropriate trademark symbols (e.g., IBM Lotus® Sametime® Unyte™). Subsequent references can drop

“IBM” but should include the proper branding (e.g., Lotus Sametime Gateway, or WebSphere Application Server). Please refer to http://www.ibm.com/legal/copytrade.shtml for guidance on which

trademarks require the ® or ™ symbol. Do not use abbreviations for IBM product names in your presentation. All product names must be used as adjectives rather than nouns. Please list all of the

trademarks that you use in your presentation as follows; delete any not included in your presentation.

• If you reference Adobe® in the text, please mark the first use and include the following; otherwise delete: Adobe, the Adobe logo, PostScript, and the PostScript logo are either registered trademarks or

trademarks of Adobe Systems Incorporated in the United States, and/or other countries.

• If you reference Java™ in the text, please mark the first use and include the following; otherwise delete: Java and all Java-based trademarks are trademarks of Sun Microsystems, Inc. in the United States,

other countries, or both.

• If you reference Microsoft® and/or Windows® in the text, please mark the first use and include the following, as applicable; otherwise delete: Microsoft and Windows are trademarks of Microsoft

Corporation in the United States, other countries, or both.

• If you reference Intel® and/or any of the following Intel products in the text, please mark the first use and include those that you use as follows; otherwise delete: Intel, Intel Centrino, Celeron, Intel Xeon,

Intel SpeedStep, Itanium, and Pentium are trademarks or registered trademarks of Intel Corporation or its subsidiaries in the United States and other countries.

• If you reference UNIX® in the text, please mark the first use and include the following; otherwise delete: UNIX is a registered trademark of The Open Group in the United States and other countries.

• If you reference Linux® in your presentation, please mark the first use and include the following; otherwise delete: Linux is a registered trademark of Linus Torvalds in the United States, other countries, or

both. Other company, product, or service names may be trademarks or service marks of others.

• If the text/graphics include screenshots, no actual IBM employee names may be used (even your own), if your screenshots include fictitious company names (e.g., Renovations, Zeta Bank, Acme) please

update and insert the following; otherwise delete: All references to [insert fictitious company name] refer to a fictitious company and are used for illustration purposes only.