Building A Cool Web 2.0 Application With XPages

Building A Cool Web 2.0 Application With XPages

Paul Hannan | Domino XPages QE Lead | Dublin | IBM

Azadeh Salehi | Domino Designer QE | Westford, MA | IBM

SHOW106 | Update 20090203

Hello , welcome to our Show and Tell session where Azi and I will show you how to build a cool Web 2.0 Application with XPages.

I am ... Azi thanks Paul. I am part of the Designer QE team in Westford, MA and I focus on Design time testing and automation. I have been on the team over a year and worked on Lotus Component Designer prior to that.

I'm glad to see you here and also welcome you to our session.

Thanks Azi.

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.

The Show and Tell session replaces the Hands on Session that was presented in previous years. With this session we put you on the fast track to learn about XPages.

Through the ftp site, you will have access to the presentation and all all reference materials so you can follow on and build your own version of the cool app on your own time at your own pace. Of course, we will also be at the Meet the Developers lab to answer any questions you may have.

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)

For today's agenda, as you can see, we'll start with a quick introduction. Then we have 3 parts .... with Question and Answer at the end as we are limited on our time today and are watching our each and every minute :-)

Introduction:

Designer UI Overview:

Azi - As you can see on Paul's screen, there are several sections to the Designer UI, starting with the Applications Navigator that replaces bookmarks. The applications can also be grouped into working sets so you only see the ones you want at one time.

Below that is the Outlines view which comes from Eclipse and is used in conjunction with all new editors. It provides a hierarchical view of what is in the editor.

In the center is where all the editors appear and with the new editors you can access the source code from there. To the right is the Controls palette where you can easily drag and drop controls onto XPages and custom controls. To the right of the Controls palette is the Data palette where you can see the elements in your data sources and drag and drop them too.

Below the center pane, you have the Properties panel which is a generic Eclipse view for all elements. You can rearrange views for XPages tabs and controls.

Through the events tab you can add events and add validation onto controls on XPages and custom controls. Then you have the Problems view which shows any errors in your code.

Introduction:

DEMO | The Cool Application Sneak Preview...

Part 1 The Basics

Part 1 The Basics

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.00

Part 1 The Basics

Launch Domino Designer V8.5

From the main menu, select File>New Application (Ctrl+N).

In the Title field, type Profiles.

In the Template field, select Blank.

Click OK.

Step: 1.01.00 Create a blank application - Profiles

Part 1 The Basics

Click New Form.

In the Name field, type profile.

In this exercise, we will use this form to create documents.

Step: 1.02.01 Create a form

Part 1 The Basics

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.02 Add static text to the form

Part 1 The Basics

Click the Create Field icon on the toolbar.

Step: 1.02.03 Create a Full Name field

Part 1 The Basics

In the editor, beside Full Name: , create a new field named FullName.

Select Computed as the type of text field.

Add the following formula as its value
'@Trim(FirstName + + LastName)'.

Step: 1.02.04 Set a computed formula on the FullName field

Part 1 The Basics

Beside First Name:, create a new field named FirstName.

Step: 1.02.05 Create a First Name field

Part 1 The Basics

Beside Last Name:, create a new field named LastName.

Step: 1.02.06 Create a Last Name field

Part 1 The Basics

Beside Date of birth:, create a new field named DOB.

In the Type field, select Date/Time.

Step: 1.02.07 Add a Date of Birth field

Part 1 The Basics

Beside Company:, create a new field named Company.

Step: 1.02.08 Add a Company field

Part 1 The Basics

Beside Job Title:, create a new field named Job Title.

Save the profile form.

Step: 1.02.09 Add a Job Title field

Part 1 The Basics

Launch the untitled view in the editor.

Change the name to profiles view.

Add the alias vwProfiles.

Step: 1.03.01 Edit the existing untitled view

Part 1 The Basics

Edit the existing (1st) column.

Change the title to FullName.

Bind this column to the FullName field.

Step: 1.03.02 The FullName column

Part 1 The Basics

