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

1. XPages Mobile Development Lab Lance Spellman | President, WorkFlow Studios

3. Think about mobile requirement

4. Model page flow of mobile app

5. Create mobile Xpage

7. Document

8. Linked Doc

11. Actors

13. Actor list

14. Actors, categorized by the movies they appear in

15. Movie Form

16. Actor Form

20. Alpha listing of movie titles

22. Second column has First Name, sorted alpha

24. Categorized view on the movie's id

25. Actor id's appear in 2 nd column

27. Allow selection of movie

28. For selected movie, show actors that appear in that movie

31. Looks up user information from the actor_id provided

33. On Advanced tab, checkmark the Extension Library

35. Type “oneuiv2” into the Application Theme field

37. Go to source tab

39. Find the “Mobile Apps” section

40. Drag an “App” control on to the page

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

49. In Properties, set id = “home”

51. In cases with an active view, you might want to set this to true

53. Add Page Heading control inside the Mobile Page

54. Set the label property to “Movie Listing”

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 http://127.0.0.1/mobile.nsf/m.xsp

59. Just a blue banner with our “Movie Listing” title so far

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

65. Set rendererType = “com.ibm.xsp.extlib.mobile.MobileView”

66. In the data properties, select “Domino View”

67. For viewName, set it to “byTitle”

68. For var, set it to “view1”

70. Need to define a view column (or more) to display

72. Click the selector next to the “summaryColumn” property

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

79. Can be whatever value you want

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”

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”

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

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

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

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

113. This will be an area where we can provide a highlight panel with more information about the movie

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

118. Questions?

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