XPages101 - Building an XPages app - Lotusphere 2011

© 2011 IBM Corporation
SHOW106
XPages101 - How to build a
simple XPages application
Matt White | Lead Developer | Elguji Software
Tim Clark | Tech Sales | IBM Lotus

© 2011 IBM Corporation 2
Agenda
● 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

Matt White
• Lead Developer at Elguji Software
• IdeaJam
• IQJam
• LinkJam
• I run XPages101.net - an XPages online
training site
• Independent consultant working mainly with
XPages and Java development projects with
the London Developer Co-op
3

Tim Clark
4
• Lotus Software Technical Sales
• 17 years @ Lotus/IBM
• Smartsuite --> Notes Support
• Business Partner Technical Enablement
• I co-host the X Cast with Paul Withers and
David Leedy
• Podcast all about XPages
• www.thexcast.net
• Helped create the XPages tutorial on
Developer Works - Domino Designer Wiki

How this presentation works
• DON’T PANIC!
• There are a *lot* of slides, but they are for you to download and use next week
when 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 Domino
Designer and IBM Lotus Domino
• Except that we will also be using the Extension Library from OpenNTF which
we will talk about later on
• DONT’ PANIC!
5

Our 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
• DEMO
6

Get Started
• Copy the databases from the download into ...notesdata directory on your
client or the ...dominodata directory on your Domino server
• Open Domino Designer
• From the File menu choose the Open --> Lotus Notes Application
7

• From the Open Dialog, locate the databases which you copied to your data
directory
• Open the starting point database
Get Started
8

Get Started
• The database will be opened with the database navigator on the left:
9

Layout 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 dialog
10

Layout and UI
• In the new custom control, switch to the Source view
11

Layout and UI
• Paste in the Script Snippet 1 which
makes up the HTML structure for our
site
• <div id="lotusFrame">
<div id="lotusBanner"></div>
<div id="lotusTitleBar">
<div class="lotusRightCorner">
<div class="lotusInner">
<div id="container_search">

</div>
<span class="clear"></span>
</div>
</div>
</div>
<div id="lotusPlaceBar">
<div class="lotusRightCorner">
</div>
</div>
</div>
<div id="lotusMain">
<div id="lotusColLeft">
<div class="lotusMenu" role="menu">
<div class="lotusBottomCorner">
<ul class="lotusIcons">

</ul>
</div>
</div>
</div>
<span class="clear"></span>
</div>
<div id="lotusContent">
<div id="container_formcontent">

</div>
</div>
</div>
<div id="lotusfooter">
<div id="lotusFooter" class="lotusFooter">
¬¨¬© Tim Clark and Matt White 2011
</div>
</div>
</div>
12
Script Snippet 1

Layout and UI
• Switch back into Design Mode
• Using the Outline pane, locate the lotusInner div inside the title bar div
13

Layout and UI
• In the controls pane, select the image control and drag it inside the div we just
located
14

Layout 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 the
database
• OK the dialog
15

Layout and UI
• Using the Outline pane, make sure that the
image is located in the correct position just
inside the div
16

Layout and UI
• Select the image we just added using the outline
pane
• Set the height property of the image to 42 pixels
17

Layout and UI
• Switch to the All Properties tab of the image properties and locate the style
property.
• You will see the 42px we just added, edit the style and add “; padding: 3px;” to
it
18

Layout and UI
• Now using the Outline pane, location the lotusInner div inside the lotusPlaceBar
div
19

Layout and UI
• After locating that div, go to the Custom Control properties and then the
Property Definition tab
• Click the new Property button
• Set the name of the new property to “pageTitle”
20

Layout and UI
• Now in the controls pane, select the Computed Field control
• Drag the control inside the div we just selected
21

Layout and UI
• Set the name of the computed field to pageTitle
22

Layout and UI
• In the Value tab of the properties of the computed field set the Bind
Data selected to use “JavaScript”
• Click the code window button next to the text box
23

