Jmp103-Get the Jump on Mobilizing Your Notes and Domino Applications Today!
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Jmp103-Get the Jump on Mobilizing Your Notes and Domino Applications Today!

on

  • 1,288 views

This is the presentation Paul and myself gave at Connect 2013 on how to get started mobilizing Notes and Domino apps using the XPages Mobile Controls.

This is the presentation Paul and myself gave at Connect 2013 on how to get started mobilizing Notes and Domino apps using the XPages Mobile Controls.

Statistics

Views

Total Views
1,288
Views on SlideShare
1,179
Embed Views
109

Actions

Likes
0
Downloads
38
Comments
0

2 Embeds 109

http://www.idonotes.com 88
http://www.tlcc.com 21

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • .@TLCCLtd @GBSKnows #XPages
  • .
  • 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 “ ... Mobile Page ”
  • Original title was “Page Heading ... Static Line Item ”
  • >>>***>>>NEXT SLIDE SHOWS DEVICE IN EDIT MODE >>>***>>>  - I
  • Title was Tab Bar … Tab Bar Button
  • 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

Jmp103-Get the Jump on Mobilizing Your Notes and Domino Applications Today! Presentation Transcript

  • 1. JMP103 Get the Jump on Mobilizing Your Notes and Domino Applications Today! Howard Greenberg | TLCC Paul Della-Nebbia | TLCC© 2013 IBM Corporation 1
  • 2. Your Speakers: 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
  • 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 Services3
  • 4. Agenda  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 94
  • 5. Prerequisites  Experienced Notes/Domino Developers  Some experience with XPages5
  • 6. Overview of Mobile Applications Native Mobile Applications and Mobile Web Applications Hybrid applications Mobile devices and browsers Differences and considerations between Upgrade Pack 1 and OpenNTF Extension Library6
  • 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 GPS7
  • 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 dependent8
  • 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 features9
  • 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 WebKit-based browsers and devices:  Any iOS device from Apple  Android devices  Blackberry browsers from version 6 forward  Google Chrome and Apple Safari desktop browsers11
  • 12. Mobile XPages Requirements • 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
  • 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 app13
  • 14. Solution 1: Use actual Devices14
  • 15. Solution 2: Use Mobile Device Emulator15
  • 16. Solution 3: Desktop Browser and “Spoofing”16
  • 17. Solution 4: Use XPages Mobile Simulator17
  • 18. Hands-on Demo • Try out the application we will discuss today • Point your mobile browser to:  www.tlcc.com/demo18
  • 19. Enable an Application for Mobile Development Enable application for Extension Library controls 2 1 Set Mobile Page Prefix in xsp.properties19
  • 20. Mobile XPages Controls20
  • 21. Single Page Application21
  • 22. Page Heading and Static Line Item22
  • 23. Rounded List <xe:djxmRoundRectList>23
  • 24. Tab Bar and Tab Bar Button24
  • 25. Single Page Application Layout25
  • 26. Mobile Page Navigation and Transitions26
  • 27. Introduction to the Data View control27
  • 28. SAME Data View control enabled in mobile application28
  • 29. Data View with necessary design adjustments29
  • 30. Procedure: Displaying a View Add a Data View control Set data source properties Set rows property Add viewSummaryColumn: – Set columnName property30
  • 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 Returns a String Returns a Boolean commonName canCreateDocs distinguishedName canDeleteDocs abbreviatedName canCreatePrivAgents canonicalName canCreatePrivFoldersViews effectiveUserName canCreateSharedFoldersViews accessLevelAsString canCreateScriptAgents canReadPublicDocs Returns a Number canWritePublicDocs accessLevel canReplicateCopyDocs Returns an Array of Strings accessRoles34
  • 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” page35
  • 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 Text36
  • 37. Combo Box and List Box Work the same for single choice List Box for multiple choices37
  • 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 mobile39
  • 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 : Whats New in Domino Application Development and Domino Designer Social Edition SPOT103: Delivering the Offline Mobile Experience with Teamstudio UnpluggedNot 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 InformationHoward Paul Email: howardg@tlcc.com  Email: paul@tlcc.com Phone: 561-953-0096  Phone: 561-953-0098 Twitter: @TLCCLtd  Twitter: PaulDN #XPages @PaulDN @TLCCLtd41
  • 42. 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 users 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.43