This lab walks you through a development cycle using the XPages Extension Library and the ApplicationLayout control. Originally presented at the Austin XPages Advanced Development seminar Dec 2010.

1. XPages Extension Library Lab Lance Spellman | President, WorkFlow Studios

4. Page Navigation

5. Login/Logout

6. Search

7. User information

9. On the Domino server, there is a database named events.nsf

11. Users is a copy of a Public Name and Address Book, and is registered in Directory Assistance as a secondary address book

12. Anyone listed in users will be able to login to the server and use the Events application

14. Go to XPages section

15. Add New XPage named Home, save and close

17. Go to Advanced Tab

20. In the Application Theme field, type oneuiv2

27. Check security settings in server document for Xpages field

28. Restart http

29. Check that events.nsf is in the Server's data directory...not the Client's data dir

31. Create new Custom Control called Layout

32. Make habit of filling in the Comment field

34. Select Application Layout

35. Drag on the Layout Custom Control

37. Go to the All Properties tab

38. Select Other and configuration

39. Click in the Value column and click the selector

40. Choose xe:applicationConfiguration

42. Open the Home Xpage

43. Add the Layout control to Home by clicking and dragging

47. Extend the “oneuiv2” theme

48. In application properties, change the theme to “events”

50. Add events.css as a resource in the events theme

55. The callback automatically generates an id for itself, usually called “facet_1” for the first Editable Area on the page

56. Try creating a new custom control called “test” and add an Editable Area to it

57. Look at source

59. By putting an Editable Area in the layout, when the layout control is used on an Xpage, the Xpage developer can decide what kind of navigator he wants to put there and simply drag it into the Editable Area placeholder.

60. Create a new Xpage called “UseTest”

61. Drag the “test” custom control on to the XPage

63. Drag a label control over the green dot

64. A blinking cursor should appear between the gray facet_1 box and the green dot indicating it's going to put the label there. Drop the label control

65. After the drop, the label should appear within the dotted line box boundaries of the editable area as shown below

68. It contains the “Application Layout” extension control we added

70. OneUIMainAreaCallback (no facetName)

71. RightColumn

73. But what if the application will use the same navigation for every Xpage?

74. It makes sense to add the navigation at the “layout” custom control level

75. Then every Xpage that uses the “layout” control will already have the navigator built-in

76. We also would like to allow the Xpage developer to append additional content into the “LeftColumn” so we'll make sure there's still an Editable Area available at the Xpage level

77. We'll create the Navigator in its own custom control, and when we're done, add it to the “layout” custom control

78. First, we need to update the code in the “layout” custom control

79. Copy Code Snippets #2 to “layout” code_snippets.txt #2

81. The panel with xp:key=”LeftColumn” identifies that this content is going in the “LeftColumn” facet defined in the Application Layout control

82. Within the panel, we can now put a custom control (like a navigator)

84. The callback for “OneUIMainAreaCallback” is special. Because the Application Layout control did not specify a facetName property for that Editable Area, it falls outside the scope of the <this.facet> tag

85. It allows for multiple controls to be loaded inside of it

86. By adding the callback to “layout” we pass on the ability to use it at the Xpage level

88. Name it main_navigator

89. This will appear in the left-hand column of the layout manager and provide navigation to all the site areas

91. Find and click on the Page Navigator control

92. Drag it on to the screen

94. It has a default appearance for background and displaying links in a vertical list

95. The Page Navigator works by adding “treeNodes” into the container

96. Go to the PageNavigator, All Properties tab and click the icon next to the treeNodes attribute

98. The Page Navigator should provide a link to this page

99. After clicking the selector next to treeNodes, a list of node types is displayed

100. Click pageTreeNode

102. This will display “Events” as the link in the Page Navigator

103. When clicked, it will open the XPage named “Events”

105. Open the “layout” custom control

106. Go to source mode

107. Find the panel with xp:key=”LeftColumn”

108. Drag the “main_navigator” custom control as the top element inside the panel