Layout and UI
• In the dialog which appears, use the Global Objects library to locate the
custom 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 dialog
24

Layout and UI
• In the All Properties of the computed field, locate the style property
• Set the style to use script snippet 2 as pictured
float: left; font-size: 1.4em; font-weight: normal; line-height: 2em; padding: 2px 0pt 0pt 20px;
• Set the styleClass property to “title”
25
Script Snippet 2

Layout and UI
• Locate the Basics tagName property and set this to “span”
26

Layout and UI
• In the source view of the custom control locate the menu options section
of the HTML
• Add the pictured <li> tags to the HTML
27

Layout 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 dropped
28

Layout 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

Layout 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> tags
we just created
30

Layout and UI
• In the dialog which appears when you drag the image control onto the page
select “Use an image placeholder”
• OK the dialog
31

Layout and UI
• In the source XML set the url property of the image to use (Script Snippet 3):
“/.ibmxspres/domino/oneuiv2/images/iconHome16.png”
32
Script Snippet 3

Layout and UI
• Switch to the Design view of the custom control
• Use the outline pane to locate the
container_formcontent div inside the lotusContent
div in the HTML of the custom control
33

Layout and UI
• Once the div is located, select the Editable Area control
from the Control pane
• Drag the Editable Area onto the custom control into the div
we just located
34

Layout and UI
• The Editable Area should look like this
now:
35

Layout and UI
• Save the Custom Control
• Go to the XPages section of the database navigator and right click on the
heading
• Select to create a new XPage
• In the dialog which appears enter the name
of the XPage as “home”
• OK the dialog
36

Layout 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

Layout and UI
• In the properties of the custom control on the XPage, go to the Custom
Properties section
• Set the pageTitle to “Home”
• Save the XPage
38

Layout 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 dialog
39

Layout 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 theme
40

Layout and UI
• Open the Application Properties design element
• Go to the XPages tab
• Set the Application Theme to “blue”
• Save the Application properties
41

Layout 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

Movies View
• To see some of the data we need to recreate the database views
• Create a new custom control called “view_movies”
43

• Now drag and drop a view control onto the blank custom control
44
Movies View

• Pick the view you want to show and the columns
• Here we want the “Movies” view and all the columns
• OK the dialog
45
Movies View

Movies View
• Using the outline select the view and in Properties select Display
• Set the number of rows to display to be 5
46

Movies 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 which
form to open
• Save the custom control
47

Movies View
• Informational (this has already been done in the database)
• The Notes form has already been configured to say that when viewed on the
web use a specified XPage
• This time it’s “movie”
48

Movies View
• Now we need to create an XPage to use the custom control on
• Give it a name of “movies”
• OK the dialog
49

Movies View
• Drag the layout custom control onto the XPage
• Now drag the view_movies custom control onto the facet_1 green spot
50

Movies View
• Edit the “layout” Custom Properties
• Set the pageTitle to “Movies”
• Save the XPage
51

Movies View
• Now that the we have created the XPage, we can go back to the custom control
and 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 control
52

Movies View
• Change the button Label to be “Create Movie”
53

Movies View
• On the Events tab, click the Add Action button
54

Movies 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
55

Movies View
• in the source code view
• change the name to be “/movie.xsp”
56

Movies View
• Preview the XPage in the browser and it should look like this
(without all the menu options)
57

Customers View
• Another view but a different style of creating it
• Create a custom control called “view_customers”
• OK the dialog
58

Customers View
• This view is going to use a repeat panel
• Drag a repeat control onto the blank custom control
59

Customers 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 dialog
60

Customers 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

Customers View
• Now drag and drop a panel control into the repeat control
62

Customers View
• Into that panel we are going to drop 1 link and 2 computed fields
63

Customers View
• For the link control we are going to compute the label. This will be the first name
field from the document on the current row of the repeat control.
• In the JavaScript editor enter (Script Snippet 4):
rowData.getColumnValue(“firstname”)
• OK the dialog
64
Script Snippet 4

Customers 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 ID
65

