Building A Cool Web 2.0 Application With XPages

Introduction:
 What is this session about?
Show n Tell replaces the Hands-On session format
Presents a fast track session to learn about XPages.
Allows you to follow along on your laptop as we build a cool
application right before your eyes. * (prize = a years supply of ..)
Provides backup reference material including the presentation
and sample applications for you to try out XPages later.


Introduction:
 What is an XPage?
Provides a new way to create Web applications
A new Design element that comes free, out-of-the-box with
Domino Designer 8.5.
Based on the JSF framework, which is an open standard
maintained by Sun but you DO NOT need to know JSF :-)
Easy to learn with huge payback in minimal time.
Includes new features including AJAX and DOJO.
No extra setup steps (other some minor server configuration)
needed.
Designer preview.



Agenda
 Introduction: (10 min)
 Part 1 - The Basics (30 min)
 Part 2 - Styling and Search Features (25 min)
 Part 3 - Contain your Friends in a Repeat (25 min)
 Q&A (15 min)

Introduction:
 Designer UI Overview:

Introduction:
 DEMO | The Cool Application – Sneak Preview...

Part 1 – The Basics

®

Step: 1.00

 What will you learn
➢
You will learn the basics workings of XPages.
 Task Description
➢
You will create a basic Profiles application from scratch in which
you will be able to create, read, update and delete documents.

Step: 1.01.00 – Create a blank application - “Profiles”
1. Launch Domino
Designer V8.5
2. From the main menu,
select File>New
Application (Ctrl+N).
3. In the Title field, type
Profiles.
4. In the Template field,
select Blank.
5. Click OK.
6.

Step: 1.02.01 – Create a form
1. Click New Form.
2. In the Name field, type
profile.
In this exercise, we will
use this form to create
documents.

Step: 1.02.02 – Add static text to the form
Add the following text,
each on a new line, in
the form editor:
- Full Name:
- First Name:
- Last Name:
- Date of birth:
- Company:
- Job Title:

Step: 1.02.03 – Create a Full Name field
Click the Create Field
icon on the toolbar.

Step: 1.02.04 – Set a computed formula on the FullName field
1. In the editor, beside Full
Name: , create a new field
named FullName.
2. Select Computed as the type of
text field.
3. Add the following formula as its
value
'@Trim(FirstName + “ ” + LastName)'.

Step: 1.02.05 – Create a First Name field
Beside First Name:,
create a new field
named FirstName.

Step: 1.02.06 – Create a Last Name field
Beside Last Name:,
create a new field
named LastName.

Step: 1.02.07 – Add a Date of Birth field
1. Beside Date of birth:,
create a new field
named DOB.
2. In the Type field, select
Date/Time.

Step: 1.02.08 – Add a Company field
Beside Company:,
create a new field
named Company.


Step: 1.02.09 – Add a Job Title field
1. Beside Job Title:,
create a new field
named Job Title.
2. Save the profile form.

Step: 1.03.01 – Edit the existing untitled view
1. Launch the untitled
view in the editor.
2. Change the name to
profiles view.
3. Add the alias
vwProfiles.

Step: 1.03.02 – The FullName column
1. Edit the existing (1st)
column.
2. Change the title to
FullName.
3. Bind this column to the
FullName field.

Step: 1.03.03 – Sort the FullName Column
1. On the Column
Properties for the
FullName column,
select the Sort tab.
2. Click the Ascending
radio button.

Step: 1.03.04 – Add a column for Company
1. Append a new column
to this view.
2. Change the title to
Company.
3. Bind the column to the
Company field.

Step: 1.03.05 – Add a column for Job Title
1. Append a final column
to the view.
2. Change the column title
to Job Title.
3. Bind this column to the
JobTitle field.
4. Save and close the
view.

Step: 1.04.01 – Create a new Custom Control – container
1. Double click on
Custom Controls in
the Application
Navigator.
2. In the New Custom
Control dialog enter
the name container.
3. Click OK.

Step: 1.04.02 – Add panels to the container custom control
Add 6 panels from the
Container Controls
palette to the Design
pane.

Step: 1.04.03 – Name the panels
1. Select the first panel.
2. In the Name field,
enter frame.
3. Continue to select the
other panels and enter
the following names:
- header;
- headerInner;
- main;
- tabBar;
- content.

Step: 1.04.04 – Rearrange the panels
Use the Outline to rearrange, drag
and drop the panels into their nested
form.
 - Panel: frame
 - Panel: header
 - Panel: headerInner
 - Panel: main
 - Panel: tabBar
 - Panel: content


Step: 1.04.05 – Add a label to the headerInner panel
1. Select the Label control
from the Controls
Palette. Drop it into the
headerInner panel.
2. Change the label to
Profiles.

