Lab: Developing with the extension library
- 1. XPages Extension Library Lab Lance Spellman | President, WorkFlow Studios
- 2. Objective Build an event registration system with XPages Extension Library
- 3. Use new capabilities provided by the Extension Library for: Layout
- 5. Login/Logout
- 6. Search
- 8. Event Registration Demo and Setup This application allows a team to setup events, such as this Xpages Workshop, and allow people on the web to register for them
- 9. On the Domino server, there is a database named events.nsf
- 10. Events is the application interface and where event data will be captured Events.nsf has a Registration form in it and nothing else On the Domino server, there is a database named users.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
- 13. Begin Lab Open events.nsf
- 14. Go to XPages section
- 15. Add New XPage named Home, save and close
- 16. Enable Extension Library Open Application Properties
- 17. Go to Advanced Tab
- 18. Enable the Extension Library by clicking the checkmark for: com.ibm.xsp.extlib.library
- 19. Set Theme to oneuiv2 Go to the Xpages tab of Application Properties
- 20. In the Application Theme field, type oneuiv2
- 21. Set Error Page to Display Runtime Error Go to the Errors and Timeouts section
- 22. Checkmark the box for: Display Xpages runtime error page
- 23. Set Home as Launch Page Go to the Launch tab of Application Properties
- 24. In the Web Browser Launch section, set launch to: Open Designated Xpage Set Xpage to Home
- 25. Preview Application Home Page http://127.0.0.1/events.nsf
- 26. home.xsp page should launch If not, check previous steps for accuracy
- 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
- 30. Create Layout Custom Control Go to Custom Controls section
- 31. Create new Custom Control called Layout
- 32. Make habit of filling in the Comment field
- 33. Add Application Layout Extlib Control Go to the Extension Library panel
- 35. Drag on the Layout Custom Control
- 36. Set Application Layout Configuration Click on the Application Layout control
- 37. Go to the All Properties tab
- 38. Select Other and configuration
- 39. Click in the Value column and click the selector
- 41. Save Layout control and add to Home Save the Layout custom control
- 42. Open the Home Xpage
- 43. Add the Layout control to Home by clicking and dragging
- 44. Save Home and Preview Save the Home Xpage
- 45. Preview in browser by going to: http://127.0.0.1/events.nsf
- 46. Create events theme Create new theme named “events”
- 47. Extend the “oneuiv2” theme
- 48. In application properties, change the theme to “events”
- 49. Create and add events.css resource Create a new Stylesheet called events.css
- 50. Add events.css as a resource in the events theme
- 51. Replace default Lotus logo Open events.css
- 52. Create new class to overwrite .lotusui .lotusLogo New logo image is already in Resources
- 53. Preview Home Page for new Logo http://127.0.0.1/events.nsf
- 54. Understanding Editable Areas When an Editable Area is added to a custom control, it creates a placeholder called a “callback”.
- 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
- 58. Using the Editable Area When the custom control containing the Editable Area is put on an XPage, it allows the developer to put arbitrary content into that spot Think of it as a placeholder the control developer has set aside for the Xpage developer Example: For left-hand column of a layout, I, as the layout builder, want to define a space for a navigator. But I don't want to arbitrarily decide what that navigator will be or what it will contain.
- 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
- 62. Add Label to the Editable Area The green dot in the Editable Area indicates the target where content can be added
- 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
- 66. Delete the Test Custom Control and XPage The Custom Control and XPage were for isolated demonstration purposes, they aren't needed in the app
- 67. Applying Editable Area Knowledge Open the custom control named “layout” we created earlier
- 68. It contains the “Application Layout” extension control we added
- 69. The Application Layout control contains 3 editable areas LeftColumn
- 71. RightColumn
- 72. The Application Layout Control If the Application Layout control was on an Xpage, the developer could add a page or view navigator in the “LeftColumn” Editable Area
- 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
- 80. What's That Code Do? The <this.facets> tag tells the Application Layout control that we are going to take advantage of the Editable Areas it had defined
- 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)
- 83. Also within the panel, we define our own Editable Area called “LeftColumn” that will be passed on to the Xpage using this custom control That gives the Xpage developer to ALSO add a control at the Xpage level The same thing applies for the “RightColumn” facet
- 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
- 87. Build site navigator Create new custom control
- 89. This will appear in the left-hand column of the layout manager and provide navigation to all the site areas
- 90. Drag Page Navigator Control to the Canvas In the control pallete, go to the Extended Library controls
- 91. Find and click on the Page Navigator control
- 92. Drag it on to the screen
- 93. How Page Navigator Works A Page Navigator is a container that is designed to present a list of links that can be clicked to change pages
- 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
- 97. Add Page Tree Node for Events The main page for the site will be a listing of Events
- 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
- 101. Fill in the PageTreeNode Properties Enter “Events” for both the label and the page
- 102. This will display “Events” as the link in the Page Navigator
- 103. When clicked, it will open the XPage named “Events”
- 104. Add Page Navigator to the Layout Now that we have at least 1 item in the navigator, let's add it to the “layout” custom control
- 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
- 109. Preview the Home Page for Navigator Green box with blue “Events” link should now appear
- 110. When clicked, it generates an error because we haven't created an “Events” Xpage yet
- 111. Create Events XPage Create New Xpage
- 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
- 117. Add Home Page Link to Navigator Open the “main_navigator” custom control
- 118. Go to All Properties, treeNodes
- 119. Add new pageTreeNode
- 120. Fill in pageTreeNode Attributes For label and page, add “Home” value
- 122. Preview Home and Events Pages See the Home entry added to the navigator
- 123. See how the active link changes when going between pages
- 124. The Order's Wrong...how to fix In “main_navigator”, go to source mode
- 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
- 128. Add View List and Dynamic View to Events When the Events page is clicked, show a default view and ComboBox for switching to different views
- 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
- 132. Compute the View Name Property For the datasource, click the diamond next to view name and enter a script for computing the value
- 133. Code for View Name Property We'll use a viewScope variable to determine what view to show
- 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
- 137. Add Dynamic View Panel From the Extension Library controls, drag a Dynamic View Panel into “panel_view_events”
- 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
- 141. Add View Picker ComboBox Drag a ComboBox into the “panel_view_events” panel, above the Dynamic View Panel
- 142. Name it “viewPicker”
- 143. Enter a return after it so the Dynamic View Panel is on the next line
- 144. Bind ComboBox to viewScope.viewName In the data tab for “viewPicker”, select: Advanced
- 145. Use: Scoped Variable
- 147. Variable Name: viewName
- 148. Set ComboBox Selection Values On the Values tab, add the following items: By Date
- 149. By Location
- 150. By Name Set values to the aliases of those views
- 151. Add Label in front of ComboBox Drag a label control before the ComboBox
- 152. Change the label to “Events Views: “
- 153. When complete, save and preview the Events page again
- 154. Completing the Application Configuration We did the initial setup for Application Configuration in our “layout” control
- 155. There are additional items to be setup: Banner Application Links – (links to other sites, like company intranet)
- 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
- 161. Add Banner Application Links In the “layout” custom control, select the Application Layout control
- 162. Go to All Properties tab
- 163. Expand the configuration section
- 164. Click the bannerApplicationLinks selector
- 165. Choose basicLeafNode
- 166. Add IBM link Configure the basicLeafNode to provide an IBM link Href: http://www.ibm.com
- 167. Label: IBM Preview the Home or Events page
- 168. Adding Banner Utility Links In the Utility Links area of the Banner, we want to add Current User
- 169. Login (if not logged in)
- 170. Logout (if logged in) In the configuration section, click the selector for bannerUtilityLinks
- 171. Add a userTreeNode
- 172. Add a Login Link In the configuration section, click the selector for “bannerUtilityLinks”
- 173. Add a loginTreeNode
- 174. Save and preview
- 175. Nothing happens, why? It's smart and knows you're logged in already
- 176. Add a logout link In the configuration section, click the selector for “bannerUtilityLinks”
- 177. Add a “basicLeafNode” There is no custom node for logout, we have to create it
- 178. Label: Logout
- 179. Href: provides the link that should be executed to logout
- 180. Rendered: determines whether the logout link should be visible or not For “href” use the code from code_snippets.txt #4
- 181. For “rendered” use the code from code_snippets.txt #5 We can only logout from a session authentication based login
- 182. Check to see if user has a login cookie, and if so, render the logout link code_snippets.txt #4
- 183. Change to Session Authentication Open Domino Administrator Client
- 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”
- 197. Try out Logout Link Once logged in as Domino Admin, the logout link should be visible
- 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
- 203. Enable Placebar Features In Application Layout configuration, go to placeBarName
- 205. Preview the Home page
- 206. Turn on SearchBar In Application Layout configuration, click on selector next to searchBar InactiveText: Search...
- 207. PageName: Search
- 208. QueryParam: searchText This tells the application to enable the search bar, put “Search...” as the default value in the input box which will be cleared when user clicks inside it
- 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
- 210. Create a Search XPage Create new Xpage named “Search”
- 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
- 213. Compute the value with paramValues.get('searchText')[0] This will give you the string that was entered by the user to search on
- 214. Save and try it out by going to Home page and enter a search term
- 215. Add a View to the Search Page Now that we know we've got functionality, let's delete the label and computed field on the Search Xpage
- 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
- 220. For “Search in view results:” compute the value to: paramValues.get('searchText')[0]
- 221. Try Search now If you search for “Austin”, the search page will show the view with 1 entry in it
- 222. If you search for “Dallas”, a blank view will be returned
- 223. Other Things You Could Do Add Tabs to the layout in the Title Bar
- 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?
- 229. Resources Almost all the information today is coming from the project at openntf.org http://extlib.openntf.org/ Some of the videos surfaced there are also making their way into the Domino wiki media gallery http://www-10.lotus.com/ldd/ddwiki.nsf/xpViewCategories.xsp?lookupName=Media%20gallery
- 230. Legal Disclaimers © WorkFlow Studios 2010. All Rights Reserved.
- 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.