If you can't read please download the document
Upload
ddrschiw
View
7.764
Download
4
Embed Size (px)
Citation preview
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.
Save and close the Custom Control.
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%.
Save and close the Custom Control.
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.
Save your changes and close the XPage.
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.
Save your changes and close the XPage.
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.
Save and close the Custom Control.
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.
On the Add Simple Action dialog select Basic for Category, Open Page for Action and the home XPage to open.
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.
For the onclick event select the Add Action... button.
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.
For the onclick event select the Add Action... button.
On the Add Simple Action dialog select Basic for Category, Open Page for Action and the home XPage to open.
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.
For the onclick event select the Add Action... button.
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.
For the onclick event select the Add Action... button.
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.
Save and close the Custom Control.
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.
Save and close the Custom Control.
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.
Save and close the Custom Control.
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
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.
Part 2 Styling and Search Features
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
Part 2 Styling and Search Features
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
Part 2 Styling and Search Features
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'
Part 2 Styling and Search Features
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
Part 2 Styling and Search Features
On the Add Style Sheet to Page dialog, select the only style sheet available, styles.css.
Click OK.
Save and close the Custom Control.
Step: 2.03.02 Select the new style sheet from the dialog
Part 2 Styling and Search Features
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
Part 2 Styling and Search Features
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
Part 2 Styling and Search Features
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
Part 2 Styling and Search Features
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
Part 2 Styling and Search Features
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
Part 2 Styling and Search Features
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
Part 2 Styling and Search Features
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
Part 2 Styling and Search Features
In the Outline expand main and select Panel:content.
From this Panel's Style select the content style class.
Save and close the Custom Control.
Step: 2.04.07 Add Style Classes to the container Custom Control - content
Part 2 Styling and Search Features
Launch the searchForm Custom Control.
Select the Create a New Profile... button.
Select its Style tab from Properties and choose the style class profilesButtonCommand
Save and close the Custom Control.
Step: 2.05.01 Add Style Classes to the searchForm Custom Control Button
Part 2 Styling and Search Features
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
Part 2 Styling and Search Features
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
Part 2 Styling and Search Features
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
Part 2 Styling and Search Features
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
Part 2 Styling and Search Features
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
Part 2 Styling and Search Features
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
Part 2 Styling and Search Features
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
Save and close the Custom Control.
Step: 2.07.03 Create a New Style Class with Exported Style
Part 2 Styling and Search Features
Step: 2.08 Demo Styling
Part 2 Styling and Search Features
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.
Part 2 Styling and Search Features
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
Part 2 Styling and Search Features
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
Part 2 Styling and Search Features
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
Part 2 Styling and Search Features
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
Part 2 Styling and Search Features
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
Part 2 Styling and Search Features
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
Part 2 Styling and Search Features
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
Part 2 Styling and Search Features
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
Part 2 Styling and Search Features
On the Script Editor dialog add the following script 'sessionScope.nameToSearch'
Click OK.
Step: 2.13.02 Set the Keys Property
Part 2 Styling and Search Features
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
Part 2 Styling and Search Features
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
Part 2 Styling and Search Features
Switch to Style tab.
Select the style class searchInfo.
Save all your changes.
Step: 2.14.03 Style the Computed Field
Part 2 Styling and Search Features
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.
Part 3 - Contain Your Friends in a Repeat!
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...
Part 3 - Contain Your Friends in a Repeat!
Create a new form named friend.
Step: 3.01.01 Create a Friends Form
Part 3 - Contain Your Friends in a Repeat!
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
Part 3 - Contain Your Friends in a Repeat!
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
Part 3 - Contain Your Friends in a Repeat!
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
Part 3 - Contain Your Friends in a Repeat!
Bind the Name column to Name, and Email to the Email Column
Neither column requires sorting.
Step: 3.02.02 Customize the Friends View
Part 3 - Contain Your Friends in a Repeat!
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
Part 3 - Contain Your Friends in a Repeat!
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
Part 3 - Contain Your Friends in a Repeat!
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
Part 3 - Contain Your Friends in a Repeat!
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
Part 3 - Contain Your Friends in a Repeat!
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
Part 3 - Contain Your Friends in a Repeat!
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
Part 3 - Contain Your Friends in a Repeat!
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
Part 3 - Contain Your Friends in a Repeat!
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
Part 3 - Contain Your Friends in a Repeat!
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
Part 3 - Contain Your Friends in a Repeat!
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
Part 3 - Contain Your Friends in a Repeat!
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.
Part 3 - Contain Your Friends in a Repeat!
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
Part 3 - Contain Your Friends in a Repeat!
Set both Labels, Name and Email, to the Edit Boxes friendName and friendEmail.
Step: 3.05.02 Set the Labels to the Edit Boxes
Part 3 - Contain Your Friends in a Repeat!
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
Part 3 - Contain Your Friends in a Repeat!
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
Part 3 - Contain Your Friends in a Repeat!
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
Part 3 - Contain Your Friends in a Repeat!
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.
Part 3 - Contain Your Friends in a Repeat!
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.
Part 3 - Contain Your Friends in a Repeat!
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
Part 3 - Contain Your Friends in a Repeat!
Add a Repeat Container Control onto the friendsContainer panel.
Name this Repeat friendsRepeat.
Step: 3.08.01 Add the Repeat
Part 3 - Contain Your Friends in a 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
Part 3 - Contain Your Friends in a 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
Part 3 - Contain Your Friends in a 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
Part 3 - Contain Your Friends in a 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
Part 3 - Contain Your Friends in a Repeat!
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.
Part 3 - Contain Your Friends in a Repeat!
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
Part 3 - Contain Your Friends in a Repeat!
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
Part 3 - Contain Your Friends in a Repeat!
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
Part 3 - Contain Your Friends in a Repeat!
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
Part 3 - Contain Your Friends in a Repeat!
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
Part 3 - Contain Your Friends in a Repeat!
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
Part 3 - Contain Your Friends in a Repeat!
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
Part 3 - Contain Your Friends in a Repeat!
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
Part 3 - Contain Your Friends in a Repeat!
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
Part 3 - Contain Your Friends in a Repeat!
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
Part 3 - Contain Your Friends in a Repeat!
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
Part 3 - Contain Your Friends in a Repeat!
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
Part 3 - Contain Your Friends in a Repeat!
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
Part 3 - Contain Your Friends in a Repeat!
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
Part 3 - Contain Your Friends in a Repeat!
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
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
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
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