Step: 1.04.06 – Add a tabbed panel to the tabBar panel
1. Select the Tabbed Panel
container control from
the Container Controls
palette.
2. Drop the Tabbed Panel
to the tabBar panel.

Step: 1.04.07 – Rename the tabs on the Tabbed Panel
1. Use the Outline to select the first tab of
the Tabbed Panel.
In the Name field, type homeTab. In
the Label field, type Home.

2. Select the second tab of the Tabbed
Panel.
In the Name field, type resultsTab.
In the Label field, type Results.

Step: 1.04.08 – Add another tab to the Tabbed Panel
1. Right-click to the right
of the Results tab and
select Append Tab
from the context menu.

2. Use the Outline to
select the third tab of
the Tabbed Panel.
Enter profilesTab as
the Name and enter
Profiles as the Label.

Step: 1.04.09 – Add an Editable Area
From the Core Controls
palette drag and drop
an Editable Area control
to the content Panel.

Step: 1.04.10 – Rename the Editable Area
Rename the Editable
Area's Name and Facet
Name to contentArea.

Step: 1.04.11 – Add a new property to the Custom Control
1. In the Custom Control
Properties for container,
select the Property
Definition tab.
2. Add a new property to
this custom control by
selecting the New
Property button.
3. Name this new property
selectedTabId.
Custom Control.

Step: 1.05.01 – Create a new Custom Control - profileForm
Create a new Custom
Control named
profileForm.

Step: 1.05.02 – Add a Label to the profileForm
1. On the new
profileForm Custom
Control add a Label
from the Core Controls
palette to the Design
pane.
2. In the Properties for
this Label rename this
label to Profile
Information.

Step: 1.05.03 – Add a Domino Document data source
1. In the Custom Controls
Properties select the
Data tab.
2. Then select Add, and
from the dropdown
select Domino
Document.
3. document1 is now
listed as a data source.

Step: 1.05.04 – Rename and add a form to the data source
1. From the Form
dropdown select the
profile form.
2. Change the data source
name to
profileDocument.

Step: 1.05.05 – Launch the Data Eclipse view
1. Still on the
profileForm Custom
Control from the main
menu select
Window
>Show Eclipse Views
>Data.
2. The Data view should
now appear in place of
the Controls palette.
Now the data sources
for the profileForm
will appear.
The Controls Palette and
Data views are
interchangeable.


Step: 1.05.06 – Drop the data sources to the Design pane
1. On the Data view select all of
the available data sources
except FullName. Then drag
and drop them to the Design
pane.
This will generate a table with
the edit boxes bound to the
data sources, along with
labels for this edit boxes.
2. Rearrange the rows so that
FirstName is first followed
by LastName, then DOB,
JobTitle and lastly
Company. Add 2 rows to
help you do this.

Step: 1.05.07 – Add a Date Time Picker
1. For the Date of Birth
control select the Data
tab in Properties.
2. Check the box for
Use date/time picker
pop-up.

Step: 1.05.08 – Add Buttons
1. From the Controls
palette drag and drop 4
buttons.
2. Then change the labels
on these buttons to
 Save
 Delete...
 Cancel
 Edit
Custom Control.


Step: 1.06.01 – Create a new Custom Control - searchForm
Create a new Custom
Control named
searchForm.

Step: 1.06.02 – Add a Button to the Custom Control - searchForm
palette add a button.
2. Change the Label on
this button to Create a
New Profile.
Custom Control.


Step: 1.07.01 – Create a Custom Control - searchResults
Create a new Custom
Control named
searchResults.

Step: 1.07.02 – Add a View Container Control to searchResults
1. From the palette select a View
Container Control and drop it to
the Design pane.
2. This launches the
Select Data Source for View
dialog.
3. Select the view, profiles view
created previously from the
drop-down. This will populate
the remaining windows on the
dialog.
4. Click OK.


Step: 1.07.03 – Set the View Panel width on searchResults
1. Set the width of the
view to 100%.
Custom Control.

Step: 1.08.01 – Create a new XPage - home
Create a new XPage
named home.

Step: 1.08.02 – Add the container Custom Control to the home XPage
From the Custom
Controls palette, drag
and drop the Custom
Control container to
the Design pane of the
home XPage.

Step: 1.08.03 – Set the Selected Tab Id Property
1. In the Outline select the
container Custom
Control.
2. In its Properties, select
All Properties. Expand
custom, and for
selectedTabId enter
homeTab.


Step: 1.08.04 – Add searchForm to the Editable Area
1. Then to the Editable
Area, highlighted with
the green dot, drag and
drop the searchForm
Custom Control.
2. Save your changes and
close the XPage.


Step: 1.09.01 – Create a new XPage - profile
Create a new XPage
named profile.

Step: 1.09.02 – Add the container Custom Control to the profile XPage
From the Custom
Controls palette, drag
and drop to the Design
pane of the profile
XPage the container
Custom Control.

