Successfully reported this slideshow.
Your SlideShare is downloading. ×

Lab: Mobile App Development with XPages and Extension Library

Loading in …3

Check these out next

1 of 38 Ad

More Related Content

Similar to Lab: Mobile App Development with XPages and Extension Library (20)


Recently uploaded (20)

Lab: Mobile App Development with XPages and Extension Library

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