XPages101 - Building an XPages app - Lotusphere 2011

  • 440 views
Uploaded on

Matt White and Tim Clark

Matt White and Tim Clark

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
440
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. © 2011 IBM CorporationSHOW106XPages101 - How to build asimple XPages applicationMatt White | Lead Developer | Elguji SoftwareTim Clark | Tech Sales | IBM Lotus
  • 2. © 2011 IBM Corporation 2Agenda● Introductions● Our Sample App● The starting point● The end point● Adding a UI to XPages using OneUI● Creating our views● Creating the data entry screens● Navigation● Making use of the Extension Library● Questions
  • 3. © 2011 IBM CorporationMatt White• Lead Developer at Elguji Software• IdeaJam• IQJam• LinkJam• I run XPages101.net - an XPages onlinetraining site• Independent consultant working mainly withXPages and Java development projects withthe London Developer Co-op3
  • 4. © 2011 IBM CorporationTim Clark4• Lotus Software Technical Sales• 17 years @ Lotus/IBM• Smartsuite --> Notes Support• Business Partner Technical Enablement• I co-host the X Cast with Paul Withers andDavid Leedy• Podcast all about XPages• www.thexcast.net• Helped create the XPages tutorial onDeveloper Works - Domino Designer Wiki
  • 5. © 2011 IBM CorporationHow this presentation works• DON’T PANIC!• There are a *lot* of slides, but they are for you to download and use next weekwhen you go home:• http://bit.ly/ls11_show106• Slides will stay on the right screen, the left screen will show us coding live• To save lots of typing, we have prepared:• The starting point database• The finishing point database• Code Snippets• The slide deck itself• Everything we are presenting is based on standard 8.5.2 IBM Lotus DominoDesigner and IBM Lotus Domino• Except that we will also be using the Extension Library from OpenNTF whichwe will talk about later on• DONT’ PANIC!5
  • 6. © 2011 IBM CorporationOur Sample App - LOANr• We run a video rental business (VHS only of course!)• So we have Customers, Movies and Rentals to keep track of• It’s been run as an IBM Lotus Notes client app for ages• But we want to upgrade• DEMO6
  • 7. © 2011 IBM CorporationGet Started• Copy the databases from the download into ...notesdata directory on yourclient or the ...dominodata directory on your Domino server• Open Domino Designer• From the File menu choose the Open --> Lotus Notes Application7
  • 8. • From the Open Dialog, locate the databases which you copied to your datadirectory• Open the starting point database© 2011 IBM CorporationGet Started8
  • 9. © 2011 IBM CorporationGet Started• The database will be opened with the database navigator on the left:9
  • 10. © 2011 IBM CorporationLayout and UI• Right click on the Custom Controls section in the database navigator• Select New Custom Control from the menu• In the dialog which appears name the custom control “layout”• OK the dialog10
  • 11. © 2011 IBM CorporationLayout and UI• In the new custom control, switch to the Source view11
  • 12. © 2011 IBM CorporationLayout and UI• Paste in the Script Snippet 1 whichmakes up the HTML structure for oursite• <div id="lotusFrame"><div id="lotusBanner"></div><div id="lotusTitleBar"><div class="lotusRightCorner"><div class="lotusInner"><div id="container_search"><!-- Search Goes Here --></div><span class="clear"></span></div></div></div><div id="lotusPlaceBar"><div class="lotusRightCorner"><div class="lotusInner"></div></div></div><div id="lotusMain"><div id="lotusColLeft"><div class="lotusMenu" role="menu"><div class="lotusBottomCorner"><div class="lotusInner"><ul class="lotusIcons"><!-- MenuOptions Go Here --></ul></div></div></div><span class="clear"></span></div><div id="lotusContent"><div id="container_formcontent"><!-- Content goes here --></div></div></div><div id="lotusfooter"><div id="lotusFooter" class="lotusFooter">¬¨¬© Tim Clark and Matt White 2011</div></div></div>12Script Snippet 1
  • 13. © 2011 IBM CorporationLayout and UI• Switch back into Design Mode• Using the Outline pane, locate the lotusInner div inside the title bar div13
  • 14. © 2011 IBM CorporationLayout and UI• In the controls pane, select the image control and drag it inside the div we justlocated14
  • 15. © 2011 IBM CorporationLayout and UI• A dialog box will appear after dragging in the image control• Select the LOANR-tightcrop-transbg.png image from the list of images in thedatabase• OK the dialog15
  • 16. © 2011 IBM CorporationLayout and UI• Using the Outline pane, make sure that theimage is located in the correct position justinside the div16
  • 17. © 2011 IBM CorporationLayout and UI• Select the image we just added using the outlinepane• Set the height property of the image to 42 pixels17
  • 18. © 2011 IBM CorporationLayout and UI• Switch to the All Properties tab of the image properties and locate the styleproperty.• You will see the 42px we just added, edit the style and add “; padding: 3px;” toit18
  • 19. © 2011 IBM CorporationLayout and UI• Now using the Outline pane, location the lotusInner div inside the lotusPlaceBardiv19
  • 20. © 2011 IBM CorporationLayout and UI• After locating that div, go to the Custom Control properties and then theProperty Definition tab• Click the new Property button• Set the name of the new property to “pageTitle”20
  • 21. © 2011 IBM CorporationLayout and UI• Now in the controls pane, select the Computed Field control• Drag the control inside the div we just selected21
  • 22. © 2011 IBM CorporationLayout and UI• Set the name of the computed field to pageTitle22
  • 23. © 2011 IBM CorporationLayout and UI• In the Value tab of the properties of the computed field set the BindData selected to use “JavaScript”• Click the code window button next to the text box23
  • 24. © 2011 IBM CorporationLayout and UI• In the dialog which appears, use the Global Objects library to locate thecustom property which we just created• Expand compositeData and then double click on the pageTitle entry• The line of code will be automatically inserted into the code window for you• OK the dialog24
  • 25. © 2011 IBM CorporationLayout and UI• In the All Properties of the computed field, locate the style property• Set the style to use script snippet 2 as picturedfloat: left; font-size: 1.4em; font-weight: normal; line-height: 2em; padding: 2px 0pt 0pt 20px;• Set the styleClass property to “title”25Script Snippet 2
  • 26. © 2011 IBM CorporationLayout and UI• Locate the Basics tagName property and set this to “span”26
  • 27. © 2011 IBM CorporationLayout and UI• In the source view of the custom control locate the menu options sectionof the HTML• Add the pictured <li> tags to the HTML27
  • 28. © 2011 IBM CorporationLayout and UI• Select the Link control from the Controls pane• Drag a new link inside the <li> tags we just created• Notice the mouse cursor indicating where the control will be dropped28
  • 29. © 2011 IBM CorporationLayout and UI• In the Link properties set the name of the link to homelink• Set the label to Home• Set the link type to “Open Page”• Set the xPage option to “home”29
  • 30. © 2011 IBM CorporationLayout and UI• In the link value property, set the value to “/home.xsp”• Using the same technique, drag an image control inside the <xp:link> tagswe just created30
  • 31. © 2011 IBM CorporationLayout and UI• In the dialog which appears when you drag the image control onto the pageselect “Use an image placeholder”• OK the dialog31
  • 32. © 2011 IBM CorporationLayout and UI• In the source XML set the url property of the image to use (Script Snippet 3):“/.ibmxspres/domino/oneuiv2/images/iconHome16.png”32Script Snippet 3
  • 33. © 2011 IBM CorporationLayout and UI• Switch to the Design view of the custom control• Use the outline pane to locate thecontainer_formcontent div inside the lotusContentdiv in the HTML of the custom control33
  • 34. © 2011 IBM CorporationLayout and UI• Once the div is located, select the Editable Area controlfrom the Control pane• Drag the Editable Area onto the custom control into the divwe just located34
  • 35. © 2011 IBM CorporationLayout and UI• The Editable Area should look like thisnow:35
  • 36. © 2011 IBM CorporationLayout and UI• Save the Custom Control• Go to the XPages section of the database navigator and right click on theheading• Select to create a new XPage• In the dialog which appears enter the nameof the XPage as “home”• OK the dialog36
  • 37. © 2011 IBM CorporationLayout and UI• In the XPage, select the layout custom control from the Controls pane(on the right hand side of the screen)• Drag the layout control onto the XPage so it looks like this:37
  • 38. © 2011 IBM CorporationLayout and UI• In the properties of the custom control on the XPage, go to the CustomProperties section• Set the pageTitle to “Home”• Save the XPage38
  • 39. © 2011 IBM CorporationLayout and UI• Go to the Resources Themes section of the database navigator• Right click and select the new Theme option• In the dialog which appears, name the theme “blue”• OK the dialog39
  • 40. © 2011 IBM CorporationLayout and UI• Make sure you are in Source mode for the Theme• In the XML which appears, set the “extends” property to “oneui”• Save the theme40
  • 41. © 2011 IBM CorporationLayout and UI• Open the Application Properties design element• Go to the XPages tab• Set the Application Theme to “blue”• Save the Application properties41
  • 42. © 2011 IBM CorporationLayout and UI• Go back to the home XPage• Select the Preview in web browser button on the toolbar• You should see something like this:42
  • 43. © 2011 IBM CorporationMovies View• To see some of the data we need to recreate the database views• Create a new custom control called “view_movies”43
  • 44. © 2011 IBM Corporation• Now drag and drop a view control onto the blank custom control44Movies View
  • 45. © 2011 IBM Corporation• Pick the view you want to show and the columns• Here we want the “Movies” view and all the columns• OK the dialog45Movies View
  • 46. © 2011 IBM CorporationMovies View• Using the outline select the view and in Properties select Display• Set the number of rows to display to be 546
  • 47. © 2011 IBM CorporationMovies View• Again using the outline, select viewColumn1 and set the values to be links• This makes the values clickable and it uses the stored form to decide whichform to open• Save the custom control47
  • 48. © 2011 IBM CorporationMovies View• Informational (this has already been done in the database)• The Notes form has already been configured to say that when viewed on theweb use a specified XPage• This time it’s “movie”48
  • 49. © 2011 IBM CorporationMovies View• Now we need to create an XPage to use the custom control on• Give it a name of “movies”• OK the dialog49
  • 50. © 2011 IBM CorporationMovies View• Drag the layout custom control onto the XPage• Now drag the view_movies custom control onto the facet_1 green spot50
  • 51. © 2011 IBM CorporationMovies View• Edit the “layout” Custom Properties• Set the pageTitle to “Movies”• Save the XPage51
  • 52. © 2011 IBM CorporationMovies View• Now that the we have created the XPage, we can go back to the custom controland create a button to make a new movie document.• Open the Custom Control “view_movies” that you have just been working on• drag a button to the top of the custom control52
  • 53. © 2011 IBM CorporationMovies View• Change the button Label to be “Create Movie”53
  • 54. © 2011 IBM CorporationMovies View• On the Events tab, click the Add Action button54
  • 55. © 2011 IBM CorporationMovies View• Action = “Open Page”• Name of page to open = “movie” (you will have to type this, we’ll create it later)• Target document = “New Document”• Click OK• Save the Custom Control55
  • 56. © 2011 IBM CorporationMovies View• in the source code view• change the name to be “/movie.xsp”56
  • 57. © 2011 IBM CorporationMovies View• Preview the XPage in the browser and it should look like this(without all the menu options)57
  • 58. © 2011 IBM CorporationCustomers View• Another view but a different style of creating it• Create a custom control called “view_customers”• OK the dialog58
  • 59. © 2011 IBM CorporationCustomers View• This view is going to use a repeat panel• Drag a repeat control onto the blank custom control59
  • 60. © 2011 IBM CorporationCustomers View• Now we need to get some data into the repeat control• The properties panel shows us a simple data binding so we will set that to the“Customers” view.• OK the dialog60
  • 61. © 2011 IBM CorporationCustomers View• We also need to give the data set a name so that we can use it later on• Call the collection name “rowData”61
  • 62. © 2011 IBM CorporationCustomers View• Now drag and drop a panel control into the repeat control62
  • 63. © 2011 IBM CorporationCustomers View• Into that panel we are going to drop 1 link and 2 computed fields63
  • 64. © 2011 IBM CorporationCustomers View• For the link control we are going to compute the label. This will be the first namefield from the document on the current row of the repeat control.• In the JavaScript editor enter (Script Snippet 4):rowData.getColumnValue(“firstname”)• OK the dialog64Script Snippet 4
  • 65. © 2011 IBM CorporationCustomers View• To make the first name do something we add an OnClick Event to it• A simple action to open the corresponding document• In the Events tab click “Add Action”• Set the Action to be “Open Page”• Name of page to “customer” (you have to type this in)• Target should be “Open document”• Compute the Document ID65
  • 66. © 2011 IBM CorporationCustomers View• Type the following into the JavaScript editorrowData.getUniversalID()• Here we are using rowData again to get the contents of the current item in therepeat control• OK the dialog66Script Snippet 5
  • 67. © 2011 IBM CorporationCustomers View• We have not created the customer XPage yet so we need to make sure theaction XML is properly formed or it will break later on• Switch to the source mode and edit the action we just created• Make the name=”customer” read like the example below:• name=”/customer.xsp”• Switch back to the design mode67
  • 68. © 2011 IBM CorporationCustomers View• Now for the 2 computed fields• They are both simple data bindings to the fields “lastname” and “postcode”• N.B. we are using the rowData as the data source• Space out the fields as you like and put a separator between the two computedfields• Also need to add a Line Feed at the end of the row, or the data will appear allon 1 line• Save the Custom Control68
  • 69. © 2011 IBM CorporationCustomers View• Create a new XPage called “customers”• OK the dialog69
  • 70. © 2011 IBM CorporationCustomers View• First, drag on the layout custom control• Next, drag the view_customers custom control onto the facet_1 green spot sothat it looks like the image on the right70
  • 71. © 2011 IBM CorporationCustomers View• Edit the “layout” Custom Properties• Set the pageTitle to “Customers”• Save the XPage71
  • 72. © 2011 IBM CorporationCustomers View• Preview in a browser and it should look like this72
  • 73. © 2011 IBM CorporationRentals View• Create a new custom control called “view_rentals”73
  • 74. © 2011 IBM CorporationRentals View• Drag a View control onto the custom control74
  • 75. © 2011 IBM CorporationRentals View• Select the “Rentals” view• De-select the returned column• OK the dialog75
  • 76. © 2011 IBM CorporationRentals View• Select the view in the outline and then from All Properties set the Var to be“rentalRow” (this is like we did for the repeat panel)• Also set the Maximum rows to be 1076
  • 77. © 2011 IBM CorporationRentals View• Select the first column and set the values to be links77
  • 78. © 2011 IBM CorporationRentals View• In this view we are going to add 2 columns to do some @dblookups in• Right click on the first column and click “Append Column”• Right click in the second column and click “Insert Column”78
  • 79. © 2011 IBM CorporationRentals View• Click in the new second column and set the Data to be Computed Value• Use the JavaScript Editor button to enter the @dblookup79
  • 80. © 2011 IBM CorporationRentals View• Enter the following @functions to lookup the rentalcustomerid and find thecustomer name from the lookup view:@Left(@DbLookup(@DbName(),"lookupcustomer",rentalRow.getColumnValue("Rental Customer"),5), "|");• Take special care of the upper and lower case in @functions• OK the dialog80Script Snippet 6
  • 81. © 2011 IBM CorporationRentals View• Enter the following @function into the 2nd new column Data Computed Value• @Left(@DbLookup(@DbName(),"lookupmovies",rentalRow.getColumnValue("Movie rented"),3), "|");• This @function returns the movie name• OK the dialog• Save the Custom Control81Script Snippet 7
  • 82. © 2011 IBM CorporationRentals View• Create a new “rentals” XPage• Drag on the “layout” custom control• Add the “view_rentals” custom control to the facet_1 green spot• OK the dialog82
  • 83. © 2011 IBM CorporationRentals View• Edit the “layout” Custom Properties• Set the pageTitle to “Rentals”• Save the XPage83
  • 84. © 2011 IBM CorporationRentals View• It should look like this when you preview the XPage84
  • 85. © 2011 IBM CorporationCustomer Form• Right click on the Custom Controls section in the database navigator• Select “New Custom Control” from the menu• In the dialog which appears, call the new custom control “form_customer”85
  • 86. © 2011 IBM CorporationCustomer Form• In the Custom Controls properties pane, go to the Data tab• Click the “Add” button• Select “Domino Document” from the list86
  • 87. © 2011 IBM CorporationCustomer Form• Set the Form of the Data Source to “customer”• Leave the Data Source Name as “document1”• Set the “Run Form Validation” option to “On document save”87
  • 88. © 2011 IBM CorporationCustomer Form• Select the data palette tab in Designer and make surethe “Select Controls Dialog Box” is enabled• Now select the following fields from the Data sourcelist:– firstname– lastname– Address1– Address2– Address3– AddrCity– postcode– country– telephone– email– dateofbirth• Drag the fields onto the custom control body
  • 89. © 2011 IBM CorporationCustomer Form• The Select Data Bound Controls dialogwill appear• Set the country field to use a combobox• Make sure Date of birth is set to be aDate Time Picker• Edit the field labels to add spacesbetween words• Make sure the “Add Submit button togenerated code” checkbox is checked• Make sure the “Add messages controlto generated code” checkbox ischecked• OK the dialog
  • 90. © 2011 IBM CorporationCustomer Form• The list of fields will be added to the custom control in a table• Select the first name field and add a required validation message• Select the last name field and add a required validation message90
  • 91. © 2011 IBM CorporationCustomer Form• Select the country field and go to the Values tab of the properties pane• Click the Add Formula Item button• In the dialog box which appears enter:• @DbLookup(@DbName(), “vwRefData”, “Countries”, 2)• OK the Dialog box91Script Snippet 8
  • 92. © 2011 IBM CorporationCustomer Form• Now Click the “Add Item” button• In the label of the new item type “Please Select a Country”• In the value, type a single space “ “92
  • 93. © 2011 IBM CorporationCustomer Form• Now use the list ordering button to move the new item to the top of the list93
  • 94. © 2011 IBM CorporationCustomer Form• Open the All Properties tab for the country field• Go to the Data Validators section• Click the “+” button and select “xp:validateExpression” from the list94
  • 95. © 2011 IBM CorporationCustomer Form• In the message property of the new validator, set the value to “Please select acountry”95
  • 96. © 2011 IBM CorporationCustomer Form• Click the blue diamond next to the expression property and select“Compute Value”96
  • 97. © 2011 IBM CorporationCustomer Form• In the dialog which appears enter the pictured code (Script Snippet 9)• OK the dialog97Script Snippet 9
  • 98. © 2011 IBM CorporationCustomer Form• Select the postcode field• Go to the All Properties of the field on the properties pane• Navigate to the Data Validators section• Click the “+” button and select the “xp:validateConstraint” option98
  • 99. © 2011 IBM CorporationCustomer Form• In the regex property set the value to:(GIR 0AA|[A-PR-UWYZ]([0-9]{1,2}|([A-HK-Y][0-9]|[A-HK-Y][0-9]([0-9]|[ABEHMNPRV-Y]))|[0-9][A-HJKPS-UW]) [0-9][ABD-HJLNP-UW-Z]{2})http://en.wikipedia.org/wiki/Postcodes_in_the_United_Kingdom#Validation• In the message property set the value to “Please enter a valid post code”99Script Snippet 10
  • 100. © 2011 IBM CorporationCustomer Form• From the Core Control panel, select the Button control• Drag a new button onto the custom control next to the Submit button• Set the label of the new button to “Cancel”100
  • 101. © 2011 IBM CorporationCustomer Form• Change the button type to “Cancel”101
  • 102. © 2011 IBM CorporationCustomer Form• Select the Submit button and click the blue diamond next to the Visible property• Select “Compute Value” from the list• In the dialog which appears enter:document1.isEditable()• OK the dialog box102Script Snippet 11
  • 103. © 2011 IBM CorporationCustomer Form• Repeat the process for the Cancel button103
  • 104. © 2011 IBM CorporationCustomer Form• Select and drag another new button from the Core Controls list• Drop the new button next to the Cancel button• Set the label of the new button to “Edit”104
  • 105. © 2011 IBM CorporationCustomer Form• Select the blue diamond menu from the Visible property of the Edit button• Select Compute Value from the menu• In the dialog which appears enter: !document1.isEditable()• OK the dialog105Script Snippet 12
  • 106. © 2011 IBM CorporationCustomer Form• Switch to the events tab of the Edit button• In the Server tab of the onClick event, click the “Add Action” button• In the dialog which appears, set the action to “Change Document Mode”• Then set the Document Mode to “Edit Mode”• OK the dialog• Save and close the custom control106
  • 107. © 2011 IBM CorporationCustomer Form• Right click on the XPages section of the database navigator and select theNew XPage option• In the dialog which appears, name the XPage “customer”• OK the dialog107
  • 108. © 2011 IBM CorporationCustomer Form• Drag the layout custom control from the Custom Controls section onthe right onto the XPage108
  • 109. © 2011 IBM CorporationCustomer Form• Drag the form_customer custom control into the space where there is a greendot (the editable area)• Set the pageTitle property to “Customer”• Your XPage should look something like this now:109
  • 110. © 2011 IBM CorporationCustomer Form• In the XPage properties, set the next page (success or cancel) property to“home”• Save and preview the XPage in the browser110
  • 111. © 2011 IBM CorporationCustomer Form• In the browser, try and save the XPage and notice that the validation isrunning on the client side111
  • 112. © 2011 IBM CorporationCustomer Form• Switch back to Domino Designer and open the Application Properties designelement• Open the XPages tab and set the Client Validation to “Off”• Save the Properties112
  • 113. © 2011 IBM CorporationCustomer Form• Test the validation again and notice it is now run on the server side• Test the post code validation• Try TW999 ZQT (it’s invalid)• Try TW18 3AG (it’s valid)113
  • 114. © 2011 IBM CorporationRental Form• In the database navigator, right click the Custom Controls section• Select “New Custom Control” from the menu• In the dialog, enter “form_rental”• OK the dialog114
  • 115. © 2011 IBM CorporationRental Form• In the Data tab of the custom control properties• Click the Add... Domino Document option• Set the form of the data binding to “rental”• Set the Run Form Validation option to “On Document Save”115
  • 116. © 2011 IBM CorporationRental Form• In the Data Source pane select the document1 data source• Drag all the fields onto the Custom Control• In the dialog which appears set the Rental Customer to be a Combo Box• Set the Rental Movie to be a Combo Box• Check the Add Submit button option• Check the Add Messages option• OK the dialog116
  • 117. © 2011 IBM CorporationRental Form• In the Values Properties section of the Customer Combo Box• Click the Add Item button• Set the label of the new item to “Please Select a Customer”• Set the value of the new item to “ ” (a single space)117
  • 118. © 2011 IBM CorporationRental Form• Click the “Add Formula Item...” button• In the dialog which appears enter: (Script Snippet xxx)@DbColumn(@DbName(), “LookupCustomer”, 5).sort();• OK the dialog118Script Snippet 13
  • 119. © 2011 IBM CorporationRental Form• In the Values Properties for the Movie Combo Box• Click the Add Item button• Set the Label of the new item to “Please Select a Movie”• Set the Value of the new item to “ “119
  • 120. © 2011 IBM CorporationRental Form• Click the Add Formula Item button• In the dialog which appears enter: (Script Snippet xxx)@DbColumn(@DbName(), “LookupMovies”, 3).sort();• OK the dialog120Script Snippet 14
  • 121. © 2011 IBM CorporationRental Form• In the loan date control go to the Data properties• Click the blue diamond control next to the default value field and select“Compute value”• In the dialog which appears enter: (Script Snippet 15)@Today();• OK the dialog121Script Snippet 15
  • 122. © 2011 IBM CorporationRental Form• Delete the returned edit box control• In it’s place drag in a new Check Box control• Set the label of the new control to “Returned”122
  • 123. © 2011 IBM CorporationRental Form• In the data properties for the control• Set the Data source to “document1”• Set the Bind To to “returned”• Set the value when checked to “yes”• Set the value when uncheck to “no”• Save the Custom Control123
  • 124. © 2011 IBM CorporationRental Form• Select the Panel control from the Control Pane• Drag a new Panel onto the top of the custom control (above the existingcontent)124
  • 125. © 2011 IBM CorporationRental Form• In the All Properties section of the new panel• Go to styling style• Enter “float: right;”• The panel should move to the right of the screen125
  • 126. © 2011 IBM CorporationRental Form• In the Data Properties of the panel• Click the Add... Domino Document button• Set the form of the data binding to “customer”• Set the Default Action to “Open Document”• Click the Compute Value option for the Document ID property126
  • 127. © 2011 IBM CorporationRental Form• In the dialog which appears enter the pictured code (script snippet 16)• OK the dialog127Script Snippet 16
  • 128. © 2011 IBM CorporationRental Form• In the All Properties section of the Panel• Go to the data data dominoDocument section• Set the ignoreRequestParams property to true128
  • 129. © 2011 IBM CorporationRental Form• In the Data Source pane select document2 from the data source list• Select all of the fields• Drag them inside the panel we just added to the custom control• In the dialog which appears make sure that we do not add a submit button orerror messages• OK the dialog129
  • 130. © 2011 IBM CorporationRental Form• The Custom Control should now look like this:130
  • 131. © 2011 IBM CorporationRental Form• Select the panel we just added using the outline control• Set the name of the panel to “customerdetailspanel”131
  • 132. © 2011 IBM CorporationRental Form• Select the rentalcustomerid field• Go to the onChange event and set the server side event to use the Script Editor• Enter the following code (Script Snippet 17):document1.getDocument(true);132Script Snippet 17
  • 133. © 2011 IBM CorporationRental Form• In the Server Options section of the onChange event• Set the options to Partial Update• Click the Select Element button• Choose “customerdetailspanel” from the list• OK the dialog133
  • 134. © 2011 IBM CorporationRental Form• Select the table inside the customerdetailspanel• In the table properties, set the Visible property to be computed• In the dialog which appears enter:!document2.isNewNote()• OK the dialog• Save the Custom Control134Script Snippet 18
  • 135. © 2011 IBM CorporationRental Form• In the XPages section of the database navigator, right click• Select “New XPage” from the menu• Name the new XPage “rental”• OK the dialog135
  • 136. © 2011 IBM CorporationRental Form• Drag the layout custom control onto the XPage• Drag the form_rental custom control into the editable area of the XPage (thegreen dot)• In the Custom Properties of the layout custom control set the pageTitle propertyto “Rental”136
  • 137. © 2011 IBM CorporationRental Form• In the XPage Properties set the Next Page to open “home”• Save the XPage• Preview it in the browser137
  • 138. © 2011 IBM CorporationRental Form• When the new rental is loaded, the customer details are hidden• When a customer is selected the details appear on the right side of the screen138
  • 139. © 2011 IBM CorporationMovie Form• Create a new custom control called “form_movie”139
  • 140. © 2011 IBM CorporationMovie Form• Create a data binding to the Domino Document “Movie”• Set the validation to run for “Both”(This allows the computed when composed fields to function)140
  • 141. © 2011 IBM CorporationMovie Form• Drag the fields shown from the data pane and drop them onto the blank customcontrol141
  • 142. © 2011 IBM CorporationMovie Form• Edit the Labels to be as highlighted in yellow• Change the controls for the Certificate andGenre to be combo boxes• Change the control for Cover image to be aneditbox(This is going to be deleted anyway)• Add the submit button check mark• Finally add the error messages control checkmark• Click OK142
  • 143. © 2011 IBM CorporationMovie Form• Select the movieid1 Edit Box from the outline• Set it to be “read only”143
  • 144. © 2011 IBM CorporationMovie Form• In the Values for the “certificate” field click Add Formula Item and use thefollowing JavaScript: (Script Snippet 19)@DbLookup(@DbName(),"vwRefData","Certificate",2)• Also for the Values for the “genre” field click Add Formula Item and use theJavaScript below: (Script Snippet 20)@DbLookup(@DbName(),"vwRefData","Genre",2)144Script Snippet 19 & 20
  • 145. © 2011 IBM CorporationMovie Form• To make the “Coverimage” fields behave correctly we need to first delete theeditbox we used to start with.145
  • 146. © 2011 IBM CorporationMovie Form• In it’s place we drag and drop a “File Upload” control• We need to tell the control what data it is working against, so we select the Datatab of the Properties panel and set the data source to “document1”• Bind it to the “coverimage” field146
  • 147. © 2011 IBM CorporationMovie Form• As we only want to see the upload control in when we are in edit mode, we setthe visibility of the control using the following JavaScript: (Script Snippet 21)document1.isEditable()• OK the dialog147Script Snippet 21
  • 148. © 2011 IBM CorporationMovie Form• We also want to be able to download the image files so we also add a FileDownload control in the same table cell148
  • 149. © 2011 IBM Corporation• We also need to bind the File Download control to the “coverimage” field• On the Data panel for the File Download control• Data source = “document1”• Bind to = “coverimage”149
  • 150. © 2011 IBM CorporationMovie Form• As we only want to see this control when we are in read mode, we again set thevisibility of the control with the following JavaScript: (Script Snippet 22)!document1.isEditable()• OK the dialog150Script Snippet 22
  • 151. © 2011 IBM CorporationMovie Form• Now drag 2 buttons onto the custom control just after the Submit button• Label them “Cancel” and “Edit”151
  • 152. © 2011 IBM CorporationMovie Form• For the Cancel button, set the type to be “Cancel”152Cancel
  • 153. © 2011 IBM CorporationMovie Form• The Edit button has to have an On-Click Event to trigger it’s action• Click on the Event tab and then Add Action• Add a simple action as shown below to change the document mode to “EditMode”153
  • 154. © 2011 IBM CorporationMovie Form• Set the visibility of the buttons to beas follows:• Submit and Cancel• document1.isEditable()• Edit• !document1.isEditable()• The Submit and Cancel buttons willonly show in edit mode and the Editbutton will only show in read mode154Script Snippet 23 & 24
  • 155. © 2011 IBM CorporationMovie Form• Now right click anywhere inside the Coverimage row and “Insert Row Below”155
  • 156. © 2011 IBM CorporationMovie Form• Into this new row, drag a Repeat control into the right side cell156
  • 157. © 2011 IBM CorporationMovie Form• Set the data binding for the repeat control to be the following JavaScript: (ScriptSnippet 25)document1.getItemValueArray(“imagenames”)• Set the Collection name to “imagename”157Script Snippet 25
  • 158. © 2011 IBM CorporationMovie Form• Drag a Computed Field control into the Repeat control158
  • 159. © 2011 IBM CorporationMovie Form• Set the content type of the computed field to “HTML”159
  • 160. © 2011 IBM CorporationMovie Form• To get the Computed field to display the filenames with a properly formed URLwe set the Value of the Computed Field to be the following JavaScript: (ScriptSnippet 26)var url = "/" + @ReplaceSubstring(database.getFilePath(), "", "/") + "/0/" +document1.getDocument().getUniversalID();url += "/$FILE/" + escape(imagename);return "<a dojoType="dojox.image.Lightbox" group="group1" title="" +imagename + "" href="" + url + "">" + imagename + "</a><br />"160Script Snippet 26
  • 161. © 2011 IBM CorporationMovie Form• We also need to add the relevant dojo controls to the custom control• Select the Custom Control from the outline and click on Resources• Add a Dojo Module named “dojox.image.Lightbox”161
  • 162. © 2011 IBM CorporationMovie Form• We also need a style sheet but need to do it from the XML source• Switch to Source mode• Click on the “Dojo Module Resource” in the outline• Add the following line to the XML: (Script Snippet 27)<xp:styleSheet href="/.ibmxspres/dojoroot/dojox/image/resources/Lightbox.css"></xp:styleSheet>162Script Snippet 27
  • 163. © 2011 IBM CorporationMovie Form• In the All Properties of the Custom control we need to set 2 last properties• dojoParseOnLoad = “true”• dojoTheme = “true”• Save the custom control163
  • 164. © 2011 IBM CorporationMovie Form• Create a new XPage called “movie”164
  • 165. © 2011 IBM CorporationMovie Form• In the XPage Properties set the Next Page to open “home”165
  • 166. © 2011 IBM CorporationMovie Form• Drag and drop the “layout” custom control onto it• Drag the “form_movie” custom control onto the facet_1 green spot• Save the XPage and Preview.166
  • 167. © 2011 IBM CorporationMovie Form• in Edit mode167
  • 168. © 2011 IBM CorporationMovie Form• In Read mode• To get here change the url to ../movies.xsp and pick a movie168
  • 169. © 2011 IBM CorporationMovie Form• Clicking on an image file in the repeat control169
  • 170. © 2011 IBM CorporationNavigation• Open the layout custom control• Switch to the Source mode• The highlighted text is a menu entry• Copy the highlighted text to the clipboard170
  • 171. © 2011 IBM CorporationNavigation• Paste this under the existing entry (the screen shot shows it three times)• Edit the bits in yellow to match your application171Script Snippet 28
  • 172. © 2011 IBM CorporationNavigation• To make it easy for you copy the script snippet for the menus. Don’t worry aboutthe last three options, they come next. ;o)• Script Snippet 28• Save the custom control and preview the home XPage172Script Snippet 28
  • 173. © 2011 IBM CorporationInstall Extension Library• To install the Extension Library just follow the instructions from theOpenNTF.org download - http://extlib.openntf.org• If you want to preview without having a local server installed then you will needto copy the eclipse directory from• ...notesdataworkspaceapplications• to• ...notesdatadominoworkspaceapplications173
  • 174. © 2011 IBM CorporationEdit Document in a Dialog Box• Right click on the Custom Controls section of the Database Navigator• Set the name of the custom control to be “form_editdialog”174
  • 175. © 2011 IBM CorporationEdit Document in a Dialog Box• In the data properties tab of the custom control• Click the Add Domino View button• Set the view binding to use the “LookupCustomer” view175
  • 176. © 2011 IBM CorporationEdit Document in a Dialog Box• From the Controls pane, select the Repeat control• Drag a new Repeat control onto the Custom Control• Set the Repeat control to use the view1 data source• Set the collection name of the repeat control to “rowData”176
  • 177. © 2011 IBM CorporationEdit Document in a Dialog Box• Select the Panel control from the Controls pane• Drag a new Panel control inside the repeat control on the custom control• Set the ID of the panel to “customerdetails”177
  • 178. © 2011 IBM CorporationEdit Document in a Dialog Box• Select the Computed Field control from the controls pane• Drag a new computed field inside the panel which we just added178
  • 179. © 2011 IBM CorporationEdit Document in a Dialog Box• Set the Value properties page to bind the computed field to the “firstname” fieldon the rowData data source179
  • 180. © 2011 IBM CorporationEdit Document in a Dialog Box• Add another computed field next to the one which we just added• Set the data binding for this field to use the “lastname” field on the rowDatadata source180
  • 181. © 2011 IBM CorporationEdit Document in a Dialog Box• Now from the Extension Library section of the controls pane• Drag a new Dialog onto the custom control next to the two computed fields wejust added181
  • 182. © 2011 IBM CorporationEdit Document in a Dialog Box• In the All Properties panel for the dialog box• Set the title property to “Edit Customer”182
  • 183. © 2011 IBM CorporationEdit Document in a Dialog Box• Switch to the source mode of the custom control• Set the id of the dialog control to “inplacedialog183
  • 184. © 2011 IBM CorporationEdit Document in a Dialog Box• Now add a new Link control in between the dialog box which we just added andthe last of the computed text fields• Set it’s label to “Edit Customer”184
  • 185. © 2011 IBM CorporationEdit Document in a Dialog Box• In the events tab of the link control go to the Client Side settings for the onClickevent• Add the following code to the onClick event: (Script Snippet 29)XSP.openDialog(‘#{id:inplacedialog}’);185Script Snippet 29
  • 186. © 2011 IBM CorporationEdit Document in a Dialog Box• Now add a new Panel control inside the Dialog box control we added186
  • 187. © 2011 IBM CorporationEdit Document in a Dialog Box• In the data properties of the Panel control• Add a new document data binding using the Form “customer”187
  • 188. © 2011 IBM CorporationEdit Document in a Dialog Box• Change the default action of the document data binding to be “Edit Document”• Then compute the Document ID property of the data binding• In the dialog which appears enter: (Script Snippet 30)rowData.getDocument().getUniversalID()• OK the dialog188Script Snippet 30
  • 189. © 2011 IBM CorporationEdit Document in a Dialog Box• In the data fields pane which appears for the new document binding• Select the first name and last name fields and drag them onto the customcontrol inside the panel which we just added• OK the dialog if it appears189
  • 190. © 2011 IBM CorporationEdit Document in a Dialog Box• Switch back to the Design view of the custom control• Select a cell in the table which we just added• Right click and select “Append Rows”• Add one new row to the table190
  • 191. © 2011 IBM CorporationEdit Document in a Dialog Box• Drag a new button control into the right hand cell of the row which we justadded to the table191
  • 192. © 2011 IBM CorporationEdit Document in a Dialog Box• Set the label of the new button to “Save”192
  • 193. © 2011 IBM CorporationEdit Document in a Dialog Box• In the onClick event of the button, click the “Add Action” button• Set the action to be “Save Document”• OK the dialog Box193
  • 194. © 2011 IBM CorporationEdit Document in a Dialog Box• Add another event by clicking the “Add Action” button• Set the action to be “Execute Script”• Enter the pictured code in the window (Script Snippet 31)• OK the dialog• Save and Close the Custom Control194Script Snippet 31
  • 195. © 2011 IBM CorporationEdit Document in a Dialog Box• From the XPages section of the database navigator, right click and select “NewXPage”• Name the new XPage “editdialog”195
  • 196. © 2011 IBM CorporationEdit Document in a Dialog Box• Drag the layout custom control onto the new XPage• Drag the new form_editdialog custom control into the editable area on theXPage• It should look like the page below• Save and Preview the XPage196
  • 197. © 2011 IBM CorporationEdit Document in a Dialog Box• A list of customers is displayed• Click the “Edit Customer” link next to a name197
  • 198. © 2011 IBM CorporationEdit Document in a Dialog Box• Click on the Edit Customer link• A dialog box will appear with the fields in edit mode• Save the changes and they will be updated on the main page198
  • 199. © 2011 IBM CorporationDojo Grid• Right click on the custom controls section of the database navigator• Select “New Custom Control”• Name the new custom control “form_dojogrid”• OK the dialog199
  • 200. © 2011 IBM CorporationDojo Grid• Select the “REST Services” control from the Extension Library Controls pane• Drag it onto the custom control• Make sure the ID is set to “restService1”200
  • 201. © 2011 IBM CorporationDojo Grid• Switch to the Source view of the custom control201
  • 202. © 2011 IBM CorporationDojo Grid• Paste script snippet 32 inside the <xe:restService> tags202Script Snippet 32
  • 203. © 2011 IBM CorporationDojo Grid• Select the “Data Grid” control from the Dojo Grid controls pane• Drag a new Data Grid control onto the custom control below the REST Servicecontrol203
  • 204. © 2011 IBM CorporationDojo Grid• Set the “style” property of the grid to the following using script snippet 33• Add the “storeComponentId” property to the control and set it to “restService1”204Script Snippet 33
  • 205. © 2011 IBM CorporationDojo Grid• Select the Data Grid Column control from the Dojo Grid control pane• Drag a new Data Grid Column control inside the Data Grid control we justadded205
  • 206. © 2011 IBM CorporationDojo Grid• In the Properties pane on the Data Grid Column control• Set the editable property to “true”• Set the field property to “firstname”• Set the width property to “auto”206
  • 207. © 2011 IBM CorporationDojo Grid• Repeat the process of adding another Data Grid Column to the grid• Set the editable property to “true”• Set the field property to “lastname”• Set the width property to “auto”207
  • 208. © 2011 IBM CorporationDojo Grid• Switch to Design mode• Select the Button control from the Controls pane• Drag a new button onto the end of the custom control• Set the label of the new button to “Save Changes”208
  • 209. © 2011 IBM CorporationDojo Grid• In the client side of the onClick event of the button add the following code(script snippet 34)209Script Snippet 34
  • 210. © 2011 IBM CorporationDojo Grid• Add another new button next to the one we just added• Set the label to “Revert Changes”210
  • 211. © 2011 IBM CorporationDojo Grid• In the client side of the onClick event of the new button• Add the following code: (script snippet 35)var ds = eval(‘restService1’)ds.revert()• Save the custom control211Script Snippet 35
  • 212. © 2011 IBM CorporationDojo Grid• From the XPages section of the database navigator• Right click and select “New XPage”• Set the name of the new XPage to “grid”• OK the dialog212
  • 213. © 2011 IBM CorporationDojo Grid• Drag the layout custom control onto the new XPage213
  • 214. © 2011 IBM CorporationDojo Grid• Drag the new form_dojogrid custom control inside the editable area of the newXPage• Save and preview the XPage214
  • 215. © 2011 IBM CorporationDojo Grid• You should see something like this:• Double click in an entry to edit it and hit enter to exit edit mode• Click “Save Changes”215
  • 216. © 2011 IBM CorporationTooltips• We are going to re-use the view_customers custom control and need to copy itto the clipboard and then paste it216
  • 217. © 2011 IBM CorporationTooltips• Now rename the new custom control to “view_tooltip”• It is important that you rename it by right clicking in the Custom Controls sectionof the application navigator as shown on the left217
  • 218. © 2011 IBM Corporation• Now comes the fun/complicated bit• Open the view_tooltip custom control• Add a line feed after computedField2 (if it’s not already there)• Drag and drop a Tooltip control from the Extension Library pane onto the newline218Tooltips
  • 219. © 2011 IBM Corporation• Change the All Properties for the Tooltip to the following:• dynamicContent = “true”• for = “link1”219Tooltips
  • 220. © 2011 IBM Corporation• Now switch to the source code and add a line feed in the <xe:tooltip> tags• Now drag a panel control into the new space220Tooltips
  • 221. © 2011 IBM Corporation• Name the Panel control “tooltip”221Tooltips
  • 222. © 2011 IBM Corporation• Now add a domino document data binding to the panel• Use the “customer” form• Set the default action to “Edit Document”• Compute the Document ID222Tooltips
  • 223. © 2011 IBM Corporation• Again we use rowData to get information from the current row of the repeatcontrol• Use the following JavaScript:• rowData.getNoteID()223TooltipsScript Snippet 36
  • 224. © 2011 IBM Corporation• Now we need a table 2 rows and 2 columns• Drag and drop the Table control to the space below the data binding224Tooltips
  • 225. © 2011 IBM Corporation• In cell A1 drag a label and set the Label to “EMail address”225Tooltips
  • 226. © 2011 IBM Corporation• Switch back to the design mode• Drag a computed field control into cell B1226Tooltips
  • 227. © 2011 IBM CorporationTooltips• Bind the computed field to document1 and the “email” field227
  • 228. © 2011 IBM CorporationTooltips• Drag a Label control to cell A2 and set the Label to “City”228
  • 229. © 2011 IBM CorporationTooltips• Drag another Computed field to cell B2 and bind it to document1 and “AddrCity”• Save the Custom Control229
  • 230. © 2011 IBM CorporationTooltips• Create a new XPage named “tooltip”• Drag on the “layout” custom control• Drag the “view_tooltip” custom control onto the facet_1 green spot• Save the XPage and Preview it230
  • 231. © 2011 IBM CorporationTooltips• Preview the XPage and hover over a first name in the list• You should see a tooltip with the EMail address and city from the customerrecord appear231
  • 232. © 2011 IBM CorporationQuestions?• Contact Us:• Matt White• matt.white@elguji.com• twitter.com/mattwhite• mattwhite.me• Tim Clark• tim_clark@uk.ibm.com• twitter.com/timsterc• blog.tc-soft.com232
  • 233. © 2011 IBM Corporation 233Legal Disclaimer© IBM Corporation 2011. All Rights Reserved.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 withoutwarranty of any kind, express or implied. In addition, this information is based on IBM’s current product plans and strategy, which are subject to change by IBM without notice. IBM shall not be responsible for any damages arisingout 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 orlicensors, or altering the terms and conditions of the applicable license agreement 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 in which IBM operates. Product release dates and/or capabilities referenced in this presentation maychange 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 isintended 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.IBM, the IBM logo, Lotus, Lotus Notes, Notes, Domino, Quickr, Sametime, WebSphere, UC2, PartnerWorld and Lotusphere are trademarks of International Business Machines Corporation in the United States, other countries, orboth. Unyte is a trademark of WebDialogs, Inc., 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.