Step: 1.09.03 – Set the Selected Tab Id Property
container custom
control.
custom, and for
selectedTabId enter
profilesTab.


Step: 1.09.04 – Add the profile Custom Control
drop the profileForm
Custom Control.
close the XPage.

Step: 1.10.01 – Create a new XPage - results
Create a new XPage
named results.

Step: 1.10.02 – Add the container Custom Control to the results XPage
From the Custom
Controls palette drag
and drop to the design
pane the container
Custom Control.

Step: 1.10.03 – Set the SelectedTabId Property
container custom
control.
custom, and for
selectedTabId enter
resultsTab.


Step: 1.10.04 – Add the searchResults Custom Control
drop the
searchResults Custom
Control.
close the XPage.

Step: 1.11.01 – Add Actions to container Custom Control – Home Tab
1. Reopen the container
Custom Control and
locate the Tabbed Panel
in the outline.
2. Select the Tab Panel
homeTab. Then for its
onclick event click the
Add Action... button.

Step: 1.11.02 – Add Actions to container Custom Control – Home Tab
1. On the Add Simple
Action dialog select
Basic for Category,
Open Page for Action
and the home XPage to
open.
2. Click OK.

Step: 1.11.03 – Add Actions to container Custom Control – Results Tab
resultsTab. Then for
its onclick event click
the Add Action...
button.
Basic for Category,
and the results XPage
to open.
3. Click OK.


Step: 1.11.04 – Add Actions to container Custom Control – Profiles Tab
profilesTab. Then for
its onclick event click
the Add Action...
button.
Basic for Category,
and the profile XPage
to open.
3. Click OK.
Custom Control.

Step: 1.12.01 – Add Actions to profileForm Custom Control – Save Button
1. Reopen the
profileForm Custom
Control and select the
Save button.
2. In the Button type field,
select Submit.


Step: 1.12.02 – Add Actions to profileForm Custom Control – Save Button
1. Still on the Save button
select the Events tab.
2. For the onclick event
select the Add
Action... button.
Basic for Category,
open.
4. Click OK.






Step: 1.12.03 – Add Actions to profileForm Custom Control – Delete... Button
1. For the Delete... button
select the Events tab.
2. For the onclick event select
the Add Action... button.
3. On the Add Simple Action
dialog select Document for
Category, Delete
Document for Action,
home XPage to open next.
In the Confirmation text
field, enter Are you sure?
4. Click OK.


Step: 1.12.04 – Add Actions to profileForm Custom Control – Cancel Button
1. In the editor, select the
Cancel button.
2. In the Button type field,
select Cancel.


Step: 1.12.05 – Add Actions to profileForm Custom Control – Cancel Button
1. Still on the Cancel
button select the Events
tab.
select the Add
Action... button.
Basic for Category,
open.
4. Click OK.


Step: 1.12.06 – Add Actions to profileForm Custom Control – Edit Button
1. For the Edit button select
the Events tab.
select the Add Action...
button.
Document for Category,
Change Document
Mode for Action, and Edit
Mode for Document
Mode.
4. Click OK.


Step: 1.13.01 – Add Actions to searchForm Custom Control – New Profile Button
1. Reopen the searchForm
Custom Control and select the
Create a New Profile...
button.
2. For the button select the Events
tab.
3. For the onclick event select
the Add Action... button.
dialog select Basic for
Category, Open Page for
Action, profile as the XPage to
open next and New
Document for Target
Document.
5. Click OK.
6. Save your changes.


Step: 1.14.01 – Add Actions – FullName Column Link
1. Reopen the searchResults
Custom Control and select
the column for FullName on
the View.
2. In View Column in its
Properties, check the box for
Show values in this
column as links, and then
choose the Read-only radio
button.
3. Save and close the Custom
Control.


Step: 1.15.01 – Show & Hide Options – container Custom Control – Tabbed Panel

1. Reopen the container
Custom Control.
2. Select the Tabbed Panel
and for its Properties
select the Computed
property menu button.


Step: 1.15.02 – Show & Hide Options – container Custom Control – Tabbed Panel

1. In the Script Editor
dialog, enter the script
'compositeData.selectedT
abId'

2. Click OK.
Custom Control.

Step: 1.15.03 – Show & Hide Options – profileForm Custom Control – Save Button

1. Reopen the profileForm
Custom Control.
2. Select the Save button. Then in
its Button Properties select the
Computed property menu
button for the Visible option.
3. On the Script Editor dialog enter
'profileDocument.isEditable()'
4. Click OK.


Step: 1.15.04 – Show & Hide Options – profileForm Custom Control – Delete... Button

1. Select the Delete... button. Then
in its Button Properties select
the Computed property menu
'!profileDocument.isNewNote()'
3. Click OK.


Step: 1.15.05 – Show & Hide Options – profileForm Custom Control – Edit Button