Customers View
• Type the following into the JavaScript editor
rowData.getUniversalID()
• Here we are using rowData again to get the contents of the current item in the
repeat control
• OK the dialog
66
Script Snippet 5

Customers View
• We have not created the customer XPage yet so we need to make sure the
action 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 mode
67

Customers 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 computed
fields
• Also need to add a Line Feed at the end of the row, or the data will appear all
on 1 line
68

Customers View
• Create a new XPage called “customers”
• OK the dialog
69

Customers View
• First, drag on the layout custom control
• Next, drag the view_customers custom control onto the facet_1 green spot so
that it looks like the image on the right
70

Customers View
• Set the pageTitle to “Customers”
• Save the XPage
71

Customers View
• Preview in a browser and it should look like this
72

Rentals View
• Create a new custom control called “view_rentals”
73

Rentals View
• Drag a View control onto the custom control
74

Rentals View
• Select the “Rentals” view
• De-select the returned column
• OK the dialog
75

Rentals 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 10
76

Rentals View
• Select the first column and set the values to be links
77

Rentals 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

Rentals View
• Click in the new second column and set the Data to be Computed Value
• Use the JavaScript Editor button to enter the @dblookup
79

Rentals View
• Enter the following @functions to lookup the rentalcustomerid and find the
customer 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 dialog
80
Script Snippet 6

Rentals 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
81
Script Snippet 7

Rentals 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 dialog
82

Rentals View
• Set the pageTitle to “Rentals”
• Save the XPage
83

Rentals View
• It should look like this when you preview the XPage
84

Customer 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

Customer Form
• In the Custom Controls properties pane, go to the Data tab
• Click the “Add” button
• Select “Domino Document” from the list
86

Customer 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

Customer Form
• Select the data palette tab in Designer and make sure
the “Select Controls Dialog Box” is enabled
• Now select the following fields from the Data source
list:
– firstname
– lastname
– Address1
– Address2
– Address3
– AddrCity
– postcode
– country
– telephone
– email
– dateofbirth
• Drag the fields onto the custom control body

Customer Form
• The Select Data Bound Controls dialog
will appear
• Set the country field to use a combo
box
• Make sure Date of birth is set to be a
Date Time Picker
• Edit the field labels to add spaces
between words
• Make sure the “Add Submit button to
generated code” checkbox is checked
• Make sure the “Add messages control
to generated code” checkbox is
checked
• OK the dialog

Customer 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 message
90

Customer 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 box
91
Script Snippet 8

Customer 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

Customer Form
• Now use the list ordering button to move the new item to the top of the list
93

Customer 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 list
94

Customer Form
• In the message property of the new validator, set the value to “Please select a
country”
95

Customer Form
• Click the blue diamond next to the expression property and select
“Compute Value”
96

Customer Form
• In the dialog which appears enter the pictured code (Script Snippet 9)
• OK the dialog
97
Script Snippet 9

Customer 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” option
98

Customer 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”
99
Script Snippet 10

Customer 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

Customer Form
• Change the button type to “Cancel”
101

Customer 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 box
102
Script Snippet 11

Customer Form
• Repeat the process for the Cancel button
103

Customer 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

Customer 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 dialog
105
Script Snippet 12

Customer 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 control
106

Customer Form
• Right click on the XPages section of the database navigator and select the
New XPage option
• In the dialog which appears, name the XPage “customer”
• OK the dialog
107

Customer Form
• Drag the layout custom control from the Custom Controls section on
the right onto the XPage
108

Customer Form
• Drag the form_customer custom control into the space where there is a green
dot (the editable area)
• Set the pageTitle property to “Customer”
• Your XPage should look something like this now:
109

Customer Form
• In the XPage properties, set the next page (success or cancel) property to
“home”
• Save and preview the XPage in the browser
110

Customer Form
• In the browser, try and save the XPage and notice that the validation is
running on the client side
111

Customer Form
• Switch back to Domino Designer and open the Application Properties design
element
• Open the XPages tab and set the Client Validation to “Off”
• Save the Properties
112

