Your SlideShare is downloading. ×
Lab:  Mobile App Development with XPages and Extension Library
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Lab: Mobile App Development with XPages and Extension Library


Published on

This lab introduces you to Mobile development with the XPages extension library.

This lab introduces you to Mobile development with the XPages extension library.

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. XPages Mobile Development Lab Lance Spellman | President, WorkFlow Studios
  • 2. Agenda
    • Review existing Notes application
    • 3. Think about mobile requirement
    • 4. Model page flow of mobile app
    • 5. Create mobile Xpage
    • 6. Create page fragments that mobile app will transition between
  • 9. Existing Notes Application
    • Movie database
    • 10. Contains 3 types of documents/forms
      • Movies
      • 11. Actors
      • 12. A join table for actors in movies
    • Contains 3 views
      • Movie list
      • 13. Actor list
      • 14. Actors, categorized by the movies they appear in
  • 15. Movie Form
  • 16. Actor Form
  • 17. Movie-Actor Form
    • This form has 2 fields
    • Every time an actor appears in a movie, a record is created with this form that has the movie_id the actor appeared in, as well as the actor_id
  • 19. Movies By Title View
    • Aliased as byTitle
    • 20. Alpha listing of movie titles
  • 21. Actors by Last Name View
    • First column has Last Name, sorted alpha
    • 22. Second column has First Name, sorted alpha
  • 23. Movie Actors View
    • For every movie, list actors appearing in it
    • 24. Categorized view on the movie's id
    • 25. Actor id's appear in 2 nd column
  • 26. Mobile Requirement
    • Build an application that lists movies in alpha order
    • 27. Allow selection of movie
    • 28. For selected movie, show actors that appear in that movie
  • 29. Model the Mobile Page Flow
    • The mobile application's main page is going to be called “m”
    • 30. Initial content for that page should be a view listing the movies
      • Implemented as an mPage control named “home”
    • Clicking a movie link should transition to a new page fragment
      • Also implemented as an mPage control named “movie”
    • On “movie” page, a view for the actors that appear in the movie will be listed
      • A categorized view showing single category results
      • 31. Looks up user information from the actor_id provided
  • 32. Enable the Extension Library
    • Open Application Properties
    • 33. On Advanced tab, checkmark the Extension Library
  • 34. Use oneuiv2 Theme
    • Go to the XPages tab
    • 35. Type “oneuiv2” into the Application Theme field
  • 36. Create New XPage
    • Name the page “m”
    • 37. Go to source tab
  • 38. Add Mobile App Control
    • Go to Controls
    • 39. Find the “Mobile Apps” section
    • 40. Drag an “App” control on to the page
  • 41. Configure Properties for App Control
    • In All Properties for the control
    • 42. Set selectedPageId equal to “home”
      • This will be default page fragment the Xpage will show when browser opens the page
  • 43. Add a Mobile Page to the App Control
    • A Mobile Page control is a page fragment, a piece of functionality
    • 44. It will appear in a mobile app as it's own “page” in the application
    • 45. Mobile Pages slide in/out, fade in/out as they are used
    • 46. The content of pages is retrieved via AJAX when it's time to display that page fragment
    • 47. Add a Mobile Page control inside the Mobile App container
  • 48. Set Mobile Page Properties
    • This will be the home (or first) page of the application
    • 49. In Properties, set id = “home”
    • 50. Set keepScrollPos = true
      • There will be a view on this page. With this property set to true, the user will be taken back to the position they were in for the view
    • Set resetContent = false
      • Indicates that the content doesn't need to be refreshed or rebuilt
      • 51. In cases with an active view, you might want to set this to true
  • 52. Add Page Heading to Mobile Page
    • A Page Heading spans the top of the page and usually has a title for the content on that page
    • 53. Add Page Heading control inside the Mobile Page
    • 54. Set the label property to “Movie Listing”
  • 55. Preview the Mobile Page
    • Open Safari
    • 56. Turn on Develop Menu from Preferences (if not on already)
    • 57. From Develop Menu, set User Agent to Mobile Safari iPhone 4.1
    • 58. Go to
    • 59. Just a blue banner with our “Movie Listing” title so far
  • 60. Add a Data View Control to the Page
    • Time for some content!
    • 61. Add a Data View Control inside the home Mobile Page
    • 62. Change to the Design tab
    • 63. Wow, there's a lot going on here
  • 64. Set Properties for the Data View
    • Set var = “viewEntry”
    • 65. Set rendererType = “”
    • 66. In the data properties, select “Domino View”
    • 67. For viewName, set it to “byTitle”
    • 68. For var, set it to “view1”
  • 69. Preview: 30 Blank Rows
    • Getting close. Page now wants to display the view and honors the 30 rows at a time default property
    • 70. Need to define a view column (or more) to display
  • 71. Adding a Summary Column
    • In the Data View control's properties, find the “format” section of properties
    • 72. Click the selector next to the “summaryColumn” property
    • 73. Set columnName = “Name”
      • The actual programmatic name of the view column
    • Set columnTitle = “Name”
      • How you want the column title to appear on the page
  • 74. Preview and Voila, View Entries
    • Now we need a pager to bring more entries to the page
    • 75. Still inside the data view container, add the code below
    • 76. xp:key corresponds to the editable area we see in design mode
    • 77. The “for” variable in addRows points back to the id assigned to the data view container
  • 78. Preview and Try the “More...” Pager
    • Whenever “More...” is clicked 10 more rows will be added to the page (via AJAX call)
      • 10 is the value we gave to the “rows” variable in the addRows event
      • 79. Can be whatever value you want
  • 80. Add New Mobile Page For Movie
    • Now, when the user clicks a view entry, it needs to do something
    • 81. We'll create the “movie” mPage and setup the view to open that page when clicked
    • 82. Below the 1 st mPage, add a new “Mobile Page” control
    • 83. Set the id to “movie”
    • 84. Set resetContent = true
      • Every time a movie document is opened, it will be fresh content, so resetContent needs to be true
  • 85. Add a Header to the New Movie Page
    • Any non-home page in a mobile app should probably have a Header control
    • 86. The Header control is much like the Page Header Control in that it supports a title, but it also supports buttons for going back to previous page
    • 87. Drag a “Header” control into the “movie” mPage
    • 88. Set title to “Movie”
    • 89. Set backButtonTitle to “Home”
    • 90. Set backPageId to “home”
    • 91. Set backPageUrl to “#home”
    • 92. Set transition to “slide”
  • 93. Send View Link Clicks to the New Page
    • Go back to the dataView control's properties
    • 94. Set pageName = “#movie”
      • Rather than going to a different Xpage, it goes to an anchor link (the movie mPage) on our Xpage
  • 95. Preview the App
    • Now view links on “home” page should slide to the “movie” page when clicked
    • 96. The “movie” page should have a header with a back button labeled “Home”
    • 97. The Home button should take you back to the Home mPage
  • 98. Add Panel and Data Source to mPage
    • Panels can contain their own data source
    • 99. In mobile apps, it's important to only load things at the time needed
    • 100. By putting a panel in the mPage, the data for that panel will only be computed when that page is active
    • 101. Drag a panel control below the header in “movie” mPage
    • 102. Set up a data source for the panel for a Domino Document
    • 103. Set to the “movie” form and Open Document
  • 104. Add a Static Line Item into the Panel
    • A “Static Line Item” Control is a formatted mobile control
    • 105. The properties allow for it to have an icon, main title, right title, a url if it's clicked
    • 106. We just want to use the title property and display the name of the movie
    • 107. Drag a “Static Line Item” control from Mobile Apps into the panel
    • 108. For title, compute the value and use “document1.Name”
      • Don't type it directly, use the code popup so in source it reads #{document1.Name}
      • 109. Document1 is the data source defined in the panel
      • 110. Name is the field name for the movie title on the movie form
  • 111. Preview
  • 112. Add Round Rect List Control
    • Below the static line item, add a “Round Rect List” control from Mobile Apps
    • 113. This will be an area where we can provide a highlight panel with more information about the movie
  • 114. Add margins and padding to control
    • By default, the round rect list control butts up against the left-hand side of the screen and has no padding
    • 115. Either go to the style tab for the control and add 10px margin and 5px padding, or create a style class in css and apply it
  • 116. Self-Study: Add repeat control
    • Inside the round rect list, create a repeat control that does a lookup to the movie_actors view
      • @DbLookup('', 'movie_actors', key, 2)
      • 117. Key is the id of the movie, which is provided by the data source in the panel, or #{}
    • Once you have the repeat, put a computed field inside the repeat that either shows the actor_ids from the lookup, or perform an additional lookup to get the name of the actor , or create another mPage to go from the actor_id to an actor detail page
  • 118. Questions?
  • 119. Legal Disclaimers
    • © IBM Corporation 2009. All Rights Reserved.
    • 120. 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.
    • 121. 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.
    • 122. IBM, the IBM logo, Lotus, Lotus Notes, Notes, Domino and Lotusphere are trademarks of International Business Machines Corporation in the United States, other countries, or both.
    • 123. Java and all Java-based trademarks are trademarks of Sun Microsystems, Inc. in the United States, other countries, or both.
    • 124. All references to LOANr refer to a fictitious company and are used for illustration purposes only.
    The information on the new product is intended to outline our general product direction and it should not be relied on in making a purchasing decision. The information on the new product is for informational purposes only and may not be incorporated into any contract. The information on the new product is not a commitment, promise, or legal obligation to deliver any material, code or functionality. The development, release, and timing of any features or functionality described for our products remains at our sole discretion