1. Select the Edit button. Then in
its Button Properties select the
Computed property menu
'!profileDocument.isEditable()'
3. Click OK.


Step: 1.16 – The computeWithForm Property on the profileForm Custom Control

1. Still in the profileForm Custom
Control, go to All Properties
for this Custom Control.
2. For the property
computeWithForm select
onsave.
Control.


Step: 1.17 – profile Form – Web Access
1. Reopen the profile form
and launch its form
properties.
2. In the Defaults tab, in the
Display Xpage instead
field, select profile.
3. Save and close the form.

Step: 1.18 – Application Properties – Web Launch Setting
1. Open the Application
Properties and select the
Launch tab.
2. For Web Browser Launch,
select Open Designated
XPage for Launch, and
home as the XPage to
launch.


Step: 1.19 – Demo Part 1 – The Basics


 If the application is
Local, change the
ACL to preview.

Part 2 – Styling and Search Features

®

Step: 2.01.00 – Adding Styles – Look and Feel.

➢
You will learn how XPages use CSS files and how it applies style
classes to control the applications look and feel.
➢
The basic application created in Part 1 uses the web standard
styling form the server. In Part 2 you will create a new Style Sheet,
add it to the Custom Controls and then apply style classes to
controls.

Step: 2.01.01 – Import Image Resources
1. Select (double click)
Images under
Resources in the
Application Navigator.
2. Select the Import
Image Resource
button.
3. Select all of the
supplied GIF images.
4. Click OK.
The images are now
added to the
application.


Step: 2.02.01 – Create a new Style Sheet - styles
1. Select Style Sheet
under Resources in the
2. Click the New Style
Sheet button.
3. In the Name field, type
styles.
4. Click OK.


Step: 2.02.02 – Add Style Classes to 'styles.css'
1. Copy and paste the contents of
the supplied styles.txt file
into the new styles.css file.
2. Save your changes.

Step: 2.03.01 – Add the new Style Sheet as Resource
1. Select Custom
Controls on the
2. Open the first Custom
Control container.
3. For its Properties select
Resources.
4. Click the Add Style
Sheet... button.

Step: 2.03.02 – Select the new style sheet from the dialog
1. On the
Add Style Sheet to
Page dialog, select the
only style sheet available,
styles.css.
2. Click OK.
Custom Control.

Step: 2.03.03 – Add the same Style Sheet to the remaining Custom Controls
1. Open the remaining
Custom Controls,
profileForm,
searchForm and
searchResults, in
turn...
2. Add the same style
sheet resource and save
your changes.

Step: 2.04.01 – Add Style Classes to the container Custom Control - Frame
1. Launch the container
Custom Control.
2. Select Panel: frame in
the Outline view.
3. Select the Style tab for
this Panel.
4. Choose the frame style
class.

Step: 2.04.02 – Add Style Classes to the container Custom Control - Header
1. In the Outline expand
frame and select
header.
2. From this Panel's Style
select the header style
class.

Step: 2.04.03 – Add Style Classes to the container Custom Control - headerInner
header and select
headerInner.
select the headerInner
style class.

Step: 2.04.04 – Add Style Classes to the container Custom Control - headerInnerTitle
headerInner and
select the Label.
2. From this Label's Style
select the
headerInnerTitle
style class.

Step: 2.04.05 – Add Style Classes to the container Custom Control - main
frame and select
main.
select the main style
class.

Step: 2.04.06 – Add Style Classes to the container Custom Control - tabBar
main and select
tabBar.
select the tabBar style
class.

Step: 2.04.07 – Add Style Classes to the container Custom Control - content
main and select
Panel:content.
select the content style
class.
Custom Control.

Step: 2.05.01 – Add Style Classes to the searchForm Custom Control – Button
1. Launch the searchForm
Custom Control.
2. Select the Create a New
Profile... button.
3. Select its Style tab from
Properties and choose the
style class
profilesButtonCommand
Control.

Step: 2.06.01 – Add Style Classes to the profileForm Custom Control – Save Button

1. Launch the profileForm
Custom Control.
2. Select the Save button.
3. Select the Style tab and
choose the
profileButtonSubmit
style class.

Step: 2.06.02 – Add Style Classes to the profileForm Custom Control – Delete... Button

1. Select the Delete... button.
choose the
profileButtonCommand
style class.

Step: 2.06.03 – Add Style Classes to the profileForm Custom Control – Cancel Button

1. Select the Cancel
button.
choose the
profileButtonCancel
style class.

Step: 2.06.04 – Add Style Classes to the profileForm Custom Control – Edit Button
1. Select the Edit button.
choose the
profileButtonCommand
style class.

Step: 2.07.01 – Create a New Style Class for the Profile Information Label
1. Select the Profile
Information Label on
the profileForm
Custom Control.
2. Select Font under the
Style tab, change the
font size and set the
text on the label to
Bold.

