Lab 07 XPage Design Evolution PDF

Domino's XPages Workshop Lab Manual
Lab 7 XPage Design Evolution
Page 1 of 11
COPYRIGHT IBM CORPORATION 2010. ALL RIGHTS RESERVED. LAB ## IBM ISV & DEVELOPER RELATIONS.
Introduction:
XPages allows evolving previous design elements and structure to create well defined architecture with little effor. This enables for a versatile functionality, ease of implementation, and a smooth transitional period.
Description:
This lab introduces upgrade paths which are wired into XPages design elements and data models.
Objective:
At the end of the lab, you should be able to: Be able to utilize common form @formula functionality to enhance an XPage You will learn how to convert an existing Notes view into an XPage automatically You will learn how to use a collection of multi-value fields in a Notes document as data source for a table in XPages
Procedure:
SECTION 1: FORM @FORMULA
IN AN
XPAGE
In this section, you will learn how to use @formula from previous forms to control data in XPages. Step 1 Open the Notes form from the previous lab and enhance the field color with the following default and input translation formulas: Default: Green Input translation: @Trim(@ProperCase(@thisValue))
Page 2 of 11
Step 2 Step 3 Step 4
Add an input translation to the shape field: @Implode(@Trim(@Unique(Shape:@Explode(@ThisValue;" ")));" ") ... and a default value of your choice. Open the xPage, select the xPage element, open the all properties tab Navigate to the data/data/dominoDocument[0] property and set computeWithForm to both Test the form.
Step 5
Test test the xpage out through both notes and the web.
SECTION 2: VIEW
TO
XPAGE
Page 3 of 11
COPYRIGHT IBM CORPORATION 2010. ALL RIGHTS RESERVED.
LAB ##
IBM ISV & DEVELOPER RELATIONS.
In your applications there are a lot of views. To accelerate deployment of XPage based applications you want to automate the creation of XPage based view access. Step 1 Step 2 Step 3 Copy the file ViewToXpage.xslt c:\Lab Files to C:\IBM\Lotus\Notes\Data\xsl. [YourNotesDataDirectory]\xsl Select the database where you want to create a new XPages. Use Tools DXL Utilities Transformer
Step 4
Select the view you want to transform and the ViewToXpage.xslt file
Page 4 of 11
Step 5
Use Window Show Eclipse View Other Java Package Explorer
Page 5 of 11
Step 6
Open the new newXPage.xsp file you have just created using notepad. Now save it using UTF-8
Step 7
In the package explorer select the xpages folder, right click and select import:
Page 6 of 11
Step 8
Select the file you just created:
Step 9
Observe the A fully functional but barebone XPage.
SECTION 2: TITLE
In Lotus Notes, array tables are common to simulate child documents without inflating the databases size. This section will show how to carry this functionality over to XPages. Step 1 Create a Notes form called MultiValueSource, with the following fields: Subject Text Color MultiValue Text Shape MultiValue Text Taste MultiValue Text Page 7 of 11
Step 2
Create a new Server JavaScript Library TableWalker
Step 3 Step 4 Step 5
Copy the content of c:\Lab Files\codeSnippets\tableWalker.txt into this new script library. Create a new xPage: twDemo.xsp Add the new script library to the resources
Step 6
Add a Domino Document data source multiDoc to the page:
Step 7 Step 8 Step 9 Step 10 Step 11 Step 12 Step 13 Step 14
Add a edit control subject to the page and bind it to the subject field. Add a table with 5 columns and 3 rows to the page, call it repeatTable. In row 1 add labels in col 2-4: Color, Shape, Taste. In Row 2 col1 add 2 buttons, use button images and no text, call the buttons: addRowAbove (Image /actn097.gif ) addRowBelow (Image /actn096.gif) These can be found in C:\domino\data\domino\icons directory. In Row 2 col 5 add a button (no text) called deleteButton (Image /vwicn038.gif) Make all the buttons 25x25 pixels wide In columns 3,4,5 add edit boxes named color, shape, taste Merge the cells in row 3
Page 8 of 11
Step 15
Add 2 buttons: Add / Save
Step 16 Step 17
Add visual style as you deem fit. Add a repeat control below the table. Name it fieldGroup, the collection name fieldGroup and the Index name rowIndex, select JavaScript for the data binding
Step 18
Step 19 Step 20 Step 21 Step 22 Step 23 Step 24
Add the following code to the data binding: var scopeVariableName = "group"; var fieldNames = "color,taste,shape"; tableWalker.getDataSource(scopeVariableName,multiDoc,fieldNames) Add the following code to the addRowAbove button: tableWalker.addRow("group", rowIndex) Add the following code to the addRowBelow button: tableWalker.addRow("group", rowIndex+1) Add the following code to the deleteButton button: tableWalker.removeRow("group", rowIndex) Add the following code to the add button: tableWalker.addRow("group") Add the following code to the save button: tableWalker.updateDocument("group", multiDoc) multiDoc.save() Now the tricky part: use the outline view (on the left side, best to maximize it for this operation by double clicking on the header) to reorder the elements. Your outline currently looks like this:
Page 9 of 11
Rearrange the elements until they look like that: (might be a bit tricky in the beginning)
The repeat element envelopes the middle row of this table. Page 10 of 11
Step 25
Tip: if you don't like drag & drop you can use the source code to rearrange the elements as well. Adjust the data binding for the 3 fields: color, shape and taste. Select Advanced Expression Language and add fieldGroup[0] (fieldGroup[1], fieldGroup[2] respectively): You may need to close and re-open the XPage to see the changes.
Step 26
Note: you also could select Custom and add: #{fieldGroup[0]} View this Xpage on the web or notes, and add and remove several array items.
Summary:
Congratulations! You have completed this overview lab of XPages. In this lab, you completed the following procedures: Used @formula in a form definition in an XPage Converted a view to an XPage Setup multi-value fields to simulate dynamic tabular data.
Page 11 of 11

Lab 07 XPage Design Evolution PDF

Uploaded by

Copyright:

Available Formats

Lab 07 XPage Design Evolution PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lab 07 XPage Design Evolution PDF

Uploaded by

Copyright:

Available Formats

Domino's XPages Workshop Lab Manual

Lab 7 XPage Design Evolution

Step 2 Step 3 Step 4

COPYRIGHT IBM CORPORATION 2010. ALL RIGHTS RESERVED.

IBM ISV & DEVELOPER RELATIONS.

Use Window Show Eclipse View Other Java Package Explorer

Select the file you just created:

Observe the A fully functional but barebone XPage.

Create a new Server JavaScript Library TableWalker

Step 3 Step 4 Step 5

Add a Domino Document data source multiDoc to the page:

Step 7 Step 8 Step 9 Step 10 Step 11 Step 12 Step 13 Step 14

Add 2 buttons: Add / Save

Step 19 Step 20 Step 21 Step 22 Step 23 Step 24

You might also like