Xpages Lab 11 Updating an Application

Domino's XPages Workshop

Lab Manual

Lab 11

Updating an Application

COPYRIGHT IBM CORPORATION 2010. ALL RIGHTS RESERVED. LAB 11 IBM ISV & DEVELOPER RELATIONS.

of 11

Introduction:XPages can be introduced into a preexisting application one component at a time. XPages can also be used to create or displace work-flow applications, and offer scripting components as already seen. XPages gives a developer an easy path to add edit and remove documents with a very direct interface.

Description:In this lab you will create a content management application for a preexisting website, and add controlls to fully manage the data

Objective:At the end of the lab, you should be able to:

• Add an XPage to a legacy application

• Create XPage controls to manage data

Procedure:

SECTION 1: CREATE AN XPAGE AND ATTACH TO A LEGACY APPLICATION

In this section, you will create and deploy the policies required for enabling the My Widgets feature for Notes and iNotes users.

Step 1 If Domino has not been started, start it now.

Step 2 Open Domino Designer.

Step 3 Click on Create a New Application.

Step 4 Click Show Advanced Templates.

Step 5 Scroll down and select Web Interface.

Step 6 Deselect Inherit future design changes.

Step 7 Click OK, and wait a minute while the application is being created.


of 11

Step 8 Right-click on the application in the view, and go to Application-> Access Control...

Step 9 Click Add and enter the name Anonymous. Give this user Editor access with Deletion permission and Click OK.


of 11

Step 10 Expand The XPage section under the application and double click on the XPage PageEditor.

Step 11 From the Data tab on the Properties window, bind the XPage to the WebPage form in Homers Donuts.


of 11

Step 12 Enable the controls dialog box by clicking the button in the top left of the Data View. The X will disappear and enable enhanced field options.

NOTE: The Controls Dialog will allow you to change field types, labels, and add a default submission button when adding fields through the Data View .

Step 13 Click and drag Content from the Data View on the right to the table cell just to the left of the red error message.

Step 14 Change the control type to Rich Text. This will enable the Dojo editor for true Rich text web content editing.


of 11

Step 15 Open the XPage PageList.

Step 16 Click on File-> Save, then click on the Preview in Web Browser icon.

Step 17 Click on the Home link at the bottom of the view.

Step 18 Return to Domino Designer and Click on the Outline View in the bottom left corner, and highlight the XPage entry near the top of the tree diagram.

Step 19 Just to the right you will see the Properties View. Click on the style tab and scroll to the bottom.


of 11

Step 20 Click on the button titled Add Style Sheet to Page... Select Yellow.css and click OK.

Step 21 Return to the web and refresh the page (F5). You will notice the background has changed color.

Step 22 dReturn to designer and under the applications view, expand Resources -> Style Sheets and double click on Yellow.css. Add the following style to the file:

.xspButtonCommand, .xspButtonCancel {font-weight: 400;font-size: 14;margin: 5px;color: #FF0000;

}

Step 23 Click on File->Save, then return to the web and refresh the page. You will notice the cancel button has changed.


of 11

Step 24 Return to Designer and open the XPage PageEditor.

Step 25 Click on the label for the header.

Step 26 Double check to make sure a label is selected and not the table cell. You can double check this in the Outline View.

Step 27 Click on the Style in the Properties View.

Step 28 Click on .prompt under the style selection. This will select the prompt class for the display of this object. You can confirm this in the Designer View as you work.

Step 29 Repeat the above step for the Content Label.

Step 30 Click on File-> Save, then return to the web and refresh the page. You should see the labels having the same style as seen inside Designer.


of 11

SECTION 2: XPAGE DATA CONTROL

In this section, you will learn how to manage application data from an XPage application.

Step 1 Return to the XPage PageList. You should note that the Design View inside an XPage has both a Design and Source tab at the bottom of the view.

Step 2 Highlight the View Site and Edit Locations links at the top of the view, and click on the source tab to directly view the XML generated by the Design view.

Step 3 Panels are synonymous with divs, and we want to float this div in the rendered html. Find the <xp:panel> tag containing the highlighted text.

Step 4 Find the style element of the tag and add the following style to the very beginning of the quoted value:

float: left;

Step 5 Return to the Design Tab and click on View: viewPanel1, click on Style, and assign the orangeBG class to the panel inside the Properties view.


of 11

Step 6 Click on the View Site link in the top left of the Design View.

Step 7 Go to the Properties view and go to the Link tab.

Step 8 Under the options section, click on the diamond to the right of the URL radio option.

Step 9 Replace the value with the following code:

“..” + @DbLookup(“Homers Donuts.nsf”, “web”, “Home”, 2);

Step 10 Click OK to continue.

Step 11 Review this XPage on the web and see how the changes are seen.

Step 12 From Domino Designer open the PlaceList XPage.

Step 13 Inside the Properties view, open the data tab and change the application to Other- Homers Donuts/XPages, and enter web for both the View and data source name.


of 11

Step 14 Select the data or bottom name cell for the view and check “Show... as links”, and “Check box”.

Step 15 Save and close this XPage.

Step 16 Open the XPage Place Editor, and bind it to Place form of Homers Donuts.

Step 17 Open the PlaceList XPage inside of notes. Create one or more new place.

Summary:

Congratulations! You have completed this lab of XPages applications.

In this lab, you completed the following procedures:

• Add XPages to a preexisting application

• Make baxsic changes to style and theme

• Manipulate data from XPages


of 11

Xpages Lab 11 Updating an Application

Documents

Transcript of Xpages Lab 11 Updating an Application