Step: 2.07.02 – Export Style Button
1. Select the Style tab for the
Profile Information
Label.
2. The custom formatting will
appear.
3. Click the Export button to
add this label format as a
style class.

Step: 2.07.03 – Create a New Style Class with Exported Style
1. In the Export Custom Formatting dialog the
formatting will appear. Deselect individual
attributes if desired.
2. Select the existing styles.css sheet.
3. Give this new style class a name

4. Click OK

5. Save and close the Custom Control.

Step: 2.08 – Demo Styling

Step: 2.10.00 – Search Through View Filtering

➢
You will learn how to use View filtering for search.
➢
You will learn how to create a search query edit box and
using the keys property show the results on follow on View
Panel.

Step: 2.11.01 – Add new controls to the searchFrom Custom Control
1. Launch the searchForm
Custom Control.
2. Add a line break after the
button, and drag and drop a
Label - change the text on the
label to Profile Search.
3. Add a couple more line breaks
and a label – change the text of
this label to Enter the criteria
for a person to search for:
4. Add a few more line breaks and
then add an Edit Box. Change
the name of the Edit Box to
searchCritera, and set the
width of the edit box to be 221
Pixels.

Step: 2.11.02 – Add a Request Scope Variable to the Edit Box
1. Select the Data tab for the
Edit Box.
2. Select the Advanced radio
button.
3. Select Scoped Variable
from the Use drop-down.
4. Choose Request Scope
from Scope.
5. Enter nameToSearch for
Variable Name.

Step: 2.11.03 – Add Validation to the Search Query Edit Box
1. Select the Validation tab
next for the edit box.
2. Check the box for Required
Field. Type the message,
Please provide a name to
search.
3. We also want to restrict the
search query string to a
minimum of 5 characters
and a maximum of 20.
Provide a message to state
this valid search string
length.

Step: 2.11.04 – Search Query Enable Type Ahead
1. Select the Type Ahead tab
and check the Enable box.
2. Choose Partial from the Mode
drop-down.
3. Select the Computed property
menu button for
Suggestions.
4. On the Script Editor dialog
use the following script
'@DbColumn(@DbName(), “vwProfiles”,
1)'

5. Click OK.

Step: 2.12.01 – Search Button
1. From the Controls palette
add a button and changes
its label to Search....
2. Switch to the Style tab.
3. Select
profilesButtonCommand
as this button's style class .

Step: 2.12.02 – Search Button Simple Actions - 1st action
1. Switch to the Events view for
the Search button.
2. For the onclick event click the
Add Action... button to add a
simple action.
Dialog, select Basic for
Category, Execute Script for
Action and type
'sessionScope.nameToSearch =
requestScope.nameToSearch' as the
script to execute.
4. Click OK.

Step: 2.12.03 – Search Button Simple Actions - 2nd action
1. For the same onclick
event click the Add
Action... button.
Action dialog, set Basic
for Category, Open
Page for Action, and
results as the XPage to
open.
3. Click OK.
Both actions will now be
grouped together.
Custom Control.




Step: 2.13.01 – Setting the Keys for View Filtering
1. Launch the searchResults
Custom Control.
2. Select the View here and
open the All Properties
tab on Properties.
3. Expand the data->data
section and for keys select
the Computed property
menu button.

Step: 2.13.02 – Set the Keys Property
1. On the Script Editor
dialog add the following
script
'sessionScope.nameToSearch'
2. Click OK.

Step: 2.14.01 – Add a Computed Field to Display the Search Query
1. Still on the
searchResults Custom
Control several breaks
before the view panel.
2. Drag and drop a
Computed Field to the
Design pane.
3. Rename this computed
field to
resultsComputedField.

Step: 2.14.02 – Add the Computed Value
1. Select the Value tab on the
Computed Field Properties, then
click the JavaScript radio button.
2. Select the Open Script Dialog
button.
3. On the Script Editor dialog add the
following script:
'var criteria =
sessionScope.nameToSearch;
var title = "Profile search results for:
";
if(null != criteria && criteria != ""){
title += criteria;
}
else{
title = "No search criteria provided.";
}
return title;'
4. Click OK.

Step: 2.14.03 – Style the Computed Field
1. Switch to Style tab.
2. Select the style class
searchInfo.
3. Save all your changes.

Step: 2.15 – Demo Search on the Application

Part 3 – Contain Your Friends in a Repeat!

®

Part 3 - Contain Your Friends in a Repeat!
➢
You will learn how to use a Repeat Container Control.
➢
On the profileForm custom control you will add a form that allows
adding an existing profile contact as a friend as well as the list of
current friends with the option to remove them.
➢

Step: 3.00 – A Friend in a Repeat is a friend indeed...
 This is an overview
of what you will be
doing in this part.
 For Part 3, the