On the Column Properties for the FullName column, select the Sort tab.

Click the Ascending radio button.

Step: 1.03.03 Sort the FullName Column

Part 1 The Basics

Append a new column to this view.

Change the title to Company.

Bind the column to the Company field.

Step: 1.03.04 Add a column for Company

Part 1 The Basics

Append a final column to the view.

Change the column title to Job Title.

Bind this column to the JobTitle field.

Save and close the view.

Step: 1.03.05 Add a column for Job Title

Part 1 The Basics

Double click on Custom Controls in the Application Navigator.

In the New Custom Control dialog enter the name container.

Click OK.

Step: 1.04.01 Create a new Custom Control container

Part 1 The Basics

Add 6 panels from the Container Controls palette to the Design pane.

Step: 1.04.02 Add panels to the container custom control

Part 1 The Basics

Select the first panel.

In the Name field, enter frame.

Continue to select the other panels and enter the following names:
- header;
- headerInner;
- main;
- tabBar;
- content.

Step: 1.04.03 Name the panels

Part 1 The Basics

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.04 Rearrange the panels

Part 1 The Basics

Select the Label control from the Controls Palette. Drop it into the headerInner panel.

Change the label to Profiles.

Step: 1.04.05 Add a label to the headerInner panel

Part 1 The Basics

Select the Tabbed Panel container control from the Container Controls palette.

Drop the Tabbed Panel to the tabBar panel.

Step: 1.04.06 Add a tabbed panel to the tabBar panel

Part 1 The Basics

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.07 Rename the tabs on the Tabbed Panel

Part 1 The Basics

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.08 Add another tab to the Tabbed Panel

Part 1 The Basics

From the Core Controls palette drag and drop an Editable Area control to the content Panel.

Step: 1.04.09 Add an Editable Area

Part 1 The Basics

Rename the Editable Area's Name and Facet Name to contentArea.

Step: 1.04.10 Rename the Editable Area

Part 1 The Basics

In the Custom Control Properties for container, select the Property Definition tab.

Add a new property to this custom control by selecting the New Property button.

Name this new property selectedTabId.

Save and close the Custom Control.

Step: 1.04.11 Add a new property to the Custom Control

Part 1 The Basics

Create a new Custom Control named profileForm.

Step: 1.05.01 Create a new Custom Control - profileForm

Part 1 The Basics

On the new profileForm Custom Control add a Label from the Core Controls palette to the Design pane.

In the Properties for this Label rename this label to Profile Information.

Step: 1.05.02 Add a Label to the profileForm

Part 1 The Basics

In the Custom Controls Properties select the Data tab.

Then select Add, and from the dropdown select Domino Document.

document1 is now listed as a data source.

Step: 1.05.03 Add a Domino Document data source

Part 1 The Basics

From the Form dropdown select the profile form.

Change the data source name to profileDocument.

Step: 1.05.04 Rename and add a form to the data source

Part 1 The Basics

Still on the profileForm Custom Control from the main menu select Window >Show Eclipse Views >Data.

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.05 Launch the Data Eclipse view

Part 1 The Basics

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.06 Drop the data sources to the Design pane

Part 1 The Basics

For the Date of Birth control select the Data tab in Properties.

Check the box for Use date/time picker pop-up.

Step: 1.05.07 Add a Date Time Picker

Part 1 The Basics

From the Controls palette drag and drop 4 buttons.

Then change the labels on these buttons to

Save

Delete...

Cancel

Edit

3. Save and close the

Custom Control.

Step: 1.05.08 Add Buttons

Part 1 The Basics

Create a new Custom Control named searchForm.

Step: 1.06.01 Create a new Custom Control - searchForm

Part 1 The Basics

From the Controls palette add a button.

Change the Label on this button to Create a New Profile.


Step: 1.06.02 Add a Button to the Custom Control - searchForm

Part 1 The Basics

Create a new Custom Control named searchResults.

Step: 1.07.01 Create a Custom Control - searchResults

Part 1 The Basics