Customer 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

Rental 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 dialog
114

Rental 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

Rental 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 dialog
116

Rental 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

Rental Form
• Click the “Add Formula Item...” button
• In the dialog which appears enter: (Script Snippet xxx)
@DbColumn(@DbName(), “LookupCustomer”, 5).sort();
• OK the dialog
118
Script Snippet 13

Rental 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

Rental Form
• Click the Add Formula Item button
• In the dialog which appears enter: (Script Snippet xxx)
@DbColumn(@DbName(), “LookupMovies”, 3).sort();
• OK the dialog
120
Script Snippet 14

Rental 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 dialog
121
Script Snippet 15

Rental 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

Rental 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”
123

Rental Form
• Select the Panel control from the Control Pane
• Drag a new Panel onto the top of the custom control (above the existing
content)
124

Rental 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 screen
125

Rental 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 property
126

Rental Form
• In the dialog which appears enter the pictured code (script snippet 16)
• OK the dialog
127
Script Snippet 16

Rental Form
• In the All Properties section of the Panel
• Go to the data data dominoDocument section
• Set the ignoreRequestParams property to true
128

Rental 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 or
error messages
• OK the dialog
129

Rental Form
• The Custom Control should now look like this:
130

Rental Form
• Select the panel we just added using the outline control
• Set the name of the panel to “customerdetailspanel”
131

Rental 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);
132
Script Snippet 17

Rental 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 dialog
133

Rental 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
134
Script Snippet 18

Rental Form
• In the XPages section of the database navigator, right click
• Select “New XPage” from the menu
• Name the new XPage “rental”
• OK the dialog
135

Rental Form
• Drag the layout custom control onto the XPage
• Drag the form_rental custom control into the editable area of the XPage (the
green dot)
• In the Custom Properties of the layout custom control set the pageTitle property
to “Rental”
136

Rental Form
• In the XPage Properties set the Next Page to open “home”
• Save the XPage
• Preview it in the browser
137

Rental 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 screen
138

Movie Form
• Create a new custom control called “form_movie”
139

Movie 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

Movie Form
• Drag the fields shown from the data pane and drop them onto the blank custom
control
141

Movie Form
• Edit the Labels to be as highlighted in yellow
• Change the controls for the Certificate and
Genre to be combo boxes
• Change the control for Cover image to be an
editbox
(This is going to be deleted anyway)
• Add the submit button check mark
• Finally add the error messages control check
mark
• Click OK
142

Movie Form
• Select the movieid1 Edit Box from the outline
• Set it to be “read only”
143

Movie Form
• In the Values for the “certificate” field click Add Formula Item and use the
following JavaScript: (Script Snippet 19)
@DbLookup(@DbName(),"vwRefData","Certificate",2)
• Also for the Values for the “genre” field click Add Formula Item and use the
JavaScript below: (Script Snippet 20)
@DbLookup(@DbName(),"vwRefData","Genre",2)
144
Script Snippet 19 & 20

Movie Form
• To make the “Coverimage” fields behave correctly we need to first delete the
editbox we used to start with.
145

Movie 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 Data
tab of the Properties panel and set the data source to “document1”
• Bind it to the “coverimage” field
146

Movie Form
• As we only want to see the upload control in when we are in edit mode, we set
the visibility of the control using the following JavaScript: (Script Snippet 21)
document1.isEditable()
• OK the dialog
147
Script Snippet 21

Movie Form
• We also want to be able to download the image files so we also add a File
Download control in the same table cell
148

• 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

Movie Form
• As we only want to see this control when we are in read mode, we again set the
visibility of the control with the following JavaScript: (Script Snippet 22)
!document1.isEditable()
• OK the dialog
150
Script Snippet 22

Movie Form
• Now drag 2 buttons onto the custom control just after the Submit button
• Label them “Cancel” and “Edit”
151

Movie Form
• For the Cancel button, set the type to be “Cancel”
152
Cancel