design of the
application has
been upgraded.
Use the supplied
application to do
the same.

Step: 3.01.01 – Create a Friends Form
Create a new form
named friend.

Step: 3.01.02 – Populate the Friend Form
Add three fields to this
friend Form:
- FriendID
- Name
- Email
All of these fields
should be of the Text
type and Editable.

Step: 3.02.01 – Create a Friends View
1. Create a new Notes
View name friends.
2. Make the style Blank.
3. Use the following
selection formula
'Select (Form = “friend”)'
4. Click
Save and Customize.

Step: 3.02.02 – Customize the Friends View
1. Add 3 columns to the
view with headers
called...
- FriendID
- Name
- Email
2. For the FriendID
column, bind this to the
“FriendID” field and
make this column sort
Ascending.
3. Bind the Name column
to Name, and Email to
the Email Column.

Step: 3.02.02 – Customize the Friends View
Bind the Name column
to Name, and Email to
the Email Column
Neither column requires
sorting.

Step: 3.03.01 – Add the Friends Table
1. Open the profileForm
Custom Control.
2. From the Container
Controls palette select a
drop a Table.
3. Give this table 6 rows
and 2 columns.

Step: 3.03.02 – Merge the top 2 cells of the table
Select the top two cells
of the table and select
Merge Cells from the
context menu.

Step: 3.03.03 – Add the My Friends Label
1. From the Core Controls
palette drag and drop a
Label to the merged
cell.
2. Set the text on the label
to My Friends.
3. Set the Font size to 12
and weight to Bold.


Step: 3.03.04.01 – Friends Table Name and Rendering
1. Change the name of the
table to friendsTable.
2. Select the computed
property menu button
for Visible.

Step: 3.03.04.02 - Friends Table Name and Rendering
 This will launch the Script editor.
2. Type !profileDocument.isNewNote()
3. This script will render the Friends
table if the document
(profileDocument) is not a new
document.
4. Click OK.

Step: 3.04.01 – Add Edit Boxes
1. Add 2 edit boxes from
the palette to cells in
the table.
2. Rename these edit
boxes to friendName
for the first and
friendEmail for the
second.
3. Set the width to 200
pixels for both edit
boxes.

Step: 3.04.02.01 – Enable Type Ahead for the 'friendName' Edit Box
1. On the first edit box,
friendName, select the
Type Ahead tab on its
Properties.
2. Check the box for
Enable Type Ahead.
3. Set Mode to Partial in
the dropdown.
4. Select the Computed
property menu button
for Suggestions.

Step: 3.04.02.02 – Type Ahead formula for 'friendName' edit box
1. Use the following
formula for the type
ahead suggestions.
'@DbColumn(@DbName(),
“vwProfiles”, 1)'

2. Click OK.

Step: 3.04.02.03 – Add an onChange event to friendName
1. Select Events tab for the
friendName edit box.
2. Choose the onChange
event.
3. Click Add Action... .

Step: 3.04.02.04 – onChange event script for friendName edit box
1. On the Add Simple Action dialog,
select Basic from Category and
Execute Script from Action.
2. Add the following script to be
executed...
'varvalue = @DbLookup(@DbName(),
"vwProfiles",
getComponent("friendName").getValue(),
"Email");
if(null != value){
var email = getComponent("friendEmail");
email.setValue(value);
}'
This script runs when there is a change in
friendName. It uses the value of friendName
to get back the email address if that name exits
on the database which it uses to populate
friendEmail.

3. Click OK.


Step: 3.04.02.05 – Set Partial Refresh on the onChange event.
 We want this action to only
happen on one control
rather than the whole
XPage, so we need to use
Partial refresh.
2. Select the radio button for
Partial Update from the
server Options, then select
the Select Element...
button
3. Select friendEmail as the
element on the XPage to
update.
4. Click OK.


Step: 3.05.01 – Add Labels for the Edit Boxes
1. From the palette drag
and drop 2 label
controls to the table
and place them beside
the edit boxes.
2. Change the labels to
Name: and Email.

Step: 3.05.02 – Set the Labels to the Edit Boxes
Set both Labels, Name
and Email, to the Edit
Boxes friendName
and friendEmail.


Step: 3.06.01 – Add a Friend Button
palette, drag and drop
a button to the cell
below the email edit
box on the table.
2. Change the name of the
button to
addFriendButton.
3. In the Label field, type
Add a Friend.

Step: 3.06.02 – Style the Add a Friend button
1. Go to the Style tab for
the button.
2. From the style sheet
select the style class
profilesButtonSubmit.

Step: 3.06.03 – Add a onClick event to the button
1. Select the Events tab
and then for the
onclick event click the
Script Editor radio
button.
2. Click the Script dialog
button.