From the palette select a View Container Control and drop it to the Design pane.

This launches the Select Data Source for View dialog.

Select the view, profiles view created previously from the drop-down. This will populate the remaining windows on the dialog.

Click OK.

Step: 1.07.02 Add a View Container Control to searchResults

Part 1 The Basics

Set the width of the view to 100%.


Step: 1.07.03 Set the View Panel width on searchResults

Part 1 The Basics

Create a new XPage named home.

Step: 1.08.01 Create a new XPage - home

Part 1 The Basics

From the Custom Controls palette, drag and drop the Custom Control container to the Design pane of the home XPage.

Step: 1.08.02 Add the container Custom Control to the home XPage

Part 1 The Basics

In the Outline select the container Custom Control.

In its Properties, select All Properties. Expand custom, and for selectedTabId enter homeTab.

Step: 1.08.03 Set the Selected Tab Id Property

Part 1 The Basics

Then to the Editable Area, highlighted with the green dot, drag and drop the searchForm Custom Control.

Save your changes and close the XPage.

Step: 1.08.04 Add searchForm to the Editable Area

Part 1 The Basics

Create a new XPage named profile.

Step: 1.09.01 Create a new XPage - profile

Part 1 The Basics

From the Custom Controls palette, drag and drop to the Design pane of the profile XPage the container Custom Control.

Step: 1.09.02 Add the container Custom Control to the profile XPage

Part 1 The Basics

In the Outline select the container custom control.

In its Properties, select All Properties. Expand custom, and for selectedTabId enter profilesTab.

Step: 1.09.03 Set the Selected Tab Id Property

Part 1 The Basics

Then to the Editable Area, highlighted with the green dot, drag and drop the profileForm Custom Control.


Step: 1.09.04 Add the profile Custom Control

Part 1 The Basics

Create a new XPage named results.

Step: 1.10.01 Create a new XPage - results

Part 1 The Basics

From the Custom Controls palette drag and drop to the design pane the container Custom Control.

Step: 1.10.02 Add the container Custom Control to the results XPage

Part 1 The Basics

In the Outline select the container custom control.

In its Properties, select All Properties. Expand custom, and for selectedTabId enter resultsTab.

Step: 1.10.03 Set the SelectedTabId Property

Part 1 The Basics

Then to the Editable Area, highlighted with the green dot, drag and drop the searchResults Custom Control.


Step: 1.10.04 Add the searchResults Custom Control

Part 1 The Basics

Reopen the container Custom Control and locate the Tabbed Panel in the outline.

Select the Tab Panel homeTab. Then for its onclick event click the Add Action... button.

Step: 1.11.01 Add Actions to container Custom Control Home Tab

Part 1 The Basics

On the Add Simple Action dialog select Basic for Category, Open Page for Action and the home XPage to open.

Click OK.

Step: 1.11.02 Add Actions to container Custom Control Home Tab

Part 1 The Basics

Select the Tab Panel resultsTab. Then for its onclick event click the Add Action... button.

On the Add Simple Action dialog select Basic for Category, Open Page for Action and the results XPage to open.

Click OK.

Step: 1.11.03 Add Actions to container Custom Control Results Tab

Part 1 The Basics

Select the Tab Panel profilesTab. Then for its onclick event click the Add Action... button.

On the Add Simple Action dialog select Basic for Category, Open Page for Action and the profile XPage to open.

Click OK.


Step: 1.11.04 Add Actions to container Custom Control Profiles Tab

Part 1 The Basics

Reopen the profileForm Custom Control and select the Save button.

In the Button type field, select Submit.

Step: 1.12.01 Add Actions to profileForm Custom Control Save Button

Part 1 The Basics

Still on the Save button select the Events tab.

For the onclick event select the Add Action... button.


Click OK.

Step: 1.12.02 Add Actions to profileForm Custom Control Save Button

Part 1 The Basics

For the Delete... button select the Events tab.


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?

Click OK.

Step: 1.12.03 Add Actions to profileForm Custom Control Delete... Button

