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

View

7. Document 8. Linked Doc 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

actor_id

18. movie_id 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 ndcolumn 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 tohttp://127.0.0.1/mobile.nsf/m.xsp 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 = 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 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 stmPage, 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 #{document1.id} 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 IBMs 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 IBMs 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