Step: 3.06.04 – Script for the onClick event.
1. Add the following script to the dialog.
'
var newFriendDoc =
database.createDocument();
newFriendDoc.appendItemValue("Form",
"friend");
newFriendDoc.appendItemValue("FriendID",
profileDocument.getNoteID());
newFriendDoc.appendItemValue("Name",
getComponent("friendName").getValue());
newFriendDoc.appendItemValue("Email",
getComponent("friendEmail").getValue());
newFriendDoc.save();
getComponent("friendName").setValue("");
getComponent("friendEmail").setValue(""); '
2. Click OK.

Step: 3.06.05 – Set Partial Refresh on the Button to the Friends Table.
1. Still on the Events tab,
select Partial Update for
this onClick event.
2. Choose the Select
Element... button.
3. From the follow on
dialog select the
element friendsTable.
4. Click OK.

Step: 3.07.01 – Add a Panel to be the friendsContainer
1. From the palette, add a
Panel Container Control
to the last cell in the
friends Table.
2. Name this panel
friendsContainer.
This will contain the
Friends Repeat
container and will be
used for Partial Refresh.

Step: 3.08.01 – Add the Repeat
1. Add a Repeat Container
Control onto the
friendsContainer
panel.
2. Name this Repeat
friendsRepeat.

Step: 3.08.02 – Add a Date Source to the Repeat
1. On the Iteration section of the
Repeat, select the radio button for
JavaScript, then select the Open
Script Dialog button.
2. On the dialog add the following
script for the Repeat to iterate
through...
'if(!profileDocument.isNewNote()){
var friendsView =
database.getView("friends");
return
friendsView.getAllDocumentsByKey(profileDoc
ument.getNoteID());
}'
This scripts returns a Notes Document
Collection based on the current
document's Note Id filtering the
Friends Notes View.
3. Click OK.

Step: 3.08.03 – Add a Collection Name to the Repeat
Add friendDoc as the
Collection Name for the
Repeat.
This will
programmatically
identify the data source
for the Repeat.

Step: 3.09.01 – Add a Panel to the Repeat
Now add a Panel to the
Repeat.
There are two purposes
for this Panel.
First, it will contain a
Domino document
data source to friend
form which is to be
used to remove
friends from the list.
Second, this panel will
be used for styling.

Step: 3.09.02 – Add a Domino Document Data Source to the Panel
1. Select the Data tab on
the Panel's Properties.
2. Select the Add button
and choose Domino
Document.
3. Rename the Domino
document data source
to friendDocument.

Step: 3.09.03 – Select a form and Default action for the panel's Data source.
1. Still in the Panel's Data
tab, for the data source
select the form friend
for Form and Open
document for Default
action.
2. For Document Id select
the Computed property
menu button for
Document ID.

Step: 3.09.04 – Add a Open document id to the Panel's Data source
1. On the Script Editor
dialog, add the
following script.
 'friendDoc.getNoteID()'
 This gets the
document id of the
Friend doc on the
Repeat's row.
2. Click OK.

Step: 3.09.05 – Add Styling to the Repeat's Panel
Switch to the Style tab
on the Repeat's Panel
and select the style
class friendsPanel.

Step: 3.10.01 – Add a Table to the Panel for Friends
Add a table with 1 row
and 2 columns to the
Panel.
This will be the
container for the
existing friends to that
profile document.

Step: 3.10.02 – Add 2 Computed Fields to the Table
palette add two
Computed Fields to the
first cell in the table.
2. Separate the Computed
Fields with a line break
- <xp:br/>

Step: 3.10.03 – Bind the first Computed field in the Table
1. Select the first
Computed field in the
table and select the
Value tab from the
Properties.
2. Click the Advanced
radio button.
3. Select Expression
Language from the
Use drop-down and
then add the following
script 'friendDoc.Name' to
the value field.

Step: 3.10.04 – Style the Friends Name Computed Field
1. Switch from the Value
tab to the Style tab on
the first Computed
Field's Properties.
friendsName.

Step: 3.10.05 – Bind the 2nd Computed Field
1. Select the second
Computed Field in the
Friends Table and
choose the Value tab.
2. Click the Advanced
radio button.
3. Select Expression
Language from the
Use drop-down and
then add the following
script 'friendDoc.Email'
to the value field.


Step: 3.10.06 – Style the 2nd Computed Field
1. Switch from the Value
tab to the Style tab on
the first Computed
Field's Properties.
friendsEmail.

Step: 3.11.01 – Add a link to Remove friends
1. Add a line break after the
table, then drag and drop
a Link to the Panel.
2. Change the Name of the
Link to
removeFriendLink.
3. Change the label of this
link to Remove Friend.

Step: 3.11.02 – Add a Style Class to the Remove Friend Link
1. Still on the Link
Properties, select the
Style tab.
2. Choose the style class
for the link
removeFriend.

