If you can't read please download the document
Upload
workflowstudios
View
4.597
Download
8
Embed Size (px)
DESCRIPTION
This lab introduces you to Mobile development with the XPages extension library.
Citation preview
2. Agenda
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
7. Document 8. Linked Doc 9. Existing Notes Application
10. Contains 3 types of documents/forms
11. Actors 12. A join table for actors in movies Contains 3 views
13. Actor list 14. Actors, categorized by the movies they appear in 15. Movie Form 16. Actor Form 17. Movie-Actor Form
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
20. Alpha listing of movie titles 21. Actors by Last Name View
22. Second column has First Name, sorted alpha 23. Movie Actors View
24. Categorized view on the movie's id 25. Actor id's appear in 2 ndcolumn 26. Mobile Requirement
27. Allow selection of movie 28. For selected movie, show actors that appear in that movie 29. Model the Mobile Page Flow
30. Initial content for that page should be a view listing the movies
Clicking a movie link should transition to a new page fragment
On movie page, a view for the actors that appear in the movie will be listed
31. Looks up user information from the actor_id provided 32. Enable the Extension Library
33. On Advanced tab, checkmark the Extension Library 34. Use oneuiv2 Theme
35. Type oneuiv2 into the Application Theme field 36. Create New XPage
37. Go to source tab 38. Add Mobile App Control
39. Find the Mobile Apps section 40. Drag an App control on to the page 41. Configure Properties for App Control
42. Set selectedPageId equal to home
43. Add a Mobile Page to the App Control
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
49. In Properties, set id = home 50. Set keepScrollPos = true
Set resetContent = false
51. In cases with an active view, you might want to set this to true 52. Add Page Heading to Mobile Page
53. Add Page Heading control inside the Mobile Page 54. Set the label property to Movie Listing 55. Preview the Mobile Page
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
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
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
70. Need to define a view column (or more) to display 71. Adding a Summary Column
72. Click the selector next to the summaryColumn property 73. Set columnName = Name
Set columnTitle = Name
74. Preview and Voila, View Entries
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
79. Can be whatever value you want 80. Add New Mobile Page For Movie
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
85. Add a Header to the New Movie Page
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
94. Set pageName = #movie
95. Preview the App
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
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
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
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
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
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
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
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