Movie 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 “Edit
Mode”
153

Movie Form
• Set the visibility of the buttons to be
as follows:
• Submit and Cancel
• document1.isEditable()
• Edit
• !document1.isEditable()
• The Submit and Cancel buttons will
only show in edit mode and the Edit
button will only show in read mode
154
Script Snippet 23 & 24

Movie Form
• Now right click anywhere inside the Coverimage row and “Insert Row Below”
155

Movie Form
• Into this new row, drag a Repeat control into the right side cell
156

Movie Form
• Set the data binding for the repeat control to be the following JavaScript: (Script
Snippet 25)
document1.getItemValueArray(“imagenames”)
• Set the Collection name to “imagename”
157
Script Snippet 25

Movie Form
• Drag a Computed Field control into the Repeat control
158

Movie Form
• Set the content type of the computed field to “HTML”
159

Movie Form
• To get the Computed field to display the filenames with a properly formed URL
we set the Value of the Computed Field to be the following JavaScript: (Script
Snippet 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 />"
160
Script Snippet 26

Movie 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

Movie 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>
162
Script Snippet 27

Movie Form
• In the All Properties of the Custom control we need to set 2 last properties
• dojoParseOnLoad = “true”
• dojoTheme = “true”
163

Movie Form
• Create a new XPage called “movie”
164

Movie Form
• In the XPage Properties set the Next Page to open “home”
165

Movie 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

Movie Form
• in Edit mode
167

Movie Form
• In Read mode
• To get here change the url to ../movies.xsp and pick a movie
168

Movie Form
• Clicking on an image file in the repeat control
169

Navigation
• Open the layout custom control
• Switch to the Source mode
• The highlighted text is a menu entry
• Copy the highlighted text to the clipboard
170

Navigation
• Paste this under the existing entry (the screen shot shows it three times)
• Edit the bits in yellow to match your application
171
Script Snippet 28

Navigation
• To make it easy for you copy the script snippet for the menus. Don’t worry about
the last three options, they come next. ;o)
• Script Snippet 28
• Save the custom control and preview the home XPage
172
Script Snippet 28

Install Extension Library
• To install the Extension Library just follow the instructions from the
OpenNTF.org download - http://extlib.openntf.org
• If you want to preview without having a local server installed then you will need
to copy the eclipse directory from
• ...notesdataworkspaceapplications
• to
• ...notesdatadominoworkspaceapplications
173

Edit 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

• In the data properties tab of the custom control
• Click the Add Domino View button
• Set the view binding to use the “LookupCustomer” view
175

• 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

• 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

• Select the Computed Field control from the controls pane
• Drag a new computed field inside the panel which we just added
178

• Set the Value properties page to bind the computed field to the “firstname” field
on the rowData data source
179

• 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 rowData
data source
180

• Now from the Extension Library section of the controls pane
• Drag a new Dialog onto the custom control next to the two computed fields we
just added
181

• In the All Properties panel for the dialog box
• Set the title property to “Edit Customer”
182

• Switch to the source mode of the custom control
• Set the id of the dialog control to “inplacedialog
183

• Now add a new Link control in between the dialog box which we just added and
the last of the computed text fields
• Set it’s label to “Edit Customer”
184

