Lab 01 XPage Basics

Developing XPages – The Basics

Copyright IBM Corporation 2010. All Rights Reserved.This exercise is intended to assist IBM SWG Sales and their business partners in understanding IBM Software products, marketing tactics, sales tactics and our direction during 2007. This exercise can be used in sales situations except individual charts labeled VENDOR CONFIDENTIAL or IBM CONFIDENTIAL, in which case they should be considered confidential under the practices in place in your firm and under any existing agreements with IBM regarding disclosure of confidential information. For questions or to request permission for any other use of the information or distribution of the presentation, please contact any member of the IBM software sales team.

Confidentiality ReminderAs a reminder, if you are an IBM Business Partner, any IBM Confidential information in this session is not to be shared by you with anyone outside of your company. This is in accordance with the PartnerWorld non-disclosure agreement as signed by your company. Thank you for your adherence to this agreement.

IBM CorporationJuly 2010

Lotus Domino Designer 8.5.1 XPages Lab

Table of Contents

Time Estimates.................................................................................................................2Purpose............................................................................................................................2Detailed Steps..................................................................................................................3Create a new Application.................................................................................................3Work with Stylesheets......................................................................................................7Our first XPages.............................................................................................................12Bring Data into Play........................................................................................................17Implement Page Navigation...........................................................................................27Implement Data Lookups...............................................................................................33Work with Data Sources.................................................................................................39Get the Tab Navigation working.....................................................................................43Summary........................................................................................................................46

Time EstimatesThe IT Professional should be able to complete this lab in 90 minutes.

PurposeYou will build the foundation for our sample application and learn about application structure that allows styling your application easily. You will create two XPages that provide access to our sample application. We will demonstrate how to make use of custom controls that provide customizable content areas. You will also learn how to display Notes documents in XPages using form properties and simple data binding. You will implement page flow works in XPages and code actions behind action buttons, provide data to the different controls on the XPage and enable type-ahead functionality in XPages. You will also learn how to show data from a Notes view in XPages and how to use the XPages scope contexts with advanced data binding.

COPYRIGHT IBM CORPORATION 2010. ALL RIGHTS RESERVED. IBM LOTUS TECHNICAL SALES

of 46


Detailed Steps

Create a new Application

1. If Domino is not running, start it now.

2. Open Domino Designer from the desktop icon and login as Domino Admin/ibm with password passw0rd.Close the Welcome Page and click on Create a New Application from the Home Page.

3. Select DOM85/ibm as the server and name the blank application xScrapbook.


of 46


4. Click OK.

5. From the File menu, select Application > Access Control.

6. Add an Anonymous user as Editor.

7. Create two XPages in your Scrapbook application named

- results - profile

TIP: Right-click on the XPages entry from navigator, then select New XPage…


of 46


8. Create one Custom Control named container.

9. Open the container custom control.

In the next step we will add nested panels to the custom control.

Note: A panel translates into a DIV element using the HTML rendering but can contain additional logic. Panels are commonly used for styling or partial refresh operations.

10. Drag five panels onto the container Custom Control page and then arrange and nest them as shown below.

Important: make sure to use the names shown:- Panel: frame - Panel: header - Panel: headerInner - Panel: main - Panel: tabBar

The easiest way to do this is using the Outline panel on the left side of the screen.


of 46


11. Add a Label control into the headerInner panel and give it a Label of Scrapbook.

12. Save the custom control. You might receive a message that the automatic project build has been turned of. Enable it via Project > Build Automatically.

13. Add your new container custom control – via Drag’n Drop - to the profile and results XPage.


of 46


Work with Stylesheets

1. From the Resources section of the application navigator, double-click on Style Sheets.

2. Click on Import Style Sheet and browse to C:\MyLabFiles\XPages\stylesheets\styles.css.


of 46


3. From the Resources section of the application navigator, double-click on Images.

4. Click on Import Image Resource and browse to C:\MyLabFiles\XPages\images.

5. Import all of the images from this directory. (You can select them all using the Ctrl key)

Next, we will add the style sheet to the container control.

6. Click anywhere on the container control and then click on Style in the Properties dialog


of 46


7. Click on the Add style sheet to page button.

8. Select styles.css from the dialog and click OK.


of 46


9. On the Style tab of each panel (5 panels) map the panel name to the corresponding named style sheet class.

TIP: Use the Outline to navigate the panels easily.

10. Navigate to the main Panel. Click on the Units drop-down box for Height and select Pixels. Keep the default value. This parameter is not defined within the Style Sheet.


of 46