Step: 3.11.03 – Remove Friend Link Action
1. Now select the Events
view for the Link.
2. For the onclick event,
click the Add Action...
button to create a new
simple action for this
Link.

Step: 3.11.04 – Remove Friend Link Simple Action
1. For this Simple Action
select Basic for
Category, Execute
Script for Action, then
add type the following
script to be executed.
'friendDocument.getDocument()
.removePermanently(true)'

2. When run, this script
will delete the
document from the data
source.
3. Click OK.

Step: 3.11.05 – Remove Friend Link Partial Refresh Action
1. With the simple action
created select Partial
Update from the
Server Options.
2. Select the Select
Element... button to
launch the Select
Elements to Update
dialog. Choose the
friendsContainer
element for this action
to refresh.
3. Click OK.

Step: 3.11.06 – Disable validation for this Remove Friends Action
Finally, check the box
for No data validation.
 This will allow this
action to be run
without triggering the
validation on other
elements.

Step: 3.12 – Demo Your Friends

Questions & Answers...

®

More information on XPages:
Try out the XPages Tutorial on Domino Designer 8.5 Help (Lotus Domino Designer XPages User Guide);

Check out the articles (http://www-10.lotus.com/ldd/ddwiki.nsf/archive?
openview&title=XPages&type=cat&cat=XPages&sort=I ) and videos (http://www-10.lotus.com/ldd/ddwiki.nsf/archive?
openview&title=XPages%20>%20Video&type=cat&cat=XPages&tag=Video ) on the Designer Wiki;

See what the blogs (http://planetlotus.org/search.php?search=xpages&sort=1 ) are saying about XPages.

Other XPages sessions at Lotusphere 2009
SUNDAY
JMP203 Getting to Know XPages and the New IBM Lotus Domino Designer DL Americas Seminar Maureen Leland & Maire Kehoe
JMP206 Introducing IBM Lotus Domino Designer 8.5, Now with Eclipse! DL S. Hemisphere III Dan O'Connor & Ishfak Bhagat
JMP206R Introducing IBM Lotus Domino Designer 8.5, Now with Eclipse! DL Americas Seminar Dan O'Connor & Ishfak Bhagat
JMP203R Getting to Know XPages and the New IBM Lotus Domino Designer DL S. Hemisphere I Maureen Leland & Maire Kehoe
MONDAY
AD204 XPages 101 DL S. Hemisphere II Martin Donnelly & Eamon Muldoon
BP105 Developing a World-class Web 2.0 Application with XPages DL S. Hemisphere IV-V Bruce Elgort & Matthew White
AD201 IBM Lotus Domino Designer 8.5: A New Beginning DL N. Hemisphere D-E Peter Janzen & Maureen Leland
AD205 XPages: Things You Can't Afford to Miss! DL N. Hemisphere A-C Martin Donnelly & Thomas Gumz
AD205R XPages: Things You Can't Afford to Miss! DL N. Hemisphere A-C Martin Donnelly & Thomas Gumz
TUESDAY
BOF205 IBM Lotus Notes and Domino Application Development: Meet The Developers SW Osprey 1-2 Margaret Rora
AD204R XPages 101 SW 7-10 Martin Donnelly & Eamon Muldoon
AD212 10 Web 2.0 User Interface Patterns for IBM Lotus Notes and XPages SW 5-6 Nathan Freeman & Chris Blatnick
AD201R IBM Lotus Domino Designer 8.5: A New Beginning DL S. Hemisphere I Peter Janzen & Maureen Leland
AD207 Building an "XPages-Powered" IBM Lotus Domino Application DL S. Hemisphere I John Mackey
WEDNESDAY
BOF207 IBM Lotus Domino Web Development - XPages and Web 2.0 SW Macaw 1 Phillipe Loher & Philippe Riand
BOF214 IBM Lotus Domino Designer - A New Perspective SW Mockingbird 1-2 Thomas Peisel & Maureen Leland
AD208 Teaching Old Docs New Tricks: Creating A New Front End With XPages SW 5-6 Jo Grant & Craig Wolpert
AD220 Real World Examples of How Customers Are Utilizing XPages DL S. Hemisphere I Philippe Riand & Peter Janzen
BP105R Developing a World-class Web 2.0 Application with XPages SW Mockingbird Bruce Elgort & Matthew White
SHOW106 Building A Cool Web 2.0 Application With XPages SW Osprey Azadeh Salehi & Paul Hannan
THURSDAY
AD206 "Super-Sleek" Your Apps with XPages Themes DL S. Hemisphere I Kathy Howard & Tony McGuckin

Legal disclaimer
© IBM Corporation 2008. 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.
BM, 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.

Building A Cool Web 2.0 Application With XPages

More Related Content

Similar to Building A Cool Web 2.0 Application With XPages (20)

More from ddrschiw (20)

Recently uploaded (20)

Building A Cool Web 2.0 Application With XPages