• In the events tab of the link control go to the Client Side settings for the onClick
event
• Add the following code to the onClick event: (Script Snippet 29)
XSP.openDialog(‘#{id:inplacedialog}’);
185
Script Snippet 29

• Now add a new Panel control inside the Dialog box control we added
186

• In the data properties of the Panel control
• Add a new document data binding using the Form “customer”
187

• 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 dialog
188
Script Snippet 30

• 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 custom
control inside the panel which we just added
• OK the dialog if it appears
189

• 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 table
190

• Drag a new button control into the right hand cell of the row which we just
added to the table
191

• Set the label of the new button to “Save”
192

• In the onClick event of the button, click the “Add Action” button
• Set the action to be “Save Document”
• OK the dialog Box
193

• 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 Control
194
Script Snippet 31

• From the XPages section of the database navigator, right click and select “New
XPage”
• Name the new XPage “editdialog”
195

• Drag the layout custom control onto the new XPage
• Drag the new form_editdialog custom control into the editable area on the
XPage
• It should look like the page below
• Save and Preview the XPage
196

• A list of customers is displayed
• Click the “Edit Customer” link next to a name
197

• 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 page
198

Dojo 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 dialog
199

Dojo 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

Dojo Grid
• Switch to the Source view of the custom control
201

Dojo Grid
• Paste script snippet 32 inside the <xe:restService> tags
202
Script Snippet 32

Dojo 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 Service
control
203

Dojo 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”
204
Script Snippet 33

Dojo 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 just
added
205

Dojo 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

Dojo 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

Dojo 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

Dojo Grid
• In the client side of the onClick event of the button add the following code
(script snippet 34)
209
Script Snippet 34

Dojo Grid
• Add another new button next to the one we just added
• Set the label to “Revert Changes”
210

Dojo 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()
211
Script Snippet 35

Dojo 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 dialog
212

Dojo Grid
• Drag the layout custom control onto the new XPage
213

Dojo Grid
• Drag the new form_dojogrid custom control inside the editable area of the new
XPage
• Save and preview the XPage
214

Dojo 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

Tooltips
• We are going to re-use the view_customers custom control and need to copy it
to the clipboard and then paste it
216

Tooltips
• Now rename the new custom control to “view_tooltip”
• It is important that you rename it by right clicking in the Custom Controls section
of the application navigator as shown on the left
217

• 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 new
line
218
Tooltips

• Change the All Properties for the Tooltip to the following:
• dynamicContent = “true”
• for = “link1”
219
Tooltips

• Now switch to the source code and add a line feed in the <xe:tooltip> tags
• Now drag a panel control into the new space
220
Tooltips

• Name the Panel control “tooltip”
221
Tooltips

• Now add a domino document data binding to the panel
• Use the “customer” form
• Set the default action to “Edit Document”
• Compute the Document ID
222
Tooltips

• Again we use rowData to get information from the current row of the repeat
control
• Use the following JavaScript:
• rowData.getNoteID()
223
Tooltips
Script Snippet 36

• Now we need a table 2 rows and 2 columns
• Drag and drop the Table control to the space below the data binding
224
Tooltips

• In cell A1 drag a label and set the Label to “EMail address”
225
Tooltips

• Switch back to the design mode
• Drag a computed field control into cell B1
226
Tooltips

Tooltips
• Bind the computed field to document1 and the “email” field
227

Tooltips
• Drag a Label control to cell A2 and set the Label to “City”
228

Tooltips
• Drag another Computed field to cell B2 and bind it to document1 and “AddrCity”
229

Tooltips
• 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 it
230

Tooltips
• 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 customer
record appear
231

Questions?
• 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.com
232

© 2011 IBM Corporation 233
Legal 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 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 change by IBM without notice. IBM shall not be responsible for any damages arising
out of the use of, or otherwise related to, this publication or any other materials. Nothing contained in this publication is intended to, nor shall have the effect of, creating any warranties or representations from IBM or its suppliers or
licensors, or altering the terms and conditions of the applicable license agreement governing the use of IBM software.
References in this presentation to IBM products, programs, or services do not imply that they will be available in all countries in which IBM operates. Product release dates and/or capabilities referenced in this presentation may
change at any time at IBM’s sole discretion based on market opportunities or other factors, and are not intended to be a commitment to future product or feature availability in any way. Nothing contained in these materials is
intended to, nor shall have the effect of, stating or implying that any activities undertaken by you will result in any specific sales, revenue growth or other results.
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, or
both. 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.

XPages101 - Building an XPages app - Lotusphere 2011

More Related Content

What's hot

Similar to XPages101 - Building an XPages app - Lotusphere 2011

Recently uploaded

XPages101 - Building an XPages app - Lotusphere 2011