11. Go back to the label you added to the headerInner panel and map it to the class headerInnerTitle.

12. Save the container control and switch to the profile XPage.

13. Use the Preview in Web Browser button to see the results in the browser.


of 46


Our first XPages

1. Open the container custom control. Drag a Tabbed Panel (from Container Controls) onto the page and use the Outline to place it into the tabBar Panel control.

2. Use the outline to select the tabs and get to their properties and name:

• the first tab resultsTab with a label of Results• the second tab profileTab with a label of Profile


of 46


5. Create another Custom Control named content.

6. Open the content custom control. Add the styles.css stylesheet to the control.

7. Drag a panel onto the content custom control page and name it content.

8. Map the panel name to the corresponding style sheet class.


of 46


9. Drag an Editable Area control (from Core Controls) into the content panel. Drop it where facet_1 is in the picture.

10. Create two more custom controls:

- profileForm - searchResults

TIP: Add some temporary content to these controls to be able to see their proper operation.

11. Navigate back to the container custom control.

12. Drag the newly created content control into each of the two Tab Panels (profileTab, resultsTab).


of 46


TIP: You can approach this by selecting each Tab Panel in the Outline, then dragging the content control into the selected box on the page.

13. The result should look like this:


of 46


14. Select each of the Tab Panels to add the new custom controls to their own Editable Areas as follows:

- searchResults into resultsTab- profileForm into profileTab

Example: Navigate to the resultsTab Tab Panel. Drag and drop the searchResults custom control onto the green circle as shown below .


of 46


15. Use the preview button to preview the home XPage.

Bring Data into Play

1. Create a new Notes form named profile. Add the following fields:

- FullName (Computed Text) Formula: @Trim(FirstName + " " + LastName)- Email (Text)- TimeZone (Text)- AboutMe (Rich Text)- Gender (Text)- Country (Text)- FirstName (Text)- LastName (Text)- DOB (Date Time)

The result should look like this:


of 46


2. Add an additional field Interests to the form (Text, Allow Multiple Values).

3. On the Form properties for On Web Access, use Display XPage instead and set it to the profile XPage.


of 46


4. Create a new view named “profiles” with the view selection formula SELECT form=”profile”

and the following columns:

- FullName (Sorted Ascending, Sortable / Click to Sort – Both) - TimeZone - Email

Map the column values to the previously created fields from the profile form.

5. Create some documents in the Notes client with the profile form. You can accomplish this by opening the Scrapbook application (via Preview in Notes) and selecting Create > profile from the main menu.

6. Preview the view in the browser and open a document from the view (which will be empty other than our header).


of 46


7. Open the profileForm custom control and remove any temporary text you entered.

8. On the Data tab of the Properties dialog, add a Domino Document data source.

9. Choose profile as the form.


of 46


10. Click on the All Properties tab in the Properties dialog. Expand the data\data entry, then expand the dominoDocument entry and select onsave for the computeWithForm option.

11. Save the custom control.

12. Select the Data palette from the right side of the screen. Note: If the Data palette is not visible, select the arrow beside the Controls tab and select Data.


of 46


13. Enable the Select Controls dialog box button.

14. Select all the field bindings except for Full Name and DOB (use Shift to select multiple).

15. Drag & drop all the selected field bindings to the profileForm page in the design editor.


of 46


16. In the helper dialog change the following control types:

- About Me: RichText - Gender: Combo Box - TimeZone: Combo Box

17. Click on OK.


of 46


18. Change the width of the Interests element to 400px.

19. Reorder the row contents using drag & drop (in the Outline or – even faster – in source code) to group related fields together.


of 46


20. Right click inside a cell in the resulting table and choose to append 3 rows.

21. Drag a Label control (from Core Controls) to the first column in the first

additional row and make the Label DOB.


of 46


22. Drag a Date Time Picker control (from Core Controls) to the second column in the first additional row.

23. From the Data tab in the Properties dialog, bind the picker to the field DOB and check that the display type is set to Date / Time and the Display format to Date only.


of 46


24. Preview the XPage for your control in your browser (note that, although you can complete the form, you can't save it since we don't have action buttons yet).

You need to switch to the Profile tab to get the form displayed.

Implement Page Navigation

1. Add the styles.css to the profileForm custom control (Hint: Style tab in the Properties dialog).


of 46


2. Add 4 button controls into the second column of the last table row and label them as:- Save- Delete- Cancel- Edit

For the Save button:

3. Change the button type to Submit.


of 46


4. Set the class to profilesButtonSubmit on the Style tab. Create a computed “Visible” property with this formula:

document1.isEditable()

5. Add a Simple Action for the Mouse onclick event on the Events tab.

6. Set the Category to Basic, the Action to Open Page and select the results page as the target.


of 46


For the Delete button:7. Add a computed Visible property.

8. In the JavaScript Editor add this formula:!document1.isNewNote()

9. Set the class to profilesButtonCommand.


of 46


10. Add a Simple Action to the Mouse onclick event that deletes the document and returns to the results page with some custom confirmation text.

For the Cancel button:11. Change the button type to Cancel.

12. Change the class to profilesButtonCancel.

13. Add a Simple Action to the Mouse onclick event that opens the results page.


of 46


For the Edit button:14. Apply the class profilesButtonCommand.

15. Create a computed “Visible” property with this formula:!document1.isEditable()

16. Add a Simple Action to the Mouse onclick event to Change Document Mode to Edit Mode.


of 46


17. Save the custom control, preview the profile XPage in the browser, then enter and save a document.

Implement Data Lookups

1. Create a Notes form named keywords.

2. Add the following fields:

- Name (Text)- Values (Text, Allow Multiple Values)


of 46


3. Select “New Line” as the ONLY delimiter for both options below.

4. Create a Notes view called keywordLookup.The selection formula will be:

SELECT form=”keywords”

Change the first column to show the Name field.Make it sorted Ascending.

5. Preview the form in your Notes client and create a document with name set to TimeZones.

6. Add the text from C:\MyLabFiles\XPages\codeSnippets\TimeZones.txt to the Values field.

7. Save the document – you can hit CTRL+S for that.


of 46


8. Preview the form again and create another document with name set to Countries.

9. Add the text from C:\MyLabFiles\XPages\codeSnippets\Countries.txt to the Values field.

10. Save the document.

11. In the profileForm custom control, select the Gender combo box.

12. In the Values tab click the Add Item button twice and amend the lines of text to Male and Female.

13. Select the Country edit box control. On the Type Ahead tab check the Enable Type Ahead box and make the Mode Partial.


of 46


14. Make the Suggestions a computed value and add the following formula (Server-side JavaScript):@DbLookup(@DbName(), "keywordLookup", "Countries", "Values")

Uncheck the Case-sensitive checkbox.

15. Select the TimeZone combo box control.


of 46


16. On the Values tab click on Add Formula Item and add this formula:@DbLookup(@DbName(), "keywordLookup", "TimeZones", "Values")


of 46


17. Save the profileForm custom control and preview the profile XPage in the browser or Notes client.

Note: You need to switch to the Profile tab.


of 46


Work with Data Sources

1. Open the searchResults custom control and remove any temporary text that you added in a previous exercise.

2. Add the styles.css resource to the custom control.

3. Press Enter three times to add some lines at the top of the control (we will use this area later).

4. Drag a View control from the Container Controls palette onto the page canvas:


of 46


5. Select profiles as the view option in the helper dialog and click OK.

6. Click on the View tab in the Properties dialog and set the width to 100%:


of 46


7. On the Display tab set the maximum rows to 10.

8. Click on the FullName column header. Check the Sort column option in the View Column Header tab.

9.


of 46


10. Click on the FullName column. Enable Show value in this column as links.

11. Select the Read-only option for the Document open mode.

12. Save the searchResults control and preview the results XPage in the browser or Notes client.


of 46


Get the Tab Navigation working

1. Open the container custom control.

2. Click on the Outline and then select the Property Definition.

3. Click New Property, name it selectedTabId of type string (You don't need to provide validation or visibility rules here).

4. Save the container custom control.


of 46


5. Select the Tabbed Panel in the Outline and edit the Tab opened by default option as a computed option use this formula:

compositeData.selectedTabId

6. For each of the two XPages (profile, results), select the container control and click on All Properties.


of 46


7. Set the selectedTabID property to the tab for the respective page.profile – profileTabresults – resultsTab

8. Save all XPages and preview the home page in the browser or Notes client. You should now be able to switch between the tabs.


of 46


Summary

Congratulations! You have created your first XPage application!

In this exercise you built the foundation for our sample application and learned about application structure that allows you to easily style your application.

You also learned how to create custom controls that contain customizable content areas, and how page flow works in XPages. You built actions behind action buttons, provided data to the different controls on the XPage and enabled type-ahead functionality in XPages.

We demonstrated how to show data from a Notes view in XPages and how to propagate data from one form to another.


of 46

Lab 01 XPage Basics

Documents

Transcript of Lab 01 XPage Basics