• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Building A Cool Web 2.0 Application With XPages
 

Building A Cool Web 2.0 Application With XPages

on

  • 11,687 views

Using Lotus Domino Designer 8.5, we will create a Lotus Domino XPage web application that utilizes advanced Web 2.0 technology, and explain what we are doing it along the way. This step by step ...

Using Lotus Domino Designer 8.5, we will create a Lotus Domino XPage web application that utilizes advanced Web 2.0 technology, and explain what we are doing it along the way. This step by step demonstration will highlight many of the application development improvements for Lotus Domino 8.5. See how you can develop with Domino Designer and XPages. We will explore AJAX, Script Libraries, DoJo and custom controls.

See http://www-10.lotus.com/ldd/ddwiki.nsf/dx/LS09_SHOW106.htm to find out more or to download application resources.

Statistics

Views

Total Views
11,687
Views on SlideShare
9,589
Embed Views
2,098

Actions

Likes
7
Downloads
502
Comments
0

10 Embeds 2,098

http://www-10.lotus.com 2050
http://www.slideshare.net 35
http://static.slidesharecdn.com 5
http://wiki1.swg.usma.ibm.com 2
http://www.brijj.com 1
http://localhost:7080 1
http://translate.googleusercontent.com 1
http://216.239.59.132 1
http://74.125.153.132 1
http://www.apurva.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Building A Cool Web 2.0 Application With XPages Building A Cool Web 2.0 Application With XPages Presentation Transcript

    • SHOW106 | Update 20090203 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 ®
    • 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 ®
    • 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.
    • Part 1 – The Basics 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.
    • Part 1 – The Basics 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.
    • Part 1 – The Basics 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:
    • Part 1 – The Basics Step: 1.02.03 – Create a Full Name field Click the Create Field icon on the toolbar.
    • Part 1 – The Basics 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)'.
    • Part 1 – The Basics Step: 1.02.05 – Create a First Name field Beside First Name:, create a new field named FirstName.
    • Part 1 – The Basics Step: 1.02.06 – Create a Last Name field Beside Last Name:, create a new field named LastName.
    • Part 1 – The Basics 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.
    • Part 1 – The Basics Step: 1.02.08 – Add a Company field Beside Company:, create a new field named Company. 
    • Part 1 – The Basics 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.
    • Part 1 – The Basics 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.
    • Part 1 – The Basics 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.
    • Part 1 – The Basics 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.
    • Part 1 – The Basics 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.
    • Part 1 – The Basics 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.
    • Part 1 – The Basics 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.
    • Part 1 – The Basics Step: 1.04.02 – Add panels to the container custom control Add 6 panels from the Container Controls palette to the Design pane.
    • Part 1 – The Basics 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.
    • Part 1 – The Basics 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 
    • Part 1 – The Basics 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.
    • Part 1 – The Basics 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.
    • Part 1 – The Basics 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.
    • Part 1 – The Basics 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.
    • Part 1 – The Basics Step: 1.04.09 – Add an Editable Area From the Core Controls palette drag and drop an Editable Area control to the content Panel.
    • Part 1 – The Basics Step: 1.04.10 – Rename the Editable Area Rename the Editable Area's Name and Facet Name to contentArea.
    • Part 1 – The Basics 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. 4. Save and close the Custom Control.
    • Part 1 – The Basics Step: 1.05.01 – Create a new Custom Control - profileForm Create a new Custom Control named profileForm.
    • Part 1 – The Basics 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.
    • Part 1 – The Basics 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.
    • Part 1 – The Basics 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.
    • Part 1 – The Basics 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. 
    • Part 1 – The Basics 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.
    • Part 1 – The Basics 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.
    • Part 1 – The Basics 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 3. Save and close the Custom Control. 
    • Part 1 – The Basics Step: 1.06.01 – Create a new Custom Control - searchForm Create a new Custom Control named searchForm.
    • Part 1 – The Basics Step: 1.06.02 – Add a Button to the Custom Control - searchForm 1. From the Controls palette add a button. 2. Change the Label on this button to Create a New Profile. 3. Save and close the Custom Control. 
    • Part 1 – The Basics Step: 1.07.01 – Create a Custom Control - searchResults Create a new Custom Control named searchResults.
    • Part 1 – The Basics 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. 
    • Part 1 – The Basics Step: 1.07.03 – Set the View Panel width on searchResults 1. Set the width of the view to 100%. 2. Save and close the Custom Control.
    • Part 1 – The Basics Step: 1.08.01 – Create a new XPage - home Create a new XPage named home.
    • Part 1 – The Basics 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.
    • Part 1 – The Basics 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. 
    • Part 1 – The Basics 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. 
    • Part 1 – The Basics Step: 1.09.01 – Create a new XPage - profile Create a new XPage named profile.
    • Part 1 – The Basics 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.
    • Part 1 – The Basics Step: 1.09.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 profilesTab. 
    • Part 1 – The Basics Step: 1.09.04 – Add the profile Custom Control 1. Then to the Editable Area, highlighted with the green dot, drag and drop the profileForm Custom Control. 2. Save your changes and close the XPage.
    • Part 1 – The Basics Step: 1.10.01 – Create a new XPage - results Create a new XPage named results.
    • Part 1 – The Basics 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.
    • Part 1 – The Basics Step: 1.10.03 – Set the SelectedTabId Property 1. In the Outline select the container custom control. 2. In its Properties, select All Properties. Expand custom, and for selectedTabId enter resultsTab. 
    • Part 1 – The Basics Step: 1.10.04 – Add the searchResults Custom Control 1. Then to the Editable Area, highlighted with the green dot, drag and drop the searchResults Custom Control. 2. Save your changes and close the XPage.
    • Part 1 – The Basics 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.
    • Part 1 – The Basics 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.
    • Part 1 – The Basics Step: 1.11.03 – Add Actions to container Custom Control – Results Tab 1. Select the Tab Panel resultsTab. Then for its onclick event click the Add Action... button. 2. On the Add Simple Action dialog select Basic for Category, Open Page for Action and the results XPage to open. 3. Click OK. 
    • Part 1 – The Basics Step: 1.11.04 – Add Actions to container Custom Control – Profiles Tab 1. Select the Tab Panel profilesTab. Then for its onclick event click the Add Action... button. 2. On the Add Simple Action dialog select Basic for Category, Open Page for Action and the profile XPage to open. 3. Click OK. 4. Save and close the Custom Control.
    • Part 1 – The Basics 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. 
    • Part 1 – The Basics 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. 3. On the Add Simple Action dialog select Basic for Category, Open Page for Action and the home XPage to open. 4. Click OK.   
    • Part 1 – The Basics 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. 
    • Part 1 – The Basics 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. 
    • Part 1 – The Basics Step: 1.12.05 – Add Actions to profileForm Custom Control – Cancel Button 1. Still on the Cancel button select the Events tab. 2. For the onclick event select the Add Action... button. 3. On the Add Simple Action dialog select Basic for Category, Open Page for Action and the home XPage to open. 4. Click OK. 
    • Part 1 – The Basics Step: 1.12.06 – Add Actions to profileForm Custom Control – Edit Button 1. For the Edit 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, Change Document Mode for Action, and Edit Mode for Document Mode. 4. Click OK. 
    • Part 1 – The Basics 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. 4. 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. 5. Click OK. 6. Save your changes. 
    • Part 1 – The Basics 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. 
    • Part 1 – The Basics 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. 
    • Part 1 – The Basics 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. 3. Save and close the Custom Control.
    • Part 1 – The Basics 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. 
    • Part 1 – The Basics 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 button for the Visible option. 2. On the Script Editor dialog enter '!profileDocument.isNewNote()' 3. Click OK. 
    • Part 1 – The Basics 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 button for the Visible option. 2. On the Script Editor dialog enter '!profileDocument.isEditable()' 3. Click OK. 
    • Part 1 – The Basics 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. 3. Save and close the Custom Control. 
    • Part 1 – The Basics 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.
    • Part 1 – The Basics 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. 
    • Part 1 – The Basics Step: 1.19 – Demo Part 1 – The Basics   If the application is Local, change the ACL to preview.
    • Part 2 – Styling and Search Features ®
    • Part 2 – Styling and Search Features Step: 2.01.00 – Adding Styles – Look and Feel.  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.
    • Part 2 – Styling and Search Features 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. 
    • Part 2 – Styling and Search Features Step: 2.02.01 – Create a new Style Sheet - styles 1. Select Style Sheet under Resources in the Application Navigator. 2. Click the New Style Sheet button. 3. In the Name field, type styles. 4. Click OK. 
    • Part 2 – Styling and Search Features 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.
    • Part 2 – Styling and Search Features Step: 2.03.01 – Add the new Style Sheet as Resource 1. Select Custom Controls on the Application Navigator. 2. Open the first Custom Control container. 3. For its Properties select Resources. 4. Click the Add Style Sheet... button.
    • Part 2 – Styling and Search Features 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. 3. Save and close the Custom Control.
    • Part 2 – Styling and Search Features 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.
    • Part 2 – Styling and Search Features 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.
    • Part 2 – Styling and Search Features 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.
    • Part 2 – Styling and Search Features Step: 2.04.03 – Add Style Classes to the container Custom Control - headerInner 1. In the Outline expand header and select headerInner. 2. From this Panel's Style select the headerInner style class.
    • Part 2 – Styling and Search Features Step: 2.04.04 – Add Style Classes to the container Custom Control - headerInnerTitle 1. In the Outline expand headerInner and select the Label. 2. From this Label's Style select the headerInnerTitle style class.
    • Part 2 – Styling and Search Features Step: 2.04.05 – Add Style Classes to the container Custom Control - main 1. In the Outline expand frame and select main. 2. From this Panel's Style select the main style class.
    • Part 2 – Styling and Search Features Step: 2.04.06 – Add Style Classes to the container Custom Control - tabBar 1. In the Outline expand main and select tabBar. 2. From this Panel's Style select the tabBar style class.
    • Part 2 – Styling and Search Features Step: 2.04.07 – Add Style Classes to the container Custom Control - content 1. In the Outline expand main and select Panel:content. 2. From this Panel's Style select the content style class. 3. Save and close the Custom Control.
    • Part 2 – Styling and Search Features 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 4. Save and close the Custom Control.
    • Part 2 – Styling and Search Features 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.
    • Part 2 – Styling and Search Features Step: 2.06.02 – Add Style Classes to the profileForm Custom Control – Delete... Button 1. Select the Delete... button. 2. Select the Style tab and choose the profileButtonCommand style class.
    • Part 2 – Styling and Search Features Step: 2.06.03 – Add Style Classes to the profileForm Custom Control – Cancel Button 1. Select the Cancel button. 2. Select the Style tab and choose the profileButtonCancel style class.
    • Part 2 – Styling and Search Features Step: 2.06.04 – Add Style Classes to the profileForm Custom Control – Edit Button 1. Select the Edit button. 2. Select the Style tab and choose the profileButtonCommand style class.
    • Part 2 – Styling and Search Features 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.
    • Part 2 – Styling and Search Features 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.
    • Part 2 – Styling and Search Features 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.
    • 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 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.
    • Part 2 – Styling and Search Features 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.
    • Part 2 – Styling and Search Features 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.
    • Part 2 – Styling and Search Features 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.
    • Part 2 – Styling and Search Features 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 .
    • Part 2 – Styling and Search Features 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. 3. 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. 4. Click OK.
    • Part 2 – Styling and Search Features Step: 2.12.03 – Search Button Simple Actions - 2nd action 1. For the same onclick event click the Add Action... button. 2. On the Add Simple 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. 4. Save and close the Custom Control.  
    • Part 2 – Styling and Search Features 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.
    • Part 2 – Styling and Search Features Step: 2.13.02 – Set the Keys Property 1. On the Script Editor dialog add the following script 'sessionScope.nameToSearch' 2. Click OK.
    • Part 2 – Styling and Search Features 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.
    • Part 2 – Styling and Search Features 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.
    • Part 2 – Styling and Search Features Step: 2.14.03 – Style the Computed Field 1. Switch to Style tab. 2. Select the style class searchInfo. 3. Save all your changes.
    • 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! 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.
    • Part 3 - Contain Your Friends in a Repeat! Step: 3.01.01 – Create a Friends Form Create a new form named friend.
    • Part 3 - Contain Your Friends in a Repeat! 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.
    • Part 3 - Contain Your Friends in a Repeat! 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.
    • Part 3 - Contain Your Friends in a Repeat! 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.
    • Part 3 - Contain Your Friends in a Repeat! Step: 3.02.02 – Customize the Friends View Bind the Name column to Name, and Email to the Email Column Neither column requires sorting.
    • Part 3 - Contain Your Friends in a Repeat! 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.
    • Part 3 - Contain Your Friends in a Repeat! 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.
    • Part 3 - Contain Your Friends in a Repeat! 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. 
    • Part 3 - Contain Your Friends in a Repeat! 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.
    • Part 3 - Contain Your Friends in a Repeat! 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.
    • Part 3 - Contain Your Friends in a Repeat! 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.
    • Part 3 - Contain Your Friends in a Repeat! 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.
    • Part 3 - Contain Your Friends in a Repeat! 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.
    • Part 3 - Contain Your Friends in a Repeat! 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... .
    • Part 3 - Contain Your Friends in a Repeat! 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. 
    • Part 3 - Contain Your Friends in a Repeat! 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. 
    • Part 3 - Contain Your Friends in a Repeat! 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.
    • Part 3 - Contain Your Friends in a Repeat! Step: 3.05.02 – Set the Labels to the Edit Boxes Set both Labels, Name and Email, to the Edit Boxes friendName and friendEmail. 
    • Part 3 - Contain Your Friends in a Repeat! Step: 3.06.01 – Add a Friend Button 1. From the Controls 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.
    • Part 3 - Contain Your Friends in a Repeat! 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.
    • Part 3 - Contain Your Friends in a Repeat! 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.
    • Part 3 - Contain Your Friends in a Repeat! 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.
    • Part 3 - Contain Your Friends in a Repeat! 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.
    • Part 3 - Contain Your Friends in a Repeat! 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.
    • Part 3 - Contain Your Friends in a Repeat! Step: 3.08.01 – Add the Repeat 1. Add a Repeat Container Control onto the friendsContainer panel. 2. Name this Repeat friendsRepeat.
    • Part 3 - Contain Your Friends in a Repeat! 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.
    • Part 3 - Contain Your Friends in a Repeat! 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.
    • Part 3 - Contain Your Friends in a 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.
    • Part 3 - Contain Your Friends in a Repeat! 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.
    • Part 3 - Contain Your Friends in a Repeat! 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.
    • Part 3 - Contain Your Friends in a Repeat! 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.
    • Part 3 - Contain Your Friends in a Repeat! 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.
    • Part 3 - Contain Your Friends in a Repeat! 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.
    • Part 3 - Contain Your Friends in a Repeat! Step: 3.10.02 – Add 2 Computed Fields to the Table 1. From the Controls palette add two Computed Fields to the first cell in the table. 2. Separate the Computed Fields with a line break - <xp:br/>
    • Part 3 - Contain Your Friends in a Repeat! 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.
    • Part 3 - Contain Your Friends in a Repeat! 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. 2. Select the style class friendsName.
    • Part 3 - Contain Your Friends in a Repeat! 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. 
    • Part 3 - Contain Your Friends in a Repeat! 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. 2. Select the style class friendsEmail.
    • Part 3 - Contain Your Friends in a Repeat! 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.
    • Part 3 - Contain Your Friends in a Repeat! 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.
    • Part 3 - Contain Your Friends in a Repeat! 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.
    • Part 3 - Contain Your Friends in a Repeat! 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.
    • Part 3 - Contain Your Friends in a Repeat! 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.
    • Part 3 - Contain Your Friends in a Repeat! 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.
    • 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 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.