Part 1 The Basics

In the editor, select the Cancel button.

In the Button type field, select Cancel.

Step: 1.12.04 Add Actions to profileForm Custom Control Cancel Button

Part 1 The Basics

Still on the Cancel button select the Events tab.



Click OK.

Step: 1.12.05 Add Actions to profileForm Custom Control Cancel Button

Part 1 The Basics

For the Edit button select the Events tab.


On the Add Simple Action dialog select Document for Category, Change Document Mode for Action, and Edit Mode for Document Mode.

Click OK.

Step: 1.12.06 Add Actions to profileForm Custom Control Edit Button

Part 1 The Basics

Reopen the searchForm Custom Control and select the Create a New Profile... button.

For the button select the Events tab.


On the Add Simple Action dialog select Basic for Category, Open Page for Action, profile as the XPage to open next and New Document for Target Document.

Click OK.

Save your changes.

Step: 1.13.01 Add Actions to searchForm Custom Control New Profile Button

Part 1 The Basics

Reopen the searchResults Custom Control and select the column for FullName on the View.

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.


Step: 1.14.01 Add Actions FullName Column Link

Part 1 The Basics

Reopen the container Custom Control.

Select the Tabbed Panel and for its Properties select the Computed property menu button.

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

Part 1 The Basics

In the Script Editor dialog, enter the script 'compositeData.selectedTabId'

Click OK.


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

Part 1 The Basics

Reopen the profileForm Custom Control.

Select the Save button. Then in its Button Properties select the Computed property menu button for the Visible option.

On the Script Editor dialog enter 'profileDocument.isEditable()'

Click OK.

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

Part 1 The Basics

Select the Delete... button. Then in its Button Properties select the Computed property menu button for the Visible option.

On the Script Editor dialog enter '!profileDocument.isNewNote()'

Click OK.

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

Part 1 The Basics

Select the Edit button. Then in its Button Properties select the Computed property menu button for the Visible option.

On the Script Editor dialog enter '!profileDocument.isEditable()'

Click OK.

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

Part 1 The Basics

Still in the profileForm Custom Control, go to All Properties for this Custom Control.

For the property computeWithForm select onsave.


Step: 1.16 The computeWithForm Property on the profileForm Custom Control

Part 1 The Basics

Reopen the profile form and launch its form properties.

In the Defaults tab, in the Display Xpage instead field, select profile.

Save and close the form.

Step: 1.17 profile Form Web Access

Part 1 The Basics

Open the Application Properties and select the Launch tab.

For Web Browser Launch, select Open Designated XPage for Launch, and home as the XPage to launch.

Step: 1.18 Application Properties Web Launch Setting

Part 1 The Basics

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

Step: 1.19 Demo Part 1 The Basics

Part 2 Styling and Search Features


What will you learn

You will learn how XPages use CSS files and how it applies style classes to control the applications look and feel.

Task Description

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.00 Adding Styles Look and Feel.


Select (double click) Images under Resources in the Application Navigator.

Select the Import Image Resource button.

Select all of the supplied GIF images.

Click OK.

The images are now added to the application.

Step: 2.01.01 Import Image Resources


Select Style Sheet under Resources in the Application Navigator.

Click the New Style Sheet button.

In the Name field, type styles.

Click OK.

Step: 2.02.01 Create a new Style Sheet - styles


Copy and paste the contents of the supplied styles.txt file into the new styles.css file.

Save your changes.

Step: 2.02.02 Add Style Classes to 'styles.css'


Select Custom Controls on the Application Navigator.

Open the first Custom Control container.

For its Properties select Resources.

Click the Add Style Sheet... button.

Step: 2.03.01 Add the new Style Sheet as Resource


On the Add Style Sheet to Page dialog, select the only style sheet available, styles.css.

Click OK.


Step: 2.03.02 Select the new style sheet from the dialog


Open the remaining Custom Controls, profileForm, searchForm and searchResults, in turn...

Add the same style sheet resource and save your changes.

