1. © 2013 IBM Corporation
JMP103
Get the Jump on Mobilizing Your Notes
and Domino Applications Today!
Howard Greenberg | TLCC
Paul Della-Nebbia | TLCC
1

2.  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:

3. 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

4. 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

5. Prerequisites
 Experienced Notes/Domino Developers
 Some experience with XPages
5

6. 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 OpenNTF
Extension Library

7. 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

8. 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

9. 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

10. 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

11. 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:

12. • Domino Designer 8.5.3 and
Domino Server 8.5.3
– Upgrade Pack 1
or
– 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

13. 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

14. Solution 1: Use actual Devices
14

15. Solution 2: Use Mobile Device Emulator
15

16. Solution 3: Desktop Browser and “Spoofing”
16

17. Solution 4: Use XPages Mobile Simulator
17

18. Hands-on Demo
• Try out the application we will discuss today
• Point your mobile browser to:
 www.tlcc.com/demo
18

19. Enable an Application for Mobile Development
19
1
2
Enable application for Extension Library controls
Set Mobile Page Prefix in xsp.properties

20. Mobile XPages Controls
20

21. Single Page Application
21

22. Page Heading and Static Line Item
22

23. Rounded List <xe:djxmRoundRectList>
23

24. Tab Bar and Tab Bar Button
24

25. Single Page Application Layout
25

26. Mobile Page Navigation and Transitions
26

27. Introduction to the Data View control
27

28. 28
SAME Data View control enabled in mobile application

29. 29
Data View with necessary design adjustments

30. Procedure: Displaying a View
 Add a Data View control
 Set data source properties
 Set rows property
 Add viewSummaryColumn:
– Set columnName property
30

31. 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 onclick
event.
• 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

32. Procedure: Displaying a Document …
 Add Mobile Page control to XPage.
– Set pageName and resetContent
properties.
 Add Panel inside mobile page.
– Add Domino Document data source.
 Provide navigation back to “view”
page.
32

33. Procedure: Displaying a Document – cont.
 For “view” page, specify page to open
when document is selected.
 Set openDocsReadonly property for
Data View control.
33

34. 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

35. 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

36. 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

37. Combo Box and List Box
 Work the same for single choice
 List Box for multiple choices
37

38. 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

39. 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

40. 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

41. 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

42. Time for YOUR Questions!

43. 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.