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
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
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
TLCC offers 7 XPages courses.You can take TLCC courses either self-paced (just like the free course you installed) or with one of our instructors. We have a complete catalog of developer and admin courses.TLCC also can provide one-on-one instructor help and mentoring as you learn XPages and build your applications.
We won’t get into the universe of native mobile development or the many technologies for designing mobile apps
.>>> EACH POINT COVERED IN FOLLOWING SLIDES>>>
- Even though uses WebKit browser engine, … …. Still device specific nuances that may require fine tuning of the HTML, CSS, and JavaScript used for particular device
. - NOTE: Access to a Domino server is NOT a requirement for TLCC course. Upgrade Pack 1Official IBM releaseFully supportedSubset of Extension Library featuresAvailable through IBM licensed software delivery channels only (Passport Advantage - PartnerWorld)One release back in 12/11Windows InstallerExtension LibraryObtained from OpenNTFNo IBM supportUpdated more frequentlyExample, Relational data controls are not in IBM version
- -- >>> EACH OF THE TESTING SOLUTIONS IN FOLLOWING SLIDES >>>
Best and safest way to test, but you don’t get browser debug tools built into the desktop browsers like Chrome
- I
Changethe user-agent String, works best with Chrome or Safari since they are web-bit based
Oneissue with using desktop browsers is that you can’t test using the cool input tools like the date selector on an iPhone.
- I
removed from title “<xe:singlePageApp> ... Mobile Page <xe:appPage>”
Original title was “Page Heading <xe:djxmHeading> ... Static Line Item <xe:djxmLineItem>”
>>>***>>>NEXT SLIDE SHOWS DEVICE IN EDIT MODE >>>***>>> - I
Title was Tab Bar <xe:tabBar> … Tab Bar Button <xe:tabBarButton>
Workbench Application Properties\Advancedxsp.properties >> Source xsp.theme.mobile.pagePrefix=mobileCreate mobileHello.xsp in workbenchIn source, add singlePageApp and one appPage: pageOnewith “Hello mobile world!” between tags SAVE FOR COMPLIE-TIME ERRORCorrect and PREVIEW in CHROMESHOW SPOOFING ?platform=iphone VIEW SOURCE for iphone.css style sheetsSHOW SPOOFING ?platform=android VIEW SOURCE for style sheetsSHOW SPOOFING ?platform=blackberry VIEW SOURCE for style sheetsMoblSim.xsp … = … mobileHello.xsp==============================DROP FOR TIME … DESIGNER, copy/paste and rename NobileHello.xsp … PREVIEW and VIEW SOURCE============
EDIT mobileHello.xsp … pageOne and pageTwopageOne … “Page 1 (home)” headingpageTwo … “Page 2” heading and back=“Home”pageOne … add “P1 to P2” line item, “slide”pageOne … COPY/PASTE add 2 MORE “P1 to P2” line items, “flip”, “fade”, PREVIEWpageTwo … add Tab Bar “segmentedControl” Button “Back” … Move to Application Page SS-sa correct COMPILE-TIME ERRORS … PREVIEW=================TRANSITION TO MODULE 3 PREVIEW mobileDemo331.xsp==============DROP FOR TIME pageTwo … add ROUNDED LIST , 2x2 table, “Label1” and “Label2” PREVIEW
>>>***>>>NEXT SLIDE = SHOW MORE ROWS BUTTON>>>***>>>
REVIEW DESIGN Customers application, CustomerByName view, “Customer” column programmatic nameCREATEmobileCustomers.xsp in workbenchAdd singleAppPage … selected “viewPage”Add viewPage , heading “Customers by Name” PREVIEWAdd DATAVIEW set to Customers application, CustomerByName viewset rows=“9”Set summaryColumn=“Customer” PREVIEWDESIGN editor, Drop a Link control to editable area next to pagerBottom component, label=“More Customers…”Add CSJS simple action for the link’s onclick event.Choose ‘Add rows for data iterator’ action.Set for property to the data view id.Set disabled property to link control’s id. PREVIEW===========================================
Add comments <!--end of viewPage--> <!--START of documentPage-->Add documentPage , resetContent=“true” resetContent=“true” resetContent=“true”Add heading “Customer Info”, back=“Back” moveTo=“viewPage”Add Panel … Add Domino Document data sourceInside panel ADD a rounded list control, and inside it …From Data palette, drag Customer, Contact, City, Phone… >>>>>>>> CONTINUED NEXT SLIDE >>>>>>>>>>>>>
Add comments <!--end of viewPage--> <!--START of documentPage-->Add documentPage , resetContent=“true” resetContent=“true” resetContent=“true”Add heading “Customer Info”, back=“Back” moveTo=“viewPage”Add Panel … Add Domino Document data sourceInside panel ADD a rounded list control, and inside it …From Data palette, drag Customer, Contact, City, Phone… >>>>>>>> CONTINUED NEXT SLIDE >>>>>>>>>>>>>….. Continued from previous slideModifyDATAVIEW ON viewPage …In Data View properties tab, specify page to open when document is selected … #documentPageSet openDocsReadonly=“true” property for Data View control.PREVIEWTRANSITION … switch to designer CORE CONTROLS ????? Which are supported for use in mobile applications