Step: 2.03.03 Add the same Style Sheet to the remaining Custom Controls


Launch the container Custom Control.

Select Panel: frame in the Outline view.

Select the Style tab for this Panel.

Choose the frame style class.

Step: 2.04.01 Add Style Classes to the container Custom Control - Frame


In the Outline expand frame and select header.

From this Panel's Style select the header style class.

Step: 2.04.02 Add Style Classes to the container Custom Control - Header


In the Outline expand header and select headerInner.

From this Panel's Style select the headerInner style class.

Step: 2.04.03 Add Style Classes to the container Custom Control - headerInner


In the Outline expand headerInner and select the Label.

From this Label's Style select the headerInnerTitle style class.

Step: 2.04.04 Add Style Classes to the container Custom Control - headerInnerTitle


In the Outline expand frame and select main.

From this Panel's Style select the main style class.

Step: 2.04.05 Add Style Classes to the container Custom Control - main


In the Outline expand main and select tabBar.

From this Panel's Style select the tabBar style class.

Step: 2.04.06 Add Style Classes to the container Custom Control - tabBar


In the Outline expand main and select Panel:content.

From this Panel's Style select the content style class.


Step: 2.04.07 Add Style Classes to the container Custom Control - content


Launch the searchForm Custom Control.

Select the Create a New Profile... button.

Select its Style tab from Properties and choose the style class profilesButtonCommand


Step: 2.05.01 Add Style Classes to the searchForm Custom Control Button


Launch the profileForm Custom Control.

Select the Save button.

Select the Style tab and choose the profileButtonSubmit style class.

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


Select the Delete... button.

Select the Style tab and choose the profileButtonCommand style class.

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


Select the Cancel button.

Select the Style tab and choose the profileButtonCancel style class.

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


Select the Edit button.

Select the Style tab and choose the profileButtonCommand style class.

Step: 2.06.04 Add Style Classes to the profileForm Custom Control Edit Button


Select the Profile Information Label on the profileForm Custom Control.

Select Font under the Style tab, change the font size and set the text on the label to Bold.

Step: 2.07.01 Create a New Style Class for the Profile Information Label


Select the Style tab for the Profile Information Label.

The custom formatting will appear.

Click the Export button to add this label format as a style class.

Step: 2.07.02 Export Style Button


In the Export Custom Formatting dialog the formatting will appear. Deselect individual attributes if desired.

Select the existing styles.css sheet.

Give this new style class a name

Click OK


Step: 2.07.03 Create a New Style Class with Exported Style


Step: 2.08 Demo Styling


Step: 2.10.00 Search Through View Filtering

What will you learn

You will learn how to use View filtering for search.

Task Description

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


Launch the searchForm Custom Control.

Add a line break after the button, and drag and drop a Label - change the text on the label to Profile Search.

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:

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.01 Add new controls to the searchFrom Custom Control


Select the Data tab for the Edit Box.

Select the Advanced radio button.

Select Scoped Variable from the Use drop-down.

Choose Request Scope from Scope.

Enter nameToSearch for Variable Name.

Step: 2.11.02 Add a Request Scope Variable to the Edit Box


Select the Validation tab next for the edit box.

Check the box for Required Field. Type the message, Please provide a name to search.

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.03 Add Validation to the Search Query Edit Box


Select the Type Ahead tab and check the Enable box.

Choose Partial from the Mode drop-down.

Select the Computed property menu button for Suggestions.

On the Script Editor dialog use the following script '@DbColumn(@DbName(), vwProfiles, 1)'

Click OK.

Step: 2.11.04 Search Query Enable Type Ahead


From the Controls palette add a button and changes its label to Search....

Switch to the Style tab.

Select profilesButtonCommandas this button's style class .

Step: 2.12.01 Search Button


Switch to the Events view for the Search button.

For the onclick event click the Add Action... button to add a simple action.

On the Add Simple Action Dialog, select Basic for Category, Execute Script for Action and type 'sessionScope.nameToSearch = requestScope.nameToSearch' as the script to execute.