110. When clicked, it generates an error because we haven't created an “Events” Xpage yet

112. Name it “Events”

113. Drag the “layout” custom control on to it

114. Save and preview Home page again

115. Click Events link now

116. Notice how navigator changes link to indicate the currents page

118. Go to All Properties, treeNodes

119. Add new pageTreeNode

121. Save “main_navigator”

123. See how the active link changes when going between pages

125. See the 2 pageTreeNodes

126. Copy and paste the Home page so that it's the first of the two listed

127. Save and preview

129. Create new custom control called “view_events”

130. Drag a panel control on to the page, name it “panel_view_events”

131. Go to the data tab for the panel and create a view datasource

134. We'll use a ComboBox to set viewScope.viewName

135. If viewScope.viewName hasn't been set, choose a default view to display

136. Copy the code from code_snippets.txt #3 code_snippets.txt #3

138. On the data tab for the Dynamic View Panel, select the “view1” datasource defined in “panel_view_events”

139. Leave “bind to” ComboBox blank

140. Whenever the panel's datasource formula changes, the Dynamic View Panel will reflect it

142. Name it “viewPicker”

143. Enter a return after it so the Dynamic View Panel is on the next line

145. Use: Scoped Variable

146. Parameter: View Scope

147. Variable Name: viewName

149. By Location

152. Change the label to “Events Views: “

153. When complete, save and preview the Events page again

156. Banner Utility Links – (login/logout, register, current user, etc...)

157. Title Bar Tabs – (My Profile)

158. Search Bar

159. Place Bar Name

160. Place Bar Actions

162. Go to All Properties tab

163. Expand the configuration section

164. Click the bannerApplicationLinks selector

165. Choose basicLeafNode

169. Login (if not logged in)

171. Add a userTreeNode

173. Add a loginTreeNode

174. Save and preview

175. Nothing happens, why? It's smart and knows you're logged in already

178. Label: Logout

179. Href: provides the link that should be executed to logout

182. Check to see if user has a login cookie, and if so, render the logout link code_snippets.txt #4

184. Select the Configuration tab

185. Select the Xpages/Lotus server if not already selected

186. Expand Web and click Web Server Configurations

187. In the view, open Domino Server

188. Go to Edit mode

189. Go to Internet Protocols tab, Domino Web Engine sub-tab

190. Change “Session Authentication” to “Single Server”

191. Go to Security tab

192. In the “Access Server” field add, “LocalDomainServers”

193. Save and close

194. At the server console, “tell http restart”

195. Restart browser

196. Go to events.nsf and login with “Domino Admin” : “passw0rd”

198. Click Logout link, remain on same page

199. Username is now Anonymous and Login link available

200. Login takes to form based authentication

201. On successful login, redirected to Home page for app

202. Username appears along with Logout link

204. Enter “Upcoming Events”

205. Preview the Home page

207. PageName: Search

209. When the user clicks search button, the “Search” Xpage (not built yet) will be returned and a queryString parameter of “searchText=” will be provided to that page with the value of what was input into the field

211. Drag a label control on to the page, give it the label, “Search String: “

212. Drag a computed field control on to the page

214. Save and try it out by going to Home page and enter a search term

216. Add the layout custom control

217. Drag a view control into the content area of the page

218. Choose “Events By Location” as the view to display

219. Go to the Data tab of the view control

222. If you search for “Dallas”, a blank view will be returned

224. Add Action buttons in the Place Bar

225. Add content to the RightColumn of the layout

226. Add footer and legal content to the layout

227. It's all there in the Application Configuration

228. Questions?

231. 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. WorkFlow Studios 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 WorkFlow Studios or its suppliers or licensors, or altering the terms and conditions of the applicable license agreement governing the use of IBM software.

232. 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.

233. 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.

234. Java and all Java-based trademarks are trademarks of Sun Microsystems, Inc. in the United States, other countries, or both.

235. Dissemination or reuse of this presentation is allowed provided full attribution to WorkFlow Studios is made by retaining the title slide and this legal disclaimer slide in their original form.