How to build a simple XPages application - Lotusphere 2010

1,583 views

Published on

Tim Clark and Matt White.
Files downloadable from www.tc-soft.com
A 2 hour presentation on how to create an IBM Lotus XPages application to do record create, read, update and delete.
Also includes how to include Dojo modules.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,583
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

How to build a simple XPages application - Lotusphere 2010

  1. 1. SHOW112How to build an XPages applicationfrom start to finishTim Clark | Lotus Business Partner Technical EnablementMatt White | Elguji Software
  2. 2. Legal Disclaimers© IBM Corporation 2009. All Rights Reserved.The information contained in this publication is provided for informational purposes only. While efforts were made to verify thecompleteness 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 changeby IBM without notice. IBM shall not be responsible for any damages arising out of the use of, or otherwise related to, thispublication or any other materials. Nothing contained in this publication is intended to, nor shall have the effect of, creating anywarranties or representations from IBM or its suppliers or licensors, or altering the terms and conditions of the applicable licenseagreement governing the use of IBM software.References in this presentation to IBM products, programs, or services do not imply that they will be available in all countries inwhich IBM operates. Product release dates and/or capabilities referenced in this presentation may change at any time at IBM’ssole discretion based on market opportunities or other factors, and are not intended to be a commitment to future product orfeature availability in any way. Nothing contained in these materials is intended to, nor shall have the effect of, stating or implyingthat any activities undertaken by you will result in any specific sales, revenue growth or other results.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.Java and all Java-based trademarks are trademarks of Sun Microsystems, Inc. in the United States, other countries, or both.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 inmaking a purchasing decision. The information on the new product is for informational purposes only and may not beincorporated into any contract. The information on the new product is not a commitment, promise, or legal obligation todeliver any material, code or functionality. The development, release, and timing of any features or functionality describedfor our products remains at our sole discretion 2
  3. 3. Hi, I’m TimIBMLotus Business Partner Technical Enablementtim_clark@uk.ibm.comhttp://blog.tc-soft.comTwitter : @TimsterC 3
  4. 4. Hi, I’m MattElguji SoftwareThe developers of IdeaJam and IQJammatt.white@elguji.comhttp://mattwhite.meTwitter: @mattwhite 4
  5. 5. Agenda  Welcome to LOANr  What are XPages?  Layout and UI  Data Structure  Data CRUD  Questions  Appendices 5
  6. 6. Welcome to our sample applicationLOANr is a browser application that is used by the staff of a movie rentalstore.They can use it to add customers and movies to their database, createrentals and check some statistics of the rentals.It makes use of all the XPages design elements and requires us to thinkabout an IBM® Lotus® Notes® application in a slightly new way.DEMO 6
  7. 7. Agenda  Welcome to LOANr  What are XPages?  Layout and UI  Data Structure  Data CRUD  Questions  Appendices 7
  8. 8. What are XPages?New server task that is part of HTTP As developers who really cares about admin server tasks?An XPage is a JavaTM Server Face JEE ApplicationFrom IBM® Lotus® Domino® Designer 8.5.0 onwards there arethree “main” new design elements: XPages Custom Controls Server Side Script LibrariesAll code is written in JavaScript @Functions are available - (here be dragons around!) Code, commas and case sensitivity are very important Turn on the debugger (we will show how later) 8
  9. 9. The XPageClosest match in “classic” Notes is the form But an XPage is just used as a Web interface onto your databaseIs really a container for Custom Controls Generally not much coding is done in the XPage You just drag and drop content into the XPage to be displayed to the browser 9
  10. 10. The Custom ControlClosest match in “classic” Notes is the sub formThe real programming with XPages is done in Custom Controls Re-use is keyGenerally you’ll separate function from UI One Custom Control will handle layout Others will handle data binding and business processes 10
  11. 11. The Server Side Javascript LibraryThere are now two types of JavaScript Client side – Will run out on the browser Server side – Will run on the serverServer-side JavaScript can do almost everything that LotusScript or Java can do Except for UI classes Always runs in the context of the user executing it You can run agents on the server to execute code as the server rather than the current user. 11
  12. 12. What aren’t XPages?They are not a total replacement to every element of web design You can still make use of web agents for things like RSS, JSON etc Login screens for session authentication are still in “classic” DominoA panacea Good design is still worth it’s weight in gold Think about how your application will work Plan for growth, usage etc 12
  13. 13. Agenda  Welcome to LOANr  What are XPages?  Layout and UI  Data Structure  Data CRUD  Questions  Appendices 13
  14. 14. Layout / UILayout Custom Control Editable AreasCSSThemes 14
  15. 15. Layout Custom Control In the Domino Designer client; 1, right click on the “Custom Control” (CC) design element 2, select “New Custom Control” 15
  16. 16. 1, Name the new CC “cc_container”2, Click OK 16
  17. 17. Drag & drop 7 panels from the Container Controls palette onto your new custom control 17
  18. 18. 1, In the outline click on the first Panel 2, In the properties for the Panel click in the Name property and name the panel “frame” 3, name the other panels as shown: topLozenge navLozenge contentLozenge header navbar content  It should end up looking like this18
  19. 19. 1, Using the Outline (bottom left of the Domino Designer) 2, Drag & drop the Lozenge panels into the frame panel 3, Drop the header into topLozenge 4, Drop navbar into navLozenge 5, Drop content into contentLozenge 6, Be careful as you drag and drop, try to do it in the order above or it is possible that it could get quite confusing. 7, If it all goes wrong then select the Panel in the outline and hit the delete key. Add another Panel and try again. ;o)19
  20. 20. 1, click on Root Document in the Outline2, click on the Style property tab3, click on the “Add style sheet...” button 20
  21. 21. 1, click on the LS2010style.css 2, click OK21
  22. 22. 1, Select the Panel:frame in the Outline 2, Then select the style property tab 3, Pick the correlating style for the Panel. frame = frame topLozenge = lozenge header = header navLozenge = lozenge navbar = navbar contentLozenge = lozenge content = content22
  23. 23. It should look like this when you have got this far 23
  24. 24. Drag and drop an image control onto the header panel(Its the blue one at the top) 24
  25. 25. 1, Drag an Editable Area from the Core Controls palette2, Drop it onto the content panel (2). (Its the white one) 25
  26. 26. Theme In our application, we want all of the buttons to be nicely formatted, but we don’t want to have to manually go around and apply formatting or a style to each of them. So we’re going to use a theme to make all buttons into Dojo buttons. 1, From the File menu, select New 2, Then select Theme 26
  27. 27. 1, In the dialog, name the theme “loanr”2, OK the dialog 27
  28. 28. 1, Set the source XML of the theme to use the pictured XML. This firstly extends the “webstandard” theme which defines a base level of UI for XPages applications. Then we tell XPages that we want to set the dojoType property for each kind of button (Command, Submit and Cancel) to use the dijit.form.Button value. Save and close the theme script_snippets.txt (1)28
  29. 29. 1, Open the application properties and set the Application Theme on the XPages tab to use the new “loanr” theme we just created 2, Set the Client validation radio button to “Off”. This will mean all validation is done on the server rather than the client. 3, Check the “Display Default Error Page” box so that we get detailed error messages for any problems we create. 4, Save & Close29
  30. 30. Now Open the cc_container custom control30
  31. 31. 1, In the All Properties of the custom control, set “dojoParseOnLoad” to be true 2, Now set “dojoTheme” to be true 3, Now add a new “xp:dojoModule” resource31
  32. 32. Set the name of the dojoModule to “dijit.form.Button”Save and Close the Custom Control 32
  33. 33. 1, Right click on the XPages container 2, Select “New XPage...”33
  34. 34. 1, Name the XPage “home” 2, OK the dialog34
  35. 35. 1, In the new XPage click and drag the cc_container custom control2, Drop it onto the empty XPage 35
  36. 36. 1, It should look like the screen shot below.2, Use the Preview in Browser button to launch the XPage in your web browser. 36
  37. 37. It should look like this when you preview it in the browserBut it’s going to look better when we put some content into it 37
  38. 38. Agenda  Welcome to LOANr  What are XPages?  Layout and UI  Data Structure  Data CRUD  Questions  Appendices 38
  39. 39. Data StructureNotes Forms and Views are equivalent to table definitionsForms Still add fields Can use computed fieldsViews Make sure you name columns sensibly Sorting is still required 39
  40. 40. Basic data schema 1 1 ∞ ∞ 40
  41. 41. Notes Form Definitions 41
  42. 42. Customer viewCustomers view Customer Data column Value Formula 42
  43. 43. Movies and Rentals viewsMovies view Rentals viewMovie Lookup column formula is;movietitle + "|" + movieid 43
  44. 44. Movies by Genre view Genre Column sorting Genre (Sort= Ascending) (Type = Categorized) Movie ID (Sort=Ascending) 44
  45. 45. Search viewWe just use this view to display searchWe just use this view to display search results.results The column formatting will be whatThe column formatting will be what you you want to see in the searchwant to see in the search results results custom controlcustom control 45
  46. 46. RentalsByMovieId view 46
  47. 47. Agenda  Welcome to LOANr  What are XPages?  Layout and UI  Data Structure  Data CRUD  Questions  Appendices 47
  48. 48. New CustomerOpen the list of Custom Controls and click the New Custom Control ButtonIn the dialog that appears, call the Custom Control “cc_customer” 48
  49. 49. In the Custom Control properties, select the Data tab Click the the Add -> Domino Document button49
  50. 50. 1, Set the form for the Document data source to be “customer”2, Set the default action to be “Open Document” 50
  51. 51. 1, On the Data pane, make sure that the Select Controls button is enabled (it isdisabled by default) 51
  52. 52. 1, Now select the highlighted fields and drag them onto the new custom control52
  53. 53. 1, In the dialog which appears, set the control type for each of the fields, in this case we just need to set the DateofBirth to be a date time picker 2, Check the Add Messages Control... checkbox to automatically add an error message control 3, Check the “Save these settings...” box to save having to re- do this work for future operations 4, OK the dialog A table of the fields, ready bound will be added to the custom control53
  54. 54. 1, Select the First Name field and go to it’s validation properties2, Check the Required Field option and enter the error message which will display if the field is left blank3, Repeat this for the Last Name field 54
  55. 55. 1, Select the postcode field 2, Go to the All Properties tab for the field 3, Go to the Data --> Validators section of the All Properties and click the “+” button55
  56. 56. 1, Select the “xp:validateConstraint” option 56
  57. 57. 1, Get a Regex Expression to validate UK Post Codes from Wikipedia 57
  58. 58. 1, Add the Message to the validateConstraint forwhen the validation fails2, Paste the Regex into the Regex field on thevalidateConstraint script_snippets.txt (2) 58
  59. 59. 1, Place the mouse cursor into the top right cell of the field table and then right click 2, Select the “Append Column(s)” option 3, In the dialog which appears, select 1 column to append and OK the dialog59
  60. 60. 1, Drag and drop a new “Display Error” core control into the cell next to the FirstName field 2, Repeat this for the LastName field 3, Repeat this for the PostCode field60
  61. 61. 1, Select the FirstName field and go to it’s all properties 2, Locate the Data --> disableClientSideValidation option and set this to true 3, Repeat steps 1 & 2 for the LastName field 4, Repeat steps 1 & 2 for the PostCode field61
  62. 62. 1, Select the Error Messages control 2, Go to the Font properties of the control 3, Make the font bold62
  63. 63. 1, Go to the background properties of the control 2, Select the background color button 3, Select Light Yellow and OK the dialog63
  64. 64. 1, Select the Style tab of the Errors properties pane2, Click the Export... button 64
  65. 65. 1, In the dialog which appears, make sure that all of your custom formatting changes are listed 2, Select the style sheet which the new style will be inserted into 3, Type a class name for the new style “errortext” 4, Check the “Apply this style...” box 5, OK the dialog65
  66. 66. 1, Select the first error message control 2, Select the Style properties 3, Set the class to our new “errortext” class we just created66
  67. 67. Set the “Show Error Messages for” to bind the control to it’s related field Repeat Steps 1 to 5 for the Last Name Repeat Steps 1 to 5 for the Post Code Save the custom control67
  68. 68. 1, Select the dateofbirth field2, Select the data properties tab for the field3, Set the Display format to be “Date Only” 68
  69. 69. 1, In the custom control All Properties -> data -> data set the computeWithForm to “onsave” 69
  70. 70. cc_actionbar 1, Right click on the Custom Controls container 2, Select to create a “New Custom Control...” 70
  71. 71. 1, Name the custom control “cc_actionbar”2, OK the dialog 71
  72. 72. Double click the Button Core Control to add a new button to the Custom Control. Repeat this three times.72
  73. 73. 1, Select the first button and change it’s label to “Edit”2, Select the Visible property and make it a ComputedValue 73
  74. 74. In the dialog enter the code shown to decide when to show the Edit button (i.e. when the document is in “Edit Mode”) All of the custom controls that edit data use a data binding called “document1” so we can refer to that herescript_snippets.txt (3) 74
  75. 75. Go to the Events tab of the button properties. In the onClick event, click the “Add Action...” button75
  76. 76. 1, Set the action of the Button to “Change Document Mode” 2, Set the Document Mode to “Edit Mode” 3, OK the dialog76
  77. 77. 1, Select the second new button2, Set the label for the button to be “Save”3, Make the button type “Submit”4, Set the Visible property to “Compute Value...” 77
  78. 78. Set the Visible script to use the pictured code script_snippets.txt (4)78
  79. 79. 1, Select the third new button2, Set the label to “Cancel”3, Set the button type to “Cancel”Save and close the Custom Control 79
  80. 80. Open the cc_customer Custom ControlSelect the cc_actionbar custom control and drag it to the top of thecustom control.Save and Close 80
  81. 81. 1, Right click on the XPages container 2, Select “New XPage...” In the dialog which appears, name the XPage “customer”81
  82. 82. 1, Select the “cc_container” custom control from the Custom Controls sidebar2, Drag and drop the custom control onto the new XPage 82
  83. 83. 1, Select the “cc_customer” custom control2, Drag and drop the custom control inside the editable area of the cc_containercontrol (the green dot)Save and preview the XPage.Test the validation. 83
  84. 84. New Movie From the File menu select new Custom Control Name the new custom control “cc_movie” In the new Custom Control, select the Data tab of the properties pane. Then click the Add --> Domino Document button 84
  85. 85. In the Form drop down, select “movie” 85
  86. 86. In the Default Action, select “Open Document” Select the highlighted fields from the Data pane86
  87. 87. 1, In the data binding dialog, select the control types and set the Labels for each field 2, OK the dialog87
  88. 88. 1, Select the Error Messages Control 2, Select the style properties 3, Click the Add style sheet to page... button88
  89. 89. Select the “LS2010.css” style sheet from the dialog which appears.89
  90. 90. Select the “errortext” class to apply to the Error Messages control90
  91. 91. 1, Select the movietitle field 2, Go to the Validation properties for the field and make it required91
  92. 92. 1, Place the cursor in the top right table cell 2, Right click and select “Append Column (s)...”92
  93. 93. Set the number of columns to add to 1 Add an Error Message control into the top right table cell Set the style to be .errortext93
  94. 94. In the Error Message properties, bind the Error Message control to the movietitle field94
  95. 95. 1, Select the movietitle field 2, Go to All Properties for the field 3, Set the disableClientSideValidation for the field to true95
  96. 96. 1, Select the certificate field 2, Go to the Values properties tab for the field 3, Click the “Add Formula Item...” button96
  97. 97. 1, Enter the pictured formula into the Script Editor window 2, OK the dialog script_snippets.txt (5)97
  98. 98. 1, Select the genre field 2, Go to the Values properties tab 3, Click the “Add Formula Item...” button98
  99. 99. 1, In the dialog which appears, enter the pictured code 2, OK the dialog script_snippets.txt (6)99
  100. 100. Delete the coverimage field which was added to the custom control as we want to replace it with a file upload control100
  101. 101. Select the File Upload control and drag it into the table next to the Cover Image label 101
  102. 102. 1, Select the File Upload control and go to the properties pane. 2, Select the Visible property and set it to “Compute Value...”102
  103. 103. In the Script Editor dialog, enter the pictured code and OK the dialog. script_snippets.txt (7)103
  104. 104. Set the data binding of the File Upload control to use the coverimage field104
  105. 105. 1, Select the dateofrelease field 2, Select the data properties tab for the field 3, Set the Display format to be “Date Only” Drag the cc_actionbar to the top of the custom control Save and close the custom control105
  106. 106. 1, In the custom control All Properties -> data -> data set the computeWithForm to “onsave” 106
  107. 107. 1, Right click on the XPages container 2, Select “New XPage...”107
  108. 108. 1, Name the XPage “movie” 2, OK the dialog108
  109. 109. 1, Select the cc_container custom control2, Drag the custom control onto the new XPage 109
  110. 110. 1, Select the cc_movie custom control2, Drag the custom control into the editable area of cc_containerSave and close the XPage and preview in browser 110
  111. 111. New Rental Create a new custom control and call it cc_rental Drag and drop the cc_actionbar onto the custom control 1, click on the background of the custom control 2, select data 3 & 4, add a document binding 5, select rental as the form 6, use create document as the default action 111
  112. 112. 1, Make sure the add fields dialog is enabled 2, Select and drag all of the fields onto the custom control 3, Change Rental Customer ID and Rental Movie ID to be a Combo Box112
  113. 113. 1, select rentalcustomerid field 2, on the “Values” tab click Add Item 3, type “Select Customer” and single space in the value 4, click add Formula Item 5, use the formula as shown in the diagramscript_snippets.txt (8) 113
  114. 114. 1, select rentalmovieid field and click the Values tab 2, click Add Item and type “Pick a Movie” and a single space in the value 3, click Add Formula Item114
  115. 115. Enter the formula shown on the left script_snippets.txt (9)115
  116. 116. 1, click on the loandate field 2, select the Data tab 3, change the display format to “Date Only”116
  117. 117. 1, select the returned field, right click and select delete2, click and drag a Check Box control to position 3 117
  118. 118. Change the label to “Returned?”118
  119. 119. 1, on the data tab, select document1 and Bind to returned 2, type “yes” into Value when checked 3, type “no” into Value when unchecked119
  120. 120. 1, select the rentalcustomerid field 2, on the All Properties tab find data/ validators and click the “+” button. 3, from the list select xp:validateExpression120
  121. 121. 1, in the expression click the diamond and select Compute value 2, use the formula shown in the Script Editor 3, in the message property type “You must pick a customer” script_snippets.txt (10)121
  122. 122. Repeat this process for the rentalmovieid field but use the formula shown. The message should be “You must select a movie” script_snippets.txt (10)122
  123. 123. 1, select the Display Errors control 2, click the Add style sheet to page button 3, select the LS2010style.css 4, click OK123
  124. 124. Pick the .errortext style and it should change the Error Messages control to look like below.124
  125. 125. Now drag a Panel control onto the page underneath cc_actionbarName the panel “customerdetails” 125
  126. 126. Into that Panel drag and drop a Table control 126
  127. 127. We need 2 rows and 1 columns for this table.127
  128. 128. Drag a Label control into the cell on the left of the table. Type “Customer Details” into the Label property128
  129. 129. 1, drag a Computed field into the cell on the right of the table. 2, in the value change the Bind data using to be JavaScript129
  130. 130. Use the javascript on the left to get and display the customers details script_snippets.txt (12)130
  131. 131. On the computed field set the Content type to be HTML131
  132. 132. In the All Properties of the customerdetails Panel set the Styling -> style property to float: right; script_snippets.txt (13)132
  133. 133. 1, In the custom control All Properties -> data -> data set the computeWithForm to “onsave” 133
  134. 134. The magic that makes this bit all work is partial page refresh Select the rentalcustomerid field and then.... On the events panel find the onchange event in the “Select & Change” section Click on the Partial Update radio button and then the “Select Element” button Pick the customerdetails that you named earlier Click the checkbox to make sure that we do not try and validate the entries Save and close the custom control134
  135. 135. 1, Right click on the XPages container 2, Select “New XPage...”135
  136. 136. 1, Name the XPage “rental” 2, OK the dialog136
  137. 137. 1, Select the cc_container custom control2, Drag the custom control onto the new XPage 137
  138. 138. 1, Select the cc_rental custom control2, Drag the custom control into the editable area of cc_containerSave the XPage and preview in browser 138
  139. 139. It should look like this when you are done.139
  140. 140. Recent Rentals View 1, Open the File menu 2, Choose New, Custom Control 140
  141. 141. 1, Name the new custom control “cc_recentrentals”2, OK the dialog 141
  142. 142. 1, In the Data properties for the custom control, click the Add Button 2, Then select “Domino View”142
  143. 143. 1, Set the view properties to use the “rentals” view 143
  144. 144. Select a new View control from the Container Controls pane and drag it onto the custom control 144
  145. 145. 1, In the dialog which appears, select the “view1” data binding which we just created 2, Check the columns which we want to display (all of them in this case) 3, OK the dialog145
  146. 146. 1, Select the Movie Rented column in the view and right click 2, On the menu, select Insert Column146
  147. 147. 1, Select the whole view and go to it’s All Properties 2, The data, var property should be set to “rentalRow”147
  148. 148. 1, Select the new column we just added and go to it’s all properties. In the Data, value property set it to use a computed value.148
  149. 149. 1, Enter the pictured formula in the dialog which appears. We’re doing a lookup from inside the view here! 2, OK the dialog script_snippets.txt (14)149
  150. 150. 1, Select the “returned” column in the view and right click 2, On the menu, select Insert Column150
  151. 151. 1, In the data, value property for the new column, set it to use acomputed value 151
  152. 152. 1, Enter the pictured code in the dialog which appears, as we’re doing a second DbLookup from the same view2, OK the dialog script_snippets.txt (15) 152
  153. 153. 1,In the view display properties, set the Maximum rows per page to 10 Save and close the custom control153
  154. 154. 1, Right click on the Custom Controls container 2, Select “New Custom Control...”154
  155. 155. 1, Enter “cc_home” as the name for the custom control2, OK the dialog 155
  156. 156. Click and drag a new “Tabbed Panel” Container Control onto the custom control 156
  157. 157. 1, Right click on the new tabbed panel2, Select “Append Tab” from the menuRepeat until there are five tabs 157
  158. 158. 1, Select the first tab using the outline pane2, Set the Label for the first tab to “Recent Rentals” 158
  159. 159. Repeat the process for each of the tabs so that we end up with the tabscalled:1, Recent Rentals2, Customers3, Movies4, Rental Stats5, Movies By Genre 159
  160. 160. 1, Select the Recent Rentals tab and then click and drag the “cc_recentrentals” custom control2, Drop it inside the Recent Rentals tab as picturedSave and close the custom control*We come back to the other tabs later. 160
  161. 161. 1, Open the “home” XPage and select cc_home from the custom controls pane on the right2, Drag and drop the control into the editable area of cc_container (the green dot)Save and Close and preview homeNotice the extra columns we added 161
  162. 162. Other Views 1, Right click on the Custom Controls container 2, Select new custom control 162
  163. 163. 1, Name the new custom control “cc_vwCustomer”2, OK the dialog 163
  164. 164. 1, In the custom control properties, go to the Data tab and click the Add, Domino View button164
  165. 165. 1, In the data properties, set the View name to “customers” 165
  166. 166. From the Container Controls pane, click and drag a new View control onto the custom control 1, Set the view to show data from the view data binding we just set up OK the dialog166
  167. 167. 1, Select the first column in the view 2, Set the first column to “Show values in this column as links” 3, Make it open the documents in read mode 4, Also add a checkbox next to each row (we’ll use this later to delete documents) Save and Close the Custom Control In the properties of the customer Notes Form, set the “Display XPage Instead” property to use the customer XPage.167
  168. 168. Right click on the Custom Controls container and select “New Custom Control...”168
  169. 169. 1, Call the new control “cc_vwMovie”2, OK the dialog 169
  170. 170. 1, In the custom control properties, go to the Data tab and click the “Add” button 2, Then select the “Domino View” option170
  171. 171. 1, In the “view1” data source, set the view name to “movies” 171
  172. 172. Select and drag a new View control onto the custom control from the container controls pane1, In the data source dialog,select “view1” as the datasource and then uncheckthe Movie Lookup columnas we don’t need to displayit.OK the dialog. 172
  173. 173. 1, Select the first column of the view 2, Check the “Show values in this column as links” box 3, Make the Documents open in read mode 4, Set the column to also display a check box which we can use for deletions later on Save and close the custom control In the properties of the movie Notes Form, set the “Display XPage Instead” property to use the movie XPage.173
  174. 174. Open the cc_home custom control1, Select the Customers tab in the outline and then pick the cc_vwCustomers custom control from the pane on the right2, Drag and drop the control inside the Customers tab of the tabbed panel 174
  175. 175. 1, Select the Movies tab in the outline and then pick the cc_vwMovies customcontrol from the pane on the right2, Drag and drop the control inside the Movies tab of the tabbed panelSave and close the custom control. 175
  176. 176. cc_navbar 1, Right click on the Custom Controls container 2, Select to create a “New Custom Control...” 1, Name the custom control “cc_navbar” 2, OK the dialog 176
  177. 177. Click and add five buttons, next to each other on the custom control177
  178. 178. 1, Select the first button2, Change it’s label to “Home”3, Repeat the process for each button so that their labels are: “New Rental”, “New Customer”, “New Movie” and “Delete Selected”Save the custom control 178
  179. 179. 1, Select the Home button 2, Go to the events for the button 3, In the onClick event, click the Add Action button179
  180. 180. 1, Set the action to Open the Home Page2, Make sure the checkbox is checked, to not validate or update data 180
  181. 181. 1, Select the New Rental button2, Go to the events for the button3, In the onClick event, click the Add Action button 181
  182. 182. 1, Set the action to Open Page 2, Set the page to open to “rental” 3, Set the Target Document to “New Document” 4, OK the dialog182
  183. 183. 1, Select the New Customer button and switch to the Events tab2, Click the Add Action... button 183
  184. 184. 1, In the dialog which appears, set the action to “Open Page” 2, Set the name of the page to open to “customer” 3, Set the target document to be a “New Document” 4, OK the dialog184
  185. 185. 1, Select the New Movie button and switch to the Events tab2, Click the Add Action... button 185
  186. 186. 1, In the dialog which appears, set the action to “Open Page” 2, Set the name of the page to open to “movie” 3, Set the target document to “New Document” 4, OK the dialog186
  187. 187. 1, Switch to the New Rental button properties2, Select the Visible property3, Set it to Computed Value 187
  188. 188. 1, In the dialog which appears, enter the pictured code 2, OK the dialog Repeat this process of setting the visibility for the New Custom, New Movie and Delete Selected buttons Save the Custom Control script_snippets.txt (16)188
  189. 189. Now we need to set the names of each view in our three view custom controls 1, Open cc_recentrentals and select the view control 2, Set it’s name to “rentalsview”, Save and Close 1, Open cc_vwCustomers and select the view control 2, Set it’s name to “customersview”, Save and Close 1, Open cc_vwMovies and select the view control 2, Set it’s name to “moviesview”, Save and Close 189
  190. 190. 1, Back in cc_navbar, select the “Delete Selected” button2, Switch to the events tab3, We want to insert a script in here, so switch to “Script Editor” and click the Open Script Dialog button 190
  191. 191. 1, Enter the code from the image in the Script Editor dialog. It uses the“getSelectedIds” method for each of the views that we enabled the checkboxes for.This returns an array of Note IDs that we can loop through to delete thedocuments.2, OK the dialogSave and close the custom control script_snippets.txt (17) 191
  192. 192. Open the cc_home custom control1, Select the first tab of the tabbed panel using the Outline pane2, In the onClick event of the tab, add a script which sets the sessionScope.TabIDto “tabPanel1”Repeat this process for each of the other tabs, incrementing the “tabPaneln” as yougoThis is needed sothe delete button incc_navbar knowswhich view to deletedocuments from script_snippets.txt (18) 192
  193. 193. 1, Open the home XPage and make sure that the XPage is selected in the outline. Select the Events tab for the XPage. 2, Find the Page -> beforePageLoad action 3, Select the script editor 4, Add the code shown. 5, On the Properties tab for the XPage Repeat this for the following XPages, replacing “home” with the relevant page name. movie, customer, rental & search 6, Set the Next page (success) to “home” and Next page (fail) to “Same Page” 7, Repeat for movie, customer and rental. (not search) 8, Save and Close each page.script_snippets.txt (19) 193
  194. 194. 1, Open the cc_container custom control and select the cc_navbar control from the right pane2, Drag the control into the navbar panel on the cc_container control3, The new buttons should now be inside the navbar panel as picturedSave and close the custom controlNow test that navigation is working and that the deletions work as well 194
  195. 195. Repeating Repeats 1, Right click on the Custom Controls container 2, Select the “New Custom Control...” option 195
  196. 196. 1, Name the new custom control “cc_moviesbygenre”2, OK the dialog 196
  197. 197. 1, Place the cursor in the custom control2, Select and drag a new repeat Container Control3, Drop the repeat control onto the Custom Control 197
  198. 198. 1, Select the new repeat control and open it’s properties 2, Set the Collection Name to “genre” 3, Set the Index Name to “genreindex”198
  199. 199. 1, Set the repeat iteration to Javascript and then click the Open Script Dialog button 199
  200. 200. 1, Enter the pictured code into the Script Editor dialog 2, OK the Dialog script_snippets.txt (20)200
  201. 201. 1, Select and drag a new computed field from the core controls pane2, Drop the new field inside the repeat control 201
  202. 202. 1, Select the new computed field and bring up it’s Properties.202
  203. 203. 1, Set the name of the computed field to “genre”203
  204. 204. 1, Select the value properties tab for the field 2, Set the data binding to use Javascript 3, Set the value of the Javascript to “genre” to use the variable we created in the repeat control204
  205. 205. 1, Switch to the source XML view of the custom control2, Add <h1> tags around the computed field we just created 205
  206. 206. 1, Switch back to the design view of the custom control2, Note that the genre field is now formatted as an <h1> block3, Select a new panel from the Container Controls Pane4, Drag and drop it next to the genre computed field 206
  207. 207. 1, Select the new panel 2, In the properties, name it “movies”207
  208. 208. 1, Select a new repeat control from the container controls2, Drag and drop it inside the movies panel 208
  209. 209. 1, In the new repeat properties set the Collection name to “movie”2, Set the Index Name to “movieindex”3, Set the Iteration to Javascript and then click the Script Editor dialog button script_snippets.txt (21) 209
  210. 210. 1, Enter the pictured script (which makes use of the first repeat’s variable name to perform a DBLookup) 2, OK the dialog210
  211. 211. 1, Drag a new Panel inside the second repeat2, In the panel properties set the name to “moviedetails” 211
  212. 212. 1, Select the Style properties for the panel 2, Set the Class name to “moviedetails”212
  213. 213. 1, Select a new link from the Core Controls pane2, Drag and drop it inside the panel we just added 213
  214. 214. 1, Select the new link’s properties 2, Name the link “movietitlelink” 3, Select the label and set it to be a computed value214
  215. 215. 1, In the Script Editor dialog which appears, enter the pictured code2, OK the dialog script_snippets.txt (22) 215
  216. 216. 1, Select the Events tab for the link 2, In the onClick event click the “Add Action...” button216
  217. 217. 1, In the dialog which appears, set the action to be “Open Page” 2, Set the page to open to be “movie” 3, Set the Target Document to “Open Document” 4, In the Document ID, select to compute the value217
  218. 218. 1, In the dialog which appears, enter the pictured code which get the UNID of the movie document which we are currently iterating over 2, OK the dialog script_snippets.txt (23)218
  219. 219. 1, Note that the Document ID is now “Computed” 2, OK the dialog219
  220. 220. 1, Switch to the source XML view of the custom control2, Wrap the link we just created with an <h2> tag3, Close the <h2> tag 220
  221. 221. 1, Drag a new Panel inside the second repeat2, Drop it after the movietitlelink we just created 221
  222. 222. 1, Select a new label from the Core Controls Pane2, Drop it inside the new panel we just created 222
  223. 223. 1, Note where the new label control is2, Drag another new label control next to it3, Select a new computed field and drag it in between the two new labels4, Drag on another computed field after the second label. 223
  224. 224. We should end up with the following:1, New Label2, New Computed Field3, New Label4, New Computed Field 224
  225. 225. 1, Select the first new label 2, Set the Label to be “Certificate:”225
  226. 226. 1, Select the first new computed field 2, Set the value to use Javascript Binding 3, Set the Javacript to use the pictured code which makes use of the second repeat variable “movie” script_snippets.txt (24)226
  227. 227. 1, Select the second new label 2, Set the label to be “Date of Release:”227
  228. 228. 1, Select the second new computed field 2, Set the value of the field to use Javascript data binding 3, Set the javascript to use the pictured code script_snippets.txt (24)228
  229. 229. 1, Switch to the source XML view of the custom control2, Wrap the first label / computed field pair in <span> tags3, Wrap the second label / computed field pair in <span> tags 229
  230. 230. Save and close the custom control Add cc_moviesbygenre to cc_home into the Movies By Genre tab panel Preview the home XPage and switch to the Movies By Genre tab Note the “categorization” of the Genres and then each movie in the Genre formatted properly230
  231. 231. 231
  232. 232. Agenda  Welcome to LOANr  What are XPages?  Layout and UI  Data Structure  Data CRUD  Sunday Bonus Section ;o)  Questions  Appendices 232
  233. 233. Cool Stuff - Lightbox 1, Open the cc_movie custom control1, Select and drag a new Repeatcontrol from the ContainerControls pane2, Drop it below the main datatable 233
  234. 234. 1, Go to the repeat control properties 2, Set the iteration to use Javascript and then select the Script Editor window button1, In the script editor enter the picturedcode which gets a list of attachment namesfrom the document2, OK the dialog script_snippets.txt (29) 234
  235. 235. 1, Set the collection name to “imagename” so that we can refer to it later1, Select and drag a computed field fromthe Core Controls pane2, Drop it inside the repeat control 235
  236. 236. 1, Select the new computed field 2, Name it “image” 3, Set its content type to HTML1, Select the Value properties tab2, Set the Data binding to Javascript3, Click the Script Editor button 236
  237. 237. 1, Enter the pictured code which builds an <a> tag with a URL to the imagename repeat variable 2, OK the dialog1, Add a line break after the computedfield inside the repeat control script_snippets.txt (30) 237
  238. 238. 1, Select the Custom Control “All Properties” pane 2, In the resources section add a new xp:dojoModule resource1, Call the dojoModule name“dojox.image.Lightbox” 238
  239. 239. 1, Select the Custom Control “Resources” tab 2, Click the “Add Style Sheet...” button1, Select the “lighbox.css”2, OK the dialog boxSave and close the Custom ControlPreview the home.xsp and open a movie 239
  240. 240. Cool Stuff - Charts 1, Right click on the script libraries container 2, Select the New Script Library option 1, Enter the name as “jsPieChart” 2, Set the type of the Script Library to be Javascript 3, OK the Dialog 240
  241. 241. Set the content of the script library to use the pictured codeThe save and close it 1, Right click on the custom controls container 2, Select the New Custom Control option script_snippets.txt (31) 241
  242. 242. 1, Set the name of the custom control to be “cc_rentalstats” 2, OK the dialog1, Switch to the source XML view ofthe custom control2, Enter the <h2> and <div> htmlpictured script_snippets.txt (32) 242
  243. 243. 1, In the custom control properties, select Resources and then click the “Add Script Library” button1, From the dialog, select the “jsPieChart” librarywhich we just created2, OK the dialog 243
  244. 244. 1, Still in the custom control properties, go to All Properties and locate the “resources” section 2, Click the “+” button and select the xp:dojoModule option1, In the new properties whichappear, enter the name“dojox.charting.Chart2D” 1, In the source XML of the custom control you should see the dojoModule XML tags appear 244
  245. 245. 1, Copy and paste the <xp:dojoModule> elements 6 times and change the name property for each to match the screenshot 2, Copy and past the <xp:script> element once and set the src property to “/movies.js”Movies.js is a “classic” page designelement which renders a JSONJavascript object to the browserThis already exists in theLOANr-START.nsfSave and close the Custom Control script_snippets.txt (33) 245
  246. 246. 1, Open the “cc_home” custom control1, Select the Rental Stats tab in theoutline and then drag the“cc_rentalstats” custom controlfrom the Controls pane into this tab.(2)Save and close the custom controlPreview home.xsp in your browser 246
  247. 247. Preview the home XPage, on the Rental Stats tag you should see a pie chart247
  248. 248. Cool Stuff - Searching 1, Right click on the custom controls container 2, Select “New Custom Control”1, Name the custom control “cc_search”2, OK the new custom control dialog 248
  249. 249. 1, Add some title text: “Search results for:” 2, Select and Drag a new Computed Field 3, Drop the new field to the right of the title text1, Select the computed field2, Switch to the Value properties tab3, Set the binding to use “Advanced”4, Use a Scoped Variable5, Use a Session Scope Parameter6, Set the variable name to be “query” 249
  250. 250. 1, Select a new View container control 2, Drag and drop it to just below the search results title1, In the dialog which appears, select to show the datafrom a Domino View2, Select the view called “search”3, We want all the columns so just OK the dialog 250
  251. 251. 1, With the new view selected, go to it’s All Properties tab 2, In the data -> data -> search property select the “Compute Value” option1, In the script editor dialog, enter “sessionScope.query”2, OK the dialog script_snippets.txt (26) 251
  252. 252. 1, Select the Description column of the view control 2, Check the “Show values in this column as links” checkbox and make it open in read mode Save and Close the Custom Control1, Right click on theXPages container2, Select “New XPage...” 1, Enter the Name as “search” 2, OK the dialog 252
  253. 253. 1, Select the cc_container custom control from the controls pane on the right 2, Drag and drop it onto the new XPage1, Select the cc_search customcontrol from the controls paneon the right2, Drag and drop it into theeditable area (the green dot) ofthe cc_container customcontrolSave and Close the XPage 253
  254. 254. 1, Open the cc_navbar custom control1, Switch to the Source XML view2, Create a new <div> before theexisting content. Give it an id of“search” and style it to float right,as pictured 254
  255. 255. 1, Select the Edit Box core control2, Drag it into the div you just created (make sure it is inside using the outline pane) 1, Name the new Edit Box “searchbox” 255
  256. 256. 1, Select the data properties tab2, Change the binding to Advanced3, Set the binding to use a Scoped Variable - Session Scope4, In the variable name enter “query”5, Set the default value to be “Search...” 1, Select the events tab 2, Select the onblur focus event 3, Select the client side element of the event 4, Switch to Script Editor mode script_snippets.txt (27) 5, Insert the pictured code 256
  257. 257. 1, Select the onfocus event2, Select the client side version of the event3, Switch to the script editor for the event4, Insert the pictured code 1, Select the Button Core Control 2, Click and Drag it to the right of the searchbox field we just added script_snippets.txt (28) 257
  258. 258. 1, Set the label of the new button to “Go!” 1, Select the events tab for the button 2, In the onclick event, click the “Add Action” button 258
  259. 259. 1, Set the action to be “Open Page” 2, Select the name of the page to open to be “search” 3, OK the dialog Now save and test the search function.1, Enter a search term and click“Go!”2, The search results are displayed 259
  260. 260. Other XPages SessionsTitle Session ID Speakers Philippe RiandAD106 XPages Just Keep Getting Better Eamon Muldoon Steve CastledineAD107 Enhance Your Existing Applications With XPages Stephan Wissel Martin DonnellyAD108 XPages In The IBM Lotus Notes Client - A Deep Dive Teressa Monahan Mark GarganAD109 XPages Performance & Scalability Tony McGuckin Philippe RiandAD110 Unleash The Power Of XPages Maire Kehoe Harnessing The Power Of Server-Side JavaScript and Other Tim TripconyAd111 Advanced XPages Techniques Stephan Wissel Declan LynchBP207 Make Your XPages Apps “Pop!” With CSS And Themes David Leedy 260
  261. 261. IBM RedBook about XPages - http://tiny.cc/XPagesRedBook 261
  262. 262. Agenda  Welcome to LOANr  What are XPages?  Layout and UI  Data Structure  Data CRUD  Questions  Appendices 262
  263. 263. Don’t forget your fill out your evals:SHOW112 - How to build an XPages application from start to finish Tim Clark Matt White tim_clark@uk.ibm.com matt.white@elguji.com http://blog.tc-soft.com http://mattwhite.me Twitter : @TimsterC Twitter : @mattwhite 263
  264. 264. Agenda  Welcome to LOANr  What are XPages?  Layout and UI  Data Structure  Data CRUD  Questions  Appendices 264
  265. 265. APPENDIXINSTALL & CONFIGURATIONIn this section, youll find instructions for setting up your environment to use the demo files weve provided for youYou will also find features that are in the LOANr-FINAL.nsf that we did not have time to show you at Lotusphere 2010These are the cool bits we really wanted to get to, but just didnt have time. They are here for your reference. 265
  266. 266. Install & Configuration (i)•Install IBM® Lotus® Notes® 8.5.1 Client, Designer & Administrator•Go and download LOANr.zip from ftp://lotusphere.turtleweb.com •login: show112 pw: ls2010•Expand out the zip file and place the LOANr-START.nsf & LOANr-FINAL.nsf files into your Notes data directory e.g. ..notesdataLS2010•Place the script_snippets.txt in an easy to find directory, you might need itmore than you think. 266
  267. 267. Install & Configuration (iii) Open IBM Lotus Domino Designer and open LOANr-START.nsf 267
  268. 268. Install & Configuration (ii)Open the Administrator client and sign the databases 268

×