Click OK.

Step: 2.12.02 Search Button Simple Actions - 1st action


For the same onclick event click the Add Action... button.

On the Add Simple Action dialog, set Basic for Category, Open Page for Action, and results as the XPage to open.

Click OK.

Both actions will now be grouped together.

4. Save and close the Custom Control.

Step: 2.12.03 Search Button Simple Actions - 2nd action


Launch the searchResults Custom Control.

Select the View here and open the All Properties tab on Properties.

Expand the data->data section and for keys select the Computed property menu button.

Step: 2.13.01 Setting the Keys for View Filtering


On the Script Editor dialog add the following script 'sessionScope.nameToSearch'

Click OK.

Step: 2.13.02 Set the Keys Property


Still on the searchResults Custom Control several breaks before the view panel.

Drag and drop a Computed Field to the Design pane.

Rename this computed field to resultsComputedField.

Step: 2.14.01 Add a Computed Field to Display the Search Query


Select the Value tab on the Computed Field Properties, then click the JavaScript radio button.

Select the Open Script Dialog button.

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;'

Click OK.

Step: 2.14.02 Add the Computed Value


Switch to Style tab.

Select the style class searchInfo.

Save all your changes.

Step: 2.14.03 Style the Computed Field


Step: 2.15 Demo Search on the Application

Part 3 Contain Your Friends in a Repeat!

Part 3 - Contain Your Friends in a Repeat!

What will you learn

You will learn how to use a Repeat Container Control.

Task Description

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.


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.00 A Friend in a Repeat is a friend indeed...


Create a new form named friend.

Step: 3.01.01 Create a Friends 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.01.02 Populate the Friend Form


Create a new Notes View name friends.

Make the style Blank.

Use the following selection formula
'Select (Form = friend)'

Click Save and Customize.

Step: 3.02.01 Create a Friends View


Add 3 columns to the view with headers called...
- FriendID
- Name
- Email

For the FriendID column, bind this to the FriendID field and make this column sort Ascending.

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.02.02 Customize the Friends View


Open the profileForm Custom Control.

From the Container Controls palette select a drop a Table.

Give this table 6 rows and 2 columns.

Step: 3.03.01 Add the Friends Table


Select the top two cells of the table and select Merge Cells from the context menu.

Step: 3.03.02 Merge the top 2 cells of the table


From the Core Controls palette drag and drop a Label to the merged cell.

Set the text on the label to My Friends.

Set the Font size to 12 and weight to Bold.

Step: 3.03.03 Add the My Friends Label


Change the name of the table to friendsTable.

Select the computed property menu button for Visible.

Step: 3.03.04.01 Friends Table Name and Rendering


This will launch the Script editor.

Type !profileDocument.isNewNote()

This script will render the Friends table if the document (profileDocument) is not a new document.

Click OK.

Step: 3.03.04.02 - Friends Table Name and Rendering


Add 2 edit boxes from the palette to cells in the table.

Rename these edit boxes to friendName for the first and friendEmail for the second.

Set the width to 200 pixels for both edit boxes.

Step: 3.04.01 Add Edit Boxes


On the first edit box, friendName, select the Type Ahead tab on its Properties.

Check the box for Enable Type Ahead.

Set Mode to Partial in the dropdown.

Select the Computed property menu button for Suggestions.

Step: 3.04.02.01 Enable Type Ahead for the 'friendName' Edit Box


1. Use the following formula for the type ahead suggestions.

'@DbColumn(@DbName(), vwProfiles, 1)'

2. Click OK.

Step: 3.04.02.02 Type Ahead formula for 'friendName' edit box


Select Events tab for the friendName edit box.

Choose the onChange event.

Click Add Action... .

Step: 3.04.02.03 Add an onChange event to friendName


1. On the Add Simple Action dialog, select Basic from Category and Execute Script from Action.

2. Add the following script to be executed...

'var value = @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.04 onChange event script for friendName edit box


We want this action to only happen on one control rather than the whole XPage, so we need to use Partial refresh.

