lab 11 updating an application.pdf

7/29/2019 Lab 11 Updating an Application.pdf

1/11

Domino's XPages Workshop

Lab Manual

Lab 11

Updating an Application

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

Page 1 of 11


2/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: CREATEAN XPAGEANDATTACHTOALEGACYAPPLICATION

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.


Page 2 of 11


3/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 userEditoraccess with Deletionpermission and Click OK.


Page 3 of 11


4/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 HomersDonuts.


Page 4 of 11


5/11

Step 12 Enable the controlsdialog box by clicking the button in the top left of the Data View. The Xwill disappear and enable enhanced field options.

NOTE: The Controls Dialog will allow you to change field types, labels, and adda 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 webcontent editing.


Page 5 of 11


6/11

Step 15 Open the XPage PageList.

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

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

Step 18 Return to Domino Designerand Click on the Outline View in the bottom left corner, andhighlight 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 thebottom.


Page 6 of 11


7/11

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

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

Step 22 dReturn to designer and under the applications view, expand Resources -> Style Sheets anddouble 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 cancelbutton has changed.


Page 7 of 11


8/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 thisin 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 ofthis 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 labelshaving the same style as seen inside Designer.


Page 8 of 11


9/11

SECTION 2: XPAGEDATACONTROL

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

Step 1 Return to the XPage PageList. You should note that the Design View inside an XPage hasboth 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 thesource 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 tag containing the highlighted text.

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

float: left;

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


Page 9 of 11


10/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- HomersDonuts/XPages, and enterweb for both the View and data source name.


Page 10 of 11


11/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 ofHomers 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


Page 11 of 11

lab 11 updating an application.pdf

Documents