Select the radio button for Partial Update from the server Options, then select the Select Element... button

Select friendEmail as the element on the XPage to update.

Click OK.

Step: 3.04.02.05 Set Partial Refresh on the onChange event.


From the palette drag and drop 2 label controls to the table and place them beside the edit boxes.

Change the labels to Name: and Email.

Step: 3.05.01 Add Labels for the Edit Boxes


Set both Labels, Name and Email, to the Edit Boxes friendName and friendEmail.

Step: 3.05.02 Set the Labels to the Edit Boxes


From the Controls palette, drag and drop a button to the cell below the email edit box on the table.

Change the name of the button to addFriendButton.

In the Label field, type Add a Friend.

Step: 3.06.01 Add a Friend Button


Go to the Style tab for the button.

From the style sheet select the style class profilesButtonSubmit.

Step: 3.06.02 Style the Add a Friend button


Select the Events tab and then for the onclick event click the Script Editor radio button.

Click the Script dialog button.

Step: 3.06.03 Add a onClick event to the button


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.04 Script for the onClick event.


Still on the Events tab, select Partial Update for this onClick event.

Choose the Select Element... button.

From the follow on dialog select the element friendsTable.

Click OK.

Step: 3.06.05 Set Partial Refresh on the Button to the Friends Table.


From the palette, add a Panel Container Control to the last cell in the friends Table.

Name this panel friendsContainer.

This will contain the Friends Repeat container and will be used for Partial Refresh.

Step: 3.07.01 Add a Panel to be the friendsContainer


Add a Repeat Container Control onto the friendsContainer panel.

Name this Repeat friendsRepeat.

Step: 3.08.01 Add 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(profileDocument.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.02 Add a Date Source to the Repeat


Add friendDoc as the Collection Name for the Repeat.

This will programmatically identify the data source for the Repeat.

Step: 3.08.03 Add a Collection Name 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.01 Add a Panel to the Repeat


Select the Data tab on the Panel's Properties.

Select the Add button and choose Domino Document.

Rename the Domino document data source to friendDocument.

Step: 3.09.02 Add a Domino Document Data Source to the Panel


Still in the Panel's Data tab, for the data source select the form friend for Form and Open document for Default action.

For Document Id select the Computed property menu button for Document ID.

Step: 3.09.03 Select a form and Default action for 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.04 Add a Open document id to the Panel's Data source


Switch to the Style tab on the Repeat's Panel and select the style class friendsPanel.

Step: 3.09.05 Add Styling to the Repeat's Panel


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.01 Add a Table to the Panel for Friends


From the Controls palette add two Computed Fields to the first cell in the table.

Separate the Computed Fields with a line break -

Step: 3.10.02 Add 2 Computed Fields to the Table


Select the first Computed field in the table and select the Value tab from the Properties.

Click the Advanced radio button.

Select Expression Language from the Use drop-down and then add the following script 'friendDoc.Name' to the value field.

Step: 3.10.03 Bind the first Computed field in the Table


Switch from the Value tab to the Style tab on the first Computed Field's Properties.

Select the style class friendsName.

Step: 3.10.04 Style the Friends Name Computed Field


Select the second Computed Field in the Friends Table and choose the Value tab.

Click the Advanced radio button.

Select Expression Language from the Use drop-down and then add the following script 'friendDoc.Email' to the value field.

Step: 3.10.05 Bind the 2nd Computed Field


Switch from the Value tab to the Style tab on the first Computed Field's Properties.

Select the style class friendsEmail.

Step: 3.10.06 Style the 2nd Computed Field


Add a line break after the table, then drag and drop a Link to the Panel.

Change the Name of the Link to removeFriendLink.

Change the label of this link to Remove Friend.

Step: 3.11.01 Add a link to Remove friends


Still on the Link Properties, select the Style tab.

Choose the style class for the link removeFriend.

Step: 3.11.02 Add a Style Class to the Remove Friend Link


Now select the Events view for the Link.

For the onclick event, click the Add Action... button to create a new simple action for this Link.

Step: 3.11.03 Remove Friend Link Action


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)'

When run, this script will delete the document from the data source.

Click OK.

Step: 3.11.04 Remove Friend Link Simple Action


With the simple action created select Partial Update from the Server Options.

Select the Select Element... button to launch the Select Elements to Update dialog. Choose the friendsContainer element for this action to refresh.

Click OK.

Step: 3.11.05 Remove Friend Link Partial Refresh 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.11.06 Disable validation for this Remove Friends Action


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

SUNDAYJMP203 Getting to Know XPages and the New IBM Lotus Domino DesignerDL Americas SeminarMaureen Leland & Maire KehoeJMP206 Introducing IBM Lotus Domino Designer 8.5, Now with Eclipse!DL S. Hemisphere IIIDan O'Connor & Ishfak BhagatJMP206R Introducing IBM Lotus Domino Designer 8.5, Now with Eclipse!DL Americas SeminarDan O'Connor & Ishfak BhagatJMP203R Getting to Know XPages and the New IBM Lotus Domino DesignerDL S. Hemisphere IMaureen Leland & Maire KehoeMONDAYAD204 XPages 101DL S. Hemisphere IIMartin Donnelly & Eamon MuldoonBP105 Developing a World-class Web 2.0 Application with XPagesDL S. Hemisphere IV-VBruce Elgort & Matthew WhiteAD201 IBM Lotus Domino Designer 8.5: A New BeginningDL N. Hemisphere D-EPeter Janzen & Maureen LelandAD205 XPages: Things You Can't Afford to Miss!DL N. Hemisphere A-CMartin Donnelly & Thomas GumzAD205R XPages: Things You Can't Afford to Miss!DL N. Hemisphere A-CMartin Donnelly & Thomas GumzTUESDAYBOF205 IBM Lotus Notes and Domino Application Development: Meet The DevelopersSW Osprey 1-2Margaret RoraAD204R XPages 101SW 7-10Martin Donnelly & Eamon MuldoonAD212 10 Web 2.0 User Interface Patterns for IBM Lotus Notes and XPagesSW 5-6Nathan Freeman & Chris BlatnickAD201R IBM Lotus Domino Designer 8.5: A New BeginningDL S. Hemisphere IPeter Janzen & Maureen LelandAD207 Building an "XPages-Powered" IBM Lotus Domino ApplicationDL S. Hemisphere IJohn MackeyWEDNESDAYBOF207 IBM Lotus Domino Web Development - XPages and Web 2.0SW Macaw 1Phillipe Loher & Philippe RiandBOF214 IBM Lotus Domino Designer - A New PerspectiveSW Mockingbird 1-2Thomas Peisel & Maureen LelandAD208 Teaching Old Docs New Tricks: Creating A New Front End With XPagesSW 5-6Jo Grant & Craig WolpertAD220 Real World Examples of How Customers Are Utilizing XPagesDL S. Hemisphere IPhilippe Riand & Peter JanzenBP105R Developing a World-class Web 2.0 Application with XPagesSW MockingbirdBruce Elgort & Matthew WhiteSHOW106 Building A Cool Web 2.0 Application With XPagesSW OspreyAzadeh Salehi & Paul HannanTHURSDAYAD206 "Super-Sleek" Your Apps with XPages ThemesDL S. Hemisphere IKathy 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 IBMs 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 IBMs 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.

Click to edit the outline text format

Second Outline Level

Third Outline Level

Fourth Outline Level

Fifth Outline Level

Sixth Outline Level

Seventh Outline Level

Eighth Outline Level

Ninth Outline Level



Third Outline Level


Fifth Outline Level

Sixth Outline Level



Ninth Outline Level



Third Outline Level


Fifth Outline Level

Sixth Outline Level



Ninth Outline Level



Third Outline Level


Fifth Outline Level

Sixth Outline Level



Ninth Outline Level

Technology

Building A Cool Web 2.0 Application With XPages