Domino Designer XPages Extension Library

First Edition

Published December 2011

About this edition

In keeping with IBM's commitment to accessibility, this edition of the product documentation is accessible.

Printing

When you print this document some of the style elements are removed to create a better print output. Here are a few tips about printing:

The document length may exceed the browser's print capability. Microsoft Internet Explorer has demonstrated the ability to print large files successfully.
This document is long. Use print preview to determine the printed page length.
You can highlight section of the document and then choose to only print the selected content

Working offline

You can save a local copy of this document from your browser. Each browser has different menus and menu options. Consult the browser help if you need assistance saving the document locally.

Submitting feedback

If you would like to provide feedback about this document, see the Lotus Documentation Feedback Web site.

Overview

The XPages Extension Library provides additional controls ready to use. The controls include an application layout object, an improved dialog, pickers, in place forms, Dojo components, dynamic content, and much more. The controls support enhancements to the Domino® templates.

The XPages Extension Library is provided as an open source project at http://extlib.openntf.org/ and includes the source code.

Copyright

Disclaimer

THE INFORMATION CONTAINED IN THIS DOCUMENTATION IS PROVIDED FOR INFORMATIONAL PURPOSES ONLY. WHILE EFFORTS WERE MADE TO VERIFY THE COMPLETENESS AND ACCURACY OF THE INFORMATION CONTAINED IN THIS DOCUMENTATION, 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 DOCUMENTATION OR ANY OTHER DOCUMENTATION. NOTHING CONTAINED IN THIS DOCUMENTATION 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.

Licensed Materials - Property of IBM

US Government Users Restricted Rights - Use, duplication or disclosure restricted by GS ADP Schedule Contract with IBM Corp.

This product is built on Eclipse (www.eclipse.org).

Trademarks

IBM, the IBM logo, and ibm.com® are trademarks or registered trademarks of International Business Machines Corporation in the United States, other countries, or both. If these and other IBM trademarked terms are marked on their first occurrence in this information with a trademark symbol (® or ™), these symbols indicate U.S. registered or common law trademarks owned by IBM at the time this information was published.

Such trademarks may also be registered or common law trademarks in other countries. A current list of IBM trademarks is available on the Web in Copyright and trademark information at www.ibm.com/legal/copytrade.shtml.

Intel and Pentium are trademarks or registered trademarks of Intel Corporation or its subsidiaries in the United States, other countries, or both.

Adobe and PostScript are registered trademarks of Adobe Systems Incorporated in the United States, other countries, or both.

Google, Google Desktop and Google Gadget are trademarks of Google Inc. in the United States, other countries, or both.

Linux is a registered trademark of Linus Torvalds in the United States, other countries, or both.

Java and all Java-based trademarks and logos are trademarks or registered trademarks of Oracle and/or its affiliates.

Microsoft, Windows, and the Windows logo are trademarks of Microsoft Corporation in the United States, other countries, or both.

UNIX is a registered trademark of The Open Group in the United States and other countries.

Other company, product, or service names may be trademarks or service marks of others.

Yahoo! is a trademark of Yahoo! Inc.

Installing and administering the XPages Extension Library

Install the extension library on Domino Designer to provide the necessary plug-ins at design time, and on Domino server and Notes® client to use the plug-ins at runtime.

Obtain and install the following product upgrades as needed from your distribution channel:

Lotus® Domino Designer 8.5.3 Upgrade Pack 1. This upgrade pack includes both Domino Designer and Notes plug-ins.
Lotus Notes® 8.5.3 Upgrade Pack 1. This upgrade pack includes only Notes plug-ins.
Lotus Domino 8.5.3 Upgrade Pack 1. This upgrade pack is for a server.

Alternatively you can get the plug-ins from http://extlib.openntf.org and manually install them, for example, to obtain experimental features beyond UP1. However, an http://extlib.openntf.org install is not supported. Applying the upgrade pack to 8.5.3 is the recommended process unless experimental features are desired.

Do not install both the upgrade pack and the plug-ins from OpenNTF. If you later want to install an experimental update from OpenNTF over an upgrade pack, uninstall the upgrade pack first.

You must install the plug-ins from http://extlib.openntf.org if you are running Lotus Domino 8.5.2.

You must go to http://extlib.openntf.org for the sample database XPagesExt.nsf. Download the kit and extract the sample database.

These instructions are for using the library as is. If your goal is to contribute to the library, you must install a development environment and connect to the Subversion repository. See the XPages Extension Library Documentation.pdf included in the http://extlib.openntf.org kit.

Getting the upgrade pack from Passport Advantage

The upgrade pack for Domino and Notes is available from Passport Advantage®.

Two products are available:

Part number CI5HUEN is the update pack in a compressed file.
Note: The part number changed from CI5GIEN to CI5HUEN reflecting a revision of the package to incorporate the Linux client installer. If you previously downloaded CI5GIEN and do not need the Linux client installer, there is no reason to take the revised version.
Part number CB6T6EN is an ISO image with launchers.

This product supports Language Groups 1, 2, and 3.

To get the upgrade pack in a compressed file, do the following:

Find the download. For Domino and Notes 8.5.3 Upgrade Pack 1, search for the part number CI5HUEN.

Select and download the upgrade pack.

Selecting and downloading the upgrade pack

Here is the download content:

CI5HUEN.zip
  client
    extlib-add-win32
      853UpgradePack1_20111208-0717.exe
    macosx
      853UpgradePack1_20111208-0717.tar
  designer
    extlib-designer-add-win32
      853UpgradePack1_20111208-0717.exe
  domino
    aix.tar
    aix65.tar
    IBMi_upgradepack.exe
    linux.tar
    sol.tar
    w32n_upgradepack.exe
    w64n_upgradepackexe
    zlinux64.tar

To get an ISO image of the upgrade pack and optionally use a launcher, do the following:
1. Find the download. For the ISO image of Domino and Notes 8.5.3 Upgrade Pack 1, search for the part number CB6T6EN.
2. Select and download the ISO image. Here is the top level of the image content:
3. To use the launcher, run launchpad.exe (Windows) or launchpad.sh (UNIX with X Windows). You need a supported browser but most popular ones are supported.
  Note: On Windows systems with UAC enabled (Vista, Windows 7 , Windows 2008 server) you may need to run launchpad.exe as an administrator by right-clicking on launchpad.exe and selecting Run as administrator as shown below.
  
  If you have problems with the launcher, use the kit at Apps\kits.
  
  The launcher is not needed if you are using the ISO image to transfer a compressed kit from Apps\kits to another system.

Installing the upgrade pack on Domino Designer and Notes

The upgrade pack adjusts existing installs of Domino Designer and Notes. The Domino Designer upgrade includes the Notes upgrade - do not install both on one machine.

Obtain a copy of the 853UpgradePack1 executable through the distribution channel. Remember to select the executable from the correct directory depending on whether you are doing a Domino Designer or Notes install.
Remove all remnants of any beta copies of the extension library including copies installed from OpenNTF.
Note: Skip to the next step if you are sure your machine contains no beta copies of the extension library.
1. In File > Preferences for Domino Designer, check Enable Eclipse plug-in install if it is not already checked.
  For a Notes install, add the following line to framework\rcp\plugin_customization.ini:
```
com.ibm.notes.branding/enable.update.ui=true
```
2. In Domino Designer or Notes, click File > Application > Application Management.
3. Select and uninstall any features for XPages Extension Library, Domino Access Services, and Wink.
4. Restart Domino Designer or Notes to complete the uninstall.
5. To make sure the features and plug-ins are removed, search the following directories in the Domino Designer or Notes install:
  - framework\shared\eclipse\features and framework\shared\eclipse\plugins
  - data\domino\workspace\applications\eclipse\features and data\domino\workspace\applications\eclipse\plugins
  - data\workspace\applications\eclipse\features and data\workspace\applications\eclipse\plugins
  Remove files that contain domino.das, domino.services, wink, or extlib in their names.
Exit from Domino Designer and Notes.
For Windows, do the following:
1. Run the 853UpdatePack1 executable.
2. On the first dialog, select the second option if you want to save the unpacked install files. You can later install from the unpacked location by running setup.exe.
3. Click Next to unpack the install files and start the InstallShield Wizard.
4. Follow the wizard to complete the installation.
ForMacintosh, do the following:
1. Untar the installer file.
2. Run ext-lib-addon.pkg.
3. Follow the dialogs to complete the installation.
For Linux RPM command line, do the following:
1. In the directory containing the RPM upgrade pack, type rpm -ih upgradePack1name.rpm.
For Linux RPM interactive, do the following:
1. Right-click the RPM download and select Open with Software Installer.
2. Select the package and click Apply.
3. If the error message Unable to verify upgradePack appears, click Install anyway.
4. When the Software installed successfully message appears, click OK.
For Linux Debian command line, do the following:
1. In the directory containing the Debian upgrade pack, type sudo dpkg -i upgradePackname.deb.
For Linux Debian interactive, do the following:
1. Right-click the Debian download and select Open with GDebi Software Installer.
2. Click Install Package.
3. When the Installation finished message appears, click Close.
Upon successful completion of the install:
- Your system contains the following program: Lotus Notes 8.5.3 Upgrade Pack 1. The name is the same for both Domino Designer and Notes.
- Your Domino Designer or Notes install contains additional plug-ins for:
  - Domino Access Services (DAS)
  - Domino Wink
  - Extension Library feature Group 1 localization pack
  - Extension Library feature Group 2 localization pack
  - Extension Library feature Group 3 localization pack
  - XPages Extension Library
  - XPages Extension Library Designer Feature (Domino Designer only)
  - XPages Extension Library Designer Install Feature (Domino Designer only)
  - XPages Extension Library Install Handler Feature
  - XPages Extension Library Source (Domino Designer only)
For Domino Designer only, if the source files are needed, import them as follows:
1. In Domino Designer, change to the Java perspective (Window > Open Perspective > Java).
2. Right-click under the Package Explorer tab and select Import.
3. Expand Plug-in Development, select Plug-ins and Fragments, and click Next.
4. Under Import As, select Projects with source folders, and click Next.
5. Filter the list of plug-ins and fragments by entering com.ibm.xsp.ext. Optionally you can select only the plug-ins of interest.
6. Click Add All.
7. Click Finish.
Eclipse imports the selected plug-ins, creating projects and source folders.
For Windows uninstall, do the following:
1. Open Add or Remove Programs in the Control Panel.
2. Remove Lotus Notes 8.5.3 Upgrade Pack 1.
For Macintosh uninstall, do the following:
1. Add the following line to framework\rcp\plugin_customization.ini
```
com.ibm.notes.branding/enable.update.ui=true
```
2. In Notes, click File > Application > Application Management.
3. Select and uninstall the following features:
```
Apache Wink Feature
Domino Access Services (DAS)
Domino Sample REST Service Feature
Extended Components Library for XPages Extension Feature
Extension library feature
```
4. Restart Domino Designer or Notes to complete the uninstall.

Installing the upgrade pack on a Domino server

The upgrade pack adjusts the existing install of a Domino server.

Obtain a copy of the appropriate upgradepack executable or archive file through the distribution channel.
Shut down the server.
Remove all remnants of any beta copies of the extension library.
1. In the file system, search the following directories in the Domino install:
  - osgi\extlib\eclipse\features and osgi\extlib\eclipse\plugins
  - data\domino\workspace\applications\eclipse\features and data\domino\workspace\applications\eclipse\plugins
2. Remove files that contain domino.das, domino.services, wink, or extlib in their names.
3. If the extension library plug-ins are in an NSF-based update site, remove or comment out this (or a similar) line in the server notes.ini file:
```
OSGI_HTTP_DYNAMIC_BUNDLES=updateSite1.nsf
```
For Windows GUI mode, do the following:
1. Run w32n_upgradepack.exe or w64n_upgradepack.exe.
2. On the first dialog, change the location for the unpacked install files if desired. You can later install from the unpacked location by running setup.exe.
3. Click Next to unpack the install files and start the InstallShield Wizard.
4. Follow the wizard to complete the installation. You can cancel if you do not want to install at this time.
For Windows silent mode, do the following:
1. If the response file is ready, you can install in one step by running one of the following:
```
w32n_upgradepack.exe -s -a -silent -options <response_file>
w64n_upgradepack.exe -s -a -silent -options <response_file>
```
2. Otherwise unpack the kit by running one of the following:
```
w32n_upgradepack.exe -f <kit_location> -e
w64n_upgradepack.exe -f <kit_location> -e
```
3. Then edit the response file. The kit contains a sample response file.
4. Then change to the directory with the unpacked files and run the following:
```
setup.exe -silent -options <response_file>
```
For Unix, do the following:
1. Create a directory for the install files.
2. Move or copy the archive aix64.tar, aix.tar, linux.tar, sol.tar, or zlinux64.tar to the install directory.
3. Change to the install directory.
4. Untar the archive.
5. Execute the following to ensure that all files are runnable:
```
chmod -R +x .
```
6. Set the DISPLAY environment variable for using the UI on Unix. (xclock should display the clock to check for a working display.)
7. For silent mode, execute the following:
```
./install -silent options <response_file.dat>
```
  The kit contains a sample response file.
8. For console mode, execute the following:
```
./install -console
```
If the installer does not run, ensure that all scripts in the tools directory have execute permission.
Upon successful completion of the install:
- Your system contains the following program: Lotus Domino Upgrade Pack.
- Your Domino install contains additional plug-ins for:
  - Domino Access Services (DAS)
  - Domino Wink
  - Extension Library feature Group 1 localization pack
  - Extension Library feature Group 2 localization pack
  - Extension Library feature Group 3 localization pack
  - XPages Extension Library
  - XPages Extension Library Install Handler Feature

Restart the server. You can check for the new plug-ins with the following console commands:

> tell http osgi ss com.ibm.domino
> tell http osgi ss com.ibm.wink
> tell http osgi ss com.ibm.xsp.extlib

For Windows uninstall, do the following:
1. Open Add or Remove Programs in the Control Panel.
2. Remove Lotus Domino Upgrade Pack.
For Unix uninstall, do the following:
1. Change to the directory with the install files.
2. Execute the following:
```
./uninstall
```
  To uninstall in silent mode, first edit the install script and replace -console with -silent.

Deploying the upgrade pack

Here are recommendations for mass deployment with tools such as System Center Configuration Manager (SCCM) and Systems Management Server (SMS).

Using the local system account is recommended.
On XP, you can open the local system account using a command of the following form:
```
at 13:43 /interactive cmd.exe
```
On Windows 7, you need to download PSTools and run the following from an administrative shell:
```
PSExec.exe -i -s cmd.exe
```
Download PSTools from http://technet.microsoft.com/en-us/sysinternals/bb897553.aspx.
Validate that you are running as the system local account by inspecting the USERPROFILE environment variable from the shell. For XP, it should be C:\Documents and Settings\LocalService. For Windows 7, it should be C:\Windows\system32\config\systemprofile.
With the same environment used by common deployment tools, you can run the add-on installer in one of three ways:
- Interactive: 853UpgradePack1_<timestamp>.exe
- Progress bar: 853UpgradePack1_<timestamp>.exe -s -a /s /v"/l*v C:\temp\Notes853UP1.log /qb+"
- Silent: 853UpgradePack1_<timestamp>.exe -s -a /s /v"/l*v C:\temp\Notes853UP1.log /qn+"

Getting the install files from OpenNTF

The binary files are available as an OpenNTF project.

Go to the following web site: http://extlib.openntf.org.
Download one of the following archives:
- XPagesExtensionLibrary-852.zip if you are running Domino 8.5.2.
- XPagesExtensionLibrary-853.zip if you are running Domino 8.5.3.
Note: The archive name may change but should be obvious.
Extract the content of the archive.

The two files of most interest are:

updateSiteOpenNTF-designer.zip contains the Eclipse update files for Domino Designer.
updateSiteOpenNTF.zip contains the Eclipse update files for the Domino server.
XPagesExt.nsf is a sample database.

Installing the OpenNTF update site in Domino Designer

The library is provided as an Eclipse update site which should be installed using the Eclipse update manager.

Open Domino Designer.
In File > Preferences for Domino Designer, check Enable Eclipse plug-in install if it is not already checked.
Click File > Application > Install to open the Install/Update dialog.
Select Search for new features to install and click Next.
Use the Add Zip/Jar Location button to add updateSiteOpenNTF-designer.zip if it is not already there. Ensure that updateSiteOpenNTF-designer.zip is selected and click Finish.
Reply to any questions.
1. Select all features if asked.
2. Accept the feature license.
3. Select Install this plug-in for each unsigned plug-in.
Restart Domino Designer and Notes after the update completes.
Click Help > About IBM Lotus Domino Designer. Click Plug-in Details. Ensure that the Extended Component Library for XPages plug-ins are present.
To enable previewing extension library features in a browser, unpack updateSiteOpenNTF-designer.zip to domino\workspace\applications\eclipse in the Domino data directory. Take care to strictly respect the directory hierarchy.
$Unpacking the update site to domino\workspace\applications\eclipse$

Installing the OpenNTF update site on the Domino server

You must unpack the updateSiteOpenNTF.zip to any Domino server on which the extension library runs.

On the server machine, unpack updateSiteOpenNTF.zip to domino\workspace\applications\eclipse in the Domino data directory. Take care to strictly respect the directory hierarchy.
Start or restart the Domino server, or stop (tell http quit) and start (load http) the web server.
Ensure that the plug-ins are properly installed with the following console command. The state should be RESOLVED.
```
tell http osgi ss com.ibm.xsp.extlib
```

Installing and running the demo application

Install the demo application on a Domino Designer workstation or a Domino server.

Copy XPagesExt.nsf (XPages Extension Library) to the Domino data directory.
Open XPagesExt.nsf in Domino Designer and sign all elements (File > Application > Sign Design).
Preview the Admin_Home XPage in Notes. Click the Create Sample Data Set button.
Alternatively or additionally, you can use the other buttons to generate data.

Installing and running the mobile demo application in 8.5.2

Here are guidelines for running the mobile demo application in Domino 8.5.2. For Domino 8.5.3, use the Mobile Apps controls.

For Domino 8.5.2 only, you must install Dojo 1.5. Domino 8.5.2 comes with Dojo 1.4.3 and does not contain the necessary extension points for dynamically contributing themes from plug-ins.
1. Copy the /dojox/mobile directory and the /dojox/mobile.js file from Dojo 1.5 to the Dojo 1.4.3 directory (/domino/js/dojo-1.4.3). You have to download your own copy of Dojo 1.5 from the Dojo web site (http://www.dojotoolkit.org/).
2. Copy the themes files (iPhone.theme, Android.theme, Blackberry.theme, and so on) from the mobile plug-in (com.ibm.xsp.extlib.mobile_xxx.jar/resources/mobile/themes/*.theme) to the Domino XPages themes directory (/xsp/nsf/themes).
Get the mobile application as follows:
- Non-IBMers can get the database from the OpenNTF project XPages Mobile Controls: http://mobilecontrols.openntf.org/. Extract the NSF into your Domino data directory.
- IBMers can get the database from the following SVN repository: svn+ssh://[userName]@svn.cs.opensource.ibm.com/svn/xpagesext/trunk/extlib/nsf/diskMobileAppNsf.
Create a new NSF called MobileDemo.nsf in the Domino data directory and connect it to the local on-disk project.
Set the ACL appropriately (for example, allow anonymous access for testing purposes).
Open the XPages page Setup.xsp and click the button Create Blog Documents.
To run the sample, open mJava.xsp, for example, http://nheidloff-1/MobileDemo.nsf/mJava.xsp

To try the sample application, you can use different browsers and devices.

The best test is always an actual device. If you don't have this or if you need to debug your application, you can use different browser and simulators.

The mobile controls can be run in Firefox since there is a compatible module that simulates the missing webkit functionality. This allows using Firebug to debug network transactions, using the console, debugging client-side JavaScript, and so on.

Safari and Chrome can be used too and they come closer to the actual experience since both are webkit based.

Simulators often come closer to the actual experience and allow taking good screen shots and videos. The different SDKs all provide simulators. Another good simulator is Genuitec MobiOne that you can get here: http://www.genuitec.com/mobile/download.html.

Using controls from the XPages Extension Library

Here are guidelines for using some of the controls in the XPages Extension Library.

XPages Extension Library enablement

The XPages Extension Library must be enabled in each application. You can do this automatically the first time you use a control from the library.

When you first use a control from the XPages Extension Library in an application, a dialog asks if you want to enable the library. Click Continue.

To manually enable or disable the library, open Application Properties for the application, select the Advanced tab, and select or deselect com.ibm.xsp.extlib.library under XPage Libraries.

XPages Extension Library namespace

The XPages Extension Library controls require an additional namespace which is automatically inserted in design mode. In source mode, insert the namespace manually.

A new XPage looks like this in source mode, defining one namespace for xp.

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

</xp:view>

If you add a control from the XPages Extension Library in design mode, Domino Designer adds a namespace for xe.

<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
	xmlns:xe="http://www.ibm.com/xsp/coreex">

If you are working in source mode, make this adjustment manually.

Data Access controls

Data Access controls expose data access services.

Table 1. Data Access controls
Tag name	Common name	Description	Reference topic
`jsonRpcService`	Remote Services	Exposes a remote service.	jsonRpcService - Remote Services
`restService`	REST Service	Exposes a REST service.	restService - REST Service

Dojo Form controls

The Dojo Form controls mimic components from the Dojo toolkit.

Table 2. Dojo Form controls
Tag name	Common name	Description	Reference topic
`djButton`	Dojo Button	Activates an event handler.	djButton - Dojo Button
`djCheckBox`	Dojo Check Box	Accepts a check box as true or false.	djCheckBox - Dojo Check Box
`djComboBox`	Dojo Combo Box	Accepts a selected value.	djComboBox - Dojo Combo Box
`djCurrencyTextBox`	Dojo Currency Text Box	Accepts currency input.	djCurrencyTextBox - Dojo Currency Text Box
`djDateTextBox`	Dojo Date Text Box	Accepts a date value.	djDateTextBox - Dojo Date Text Box
`djextImageSelect`	Image Select	Accepts a value based on a selected image.	djextImageSelect - Dojo Image Select
`djextLinkSelect`	Link Select	Accepts a value based on a selected link.	djextLinkSelect - Dojo Link Select
`djextListTextBox`	List Text Box	Accepts a list of values.	djextListTextBox - List Text Box
`djextNameTextBox`	Name Text Box	Accepts a list of names.	djextNameTextBox - Name Text Box
`djFilteringSelect`	Dojo Filtering Select	Accepts a selected and filtered value.	djFilteringSelect - Dojo Filtering Select
`djHorizontalSlider`	Dojo Horizontal Slider	Accepts a numeric value from a horizontal slider.	djHorizontalSlider - Dojo Horizontal Slider
`djNumberSpinner`	Dojo Number Spinner	Accepts a numeric value that is an increment of a starting value.	djNumberSpinner - Dojo Number Spinner
`djNumberTextBox`	Dojo Number Text Box	Accepts a numeric value.	djNumberTextBox - Dojo Number Text Box
`djRadioButton`	Dojo Radio Button	Accepts the value of a selected radio button.	djRadioButton - Dojo Radio Button
`djSimpleTextarea`	Dojo Simple Text Area	Accepts text input on multiple lines.	djSimpleTextarea - Dojo Simple Text Area
`djSliderRule`	Dojo Slider Rule	Adds a rule (hash marks) for a horizontal or vertical slider.	djSliderRule - Dojo Slider Rule
`djSliderRuleLabels`	Dojo Slider Rule Labels	Adds labels to the rule for a horizontal or vertical slider.	djSliderRuleLabels - Dojo Slider Rule Labels
`djTextarea`	Dojo Text Area	Accepts text input on multiple lines.	djTextarea - Dojo Text Area
`djTextBox`	Dojo Text Box	Accepts text input on one line.	djTextBox - Dojo Text Box
`djTimeTextBox`	Dojo Time Text Box	Accepts a time value.	djTimeTextBox - Dojo Time Text Box
`djToggleButton`	Dojo Toggle Button	Toggles between a checked value and an unchecked value.	djToggleButton - Dojo Toggle Button
`djValidationTextBox`	Dojo Validation Text Box	Accepts a validated value.	djValidationTextBox - Dojo Validation Text Box
`djVerticalSlider`	Dojo Vertical Slider	Accepts a numeric value from a vertical slider.	djVerticalSlider - Dojo Vertical Slider

Dojo Grid controls

The Dojo Grid controls present information in rows and columns.

Table 3. Dojo Grid controls
Tag name	Common name	Description	Reference topic
`djxDataGrid`	Dojo Data Grid	Defines a grid of rows and columns.	djxDataGrid - Dojo Data Grid
`djxDataGridColumn`	Dojo Data Grid Column	Defines the content of a column. Can be inserted into a grid or row.	djxDataGridColumn - Dojo Data Grid Column
`djxDataGridRow`	Dojo Data Grid Row	Defines multiple rows.	djxDataGridRow - Dojo Data Grid Row

Dojo Layout controls

The Dojo Layout controls mimic components from the Dojo toolkit.

Table 4. Dojo Layout controls
Tag name	Common name	Description	Reference topic
`djAccordionContainer`	Accordion Container	Contains panes that expand to reveal their content.	djAccordionContainer - Accordion Container
`djAccordionPane`	Accordion Pane	Provides content for one pane in an accordion container.	djAccordionPane - Accordion Pane
`djBorderContainer`	Border Container	Contains panes situated at various regions within the container.	djBorderContainer - Border Container
`djBorderPane`	Border Pane	Provides content for one pane in a border container.	djBorderPane - Border Pane
`djContentPane`	Dojo Content Pane	Provides content for a container.	djContentPane - Dojo Content Pane
`djStackContainer`	Stack Container	Contains panes stacked on top of each other.	djStackContainer - Stack Container
`djStackPane`	Stack Pane	Provides content for one pane in a stack container.	djStackPane - Stack Pane
`djTabContainer`	Tab Container	Contains panes on tabs.	djTabContainer - Tab Container
`djTabPane`	Tab Pane	Provides content for one pane in a tab container.	djTabPane - Tab Pane

Extension Library controls

Extension Library controls extend the capabilities of the core controls.

Table 5. Extension Library controls
Tag name	Common name	Description	Reference topic
`accordion`	Accordion	Accordion control allows you to provide multiple panes and display them one at a time. A single pane is usually formed of a Container Node with several Basic Nodes inside it.	To be supplied.
`applicationLayout`	Application Layout	A control that lays out an XPages application. A control that provides layout and positioning for areas in an XPages application.	To be supplied.
`breadCrumbs`	Bread Crumbs	Bread Crumbs control is used for indication of a current page location in regards to an application home page.	To be supplied.
`dataView`	Data View	Displays data as a view.	dataView - Data View
`dialog`	Dialog	Contains a modal dialog.	dialog - Dialog
`dialogButtonBar`	Dialog Button Bar	Contains buttons in a dialog.	dialogButtonBar - Dialog Button Bar
`dropDownButton`	DropDown Button	A drop down button control.	To be supplied.
`dumpObject`	Dump Object	This control dumps out information from an object or a set of objects which allows you to see the properties belonging to that object in a grid display.	To be supplied.
`dynamicContent`	Dynamic Content	Contains dynamic content.	dynamicContent - Dynamic Content
`dynamicViewPanel`	Dynamic View Panel	A view panel that dynamically creates its columns based on the view definition.	To be supplied.
`firebugLite`	Firebug Lite	Inserts Firebug Lite, a debugging tool into the current page.	To be supplied.
`formColumn`	Form Layout Column	Form layout column control.	formColumn - Form Layout Column
`formRow`	Form Layout Row	Form layout row control.	formRow - Form Layout Row
`formTable`	Form Table	Formats controls in rows and columns. Provides header, footer, and message areas.	formTable - Form Table
`forumPost`	Forum Post	Displaying the content of a user post.	To be supplied.
`forumView`	Forum View	A high level control that renders an hierarchical view.	To be supplied.
`inPlaceForm`	In Place Form	Contains a dynamic form.	inPlaceForm - In Place Form
`keepSessionAlive`	Keep Session Alive	Keep the session server alive until the browser page is closed.	To be supplied.
`linksList`	List of Links	A control that displays its children within a basic HTML list.	To be supplied.
`list`	List Container	A list of links control.	To be supplied.
`listInline`	Inline List Container	A control that displays its children within an inline list (on one row with separators between the items).	To be supplied.
`listSeparator`	List Separator	Separator between list entries in a single-line list, where each entry is displayed beside the previous entry, as opposed displaying entries below the previous entry.	To be supplied.
`multiImage`	Multi-image Output	Multi-image control that selects an icon to display from a list, where the icon displayed depends on the current value of the field that the control is bound to.	To be supplied.
`namePicker`	Name Picker	Displays a modal dialog containing name choices. Applies selected names to an associated control.	namePicker - Name Picker
`navigator`	Navigator	A page navigator. Navigator control allows you to make hierarchical tree of page links to navigate to. Particular branch of such tree could be made initially visible, i.e. expanded tree.	To be supplied.
`outline`	Outline	A generic outline control. Outline control behaves similar to Navigator control without ability to use expanding feature. Allows to specify custom Java class via "treeRenderer" to be used for nodes visualization.	To be supplied.
`pagerAddRows`	Pager Add Rows	Adds rows to an iterator control.	pagerAddRows - Pager Add Rows
`pagerDetail`	Pager Show/Hide Details	Shows and hides detail areas of an iterator control.	pagerDetail - Pager Show/Hide Details
`pagerExpand`	Pager Expand/Collapse	Expands or collapses all the rows of an iterator control.	pagerExpand - Pager Expand/Collapse
`pagerSaveState`	Pager Save State	Saves the number of rows displayed by an iterator control if the user navigates away from the page and back.	pagerSaveState - Pager Save State
`pagerSizes`	Pager Sizes	Allows selection of the number of rows displayed by an iterator control.	pagerSizes - Pager Sizes
`popupMenu`	PopupMenu	A pop-up menu control. A pop-up menu to be shown over some text or other controls. Menu content is usually constructed using "xe:basicContainerNode" and "xe:basicLeafNode" elements in "treeNodes" property. Accessibility compatible.	To be supplied.
`sortLinks`	Sort Links	A sort links control. Sort Links control allows you to provide dynamic content associated with a link. Generally it is done via inclusion of a Basic Node where its "href" attribute could be "#content=byauthor" and some facet with "xp:key=byauthor" is provided.	To be supplied.
`switchFacet`	Switch	Displays alternate panels depending on key values.	switchFacet - Switch
`tagCloud`	Tag Cloud	Control that displays a tag cloud.	To be supplied.
`toolbar`	Toolbar	A toolbar control. Toolbar control is used to display a horizontally aligned menu with possible choices to be shown when particular menu item is clicked.	To be supplied.
`tooltip`	Tooltip	Displays data when another control is in focus.	tooltip - Tooltip
`tooltipDialog`	Tooltip Dialog	Displays data when another control is in focus. Allows activation of client-side events when the data is shown and hidden.	tooltipDialog - Tooltip Dialog
`valuePicker`	Value Picker	Displays a modal dialog containing value choices. Applies selected values to an associated control.	valuePicker - Value Picker
`widgetContainer`	Widget Container	A container that displays a widget (in the larger sense).	To be supplied.

iNotes controls

The iNotes® controls support certain views, lists, and stores.

Table 6. iNotes controls
Tag name	Common name	Description	Reference topic
`iCalReadStore`	iCal Store	Data Store for iCal Store.	To be supplied.
`calendarView`	iNotes Calendar	A control that displays an iNotes calendar.	To be supplied.
`listView`	iNotes ListView	A control that displays an iNotes ListView.	To be supplied.
`listViewColumn`	ListView Column	Defines the view column as design structure.	To be supplied.
`notesCalendarStore`	Notes Calendar Store	Data Store for Notes Calendar View.	To be supplied.
`notesListViewDesign`	Notes List View Design	Design Store for Notes List View.	To be supplied.
`notesListViewStore`	Notes List View Store	Data Store for Notes List View.	To be supplied.

Mobile Apps controls

The Mobile Apps controls support mobile applications.

Table 7. Mobile Apps controls
Tag name	Common name	Description	Reference topic
`appPage`	Mobile Page	Contains one mobile page. Only one page displays at a time.	appPage - Mobile Page
`djxmHeading`	Page Heading	Provides header information and basic navigation.	djxmHeading - Page Heading
`djxmLineItem`	Static line item	Provides a way to link to other mobile pages.	djxmLineItem - Static Line Item
`djxmRoundRectList`	Rounded List	This control displays a rectangle with rounded corners.	djxmRoundRectList - Rounded List
`djxmSwitch`	Mobile Switch	Works as an on/off switch with behavior like a checkbox.	djxmSwitch - Mobile Switch
`singlePageApp`	Single Page Application	Contains a mobile application. Controls its layout and configuration.	singlePageApp - Single Page Application
`tabBar`	Tab Bar	Presents a banner upon which buttons can be placed.	tabBar - Tab Bar
`tabBarButton`	Tab Bar Button	Presents a banner upon which buttons can be placed.	tabBarButton - Tab Bar Button

A simple action also supports Mobile Apps: Move To Mobile Page (Simple actions - JavaScript).

Mobile XPage name prefix

An XPage using mobile controls must start with a specified prefix to use the correct themes.

Open the application in Package Explorer (Window > Show Eclipse Views > Package Explorer).

Open WebContent > WEB-INF > xsp.properties to the Source tab and add a line of the following form, where mobile is the prefix:

xsp.theme.mobile.pagePrefix=mobile

Mobile XPage launch

A specified XPage can be launched from a mobile device through a work-around.

The work-around is to create an empty XPage and specify it as the launch page in Application Properties. Then create an afterPageLoad event handler that redirects to a mobile page or a non-mobile page depending on context. Use the following code as a model:

<xp:this.afterPageLoad>
<![CDATA[#{javascript:
	var uAgent = context.getUserAgent().getUserAgent();
	if ((uAgent.match("iPhone") !== null || 
		param.platfrom=="iphone") || 
		(uAgent.match("Android") !== null || 
		param.platfrom=="android") || 
		uAgent.match("iPad") !== null)
		{
			context.redirectToPage("/m_Application.xsp", true);
		}
		else
		{
			context.redirectToPage("/allDocuments.xsp", true);
		}
}]]>
</xp:this.afterPageLoad>

Simple actions

The XPages Extension Library contains a number of simple actions.

Table 8. Simple actions
Tag name	Common name	Description	Reference topic
`addRows`	Add Rows	Dynamically adds rows to a data iterator.	Add Rows (Simple actions - JavaScript)
`alertAction`	Alert	Displays a message in a modal dialog.	Alert (Simple actions - JavaScript)
`changeDynamicContentAction`	Change Dynamic Content	Changes dynamic content so that a specified facet displays.	Change Dynamic Content (Simple actions - JavaScript)
`dojoAnimateProperty`	Dojo Animation	Applies animation to a control.	Dojo Animation (Simple actions - JavaScript)
`dojoFadeIn`	Dojo Fade In Effect	Causes a target control to fade in.	Dojo Fade In Effect (Simple actions - JavaScript)
`dojoFadeOut`	Dojo Fade Out Effect	Causes a target control to fade out.	Dojo Fade Out Effect (Simple actions - JavaScript)
`dojofxSlideTo`	Dojo Slide To Effect	Causes a target control to slide to a specified position.	Dojo Slide To Effect (Simple actions - JavaScript)
`dojofxWipeIn`	Dojo Wipe In Effect	Causes a target control to be wiped in.	Dojo Wipe In Effect (Simple actions - JavaScript)
`dojofxWipeOut`	Dojo Wipe Out Effect	Causes a target control to be wiped out.	Dojo Wipe Out Effect (Simple actions - JavaScript)
`moveTo`	Move To Mobile Page	Replaces the current page using a slick web movement.	Move To Mobile Page (Simple actions - JavaScript)

Using templates from the XPages Extension Library

Extended versions of the discussion and team room templates are provided.

From the install kit, copy the following files to the Domino Designer data directory:

discussion8xl.ntf appears as Discussion 8.5.3 XL in the Template list for a new application.
teamrm8xl.ntf appears as TeamRoom 8.5.3 XL in the Template list for a new application.

Use these templates to create XPages applications that run on the web, the Notes client, and mobile devices. The mobile XPage design elements enable you to get started with XPages mobile development.

Simple actions reference

Specified here are the XPages Extension Library simple actions.

Add Rows (Simple actions - JavaScript)

Dynamically adds rows to a data iterator.

Defined in

Extension Library

Type of simple action

Basic (Server)

Syntax

<xe:addRows rowCount="number" for="id" disableId="id" state="true|false" loaded="true|false"></xe:addRows>

Table 9. Attributes
Attribute	Description
`disableId="id"`	Identifies a control that is hidden if the iterator has no more rows. Typically this is the control that activates this action.
`for="id"`	Identifies the iterator control. If this simple action is nested in a repeating control, that control is the default.
`loaded="true\|false"`	Creates a tag instance when the control is loaded, or not. Defaults to `true`.
`rowCount="number"`	Number of rows to add. Defaults to the number of rows displayed on each page of the iterator.
`state="true\|false"`	If the server state should be saved after getting the AJAX request.

Examples

Here a button at the bottom of a data table adds three rows per click.

<xp:dataTable id="dataTable1" rows="10" value="#{javascript:return database.getAllDocuments()}" var="rowdoc">
	<xp:column id="column1">
		<xp:this.facets>
			<xp:label value="subject" id="label1" xp:key="header" style="font-weight:bold"></xp:label>
		</xp:this.facets>
		<xp:text escape="true" id="computedField1">
			<xp:this.value>
				<![CDATA[#{javascript:return rowdoc.getItemValueString("subject")}]]>
			</xp:this.value>
		</xp:text>
	</xp:column>
</xp:dataTable>

<xp:button value="Add 3 rows" id="button1">
	<xp:eventHandler event="onclick" submit="false">
		<xp:this.script>
			<xe:addRows rowCount="3" for="dataTable1" disableId="button1" state="true"></xe:addRows>
		</xp:this.script>
	</xp:eventHandler>
</xp:button>

Alert (Simple actions - JavaScript)

Displays a message in a modal dialog.

Defined in

Extension Library

Type of simple action

Basic (Client)

Syntax

<xe:alertAction text="message" loaded="true|false"</xe:alertAction>

Table 10. Attributes
Attribute	Description
`loaded="true\|false"`	Creates a tag instance when the control is loaded, or not. Defaults to `true`.
`text="text"`	Text of the alert message.

Examples

Here a button issues an alert then causes text to slide to a position 100 pixels from the left and 100 pixels from the top.

<xp:div id="div1"
	style="font-size:16pt;font-weight:bold;text-align:center">
	Testing testing testing
</xp:div>
<xp:button value="Slide To" id="button3">
	<xp:eventHandler event="onclick" submit="false">
		<xp:this.script>
			<xp:scriptGroup>
				<xe:alertAction text="Sliding text to position 100, 100"></xe:alertAction>
				<xe:dojofxSlideTo node="div1" duration="1500" left="100" top="100"></xe:dojofxSlideTo>
			</xp:scriptGroup>
		</xp:this.script>
	</xp:eventHandler>
</xp:button>

Change Dynamic Content (Simple actions - JavaScript)

Changes dynamic content so that a specified facet displays.

Defined in

Extension Library

Type of simple action

Basic (Server)

Syntax

<xe:changeDynamicContentAction facetName="display" for="dynamic" loaded="true|false"><xe:this.parameters><xp:parameter name="name" value="value" loaded="true|false"</xp:parameter>...</xe:this.parameters></xe:changeDynamicContentAction>

Table 11. Attributes
Attribute	Description
`facetName="display"`	Name of the facet to display.
`for="dynamic"`	Name of the dynamic control containing the facet.
`loaded="true\|false"`	Creates a tag instance when the control is loaded, or not. Defaults to `true`.
`this.parameters`	Names and values of parameters passed as is.

Usage

For more information, see dynamicContent - Dynamic Content and Dynamic content

Examples

This Dynamic Content control contains two facets. Each facet contains a panel and each panel contains a button and a Domino view. By default, the mainView facet appears at page load. Clicking the button in the mainView facet displays the subjectView facet. Clicking the button in the subjectView facet displays the mainView facet.

<xe:dynamicContent id="dynamicContent1" defaultFacet="mainView">
	<xp:this.facets>
		<xp:panel xp:key="subjectView">
			<xp:button value="Switch to main view" id="button1">
				<xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="dynamicContent1">
					<xp:this.action>
						<xe:changeDynamicContentAction facetName="mainView" for="dynamicContent1">
						</xe:changeDynamicContentAction>
					</xp:this.action>
				</xp:eventHandler>
			</xp:button>
			<xp:viewPanel rows="30" id="viewPanel1">
				<xp:this.facets>
					<xp:pager partialRefresh="true"
						layout="Previous Group Next" xp:key="headerPager" id="pager1">
					</xp:pager>
				</xp:this.facets>
				<xp:this.data>
					<xp:dominoView var="view1" viewName="subject"></xp:dominoView>
				</xp:this.data>
				<xp:viewColumn columnName="subject" id="viewColumn1">
					<xp:viewColumnHeader value="subject" id="viewColumnHeader1"></xp:viewColumnHeader>
				</xp:viewColumn>
				<xp:viewColumn columnName="number" id="viewColumn2">
					<xp:viewColumnHeader value="number" id="viewColumnHeader2"></xp:viewColumnHeader>
				</xp:viewColumn>
				<xp:viewColumn columnName="$2" id="viewColumn3">
					<xp:viewColumnHeader value="last modified" id="viewColumnHeader3"></xp:viewColumnHeader>
				</xp:viewColumn>
			</xp:viewPanel>
		</xp:panel>
		<xp:panel xp:key="mainView">
			<xp:button value="Switch to subject view" id="button2">
				<xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="dynamicContent1">
					<xp:this.action>
						<xe:changeDynamicContentAction
							facetName="subjectView" for="dynamicContent1">
						</xe:changeDynamicContentAction>
					</xp:this.action>
				</xp:eventHandler>
			</xp:button>
			<xp:viewPanel rows="30" id="viewPanel2">
				<xp:this.facets>
					<xp:pager partialRefresh="true"
						layout="Previous Group Next" xp:key="headerPager" id="pager2">
					</xp:pager>
				</xp:this.facets>
				<xp:this.data>
					<xp:dominoView var="view2" viewName="main"></xp:dominoView>
				</xp:this.data>
				<xp:viewColumn columnName="category" id="viewColumn4">
					<xp:viewColumnHeader value="category" id="viewColumnHeader4"></xp:viewColumnHeader>
				</xp:viewColumn>
				<xp:viewColumn columnName="subject" id="viewColumn5">
					<xp:viewColumnHeader value="subject" id="viewColumnHeader5"></xp:viewColumnHeader>
				</xp:viewColumn>
				<xp:viewColumn columnName="number" id="viewColumn6">
					<xp:viewColumnHeader value="number" id="viewColumnHeader6"></xp:viewColumnHeader>
				</xp:viewColumn>
				<xp:viewColumn columnName="$2" id="viewColumn7">
					<xp:viewColumnHeader value="last modified" id="viewColumnHeader7"></xp:viewColumnHeader>
				</xp:viewColumn>
			</xp:viewPanel>
		</xp:panel>
	</xp:this.facets>
</xe:dynamicContent>

Dojo Fade In Effect (Simple actions - JavaScript)

Causes a target control to fade in.

Defined in

Extension Library

Type of simple action

Dojo Effects (Client)

Syntax

<xe:dojoFadeIn node="target" duration="ms" loaded="true|false" easing="function" var="name"><xe:this.attributes><xp:parameter name="name" value="value" loaded="true|false"</xp:parameter>...</xe:this.attributes></xe:dojoFadeIn>

Table 12. Attributes
Attribute	Description
`attributes="json"`	List of JSON formatted values passed as is.
`duration="ms"`	Duration of the animation in milliseconds. Defaults to 350.
`easing="function"`	Function that returns the rate of change of the animation over its duration.
`loaded="true\|false"`	Creates a tag instance when the control is loaded, or not. Defaults to `true`.
`node="target"`	Identifier of the control to which the animation is applied.
`var="name"`	Variable name to identify the animation.

Examples

Here two buttons cause text to fade out and fade in.

<xp:div id="div1"
	style="font-size:16pt;font-weight:bold;text-align:center">
	Testing testing testing
</xp:div>
<xp:button value="Fade Out" id="button2">
	<xp:eventHandler event="onclick" submit="false">
		<xp:this.script>
			<xe:dojoFadeOut node="div1" duration="1500"></xe:dojoFadeOut>
		</xp:this.script>
	</xp:eventHandler></xp:button>
<xp:button value="Fade In" id="button1">
	<xp:eventHandler event="onclick" submit="false">
		<xp:this.script>
			<xe:dojoFadeIn node="div1" duration="1000"></xe:dojoFadeIn>
		</xp:this.script>
	</xp:eventHandler>
</xp:button>

Dojo Fade Out Effect (Simple actions - JavaScript)

Causes a target control to fade out.

Defined in

Extension Library

Type of simple action

Dojo Effects (Client)

Syntax

<xe:dojoFadeOut node="target" duration="ms" loaded="true|false" easing="function" var="name"><xe:this.attributes><xp:parameter name="name" value="value" loaded="true|false"</xp:parameter>...</xe:this.attributes></xe:dojoFadeOut>

Table 13. Attributes
Attribute	Description
`attributes="json"`	List of JSON formatted values passed as is.
`duration="ms"`	Duration of the animation in milliseconds. Defaults to 350.
`easing="function"`	Function that returns the rate of change of the animation over its duration.
`loaded="true\|false"`	Creates a tag instance when the control is loaded, or not. Defaults to `true`.
`node="target"`	Identifier of the control to which the animation is applied.
`var="name"`	Variable name to identify the animation.

Examples

Here two buttons cause text to fade out and fade in.

<xp:div id="div1"
	style="font-size:16pt;font-weight:bold;text-align:center">
	Testing testing testing
</xp:div>
<xp:button value="Fade Out" id="button2">
	<xp:eventHandler event="onclick" submit="false">
		<xp:this.script>
			<xe:dojoFadeOut node="div1" duration="1500"></xe:dojoFadeOut>
		</xp:this.script>
	</xp:eventHandler></xp:button>
<xp:button value="Fade In" id="button1">
	<xp:eventHandler event="onclick" submit="false">
		<xp:this.script>
			<xe:dojoFadeIn node="div1" duration="1000"></xe:dojoFadeIn>
		</xp:this.script>
	</xp:eventHandler>
</xp:button>

Dojo Slide To Effect (Simple actions - JavaScript)

Causes a target control to slide to a specified position.

Defined in

Extension Library

Type of simple action

Dojo Effects (Client)

Syntax

<xe:dojofxSlideTo node="target" duration="ms" loaded="true|false" easing="function" left="pixels" top="pixels" var="name"><xe:this.attributes><xp:parameter name="name" value="value" loaded="true|false"</xp:parameter>...</xe:this.attributes></xe:dojofxSlideTo>

Table 14. Attributes
Attribute	Description
`attributes="json"`	List of JSON formatted values passed as is.
`duration="ms"`	Duration of the animation in milliseconds. Defaults to 350.
`easing="function"`	Function that returns the rate of change of the animation over its duration.
`left="pixels"`	Left position to which the target slides in pixels.
`loaded="true\|false"`	Creates a tag instance when the control is loaded, or not. Defaults to `true`.
`node="target"`	Identifier of the control to which the animation is applied.
`top="pixels"`	Top position to which the target slides in pixels.
`var="name"`	Variable name to identify the animation.

Examples

Here a button causes text to slide to a position 100 pixels from the left and 100 pixels from the top.

<xp:div id="div1"
	style="font-size:16pt;font-weight:bold;text-align:center">
	Testing testing testing
</xp:div>
<xp:button value="Slide To" id="button3">
	<xp:eventHandler event="onclick" submit="false">
		<xp:this.script>
			<xe:dojofxSlideTo node="div1" duration="1500" left="100" top="100"></xe:dojofxSlideTo>
		</xp:this.script>
	</xp:eventHandler>
</xp:button>

Dojo Wipe In Effect (Simple actions - JavaScript)

Causes a target control to be wiped in.

Defined in

Extension Library

Type of simple action

Dojo Effects (Client)

Syntax

<xe:dojofxWipeIn node="target" duration="ms" loaded="true|false" easing="function" var="name"><xe:this.attributes><xp:parameter name="name" value="value" loaded="true|false"</xp:parameter>...</xe:this.attributes></xe:dojofxWipeIn>

Table 15. Attributes
Attribute	Description
`attributes="json"`	List of JSON formatted values passed as is.
`duration="ms"`	Duration of the animation in milliseconds. Defaults to 350.
`easing="function"`	Function that returns the rate of change of the animation over its duration.
`loaded="true\|false"`	Creates a tag instance when the control is loaded, or not. Defaults to `true`.
`node="target"`	Identifier of the control to which the animation is applied.
`var="name"`	Variable name to identify the animation.

Examples

Here two buttons cause text to be wiped out and wiped in.

<xp:div id="div1"
	style="font-size:16pt;font-weight:bold;text-align:center">
	Testing testing testing
</xp:div>
<xp:button value="Wipe Out" id="button2">
	<xp:eventHandler event="onclick" submit="false">
		<xp:this.script>
			<xe:dojofxWipeOut node="div1" duration="1500"></xe:dojofxWipeOut>
		</xp:this.script>
	</xp:eventHandler></xp:button>
<xp:button value="Wipe In" id="button1">
	<xp:eventHandler event="onclick" submit="false">
		<xp:this.script>
			<xe:dojofxWipeIn node="div1" duration="1000"></xe:dojofxWipeIn>
		</xp:this.script>
	</xp:eventHandler>
</xp:button>

Dojo Wipe Out Effect (Simple actions - JavaScript)

Causes a target control to be wiped out.

Defined in

Extension Library

Type of simple action

Dojo Effects (Client)

Syntax

<xe:dojofxWipeOut node="target" duration="ms" loaded="true|false" easing="function" var="name"><xe:this.attributes><xp:parameter name="name" value="value" loaded="true|false"</xp:parameter>...</xe:this.attributes></xe:dojofxWipeOut>

Table 16. Attributes
Attribute	Description
`attributes="json"`	List of JSON formatted values passed as is.
`duration="ms"`	Duration of the animation in milliseconds. Defaults to 350.
`easing="function"`	Function that returns the rate of change of the animation over its duration.
`loaded="true\|false"`	Creates a tag instance when the control is loaded, or not. Defaults to `true`.
`node="target"`	Identifier of the control to which the animation is applied.
`var="name"`	Variable name to identify the animation.

Examples

Here two buttons cause text to be wiped out and wiped in.

<xp:div id="div1"
	style="font-size:16pt;font-weight:bold;text-align:center">
	Testing testing testing
</xp:div>
<xp:button value="Wipe Out" id="button5">
	<xp:eventHandler event="onclick" submit="false">
		<xp:this.script>
			<xe:dojofxWipeOut duration="1500" node="div1"></xe:dojofxWipeOut>
		</xp:this.script>
	</xp:eventHandler>
</xp:button>
<xp:button value="Wipe In" id="button6">
	<xp:eventHandler event="onclick" submit="false">
		<xp:this.script>
			<xe:dojofxWipeIn duration="1500" node="div1"></xe:dojofxWipeIn>
		</xp:this.script>
	</xp:eventHandler>
</xp:button>

Move To Mobile Page (Simple actions - JavaScript)

Replaces the current page using a slick web movement.

Defined in

Extension Library

Type of simple action

Mobile Apps (Server)

Syntax

<xe:moveTo direction="Left to Right|Right to Left" forceFullRefresh="true|false" loaded="true|false" saveDocument="true|false" targetPage="pagename" transitionType="slide|fade|flip"></xe:moveTo>

Examples

This tab bar button slides to viewPage.

<xe:tabBarButton id="tabBarButtonSave" label="Save" rendered="#{javascript:document1.isEditable()}">
		<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
			<xp:this.action>
				<xe:moveTo forceFullRefresh="true" saveDocument="true"
					targetPage="viewPage" transitionType="slide" direction="Left to Right">
				</xe:moveTo>
			</xp:this.action>
		</xp:eventHandler>
	</xe:tabBarButton>

Control reference

Specified here are the XPages Extension Library controls.

Note: This documentation is in progress. Not all the controls are here yet.

appPage - Mobile Page

Contains one mobile page. Only one page displays at a time.

Category

Mobile Apps

Syntax

<xe:appPage attributes>content</xe:appPage>

Table 17. Essential properties
Property	Description
id	Defaults to `appPage1`, `appPage2`, and so on.
pageName	Identifies the page for initial loading and navigation. Overrides id.
resetContent	Recreates page contents on each display if true.
preload	Forces the mobile page to load when the XPage loads.

Table 18. All properties
Category	Properties
basics	autoCreate, binding, id, keepScrollPos, loaded, pageName, preload, rendered, rendererType, resetContent
styling	disableTheme, themeId

Examples

This example demonstrates a mobile application with one page which has a heading.

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex">
	<xe:singlePageApp id="xpagesMobileApp"
		selectedPageName="homePage">
		<xe:appPage id="appPage1" pageName="homePage" >
			<xe:djxmHeading id="homePageHeading" label="Home"></xe:djxmHeading>
		</xe:appPage>
 	</xe:singlePageApp>
</xp:view>

dataView - Data View

Displays data as a view.

Category

Extension Library

Syntax

<xe:dataView attributes>content</xe:dataView>

Table 19. Essential properties
Property	Description
id	Defaults to `dataView1`, `dataView2`, and so on.
data	Identifies the data source, usually a Domino view, and specifies attributes for its display.
summaryColumn	Defines a column that provides links to the underlying documents.
multiColumnCount	Specifies the number of number of documents displayed on each row. Defaults to one document per row.

Table 20. All properties
Category	Properties
accessibility	role
basics	attrs, binding, detailsOnClient, expandedDetail, id, loaded, pageName, partialExecute, partialRefresh, refreshId, removeRepeat, rendered, rendererType, repeatControls
data	data, first, indexVar, openDocAsReadOnly, rows, value, var
format	categoryColumn, collapsibleCategory, collapsibleDetail, collapsibleRows, columnTitles, disableHideRow, extraColumns, iconColumn, multiColumnCount, showCheckbox, showHeadrCheckbox, showItemsFlat, summaryColumn
styling	disableTheme, rowStyle, rowStyleClass, style, styleClass, themeId

Examples

This data view displays the data from a view column as links.

<xe:dataView id="dataView1" rows="20"
	collapsibleDetail="true" collapsibleRows="true" expandedDetail="true"
	multiColumnCount="4" showItemsFlat="true">
	<xe:this.data>
		<xp:dominoView var="view1" viewName="main"></xp:dominoView>
	</xe:this.data>
	<xe:this.summaryColumn>
		<xe:viewSummaryColumn columnName="subject">
		</xe:viewSummaryColumn>
	</xe:this.summaryColumn>
</xe:dataView>

dialog - Dialog

Contains a modal dialog.

Category

Extension Library

Syntax

<xe:dialog attributes>content</xe:dialog>

Table 21. Essential properties
Property	Description
id	Defaults to `dialog1`, `dialog2`, and so on.
title	Specifies the content of the title bar. (Also used for accessibility.)

Table 22. All properties
Category	Properties
accessibility	title, waiRole, waiState
basics	binding, dir, errorMessage, extractContent, href, id, keepComponents, lang, loaded, loadingMessage, partialRefresh, preload, preventCache, refreshOnShow, rendered, rendererType
dojo	dojoAttributes, dojoType, dragRestriction, parseOnLoad, tooltip
events	afterContentLoad, beforeContentLoad, onBlur, onClick, onClose, onContentError, onDblClick, onDownloadEnd, onDownloadError, onDownloadStart, onFocus, onHide, onKeyDown, onKeyPress, onKeyUp, onLoad, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onShow, onUnload
styling	disableTheme, style, styleClass, themeId

Usage

This control defines a dialog. To activate the dialog in a server-side script, execute the following code where dialog1 is the control identifier:

getComponent("dialog1").show()

To activate the dialog in a client-side script, execute the following code:

XSP.openDialog("#{id:dialog1}")

The control is modal meaning the user must dismiss it before proceeding.

By default, the control contains a cancel icon. However you may wish to include in the dialog "OK," "Cancel," "Submit," or other mechanisms that the user can click. To close the dialog from a client-side event, use the following code:

XSP.closeDialog('#{id:dialog1}')

See Modal dialogs for additional information.

Examples

Here are two buttons, one client-side and the other server-side, that activate a dialog. The dialog contains a computed field that displays the current time, and a dialog button bar. The button bar contains two buttons labeled "OK" and "Cancel" that simply close the dialog.

<xp:button value="Display time client-side" id="button4">
	<xp:eventHandler event="onclick" submit="false">
		<xp:this.script><![CDATA[XSP.openDialog("#{id:dialog1}")]]></xp:this.script>
	</xp:eventHandler>
</xp:button>
<xp:button value="Display time server-side" id="button5">
	<xp:eventHandler event="onclick" submit="true"
		refreshMode="complete">
		<xp:this.action><![CDATA[#{javascript:getComponent("dialog1").show()}]]></xp:this.action>
	</xp:eventHandler>
</xp:button>
<xe:dialog id="dialog1" title="Current Time">
	<xp:text escape="true" id="computedField1">
		<xp:this.value><![CDATA[#{javascript:var dt:NotesDateTime = session.createDateTime("Today");
		dt.setNow();
		return dt.getLocalTime();}]]></xp:this.value>
	</xp:text>
	<xe:dialogButtonBar id="dialogButtonBar1">
		<xp:button value="OK" id="button6">
			<xp:eventHandler event="onclick" submit="false">
				<xp:this.script><![CDATA[XSP.closeDialog('#{id:dialog1}')]]></xp:this.script>
			</xp:eventHandler>
		</xp:button>
		<xp:button value="Cancel" id="button7">
			<xp:eventHandler event="onclick" submit="false">
				<xp:this.script><![CDATA[XSP.closeDialog('#{id:dialog1}')]]></xp:this.script>
			</xp:eventHandler>
		</xp:button>
	</xe:dialogButtonBar>
</xe:dialog>

Modal dialogs

The Dialog control displays dynamic content and accepts input in a modal dialog.

The dialog content is defined as child controls. The controls are not actually created until the dialog is displayed. This ensures the best performance as no controls are initially created and no data sources are initially opened.

Defining the dialog

The content of the dialog is defined as any other XPages content and can access the current context.

The dialog above, for example, is located in a view row. It accesses the current note identifier or the row to open the document:

<xe:dialog id="inPlaceDialog1" title="Edit User" >
  <xp:panel>
    <xp:this.data>
      <xp:dominoDocument
        var="document1" formName="Contact" action="editDocument"
        documentId="#{ javascript:row.getNoteID() }"
        ignoreRequestParams="true" >
      </xp:dominoDocument>
    </xp:this.data>

Displaying the dialog

A modal dialog is triggered by a client side action using the following method:

XSP.openDialog('#{id:inPlaceDialog1}')

When this is called, an Ajax request is submitted to the server to create the dialog content in the JSF tree. A Dojo dialog window is created, displaying the result of the Ajax call.

Implementing the `OK` button

An OK button should be implemented as a standard button (not a submit button) with two simple actions:

OK button for displaying the modal dialog

The first action saves the data sources and the second action executes the following script:

var c = getComponent("inPlaceDialog1")
c.hide()

Generally a button event should partially refresh another part of the page. This is particularly true when the OK button is clicked, as it means that some data was modified and the page should reflect the changes. Unfortunately, it is not as simple as setting the button onclick partial refresh target, as the dialog should not be closed, nor the refresh happen, if the OK action wasn't executed properly (after a validation failure, for example). In that case, the dialog should be refreshed.

The solution comes from an extended version of the hide() method, which takes some extra parameters, like the component to refresh after the dialog closed:

var c = getComponent("inPlaceDialog1")
c.hide("repeat1")

The first parameter is the identifier of the control to refresh. It can also feature a map of parameters to be used when emitting the partial refresh request. This might be used in rare cases.

Note that the hide() method generates client-side code that closes the dialog and optionally executes a partial refresh. The JSF controls are also properly removed from the JSF tree.

The dialog can also be closed by the user clicking the close button in the dialog title bar. In this case, no request is sent to the server thus leaving the tree with the dialog controls inserted. They are automatically removed the next time the page is rendered.

dialogButtonBar - Dialog Button Bar

Contains buttons in a dialog.

Category

Extension Library

Syntax

<xe:dialogButtonBar attributes>content</xe:dialogButtonBar>

Table 23. Essential properties
Property	Description
id	Defaults to `dialogButtonBar1`, `dialogButtonBar2`, and so on.

Table 24. All properties
Category	Properties
basics	binding, id, loaded, rendered, rendererType
styling	disableTheme, style, styleClass, themeId

Usage

This control is intended:

For containment in a dialog.
To contain buttons.

The contained buttons appear at the bottom of the dialog.

See Modal dialogs for additional information.

Examples

<xp:button value="Display time client-side" id="button4">
	<xp:eventHandler event="onclick" submit="false">
		<xp:this.script><![CDATA[XSP.openDialog("#{id:dialog1}")]]></xp:this.script>
	</xp:eventHandler>
</xp:button>
<xp:button value="Display time server-side" id="button5">
	<xp:eventHandler event="onclick" submit="true"
		refreshMode="complete">
		<xp:this.action><![CDATA[#{javascript:getComponent("dialog1").show()}]]></xp:this.action>
	</xp:eventHandler>
</xp:button>
<xe:dialog id="dialog1" title="Current Time">
	<xp:text escape="true" id="computedField1">
		<xp:this.value><![CDATA[#{javascript:var dt:NotesDateTime = session.createDateTime("Today");
		dt.setNow();
		return dt.getLocalTime();}]]></xp:this.value>
	</xp:text>
	<xe:dialogButtonBar id="dialogButtonBar1">
		<xp:button value="OK" id="button6">
			<xp:eventHandler event="onclick" submit="false">
				<xp:this.script><![CDATA[XSP.closeDialog('#{id:dialog1}')]]></xp:this.script>
			</xp:eventHandler>
		</xp:button>
		<xp:button value="Cancel" id="button7">
			<xp:eventHandler event="onclick" submit="false">
				<xp:this.script><![CDATA[XSP.closeDialog('#{id:dialog1}')]]></xp:this.script>
			</xp:eventHandler>
		</xp:button>
	</xe:dialogButtonBar>
</xe:dialog>

djAccordionContainer - Accordion Container

Contains panes that expand to reveal their content.

Category

Extension Library

Syntax

<xe:djAccordionContainer attributes>content</xe:djAccordionContainer>

Table 25. Essential properties
Property	Description
id	Defaults to `ddjAccordionContainer1`, `djAccordionContainer2`, and so on.
title	This appears on the pane tab.
style	Set the width and height.

Table 26. All properties
Category	Properties
accessibility	title, waiRole, waiState
dojo	dojoAttributes, dojoType, dragRestriction, tooltip
basics	binding, dir, duration, id, lang, loaded, rendered, rendererType, selectedTab
events	onBlur, onClick, onClose, onDblClick, onFocus, onHide, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onShow
styling	disableTheme, style, styleClass, themeId

All properties

Usage

This is a Dojo control.

An Accordion Container control holds any number of Accordion Pane controls. At any one time, one pane is open. The user opens a pane by clicking its title bar.

Examples

This example shows three Accordion Pane controls inside an Accordion Container control.

<xe:djAccordionContainer id="djAccordionContainer1"
	style="width:400px; height:100px;">
	<xe:djAccordionPane id="djAccordionPane1"
		title="Application title">
		<xp:text escape="true" id="computedField1" value="#{javascript:database.getTitle()}"></xp:text>
	</xe:djAccordionPane>
	<xe:djAccordionPane id="djAccordionPane2"
		title="Application file path">
		<xp:text escape="true" id="computedField2"
			value="#{javascript:database.getFilePath()}">
		</xp:text>
	</xe:djAccordionPane>
	<xe:djAccordionPane id="djAccordionPane3"
		title="Application creation date">
		<xp:text escape="true" id="computedField3"
			value="#{javascript:database.getCreated().getLocalTime()}">
		</xp:text>
	</xe:djAccordionPane>
</xe:djAccordionContainer>

djAccordionPane - Accordion Pane

Provides content for one pane in an accordion container.

Category

Extension Library

Syntax

<xe:djAccordionPane attributes>content</xe:djAccordionPane>

Table 27. Essential properties
Property	Description
id	Defaults to `djAccordionPane1`, `djAccordionPane2`, and so on.
title	Applies a label to the pane. Use tooltip for accessibility.

Table 28. All properties
Category	Properties
accessibility	title, waiRole, waiState
basics	binding, dir, errorMessage, extractContent, href, id, lang, loaded, loadingMessage, partialRefresh, preload, preventCache, refreshOnShow, rendered, rendererType
dojo	dojoAttributes, dojoType, dragRestriction, parseOnLoad, tooltip
events	onBlur, onClick, onClose, onContentError, onDblClick, onDownloadEnd, onDownloadError, onDownloadStart, onFocus, onHide, onKeyDown, onKeyPress, onKeyUp, onLoad, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onShow, onUnload
styling	disableTheme, style, styleClass, themeId

Usage

This is a Dojo control.

An Accordion Container control holds any number of Accordion Pane controls. At any one time, one pane is open. The user opens a pane by clicking its title bar.

Examples

This example shows three Accordion Pane controls inside an Accordion Container control..

<xe:djAccordionContainer id="djAccordionContainer1"
	style="width:400px; height:100px;">
	<xe:djAccordionPane id="djAccordionPane1"
		title="Application title">
		<xp:text escape="true" id="computedField1" value="#{javascript:database.getTitle()}"></xp:text>
	</xe:djAccordionPane>
	<xe:djAccordionPane id="djAccordionPane2"
		title="Application file path">
		<xp:text escape="true" id="computedField2"
			value="#{javascript:database.getFilePath()}">
		</xp:text>
	</xe:djAccordionPane>
	<xe:djAccordionPane id="djAccordionPane3"
		title="Application creation date">
		<xp:text escape="true" id="computedField3"
			value="#{javascript:database.getCreated().getLocalTime()}">
		</xp:text>
	</xe:djAccordionPane>
</xe:djAccordionContainer>

djBorderContainer - Border Container

Contains panes situated at various regions within the container.

Category

Extension Library

Syntax

<xe:djBorderContainer attributes>content</xe:djBorderContainer>

Table 29. Essential properties
Property	Description
id	Defaults to `djBorderContainer1`, `djBorderContainer2`, and so on.
style	Set the width and height.

Table 30. All properties
Category	Properties
accessibility	title, waiRole, waiState
basics	binding, design, dir, gutters, id, lang, liveSplitters, loaded, persist, rendered, rendererType
dojo	dojoAttributes, dojoType, dragRestriction, tooltip
events	onBlur, onClick, onClose, onDblClick, onFocus, onHide, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onShow
styling	disableTheme, style, styleClass, themeId

Usage

This is a Dojo control.

A Border Container control holds Border Pane controls. Each pane covers a specified region in the container.

Examples

This example shows five Border Pane controls inside a Border Container control.

<xe:djBorderContainer id="djBorderContainer1" style="width:400px; height:200px;">
	<xe:djBorderPane id="djBorderPane1" region="top">top</xe:djBorderPane>
	<xe:djBorderPane id="djBorderPane2" region="center">center</xe:djBorderPane>
	<xe:djBorderPane id="djBorderPane3" region="bottom">bottom</xe:djBorderPane>
	<xe:djBorderPane id="djBorderPane4" region="left">left</xe:djBorderPane>
	<xe:djBorderPane id="djBorderPane5" region="right">right</xe:djBorderPane>
</xe:djBorderContainer>

djBorderPane - Border Pane

Provides content for one pane in a border container.

Category

Extension Library

Syntax

<xe:djBorderPane attributes>content</xe:djBorderPane>

Table 31. Essential properties
Property	Description
id	Defaults to `djBorderPane1`, `djBorderPane2`, and so on.
region	Specify as `top`, `bottom`, `leading`, `trailing`, `left`, `right`, or `center`.

Table 32. All properties
Category	Properties
accessibility	title, waiRole, waiState
basics	binding, dir, errorMessage, extractContent, href, id, lang, loaded, loadingMessage, maxSize, minSize, partialRefresh, preload, preventCache, refreshOnShow, rendered, rendererType, splitter
dojo	dojoAttributes, dojoType, dragRestriction, parseOnLoad, tooltip
events	onBlur, onClick, onClose, onContentError, onDblClick, onDownloadEnd, onDownloadError, onDownloadStart, onFocus, onHide, onKeyDown, onKeyPress, onKeyUp, onLoad, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onShow, onUnload
format	layoutPriority, region
styling	disableTheme, style, styleClass, themeId

Usage

This is a Dojo control.

A BorderContainer control holds BorderPane controls. Each pane covers a specified region in the container.

Examples

This example shows five Border Pane controls inside a Border Container control.

<xe:djBorderContainer id="djBorderContainer1" style="width:400px; height:200px;">
	<xe:djBorderPane id="djBorderPane1" region="top">top</xe:djBorderPane>
	<xe:djBorderPane id="djBorderPane2" region="center">center</xe:djBorderPane>
	<xe:djBorderPane id="djBorderPane3" region="bottom">bottom</xe:djBorderPane>
	<xe:djBorderPane id="djBorderPane4" region="left">left</xe:djBorderPane>
	<xe:djBorderPane id="djBorderPane5" region="right">right</xe:djBorderPane>
</xe:djBorderContainer>

djButton - Dojo Button

Activates an event handler.

Category

Dojo Form

Syntax

<xe:djButton attributes>content</xe:djButton>

Table 33. Essential properties
Property	Description
id	Defaults to `djButton1`, `djButton2`, and so on.
onClick	Specifies an action to be taken when the button is clicked.

Table 34. All properties
Category	Properties
accessibility	alt, tabIndex, title, waiRole, waiState
basics	autoComplete, binding, dir, disabled, id, immediate, label, lang, loaded, multipleSeparator, multipleTrim, readOnly, rendered, rendererType, required, showLabel, type
data	converter, defaultValue, disableClientSideValidation, disableModifiedFlag, disableValidators,showReadOnlyAsDisabled, store, validator, validators, value, valueChangeListener, valueChangeListeners
dojo	dojoAttributes, dojoType, dragRestriction, intermediateChanges, tooltip
events	onBlur, onChange, onClick, onClose, onDblClick, onFocus, onHide, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onShow
styling	disableTheme, style, styleClass, themeId

Usage

This is a Dojo control.

At run time, the user clicks the button to activate its onClick event handler.

Examples

This example consists of a Button that activates a client event.

<xp:table>
	<xp:tr>
		<xp:td>Button</xp:td>
		<xp:td>
			<xe:djButton id="djButton1" label="say hello"
				defaultValue="blue">
				<xp:eventHandler event="onClick" submit="false">
					<xe:this.script><![CDATA[alert("Hello, world!")]]></xe:this.script>
				</xp:eventHandler>
			</xe:djButton>
		</xp:td>
	</xp:tr>
</xp:table>

djCheckBox - Dojo Check Box

Accepts a check box as true or false.

Category

Dojo Form

Syntax

<xe:djCheckBox attributes>content</xe:djCheckBox>

Table 35. Essential properties
Property	Description
id	Defaults to `djCheckBox1`, `djCheckBox2`, and so on.
value	Binds the control to a data element.

Table 36. All properties
Category	Properties
accessibility	alt, tabIndex, title, waiRole, waiState
basics	binding, dir, disabled, id, immediate, label, lang, loaded, multipleSeparator, multipleTrim, readOnly, rendered, rendererType, required, showLabel, type
data	checkedValue, converter, defaultValue, disableClientSideValidation, disableModifiedFlag, disableValidators, showReadOnlyAsDisabled, uncheckedValue, validator, validators, value, valueChangeListener, valueChangeListeners
dojo	dojoAttributes, dojoType, dragRestriction, intermediateChanges, tooltip
events	onBlur, onChange, onClick, onClose, onDblClick, onFocus, onHide, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onShow
styling	disableTheme, iconClass, style, styleClass, themeId

Usage

This is a Dojo control.

At run time, a check box appears on the page. If the user selects the box, its value is true. Otherwise its value is false.

Examples

This example consists of a Check Box bound to a scoped variable, a button for submitting the page, and a computed field that uses the value of the scoped variable.

<xp:table>
	<xp:tr>
		<xp:td>Check Box</xp:td>
		<xp:td>
			<xe:djCheckBox id="djCheckBox1" value="#{sessionScope.djCheckBox1}"></xe:djCheckBox>
</xp:td>
	</xp:tr>
	<xp:tr>
		<xp:td>
			<xp:button value="submit" id="button1">
				<xp:eventHandler event="onclick" submit="true" refreshMode="complete" immediate="false" save="true">
			</xp:eventHandler></xp:button>
		</xp:td>
		<xp:td></xp:td>
	</xp:tr>
	<xp:tr>
		<xp:td>Value</xp:td>
		<xp:td><xp:text escape="true" id="computedField1"><xp:this.value>
		<![CDATA[#{javascript:return "The box is " + (sessionScope.djCheckBox1 ? "" : "not ") + "checked."}]>
		</xp:this.value></xp:text></xp:td>
	</xp:tr>
</xp:table>

djComboBox - Dojo Combo Box

Accepts a selected value.

Category

Dojo Form

Syntax

<xe:djComboBox attributes>content</xe:djComboBox>

Table 37. Essential properties
Property	Description
id	Defaults to `djComboBox1`, `djComboBox2`, and so on.
value	Binds the control to a data element.

Table 38. All properties
Category	Properties
accessibility	alt, tabIndex, title, waiRole, waiState
basics	autoComplete, binding, dir, disabled, hasDownArrow, id, ignoreCase, immediate, lang, loaded, maxLength, multipleSeparator, multipleTrim, queryExp, readOnly, rendered, rendererType, required, searchAttr, searchDelay, trim, type, validatorExt
data	converter, defaultValue, disableClientSideValidation, disableModifiedFlag, disableValidators, invalidMessage, pageSize, promptMessage, regExp, regExpGen, showReadOnlyAsDisabled, store, validator, validators, value, valueChangeListener, valueChangeListeners
dojo	dojoAttributes, dojoType, dragRestriction, intermediateChanges, tooltip
events	onBlur, onChange, onClick, onClose, onDblClick, onFocus, onHide, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onShow
format	displayMessageExt, lowercase, propercase, tooltipPosition, uppercase
styling	disableTheme, style, styleClass, themeId

Usage

This is a Dojo control.

At run time, a dropdown box appears on the page presenting itemLabel choices and returning the selected one. Use embedded selectItem controls or an embedded selectItems control to specify the pairs of labels.

Examples

This example consists of a Combo Box box bound to a scoped variable, a button for submitting the page, and a computed field that displays the value of the scoped variable. The text box presents the itemLabel choices to the selected one.

<xp:table>
	<xp:tr>
		<xp:td>Combo Box</xp:td>
		<xp:td>
		<xe:djComboBox id="djComboBox1"
			value="#{sessionScope.djComboBox1}">
			<xp:selectItem itemLabel="Maine"></xp:selectItem>
			<xp:selectItem itemLabel="New Hampshire"></xp:selectItem>
			<xp:selectItem itemLabel="Vermont"></xp:selectItem>
			<xp:selectItem itemLabel="Massachusetts"></xp:selectItem>
			<xp:selectItem itemLabel="Rhode Island"></xp:selectItem>
			<xp:selectItem itemLabel="Connecticut"></xp:selectItem>
		</xe:djComboBox></xp:td>
	</xp:tr>
	<xp:tr>
		<xp:td>
			<xp:button value="submit" id="button1">
				<xp:eventHandler event="onclick" submit="true" refreshMode="complete" immediate="false" save="true">
			</xp:eventHandler></xp:button>
		</xp:td>
		<xp:td></xp:td>
	</xp:tr>
	<xp:tr>
		<xp:td>Value</xp:td>
		<xp:td><xp:text escape="true" id="computedField1" value="#{sessionScope.djComboBox1}"></xp:text></xp:td>
	</xp:tr>
</xp:table>

djContentPane - Dojo Content Pane

Provides content for a container.

Category

Extension Library

Syntax

<xe:djContentPane attributes>content</xe:djContentPane>

Table 39. Essential properties
Property	Description
id	Defaults to `djContentPane1`, `djContentPane2`, and so on.

Table 40. All properties
Category	Properties
accessibility	title, waiRole, waiState
basics	binding, dir, errorMessage, extractContent, href, id, lang, loaded, loadingMessage, partialRefresh, preload, preventCache, refreshOnShow, rendered, rendererType
dojo	dojoAttributes, dojoType, dragRestriction, parseOnLoad, tooltip
events	onBlur, onClick, onClose, onContentError, onDblClick, onDownloadEnd, onDownloadError, onDownloadStart, onFocus, onHide, onKeyDown, onKeyPress, onKeyUp, onLoad, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onShow, onUnload
styling	disableTheme, style, styleClass, themeId

Usage

This is a Dojo control.

This control simply renders its content.

Examples

This example displays one content pane or another depending on the user organization.

<xe:djContentPane id="djContentPane1">IBM content pane
	<xe:this.rendered>
		<![CDATA[#{javascript:session.getUserNameObject().getOrganization() == "IBM"}]]>
	</xe:this.rendered>
</xe:djContentPane>
<xe:djContentPane id="djContentPane2">Non-IBM content pane
	<xe:this.rendered>
		<![CDATA[#{javascript:session.getUserNameObject().getOrganization() != "IBM"}]]>
	</xe:this.rendered>
</xe:djContentPane>

djCurrencyTextBox - Dojo Currency Text Box

Accepts currency input.

Category

Dojo Form

Syntax

<xe:djCurrencyTextBox attributes>content</xe:djCurrencyTextBox>

Table 41. Essential properties
Property	Description
id	Defaults to `djCurrencyTextBox1`, `djCurrencyTextBox2`, and so on.
value	Binds the control to a data element.

Table 42. All properties
Category	Properties
accessibility	alt, tabIndex, title, waiRole, waiState
basics	binding, dir, disabled, id, immediate, lang, loaded, maxLength, multipleSeparator, multipleTrim, readOnly, rendered, rendererType, required, trim, type, validatorExt
data	constraints, converter, defaultValue, disableClientSideValidation, disableModifiedFlag, disableValidators, invalidMessage, promptMessage, rangeMessage, regExp, regExpGen, showReadOnlyAsDisabled, validator, validators, value, valueChangeListener, valueChangeListeners
dojo	dojoAttributes, dojoType, dragRestriction, intermediateChanges, tooltip
events	onBlur, onChange, onClick, onClose, onDblClick, onFocus, onHide, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onShow
format	displayMessageExt, lowercase, propercase, tooltipPosition, uppercase
styling	disableTheme, style, styleClass, themeId

Usage

This is a Dojo control.

At run time, a text box appears on the page. The user can enter a currency value. On invalid input, a tooltip appears.

Examples

This example consists of a currency text box bound to a scoped variable, a button for submitting the page, and a computed field that displays the value of the scoped variable.

<xp:table>
	<xp:tr>
		<xp:td>Currency Text Box</xp:td>
		<xp:td>
			<xe:djCurrencyTextBox id="djCurrencyTextBox1" value="#{sessionScope.djCurrencyTextBox1}"></xe:djCurrencyTextBox>
</xp:td>
	</xp:tr>
	<xp:tr>
		<xp:td>
			<xp:button value="submit" id="button1">
				<xp:eventHandler event="onclick" submit="true" refreshMode="complete" immediate="false" save="true">
			</xp:eventHandler></xp:button>
		</xp:td>
		<xp:td></xp:td>
	</xp:tr>
	<xp:tr>
		<xp:td>Value</xp:td>
		<xp:td><xp:text escape="true" id="computedField1" value="#{sessionScope.djCurrencyTextBox1}"></xp:text></xp:td>
	</xp:tr>
</xp:table>

djDateTextBox - Dojo Date Text Box

Accepts a date value.

Category

Dojo Form

Syntax

<xe:djDateTextBox attributes>content</xe:djDateTextBox>

Table 43. Essential properties
Property	Description
id	Defaults to `djDateTextBox1`, `djDateTextBox2`, and so on.
value	Binds the control to a data element.

Table 44. All properties
Category	Properties
accessibility	alt, tabIndex, title, waiRole, waiState
basics	binding, dir, disabled, id, immediate, lang, loaded, maxLength, multipleSeparator, multipleTrim, readOnly, rendered, rendererType, required, trim, type, validatorExt
data	constraints, converter, defaultValue, disableClientSideValidation, disableModifiedFlag, disableValidators, invalidMessage, promptMessage, rangeMessage, regExp, regExpGen, showReadOnlyAsDisabled, validator, validators, value, valueChangeListener, valueChangeListeners
dojo	dojoAttributes, dojoType, dragRestriction, intermediateChanges, tooltip
events	onBlur, onChange, onClick, onClose, onDblClick, onFocus, onHide, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onShow
format	displayMessageExt, lowercase, propercase, tooltipPosition, uppercase
styling	disableTheme, style, styleClass, themeId

Usage

This is a Dojo control.

At run time, a text box appears on the page. When the user selects the box, a calendar appears. The user can enter a date value. On invalid input, a tooltip appears.

Examples

This example consists of a Date text box bound to a scoped variable, a button for submitting the page, and a computed field that displays the value of the scoped variable.

<xp:table>
	<xp:tr>
		<xp:td>Date Text Box</xp:td>
		<xp:td>
			<xe:djDateTextBox id="djDateTextBox1" value="#{sessionScope.djDateTextBox1}"></xe:djDateTextBox>
</xp:td>
	</xp:tr>
	<xp:tr>
		<xp:td>
			<xp:button value="submit" id="button1">
				<xp:eventHandler event="onclick" submit="true" refreshMode="complete" immediate="false" save="true">
			</xp:eventHandler></xp:button>
		</xp:td>
		<xp:td></xp:td>
	</xp:tr>
	<xp:tr>
		<xp:td>Value</xp:td>
		<xp:td><xp:text escape="true" id="computedField1" value="#{sessionScope.djDateTextBox1}"></xp:text></xp:td>
	</xp:tr>
</xp:table>

djextImageSelect - Dojo Image Select

Accepts a value based on a selected image.

Category

Dojo Form

Syntax

<xe:djextImageSelect attributes>content</xe:djextImageSelect>

Table 45. Essential properties
Property	Description
id	Defaults to `djextImageSelect1`, `djextImageSelect2`, and so on.
value	Binds the control to a data element.
imageValues	Specifies image choices. Contains imageValues which contains any number of embedded selectImage controls. Essential properties are image, selectedImage, and selectedValue.

Table 46. All properties
Category	Properties
accessibility	alt, tabIndex, title, waiRole, waiState
basics	autoComplete, binding, dir, disabled, id, imageValues, immediate, lang, loaded, multipleSeparator, multipleTrim, readOnly, rendered, rendererType, required, type
data	converter, defaultValue, disableClientSideValidation, disableModifiedFlag, disableValidators, showReadOnlyAsDisabled, validator, validators, value, valueChangeListener, valueChangeListeners
dojo	dojoAttributes, dojoType, dragRestriction, intermediateChanges, tooltip
events	onBlur, onChange, onClick, onClose, onDblClick, onFocus, onHide, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onShow
styling	disableTheme, style, styleClass, themeId

Usage

This is a Dojo control.

At run time, images appear. The user can select one which causes the value to be set.

Examples

This example consists of an Image Select control bound to a scoped variable, a button for submitting the page, and a computed field that displays the value of the scoped variable.

<xp:table>
	<xp:tr>
		<xp:td>Image Select</xp:td>
		<xp:td>
			<xe:djextImageSelect id="djextImageSelect1"
				value="#{sessionScope.djextImageSelect1}">
				<xe:this.imageValues>
					<xe:selectImage image="/folder.gif"
						selectedValue="folder" selectedImage="/folder.gif">
					</xe:selectImage>
					<xe:selectImage image="/link.gif"
						selectedImage="/link.gif" selectedValue="link">
					</xe:selectImage>
					<xe:selectImage image="/binary.gif"
						selectedImage="/binary.gif" selectedValue="binary">
					</xe:selectImage>
				</xe:this.imageValues>
			</xe:djextImageSelect>
		</xp:td>
	</xp:tr>
	<xp:tr>
		<xp:td></xp:td>
		<xp:td>
			<xp:button value="submit" id="button1"><xp:eventHandler event="onclick" submit="true" refreshMode="complete" immediate="false" save="true"></xp:eventHandler></xp:button></xp:td>
	</xp:tr>
	<xp:tr>
		<xp:td>Value</xp:td>
		<xp:td>
			<xp:text escape="true" id="computedField1"
				value="#{sessionScope.djextImageSelect1}">
			</xp:text>
		</xp:td>
	</xp:tr>
</xp:table>

djextLinkSelect - Dojo Link Select

Accepts a value based on a selected link.

Category

Dojo Form

Syntax

<xe:djextLinkSelect attributes>content</xe:djextLinkSelect>

Table 47. Essential properties
Property	Description
id	Defaults to `djextLinkSelect1`, `djextLinkSelect2`, and so on.
value	Binds the control to a data element.
dataProvider	Specifies choices for the value selection: beanValuePicker dominoViewValuePicker simpleValuePicker

Table 48. All properties
Category	Properties
accessibility	alt, tabIndex, title, waiRole, waiState
basics	binding, dataProvider, dir, disabled, id, immediate, lang, loaded, multipleSeparator, multipleTrim, readOnly, rendered, rendererType, required, type
data	converter, defaultValue, disableClientSideValidation, disableModifiedFlag, disableValidators, showReadOnlyAsDisabled, validator, validators, value, valueChangeListener, valueChangeListeners
dojo	dojoAttributes, dojoType, dragRestriction, intermediateChanges, tooltip
events	onBlur, onChange, onClick, onClose, onDblClick, onFocus, onHide, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onShow
styling	disableTheme, firstItemStyle, firstItemStyleClass, itemStyle, itemStyleClass, lastItemStyle, lastItemStyleClass, style, styleClass, themeId

Usage

This is a Dojo control.

At run time, the link values appear. The user can select one which causes the bound value to be set.

Examples

This example consists of a Link Select control bound to a scoped variable, a button for submitting the page, and a computed field that displays the value of the scoped variable.

<xp:table>
	<xp:tr>
		<xp:td>Link Select</xp:td>
		<xp:td>
			<xe:djextLinkSelect id="djextLinkSelect1"
				value="#{sessionScope.djextLinkSelect1}">
				<xe:this.dataProvider>
					<xe:simpleValuePicker valueListSeparator=","
						valueList="red,blue,green">
					</xe:simpleValuePicker>
				</xe:this.dataProvider>
			</xe:djextLinkSelect>
		</xp:td>
	</xp:tr>
	<xp:tr>
		<xp:td></xp:td>
		<xp:td>
			<xp:button value="submit" id="button1"><xp:eventHandler event="onclick" submit="true" 
refreshMode="complete" immediate="false" save="true"></xp:eventHandler></xp:button></xp:td>
	</xp:tr>
	<xp:tr>
		<xp:td>Value</xp:td>
		<xp:td>
			<xp:text escape="true" id="computedField1"
				value="#{sessionScope.djextLinkSelect1}">
			</xp:text>
		</xp:td>
	</xp:tr>
</xp:table>

djextListTextBox - List Text Box

Accepts a list of values.

Category

Dojo Form

Syntax

<xe:djextListTextBox attributes>content</xe:djextListTextBox>

Table 49. Essential properties
Property	Description
id	Defaults to `djextListTextBox1`, `djextListTextBox2`, and so on.
value	Binds the control to a data element.
dataProvider	Specifies choices for the value selection: beanValuePicker dominoViewValuePicker simpleValuePicker
multipleSeparator	Specify for multi-value elements.

Table 50. All properties
Category	Properties
accessibility	alt, tabIndex, title, waiRole, waiState
basics	binding, dataProvider, dir, disabled, displayLabel, id, immediate, lang, loaded, multipleSeparator, multipleTrim, readonly, rendered, rendererType, required, type
data	converter, defaultValue, disableClientSideValidation, disableModifiedFlag, disableValidators, showReadonlyAsDisabled, validator, validators, value, valueChangeListener, valueChangeListeners
dojo	dojoAttributes, dojoType, dragRestriction, intermediateChanges, tooltip
events	onBlur, onChange, onClick, onClose, onDblClick, onFocus, onHide, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onShow
styling	disableTheme, style, styleClass, themeId

Usage

This is a Dojo control.

Use this control in conjunction with valuePicker - Value Picker.

Examples

This example shows a List Text Box bound to a scoped variable and activated by a Value Picker.

<xp:table>
	<xp:tr>
		<xp:td>
			<xp:label value="Categories" id="label1"></xp:label>
		</xp:td>
		<xp:td>
			<xe:djextListTextBox id="djextListTextBox1"
				value="#{requestScope.category}" multipleTrim="true"
				multipleSeparator=",">
			</xe:djextListTextBox>
			<xe:valuePicker id="valuePicker1"
				for="djextListTextBox1" dialogTitle="Category"
				dojoType="extlib.dijit.PickerCheckbox">
				<xe:this.dataProvider>
					<xe:simpleValuePicker valueList="red,green,blue"
						valueListSeparator=",">
					</xe:simpleValuePicker>
				</xe:this.dataProvider>
			</xe:valuePicker>
		</xp:td>
	</xp:tr>
</xp:table>

djextNameTextBox - Name Text Box

Accepts a list of names.

Category

Dojo Form

Syntax

<xe:djextnametextbox attributes>content</xe:djextnametextbox>

Table 51. Essential properties
Property	Description
id	Defaults to `djextNameTextBox1`, `djextNameTextBox2`, and so on.
value	Binds the control to a data element.
multipleSeparator	Specify for multi-value elements.

Table 52. All properties
Category	Properties
accessibility	alt, tabIndex, title, waiRole, waiState
basics	binding, dir, disabled, id, immediate, lang, loaded, multipleSeparator, multipleTrim, readOnly, rendered, rendererType, required, type
data	converter, defaultValue, disableClientSideValidation, disableModifiedFlag, disableValidators, showReadonlyAsDisabled, validator, validators, value, valueChangeListener, valueChangeListeners
dojo	dojoAttributes, dojoType, dragRestriction, intermediateChanges, tooltip
events	onBlur, onChange, onClick, onClose, onDblClick, onFocus, onHide, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onShow
styling	disableTheme, style, styleClass, themeId

Usage

This is a Dojo control.

Use this control in conjunction with namePicker - Name Picker.

Examples

This example shows a List Name Box bound to a scoped variable and activated by a Name Picker.

<xp:table>
	<xp:tr>
		<xp:td>
			<xp:label value="Names" id="label2"></xp:label>
		</xp:td>
		<xp:td>
			<xe:djextNameTextBox id="djextNameTextBox1"
				value="#{requestScope.name}" multipleSeparator=","
				multipleTrim="true">
			</xe:djextNameTextBox>
			<xe:namePicker id="namePicker1" for="djextNameTextBox1"
				dojoType="extlib.dijit.PickerCheckbox">
				<xe:this.dataProvider>
					<xe:dominoNABNamePicker
						addressBookSel="all-public">
					</xe:dominoNABNamePicker>
				</xe:this.dataProvider>
			</xe:namePicker>
		</xp:td>
	</xp:tr>
</xp:table>

djFilteringSelect - Dojo Filtering Select

Accepts a selected and filtered value.

Category

Dojo Form

Syntax

<xe:djFilteringSelect attributes>content</xe:djFilteringSelect>

Table 53. Essential properties
Property	Description
id	Defaults to `djFilteringSelect1`, `djFilteringSelect2`, and so on.
value	Binds the control to a data element.

Table 54. All properties
Category	Properties
accessibility	alt, tabIndex, title, waiRole, waiState
basics	autoComplete, binding, dir, disabled, hasDownArrow, id, ignoreCase, immediate, lang, loaded, maxLength, multipleSeparator, multipleTrim, queryExp, readOnly, rendered, rendererType, required, searchAttr, searchDelay, trim, type, validatorExt
data	converter, defaultValue, disableClientSideValidation, disableModifiedFlag, disableValidators, invalidMessage, pageSize, promptMessage, regExp, regExpGen, showReadOnlyAsDisabled, store, validator, validators, value, valueChangeListener, valueChangeListeners
dojo	dojoAttributes, dojoType, dragRestriction, intermediateChanges, tooltip
events	onBlur, onChange, onClick, onClose, onDblClick, onFocus, onHide, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onShow
format	displayMessageExt, labelAttr, labelFunc, labelType, lowercase, propercase, tooltipPosition, uppercase
styling	disableTheme, style, styleClass, themeId

Usage

This is a Dojo control.

At run time, a dropdown box appears on the page presenting itemLabel choices and returning the itemValue that corresponds to the selected itemLabel. Use embedded selectItem controls or an embedded selectItems control to specify the pairs of labels and values.

Examples

This example consists of a Filtering Select box bound to a scoped variable, a button for submitting the page, and a computed field that displays the value of the scoped variable. The text box presents the itemLabel choices to the user and takes the itemValue of the selected itemLabel.

<xp:table>
	<xp:tr>
		<xp:td>Filtering Select</xp:td>
		<xp:td>
		<xe:djFilteringSelect id="djFilteringSelect1" value="#{sessionScope.djFilteringSelect1}">
		<xp:selectItem itemLabel="Maine" itemValue="ME"></xp:selectItem>
		<xp:selectItem itemLabel="New Hampshire" itemValue="NH"></xp:selectItem>
		<xp:selectItem itemLabel="Vermont" itemValue="VT"></xp:selectItem>
		<xp:selectItem itemLabel="Massachusetts" itemValue="MA"></xp:selectItem>
		<xp:selectItem itemLabel="Rhode Island" itemValue="RI"></xp:selectItem>
		<xp:selectItem itemLabel="Connecticut" itemValue="CT"></xp:selectItem>
		</xe:djFilteringSelect></xp:td>
	</xp:tr>
	<xp:tr>
		<xp:td>
			<xp:button value="submit" id="button1">
				<xp:eventHandler event="onclick" submit="true" refreshMode="complete" immediate="false" save="true">
			</xp:eventHandler></xp:button>
		</xp:td>
		<xp:td></xp:td>
	</xp:tr>
	<xp:tr>
		<xp:td>Value</xp:td>
		<xp:td><xp:text escape="true" id="computedField1" value="#{sessionScope.djFilteringSelect1}"></xp:text></xp:td>
	</xp:tr>
</xp:table>

djHorizontalSlider - Dojo Horizontal Slider

Accepts a numeric value from a horizontal slider.

Category

Dojo Form

Syntax

<xe:djHorizontalSlider attributes>content</xe:djHorizontalSlider>

Table 55. Essential properties
Property	Description
id	Defaults to `djHorizontalSlider1`, `djHorizontalSlider2`, and so on.
value	Binds the control to a data element.
style	Provides dimensions for the slider.
discreteValues	Specifies the number of values on the slider.
minimum	Specifies the starting value of the slider.
maximum	Specifies the ending value of the slider.

Table 56. All properties
Category	Properties
accessibility	alt, tabIndex, title, waiRole, waiState
basics	binding, clickSelect, dir, disabled, discreteValues, id, immediate, lang, loaded, maximum, minimum, multipleSeparator, multipleTrim, pageIncrement, readOnly, rendered, rendererType, required, showButtons, slideDuration, type
data	converter, defaultValue, disableClientSideValidation, disableModifiedFlag, disableValidators, showReadOnlyAsDisabled, validator, validators, value, valueChangeListener, valueChangeListeners
dojo	dojoAttributes, dojoType, dragRestriction, intermediateChanges, tooltip
events	onBlur, onChange, onClick, onClose, onDblClick, onFocus, onHide, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onShow
styling	disableTheme, style, styleClass, themeId

Usage

This is a Dojo control.

At run time, a horizontal slider appears on the page. The user can slide the slider to select a numeric value.

Use djSliderRule - Dojo Slider Rule and djSliderRuleLabels - Dojo Slider Rule Labels to add rules (hash marks) and labels.

Examples

This example consists of a Horizontal Slider bound to a scoped variable, a button for submitting the page, and a computed field that displays the value of the scoped variable.

<xp:table>
	<xp:tr>
		<xp:td>Horizontal Slider</xp:td>
		<xp:td>
			<xe:djHorizontalSlider id="djHorizontalSlider1" style="margin: 5px;width:200px; height: 20px;"
				value="#{sessionScope.djHorizontalSlider1}" discreteValues="1000"
				maximum="999" minimum="0">
				<xe:djSliderRuleLabels id="djSliderRuleLabels1"
					container="topDecoration"
					style="height:10px;font-size:75%;color:gray;">
					<xe:this.labelsList>
						<xe:djSliderRuleLabel label="0"></xe:djSliderRuleLabel>
						<xe:djSliderRuleLabel label="999"></xe:djSliderRuleLabel>
					</xe:this.labelsList>
				</xe:djSliderRuleLabels>
				<xe:djSliderRule id="djSliderRule1"
					container="topDecoration" style="height:5px;" count="11">
				</xe:djSliderRule>				
				<xe:djSliderRule id="djSliderRule2" style="height:5px;"
						count="11" container="bottomDecoration">
				</xe:djSliderRule>
				<xe:djSliderRuleLabels id="djSliderRuleLabels2"
						container="bottomDecoration" style="height:10px;font-size:75%;color:gray;">
				</xe:djSliderRuleLabels>
			</xe:djHorizontalSlider>
		</xp:td>
	</xp:tr>
	<xp:tr>
		<xp:td>
			<xp:button value="submit" id="button1">
				<xp:eventHandler event="onclick" submit="true" refreshMode="complete" immediate="false" save="true">
			</xp:eventHandler></xp:button>
		</xp:td>
		<xp:td></xp:td>
	</xp:tr>
	<xp:tr>
		<xp:td>Value</xp:td>
		<xp:td><xp:text escape="true" id="computedField1" value="#{sessionScope.djHorizontalSlider1}"></xp:text></xp:td>
	</xp:tr>
</xp:table>

djNumberSpinner - Dojo Number Spinner

Accepts a numeric value that is an increment of a starting value.

Category

Dojo Form

Syntax

<xe:djNumberSpinner attributes>content</xe:djNumberSpinner>

Table 57. Essential properties
Property	Description
id	Defaults to `djNumberSpinner1`, `djNumberSpinner2`, and so on.
value	Binds the control to a data element.
defaultValue	Specifies the initial value of the spinner. Do not omit.
smallDelta	Increment when the user clicks up and down arrows to the right of the box, or the up and down keys,
largeDelta	Increment when the user clicks the PgUp and PgDn keys.

Table 58. All properties
Category	Properties
accessibility	alt, tabIndex, title, waiRole, waiState
basics	binding, defaultTimeout, dir, disabled, id, immediate, lang, loaded, maxLength, multipleSeparator, multipleTrim, readOnly, rendered, rendererType, required, timeChangeRate, trim, type, validatorExt
data	constraints, converter, defaultValue, disableClientSideValidation, disableModifiedFlag, disableValidators, invalidMessage, javaType, largeDelta, promptMessage, rangeMessage, regExp, regExpGen, showReadOnlyAsDisabled, smallDelta, validator, validators, value, valueChangeListener, valueChangeListeners
dojo	dojoAttributes, dojoType, dragRestriction, intermediateChanges, tooltip
events	onBlur, onChange, onClick, onClose, onDblClick, onFocus, onHide, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onShow
format	displayMessageExt, lowercase, propercase, tooltipPosition, uppercase
styling	disableTheme, style, styleClass, themeId

Usage

This is a Dojo control.

At run time, a text box with a spinner appears on the page with a numeric value. The user can adjust the value by clicking up and down arrows to the right of the box, the up and down keys, and the PgUp and PgDn keys.

Examples

This example consists of a Number Spinner bound to a scoped variable, a button for submitting the page, and a computed field that displays the value of the scoped variable. Initially the spinner has a value of 0.1. The arrows adjust the spinner in increments of 0.1. The PgUp and PgDn keys adjust the spinner in increments of 1.0.

<xp:table>
	<xp:tr>
		<xp:td>Number Spinner</xp:td>
		<xp:td>
			<xe:djNumberSpinner id="djNumberSpinner1"
				value="#{sessionScope.djNumberSpinner1}" defaultValue="0.1"
				smallDelta="0.1" largeDelta="1">
			</xe:djNumberSpinner>
		</xp:td>
	</xp:tr>
	<xp:tr>
		<xp:td>
			<xp:button value="submit" id="button1">
				<xp:eventHandler event="onclick" submit="true" refreshMode="complete" immediate="false" save="true">
			</xp:eventHandler></xp:button>
		</xp:td>
		<xp:td></xp:td>
	</xp:tr>
	<xp:tr>
		<xp:td>Value</xp:td>
		<xp:td><xp:text escape="true" id="computedField1" value="#{sessionScope.djNumberSpinner1}"></xp:text></xp:td>
	</xp:tr>
</xp:table>

djNumberTextBox - Dojo Number Text Box

Accepts a numeric value.

Category

Dojo Form

Syntax

<xe:djNumberTextBox attributes>content</xe:djNumberTextBox>

Table 59. Essential properties
Property	Description
id	Defaults to `djNumberTextBox1`, `djNumberTextBox2`, and so on.
value	Binds the control to a data element.

Table 60. All properties
Category	Properties
accessibility	alt, tabIndex, title, waiRole, waiState
basics	binding, dir, disabled, id, immediate, lang, loaded, maxLength, multipleSeparator, multipleTrim, readOnly, rendered, rendererType, required, trim, type, validatorExt
data	constraints, converter, defaultValue, disableClientSideValidation, disableModifiedFlag, disableValidators, invalidMessage, javaType, promptMessage, regExp, regExpGen, showReadOnlyAsDisabled, validator, validators, value, valueChangeListener, valueChangeListeners
dojo	dojoAttributes, dojoType, dragRestriction, intermediateChanges, tooltip
events	onBlur, onChange, onClick, onClose, onDblClick, onFocus, onHide, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onShow
format	displayMessageExt, lowercase, propercase, tooltipPosition, uppercase
styling	disableTheme, style, styleClass, themeId

Usage

This is a Dojo control.

At run time, a text box appears on the page. The user can enter a numeric value. On invalid input, a tooltip appears.

Examples

This example consists of a Number text box bound to a scoped variable, a button for submitting the page, and a computed field that displays the value of the scoped variable.

<xp:table>
	<xp:tr>
		<xp:td>Number Text Box</xp:td>
		<xp:td>
			<xe:djNumberTextBox id="djNumberTextBox1" value="#{sessionScope.djNumberTextBox1}"></xe:djNumberTextBox>
</xp:td>
	</xp:tr>
	<xp:tr>
		<xp:td>
			<xp:button value="submit" id="button1">
				<xp:eventHandler event="onclick" submit="true" refreshMode="complete" immediate="false" save="true">
			</xp:eventHandler></xp:button>
		</xp:td>
		<xp:td></xp:td>
	</xp:tr>
	<xp:tr>
		<xp:td>Value</xp:td>
		<xp:td><xp:text escape="true" id="computedField1" value="#{sessionScope.djNumberTextBox1}"></xp:text></xp:td>
	</xp:tr>
</xp:table>

djRadioButton - Dojo Radio Button

Accepts the value of a selected radio button.

Category

Dojo Form

Syntax

<xe:djRadioButton attributes>content</xe:djRadioButton>

Table 61. Essential properties
Property	Description
id	Defaults to `djRadioButton1`, `djRadioButton2`, and so on.
value	Binds the control to a data element.
label	Specifies text that appears with the radio button.
selectedValue	Specifies the value of the button when it is selected.
groupName	Associates a radio button with a group such that only one button in the group can be selected at once.
defaultValue	Initially selects the radio button whose selectedValue matches this value. In a group, you should not specify more than one default value.

Table 62. All properties
Category	Properties
accessibility	alt, tabIndex, title, waiRole, waiState
basics	binding, dir, disabled, id, immediate, label, lang, loaded, multipleSeparator, multipleTrim, readOnly, rendered, rendererType, required, showLabel, type
data	converter, defaultValue, disableClientSideValidation, disableModifiedFlag, disableValidators, groupName, showReadOnlyAsDisabled, skipContainers, validator, validators, value, valueChangeListener, valueChangeListeners
dojo	dojoAttributes, dojoType, dragRestriction, intermediateChanges, tooltip
events	onBlur, onChange, onClick, onClose, onDblClick, onFocus, onHide, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onShow
styling	disableTheme, iconClass, style, styleClass, themeId

Usage

This is a Dojo control.

At run time, a radio button appears on the page. If the user selects the button, its selected value becomes the button value. A radio buttons belong to the same group, only one button in the group can be selected at once..

Examples

This example consists of three radio buttons bound to the same scoped variable, a button for submitting the page, and a computed field that uses the value of the scoped variable. The buttons belong to a group.

<xp:table>
	<xp:tr>
		<xp:td>Radio button</xp:td>
		<xp:td>
			<xe:djRadioButton id="djRadioButton1"
				value="#{sessionScope.djRadioButton1}" label="blue"
				defaultValue="blue" selectedValue="blue" groupName="color">
			</xe:djRadioButton>
			<xe:djRadioButton id="djRadioButton2"
				value="#{sessionScope.djRadioButton1}" label="red"
				selectedValue="red" groupName="color">
			</xe:djRadioButton>
			<xe:djRadioButton id="djRadioButton3"
				value="#{sessionScope.djRadioButton1}" label="green"
				selectedValue="green" groupName="color">
			</xe:djRadioButton></xp:td>
	</xp:tr>
	<xp:tr>
		<xp:td>
			<xp:button value="submit" id="button1">
				<xp:eventHandler event="onclick" submit="true" 
refreshMode="complete" immediate="false" save="true">
			</xp:eventHandler></xp:button>
		</xp:td>
		<xp:td></xp:td>
	</xp:tr>
	<xp:tr>
		<xp:td>Value</xp:td>
		<xp:td><xp:text escape="true" id="computedField1"><xp:this.value><![CDATA[#
{javascript://return "The box is " + (sessionScope.djRadioButton1 ? "" : "not ") + "checked."
return sessionScope.djRadioButton1}]]&gt;</xp:this.value></xp:text></xp:td>
	</xp:tr>
</xp:table>

djSimpleTextarea - Dojo Simple Text Area

Accepts text input on multiple lines.

Category

Dojo Form

Syntax

<xe:djSimpleTextarea attributes>content</xe:djSimpleTextarea>

Table 63. Essential properties
Property	Description
id	Defaults to `djSimpleTextarea1`, `djSimpleTextarea2`, and so on.
value	Binds the control to a data element.

Table 64. All properties
Category	Properties
accessibility	alt, tabIndex, title, waiRole, waiState
basics	binding, dir, disabled, id, immediate, lang, loaded, maxLength, multipleSeparator, multipleTrim, readOnly, rendered, rendererType, required, trim, type
data	converter, defaultValue, disableClientSideValidation, disableModifiedFlag, disableValidators, showReadOnlyAsDisabled, validator, validators, value, valueChangeListener, valueChangeListeners
dojo	dojoAttributes, dojoType, dragRestriction, intermediateChanges, tooltip
events	onBlur, onChange, onClick, onClose, onDblClick, onFocus, onHide, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onShow
format	cols, lowercase, propercase, rows, uppercase
styling	disableTheme, style, styleClass, themeId

Usage

This is a Dojo control.

At run time, a text box appears on the page. The user can enter multiple lines of text in the box. A vertical slider is added as needed.

Examples

This example consists of a text area bound to a scoped variable, a button for submitting the page, and a computed field that displays the value of the scoped variable.

<xp:table>
	<xp:tr>
		<xp:td>Text Area</xp:td>
		<xp:td>
			<xe:djSimpleTextarea value="#{sessionScope.djSimpleTextarea1}"></xe:djSimpleTextarea>
</xp:td>
	</xp:tr>
	<xp:tr>
		<xp:td>
			<xp:button value="submit" id="button1">
				<xp:eventHandler event="onclick" submit="true" refreshMode="complete" immediate="false" save="true">
			</xp:eventHandler></xp:button>
		</xp:td>
		<xp:td></xp:td>
	</xp:tr>
	<xp:tr>
		<xp:td>Value</xp:td>
		<xp:td><xp:text escape="true" id="computedField1" value="#{sessionScope.djSimpleTextarea1}"></xp:text></xp:td>
	</xp:tr>
</xp:table>

djSliderRule - Dojo Slider Rule

Adds a rule (hash marks) for a horizontal or vertical slider.

Category

Dojo Form

Syntax

<xe:djSliderRule attributes>content</xe:djSliderRule>

Table 65. Essential properties
Property	Description
id	Defaults to `djSliderRule1`, `djSliderRule2`, and so on.
style	Provides dimensions for the rule.
container	Specifies the location of the rule: `topDecoration`, `bottomDecoration`, `leftDecoration`, or `rightDecoration`.
count	Specifies the number of hash marks.

Table 66. All properties
Category	Properties
accessibility	title, waiRole, waiState
basics	binding, count, dir, id, lang, loaded, rendered, rendererType
dojo	dojoAttributes, dojoType, dragRestriction, tooltip
events	onBlur, onChange, onClick, onClose, onDblClick, onFocus, onHide, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onShow
format	container
styling	disableTheme, ruleStyle, style, styleClass, themeId

Usage

This is a Dojo control.

At run time, the labels appear outside the slider rule.

Examples

This example consists of a Horizontal Slider bound to a scoped variable, a button for submitting the page, and a computed field that displays the value of the scoped variable.

<xp:table>
	<xp:tr>
		<xp:td>Horizontal Slider</xp:td>
		<xp:td>
			<xe:djHorizontalSlider id="djHorizontalSlider1" style="margin: 5px;width:200px; height: 20px;"
				value="#{sessionScope.djHorizontalSlider1}" discreteValues="1000"
				maximum="999" minimum="0">
				<xe:djSliderRuleLabels id="djSliderRuleLabels1"
					container="topDecoration"
					style="height:10px;font-size:75%;color:gray;">
					<xe:this.labelsList>
						<xe:djSliderRuleLabel label="0"></xe:djSliderRuleLabel>
						<xe:djSliderRuleLabel label="999"></xe:djSliderRuleLabel>
					</xe:this.labelsList>
				</xe:djSliderRuleLabels>
				<xe:djSliderRule id="djSliderRule1"
					container="topDecoration" style="height:5px;" count="11">
				</xe:djSliderRule>				
				<xe:djSliderRule id="djSliderRule2" style="height:5px;"
						count="11" container="bottomDecoration">
				</xe:djSliderRule>
				<xe:djSliderRuleLabels id="djSliderRuleLabels2"
						container="bottomDecoration" style="height:10px;font-size:75%;color:gray;">
				</xe:djSliderRuleLabels>
			</xe:djHorizontalSlider>
		</xp:td>
	</xp:tr>
	<xp:tr>
		<xp:td>
			<xp:button value="submit" id="button1">
				<xp:eventHandler event="onclick" submit="true" refreshMode="complete" immediate="false" save="true">
			</xp:eventHandler></xp:button>
		</xp:td>
		<xp:td></xp:td>
	</xp:tr>
	<xp:tr>
		<xp:td>Value</xp:td>
		<xp:td><xp:text escape="true" id="computedField1" value="#{sessionScope.djHorizontalSlider1}"></xp:text></xp:td>
	</xp:tr>
</xp:table>

djSliderRuleLabels - Dojo Slider Rule Labels

Adds labels to the rule for a horizontal or vertical slider.

Category

Dojo Form

Syntax

<xe:djSliderRuleLabels attributes>content</xe:djSliderRuleLabels>

Table 67. Essential properties
Property	Description
id	Defaults to `djSliderRuleLabels1`, `djSliderRuleLabels2`, and so on.
style	Provides dimensions for the labels.
container	Specifies the location of the labels: `topDecoration`, `bottomDecoration`, `leftDecoration`, or `rightDecoration`.
count, labels, labelsList	Specifies the labels as a count of percentages or as the actual labels.

Table 68. All properties
Category	Properties
accessibility	title, waiRole, waiState
basics	binding, constraints, count, dir, id, labels, labelsList, lang, loaded, maximum, minimum, numericMargin, rendered, rendererType
dojo	dojoAttributes, dojoType, dragRestriction, tooltip
events	onBlur, onChange, onClick, onClose, onDblClick, onFocus, onHide, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onShow
format	container
styling	disableTheme, labelStyle, ruleStyle, style, styleClass, themeId

Usage

This is a Dojo control.

At run time, the labels appear outside the slider rule.

Examples

This example consists of a Horizontal Slider bound to a scoped variable, a button for submitting the page, and a computed field that displays the value of the scoped variable.

<xp:table>
	<xp:tr>
		<xp:td>Horizontal Slider</xp:td>
		<xp:td>
			<xe:djHorizontalSlider id="djHorizontalSlider1" style="margin: 5px;width:200px; height: 20px;"
				value="#{sessionScope.djHorizontalSlider1}" discreteValues="1000"
				maximum="999" minimum="0">
				<xe:djSliderRuleLabels id="djSliderRuleLabels1"
					container="topDecoration"
					style="height:10px;font-size:75%;color:gray;">
					<xe:this.labelsList>
						<xe:djSliderRuleLabel label="0"></xe:djSliderRuleLabel>
						<xe:djSliderRuleLabel label="999"></xe:djSliderRuleLabel>
					</xe:this.labelsList>
				</xe:djSliderRuleLabels>
				<xe:djSliderRule id="djSliderRule1"
					container="topDecoration" style="height:5px;" count="11">
				</xe:djSliderRule>				
				<xe:djSliderRule id="djSliderRule2" style="height:5px;"
						count="11" container="bottomDecoration">
				</xe:djSliderRule>
				<xe:djSliderRuleLabels id="djSliderRuleLabels2"
						container="bottomDecoration" style="height:10px;font-size:75%;color:gray;">
				</xe:djSliderRuleLabels>
			</xe:djHorizontalSlider>
		</xp:td>
	</xp:tr>
	<xp:tr>
		<xp:td>
			<xp:button value="submit" id="button1">
				<xp:eventHandler event="onclick" submit="true" refreshMode="complete" immediate="false" save="true">
			</xp:eventHandler></xp:button>
		</xp:td>
		<xp:td></xp:td>
	</xp:tr>
	<xp:tr>
		<xp:td>Value</xp:td>
		<xp:td><xp:text escape="true" id="computedField1" value="#{sessionScope.djHorizontalSlider1}"></xp:text></xp:td>
	</xp:tr>
</xp:table>

djStackContainer - Stack Container

Contains panes stacked on top of each other.

Category

Extension Library

Syntax

<xe:djStackContainer attributes>content</xe:djStackContainer>

Table 69. Essential properties
Property	Description
id	Defaults to `djStackContainer1`, `djStackContainer2`, and so on.

Table 70. All properties
Category	Properties
accessibility	title, waiRole, waiState
basics	binding, dir, doLayout, id, lang, loaded, persist, rendered, rendererType, selectedTab
dojo	dojoAttributes, dojoType, dragRestriction, tooltip
events	onBlur, onClick, onClose, onDblClick, onFocus, onHide, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onShow
styling	disableTheme, style, styleClass, themeId

Usage

This is a Dojo control.

A StackContainer control holds StackPane controls stacked top to bottom in the order of definition.

Examples

This example shows three Stack Pane controls inside a Stack Container control. A button toggles the value of a scoped variable. The first two stack panes are visible depending on the variable value. When the top pane is not visible, the second pane is seen. When the top two panes are not visible, the third pane is seen.

<xp:button value="toggle" id="button1">
	<xp:eventHandler event="onclick" submit="true"
		refreshMode="complete">
		<xp:this.action><![CDATA[#{javascript:switch(sessionScope.dbinfo) {
case "path" : sessionScope.dbinfo = "created"; break;
case "created" : sessionScope.dbinfo = "title"; break;
default : sessionScope.dbinfo = "path";}}]]>
		</xp:this.action>
	</xp:eventHandler>
</xp:button>
<xe:djStackContainer id="djStackContainer1">
	<xe:djStackPane id="djStackPane1">
		<xe:this.rendered>
			<![CDATA[#{javascript:sessionScope.dbinfo == null || sessionScope.dbinfo == "title"}]]>
		</xe:this.rendered>
		<xp:text escape="true" id="computedField1"
			value="#{javascript:database.getTitle()}">
		</xp:text>
	</xe:djStackPane>
	<xe:djStackPane id="djStackPane2">
		<xe:this.rendered>
			<![CDATA[#{javascript:sessionScope.dbinfo == "path"}]]>
		</xe:this.rendered>
		<xp:text escape="true" id="computedField2"
			value="#{javascript:database.getFilePath()}">
		</xp:text>
	</xe:djStackPane>
	<xe:djStackPane id="djStackPane3">
		<xp:text escape="true" id="computedField3"
			value="#{javascript:database.getCreated().getLocalTime()}">
		</xp:text>
	</xe:djStackPane>
</xe:djStackContainer>

djStackPane - Stack Pane

Provides content for one pane in a stack container.

Category

Extension Library

Syntax

<xe:djStackPane attributes>content</xe:djStackPane>

Table 71. Essential properties
Property	Description
id	Defaults to `djStackPane1`, `djStackPane2`, and so on.

Table 72. All properties
Category	Properties
accessibility	title, waiRole, waiState
basics	binding, dir, errorMessage, extractContent, href, id, lang, loaded, loadingMessage, partialRefresh, preload, preventCache, refreshOnShow, rendered, rendererType
dojo	dojoAttributes, dojoType, dragRestriction, parseOnLoad, tooltip
events	onBlur, onClick, onClose, onContentError, onDblClick, onDownloadEnd, onDownloadError, onDownloadStart, onFocus, onHide, onKeyDown, onKeyPress, onKeyUp, onLoad, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onShow, onUnload
styling	disableTheme, style, styleClass, themeId

Usage

This is a Dojo control.

A Stack Container control holds Stack Pane controls stacked top to bottom in the order of definition.

Examples

<xp:button value="toggle" id="button1">
	<xp:eventHandler event="onclick" submit="true"
		refreshMode="complete">
		<xp:this.action><![CDATA[#{javascript:switch(sessionScope.dbinfo) {
case "path" : sessionScope.dbinfo = "created"; break;
case "created" : sessionScope.dbinfo = "title"; break;
default : sessionScope.dbinfo = "path";}}]]>
		</xp:this.action>
	</xp:eventHandler>
</xp:button>
<xe:djStackContainer id="djStackContainer1">
	<xe:djStackPane id="djStackPane1">
		<xe:this.rendered>
			<![CDATA[#{javascript:sessionScope.dbinfo == null || sessionScope.dbinfo == "title"}]]>
		</xe:this.rendered>
		<xp:text escape="true" id="computedField1"
			value="#{javascript:database.getTitle()}">
		</xp:text>
	</xe:djStackPane>
	<xe:djStackPane id="djStackPane2">
		<xe:this.rendered>
			<![CDATA[#{javascript:sessionScope.dbinfo == "path"}]]>
		</xe:this.rendered>
		<xp:text escape="true" id="computedField2"
			value="#{javascript:database.getFilePath()}">
		</xp:text>
	</xe:djStackPane>
	<xe:djStackPane id="djStackPane3">
		<xp:text escape="true" id="computedField3"
			value="#{javascript:database.getCreated().getLocalTime()}">
		</xp:text>
	</xe:djStackPane>
</xe:djStackContainer>

djTabContainer - Tab Container

Contains panes on tabs.

Category

Extension Library

Syntax

<xe:djTabContainer attributes>content</xe:djTabContainer>

Table 73. Essential properties
Property	Description
id	Defaults to `djTabContainer1`, `djTabContainer2`, and so on.
style	Specify width, height, and margin.

Table 74. All properties
Category	Properties
accessibility	title, waiRole, waiState
basics	binding, defaultTabContent, dir, doLayout, id, lang, loaded, persist, rendered, rendererType, selectedTab, tabPosition, tabStrip, useMenu, useSlider
dojo	dojoAttributes, dojoType, dragRestriction, tooltip
events	onBlur, onClick, onClose, onDblClick, onFocus, onHide, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onShow
styling	disableTheme, style, styleClass, themeId

Usage

This is a Dojo control.

A Tab Container control holds Tab Pane controls with the content of one tab displayed. The user clicks a tab to display its content.

Examples

This example shows three Tab Pane controls inside a Tab Container control.

<xe:djTabContainer id="djTabContainer1" style="width:500px; height:100px; margin:5px;">
	<xe:djTabPane id="djTabPane1" title="Title">
		<xp:text escape="true" id="computedField1"
			value="#{javascript:database.getTitle()}">
		</xp:text>
	</xe:djTabPane>
	<xe:djTabPane id="djTabPane2" title="File path">
		<xp:text escape="true" id="computedField2"
			value="#{javascript:database.getFilePath()}">
		</xp:text>
	</xe:djTabPane>
	<xe:djTabPane id="djTabPane3" title="Creation date">
		<xp:text escape="true" id="computedField3"
			value="#{javascript:database.getCreated().getLocalTime()}">
		</xp:text>
	</xe:djTabPane>
</xe:djTabContainer>

djTabPane - Tab Pane

Provides content for one pane in a tab container.

Category

Extension Library

Syntax

<xe:djTabPane attributes>content</xe:djTabPane>

Table 75. Essential properties
Property	Description
id	Defaults to `djTabPane1`, `djTabPane2`, and so on.
title	Applies a label to the tab. Use tooltip for accessibility.

Table 76. All properties
Category	Properties
accessibility	title, waiRole, waiState
basics	binding, closable, dir, errorMessage, extractContent, href, id, lang, loaded, loadingMessage, partialEvents, partialRefresh, preload, preventCache, refreshOnShow, rendered, rendererType, tabUniqueKey
dojo	dojoAttributes, dojoType, dragRestriction, parseOnLoad, tooltip
events	onBlur, onClick, onClose, onContentError, onDblClick, onDownloadEnd, onDownloadError, onDownloadStart, onFocus, onHide, onKeyDown, onKeyPress, onKeyUp, onLoad, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onShow, onUnload
styling	disableTheme, style, styleClass, themeId

Usage

This is a Dojo control.

A TabContainer control holds TabPane controls with the content of one tab displayed. The user clicks a tab to display its content.

Examples

This example shows three Tab Pane controls inside a Tab Container control.

<xe:djTabContainer id="djTabContainer1" style="width:500px; height:100px; margin:5px;">
	<xe:djTabPane id="djTabPane1" title="Title">
		<xp:text escape="true" id="computedField1"
			value="#{javascript:database.getTitle()}">
		</xp:text>
	</xe:djTabPane>
	<xe:djTabPane id="djTabPane2" title="File path">
		<xp:text escape="true" id="computedField2"
			value="#{javascript:database.getFilePath()}">
		</xp:text>
	</xe:djTabPane>
	<xe:djTabPane id="djTabPane3" title="Creation date">
		<xp:text escape="true" id="computedField3"
			value="#{javascript:database.getCreated().getLocalTime()}">
		</xp:text>
	</xe:djTabPane>
</xe:djTabContainer>

djTextarea - Dojo Text Area

Accepts text input on multiple lines.

Category

Dojo Form

Syntax

<xe:djTextarea attributes>content</xe:djTextarea>

Table 77. Essential properties
Property	Description
id	Defaults to `djTextarea1`, `djTextarea2`, and so on.
value	Binds the control to a data element.

Table 78. All properties
Category	Properties
accessibility	alt, tabIndex, title, waiRole, waiState
basics	binding, dir, disabled, id, immediate, lang, loaded, maxLength, multipleSeparator, multipleTrim, readOnly, rendered, rendererType, required, trim, type
data	converter, defaultValue, disableClientSideValidation, disableModifiedFlag, disableValidators, showReadOnlyAsDisabled, validator, validators, value, valueChangeListener, valueChangeListeners
dojo	dojoAttributes, dojoType, dragRestriction, intermediateChanges, tooltip
events	onBlur, onChange, onClick, onClose, onDblClick, onFocus, onHide, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onShow
format	cols, lowercase, propercase, rows, uppercase
styling	disableTheme, style, styleClass, themeId

Usage

This is a Dojo control.

At run time, a text box appears on the page. The user can enter multiple lines of text in the box. The box expands as lines are added.

Examples

This example consists of a text area bound to a scoped variable, a button for submitting the page, and a computed field that displays the value of the scoped variable.

<xp:table>
	<xp:tr>
		<xp:td>Text Area</xp:td>
		<xp:td>
			<xe:djTextarea value="#{sessionScope.djTextarea1}"></xe:djTextarea>
</xp:td>
	</xp:tr>
	<xp:tr>
		<xp:td>
			<xp:button value="submit" id="button1">
				<xp:eventHandler event="onclick" submit="true" refreshMode="complete" immediate="false" save="true">
			</xp:eventHandler></xp:button>
		</xp:td>
		<xp:td></xp:td>
	</xp:tr>
	<xp:tr>
		<xp:td>Value</xp:td>
		<xp:td><xp:text escape="true" id="computedField1" value="#{sessionScope.djTextarea1}"></xp:text></xp:td>
	</xp:tr>
</xp:table>

djTextBox - Dojo Text Box

Accepts text input on one line.

Category

Dojo Form

Syntax

<xe:djTextBox attributes>content</xe:djTextBox>

Table 79. Essential properties
Property	Description
id	Defaults to `djTextBox1`, `djTextBox2`, and so on.
value	Binds the control to a data element.

Table 80. All properties
Category	Properties
accessibility	alt, tabIndex, title, waiRole, waiState
basics	binding, dir, disabled, id, immediate, lang, loaded, maxLength, multipleSeparator, multipleTrim, readOnly, rendered, rendererType, required, trim, type
data	converter, defaultValue, disableClientSideValidation, disableModifiedFlag, disableValidators, showReadOnlyAsDisabled, validator, validators, value, valueChangeListener, valueChangeListeners
dojo	dojoAttributes, dojoType, dragRestriction, intermediateChanges, tooltip
events	onBlur, onChange, onClick, onClose, onDblClick, onFocus, onHide, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onShow
format	lowercase, propercase, uppercase
styling	disableTheme, style, styleClass, themeId

Usage

This is a Dojo control.

At run time, a text box appears on the page. The user can enter a line of text in the box.

Examples

This example consists of a text box bound to a scoped variable, a button for submitting the page, and a computed field that displays the value of the scoped variable. The text box lower cases its input.

<xp:table>
	<xp:tr>
		<xp:td>Basic TextBox</xp:td>
		<xp:td>
			<xe:djTextBox value="#{sessionScope.djTextBox1}" lowercase="true"></xe:djTextBox>
</xp:td>
	</xp:tr>
	<xp:tr>
		<xp:td>
			<xp:button value="submit" id="button1">
				<xp:eventHandler event="onclick" submit="true" refreshMode="complete" immediate="false" save="true">
			</xp:eventHandler></xp:button>
		</xp:td>
		<xp:td></xp:td>
	</xp:tr>
	<xp:tr>
		<xp:td>Value</xp:td>
		<xp:td><xp:text escape="true" id="computedField1" value="#{sessionScope.djTextBox1}"></xp:text></xp:td>
	</xp:tr>
</xp:table>

djTimeTextBox - Dojo Time Text Box

Accepts a time value.

Category

Dojo Form

Syntax

<xe:djTimeTextBox attributes>content</xe:djTimeTextBox>

Table 81. Essential properties
Property	Description
id	Defaults to `djTimeTextBox1`, `djTimeTextBox2`, and so on.
value	Binds the control to a data element.

Table 82. All properties
Category	Properties
accessibility	alt, tabIndex, title, waiRole, waiState
basics	binding, dir, disabled, id, immediate, lang, loaded, maxLength, multipleSeparator, multipleTrim, readOnly, rendered, rendererType, required, trim, type, validatorExt
data	constraints, converter, defaultValue, disableClientSideValidation, disableModifiedFlag, disableValidators, invalidMessage, promptMessage, rangeMessage, regExp, regExpGen, showReadOnlyAsDisabled, validator, validators, value, valueChangeListener, valueChangeListeners
dojo	dojoAttributes, dojoType, dragRestriction, intermediateChanges, tooltip
events	onBlur, onChange, onClick, onClose, onDblClick, onFocus, onHide, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onShow
format	displayMessageExt, lowercase, propercase, tooltipPosition, uppercase
styling	disableTheme, style, styleClass, themeId

Usage

This is a Dojo control.

At run time, a text box appears on the page. When the user selects the box, a time slider appears. The user can enter a time value. On invalid input, a tooltip appears.

Examples

This example consists of a Time text box bound to a scoped variable, a button for submitting the page, and a computed field that displays the value of the scoped variable.

<xp:table>
	<xp:tr>
		<xp:td>Time Text Box</xp:td>
		<xp:td>
			<xe:djTimeTextBox id="djTimeTextBox1" value="#{sessionScope.djTimeTextBox1}"></xe:djTimeTextBox>
</xp:td>
	</xp:tr>
	<xp:tr>
		<xp:td>
			<xp:button value="submit" id="button1">
				<xp:eventHandler event="onclick" submit="true" refreshMode="complete" immediate="false" save="true">
			</xp:eventHandler></xp:button>
		</xp:td>
		<xp:td></xp:td>
	</xp:tr>
	<xp:tr>
		<xp:td>Value</xp:td>
		<xp:td><xp:text escape="true" id="computedField1" value="#{sessionScope.djTimeTextBox1}"></xp:text></xp:td>
	</xp:tr>
</xp:table>

djToggleButton - Dojo Toggle Button

Toggles between a checked value and an unchecked value.

Category

Dojo Form

Syntax

<xe:djToggleButton attributes>content</xe:djToggleButton>

Table 83. Essential properties
Property	Description
id	Defaults to `djToggleButton1`, `djToggleButton2`, and so on.
value	Binds the control to a data element.
label	Specifies the display text on the button.
checkedValue	Specifies the value of the button when toggled to the checked position.
uncheckedValue	Specifies the value of the button when toggled to the unchecked position.

Table 84. All properties
Category	Properties
accessibility	alt, tabIndex, title, waiRole, waiState
basics	binding, dir, disabled, id, immediate, label, lang, loaded, maxLength, multipleSeparator, multipleTrim, readOnly, rendered, rendererType, required, showLabel, type
data	checkedValue, converter, defaultValue, disableClientSideValidation, disableModifiedFlag, disableValidators, showReadOnlyAsDisabled, uncheckedValue, validator, validators, value, valueChangeListener, valueChangeListeners
dojo	dojoAttributes, dojoType, dragRestriction, intermediateChanges, tooltip
events	onBlur, onChange, onClick, onClose, onDblClick, onFocus, onHide, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onShow
styling	disableTheme, iconClass, style, styleClass, themeId

Usage

This is a Dojo control.

At run time, a button appears on the page. Clicking the button toggles between the checked value and the unchecked value.

This button does not automatically submit to the server. It toggles its value on the client.

Examples

This example consists of a Toggle Button bound to a scoped variable, a button for submitting the page, and a computed field that displays the value of the scoped variable.

<xp:table>
	<xp:tr>
		<xp:td>Toggle Button</xp:td>
		<xp:td>
			<xe:djToggleButton id="djToggleButton1"
				value="#{sessionScope.djToggleButton1}" checkedValue="blue"
				uncheckedValue="red"
				label="#{javascript:sessionScope.djToggleButton1}">
			</xe:djToggleButton>
		</xp:td>
	</xp:tr>
	<xp:tr>
		<xp:td></xp:td>
		<xp:td>
			<xp:button value="submit" id="button1"><xp:eventHandler event="onclick" submit="true" 
			refreshMode="complete" immediate="false" save="true"></xp:eventHandler></xp:button></xp:td>
	</xp:tr>
	<xp:tr>
		<xp:td>Value</xp:td>
		<xp:td>
			<xp:text escape="true" id="computedField1"
				value="#{sessionScope.djToggleButton1}">
			</xp:text>
		</xp:td>
	</xp:tr>
</xp:table>

djValidationTextBox - Dojo Validation Text Box

Accepts a validated value.

Category

Dojo Form

Syntax

<xe:djValidationTextBox attributes>content</xe:djValidationTextBox>

Table 85. Essential properties
Property	Description
id	Defaults to `djValidationTextBox1`, `djValidationTextBox2`, and so on.
value	Binds the control to a data element.

Table 86. All properties
Category	Properties
accessibility	alt, tabIndex, title, waiRole, waiState
basics	binding, dir, disabled, id, immediate, lang, loaded, maxLength, multipleSeparator, multipleTrim, readOnly, rendered, rendererType, required, trim, type, validatorExt
data	converter, defaultValue, disableClientSideValidation, disableModifiedFlag, disableValidators, invalidMessage, promptMessage, regExp, regExpGen, showReadOnlyAsDisabled, validator, validators, value, valueChangeListener, valueChangeListeners
dojo	dojoAttributes, dojoType, dragRestriction, intermediateChanges, tooltip
events	onBlur, onChange, onClick, onClose, onDblClick, onFocus, onHide, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onShow
format	displayMessageExt, lowercase, propercase, tooltipPosition, uppercase
styling	disableTheme, style, styleClass, themeId

Usage

This is a Dojo control.

At run time, a text box appears on the page. On invalid input, a tooltip appears.

Examples

This example consists of a Validation text box bound to a scoped variable, a button for submitting the page, and a computed field that displays the value of the scoped variable. The text box allows only the characters a through z and A through Z. The user is prevented from entering invalid input.

<xp:table>
	<xp:tr>
		<xp:td>Validation Text Box</xp:td>
		<xp:td>
			<xe:djValidationTextBox id="djValidationTextBox1"
				value="#{sessionScope.djValidationTextBox1}">
				<xe:this.regExp><![CDATA[[a-zA-Z]*]]></xe:this.regExp>
			</xe:djValidationTextBox>
		</xp:td>
	</xp:tr>
	<xp:tr>
		<xp:td>
			<xp:button value="submit" id="button1">
				<xp:eventHandler event="onclick" submit="true" refreshMode="complete" immediate="false" save="true">
			</xp:eventHandler></xp:button>
		</xp:td>
		<xp:td></xp:td>
	</xp:tr>
	<xp:tr>
		<xp:td>Value</xp:td>
		<xp:td><xp:text escape="true" id="computedField1" value="#{sessionScope.djValidationTextBox1}"></xp:text></xp:td>
	</xp:tr>
</xp:table>

djVerticalSlider - Dojo Vertical Slider

Accepts a numeric value from a vertical slider.

Category

Dojo Form

Syntax

<xe:djVerticalSlider attributes>content</xe:djVerticalSlider>

Table 87. Essential properties
Property	Description
id	Defaults to `djVerticalSlider1`, `djVerticalSlider2`, and so on.
value	Binds the control to a data element.
style	Provides dimensions for the slider.
discreteValues	Specifies the number of values on the slider.
minimum	Specifies the starting value of the slider.
maximum	Specifies the ending value of the slider.

Table 88. All properties
Category	Properties
accessibility	alt, tabIndex, title, waiRole, waiState
basics	binding, clickSelect, dir, disabled, discreteValues, id, immediate, lang, loaded, maximum, minimum, multipleSeparator, multipleTrim, pageIncrement, readOnly, rendered, rendererType, required, showButtons, slideDuration, type
data	converter, defaultValue, disableClientSideValidation, disableModifiedFlag, disableValidators, showReadOnlyAsDisabled, validator, validators, value, valueChangeListener, valueChangeListeners
dojo	dojoAttributes, dojoType, dragRestriction, intermediateChanges, tooltip
events	onBlur, onChange, onClick, onClose, onDblClick, onFocus, onHide, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onShow
styling	disableTheme, style, styleClass, themeId

Usage

This is a Dojo control.

At run time, a vertical slider appears on the page. The user can slide the slider to select a numeric value.

Use djSliderRule - Dojo Slider Rule and djSliderRuleLabels - Dojo Slider Rule Labels to add rules (hash marks) and labels.

Examples

This example consists of a Vertical Slider bound to a scoped variable, a button for submitting the page, and a computed field that displays the value of the scoped variable.

<xp:table>
	<xp:tr>
		<xp:td>Vertical Slider</xp:td>
		<xp:td>
			<xe:djVerticalSlider id="djVerticalSlider1" style="margin: 5px;width:75px; 
height: 200px;"
				value="#{sessionScope.djVerticalSlider1}" discreteValues="1000"
				maximum="999" minimum="0">
				<xe:djSliderRuleLabels id="djSliderRuleLabels1"
					container="leftDecoration"
					style="width:20px;font-size:75%;color:gray;">
					<xe:this.labelsList>
						<xe:djSliderRuleLabel 
label="0"></xe:djSliderRuleLabel>
						<xe:djSliderRuleLabel 
label="999"></xe:djSliderRuleLabel>
					</xe:this.labelsList>
				</xe:djSliderRuleLabels>
				<xe:djSliderRule id="djSliderRule1"
					container="leftDecoration" style="width:5px;" count="11">
				</xe:djSliderRule>				
				<xe:djSliderRule id="djSliderRule2" style="width:5px;"
						count="11" container="rightDecoration">
				</xe:djSliderRule>
				<xe:djSliderRuleLabels id="djSliderRuleLabels2"
						container="rightDecoration" style="width:5px;font-
size:75%;color:gray;">
				</xe:djSliderRuleLabels>
			</xe:djVerticalSlider>
		</xp:td>
	</xp:tr>
	<xp:tr>
		<xp:td>
			<xp:button value="submit" id="button1">
				<xp:eventHandler event="onclick" submit="true" 
refreshMode="complete" immediate="false" save="true">
			</xp:eventHandler></xp:button>
		</xp:td>
		<xp:td></xp:td>
	</xp:tr>
	<xp:tr>
		<xp:td>Value</xp:td>
		<xp:td><xp:text escape="true" id="computedField1" value="#
{sessionScope.djVerticalSlider1}"></xp:text></xp:td>
	</xp:tr>
</xp:table>

djxDataGrid - Dojo Data Grid

Defines a grid of rows and columns.

Category

Dojo Grid Controls

Syntax

<xe:djxDataGrid attributes>content</xe:djxDataGrid>

Table 89. Essential properties
Property	Description
id	Defaults to `djxDataGrid1`, `djxDataGrid2`, and so on.
store	JavaScript variable that identifies a Dojo data store object.
storeComponentId	REST service control identifier. Supersedes `store`.

Table 90. All properties
Category	Properties
accessibility	title, waiRole, waiState
basics	autoHeight, binding, dir, errorMessage, escapeHTMLInData, headerMenu, id, jsId, lang, loaded, loadingMessage, query, rendered, rendererType, rowsPerPage, selectable, selectionMode, singleClickEdit
data	store, storeComponentId, updateDelay
dojo	dojoAttributes, dojoType, dragRestriction, tooltip
events	onBlur, onChange, onClick, onClose, onDblClick, onFocus, onHide, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onRowClick, onRowContextMenu, onRowDblClick, onShow, onStyleRow
format	initialWidth, rowSelector
styling	disableTheme, style, styleClass, themeId

Examples

This example uses a REST service to get column values from a Domino view and presents the values in a grid with one column.

<xp:this.data>
	<xp:dominoView var="view1" viewName="subject"></xp:dominoView>
</xp:this.data>
<xp:panel>
	<xe:restService id="restService1">
		<xe:this.service>
			<xe:viewItemFileService viewName="subject" var="entry"
				defaultColumns="true" contentType="application/json">
				<xe:this.columns>
					<xe:restViewColumn columnName="subject"
						name="subject">
						<xe:this.value><![CDATA[#{javascript:return entry.getColumnValue("subject")}]]></xe:this.value>
					</xe:restViewColumn>
				</xe:this.columns>
			</xe:viewItemFileService>
		</xe:this.service>
	</xe:restService>
	<xp:br></xp:br>
	<xe:djxDataGrid id="djxDataGrid1"
		storeComponentId="restService1">
		<xe:djxDataGridColumn id="djxDataGridColumn1"
			field="subject" width="auto" editable="true">
		</xe:djxDataGridColumn>
	</xe:djxDataGrid>
</xp:panel>

djxDataGridColumn - Dojo Data Grid Column

Defines the content of a column. Can be inserted into a grid or row.

Category

Dojo Grid Controls

Syntax

<xe:djxDataGridColumn attributes>content</xe:djxDataGridColumn>

Table 91. Essential properties
Property	Description
id	Defaults to `djxDataGridColumn1`, `djxDataGridColumn2`, and so on.
field	Name of a field in the data store.

Table 92. All properties
Category	Properties
basics	binding, cellType, editable, hidden, id, label, loaded, options, rendered, rendererType
data	field, formatter, get
format	width
styling	disableTheme, themeId

Examples

This example uses a REST service to get column values from a Domino view and presents the values in a grid with one column.

<xp:this.data>
	<xp:dominoView var="view1" viewName="subject"></xp:dominoView>
</xp:this.data>
<xp:panel>
	<xe:restService id="restService1">
		<xe:this.service>
			<xe:viewItemFileService viewName="subject" var="entry"
				defaultColumns="true" contentType="application/json">
				<xe:this.columns>
					<xe:restViewColumn columnName="subject"
						name="subject">
						<xe:this.value><![CDATA[#{javascript:return entry.getColumnValue("subject")}]]></xe:this.value>
					</xe:restViewColumn>
				</xe:this.columns>
			</xe:viewItemFileService>
		</xe:this.service>
	</xe:restService>
	<xp:br></xp:br>
	<xe:djxDataGrid id="djxDataGrid1"
		storeComponentId="restService1">
		<xe:djxDataGridColumn id="djxDataGridColumn1"
			field="subject" width="auto" editable="true">
		</xe:djxDataGridColumn>
	</xe:djxDataGrid>
</xp:panel>

djxDataGridRow - Dojo Data Grid Row

Defines multiple rows.

Category

Dojo Grid Controls

Syntax

<xe:djxDataGridRow attributes>content</xe:djxDataGridRow>

Table 93. Essential properties
Property	Description
id	Defaults to `djxDataGridRow1`, `djxDataGridRow2`, and so on.

Table 94. All properties
Category	Properties
basics	binding, id, label, loaded, rendered, rendererType
styling	disableTheme, themeId

djxmHeading - Page Heading

Provides header information and basic navigation.

Category

Mobile Apps

Syntax

<xe:djxmHeading attributes>content</xe:djxmHeading>

Table 95. Essential properties
Property	Description
id	Defaults to `djxmHeading1`, `djxmHeading2`, and so on.
back	Specifies a label for the navigational control to return to the previous view.
moveTo	Specifies a target view when the `next` control is pressed in the current view.

Table 96. All properties
Category	Properties
accessibility	title
basics	back, binding, dir, href, id, label, lang, loaded, moveTo, rendered, rendererType, transition
dojo	dojoAttributes, dojoType, tooltip
styling	disableTheme, style, styleClass, themeId

Examples

This example demonstrates a mobile application with one page which has a heading.

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex">
	<xe:singlePageApp id="xpagesMobileApp"
		selectedPageName="homePage">
		<xe:appPage id="appPage1" pageName="homePage" >
			<xe:djxmHeading id="homePageHeading" label="Home"></xe:djxmHeading>
		</xe:appPage>
 	</xe:singlePageApp>
</xp:view>

djxmLineItem - Static Line Item

Provides a way to link to other mobile pages.

Category

Mobile Apps

Syntax

<xe:djxmLineItem attributes>content</xe:djxmLineItem>

Table 97. Essential properties
Property	Description
id	Defaults to `djxmLineItem1`, `djxmLineItem2`, and so on.
label	Specifies a visible label.
moveTo	Links to another page.

Table 98. All properties
Category	Properties
accessibility	title
basics	binding, dir, icon, id, label, lang, loaded, moveTo, rendered, rendererType, transition
dojo	dojoAttributes, dojoType, tooltip
styling	disableTheme, style, styleClass, themeId

Examples

This example demonstrates a mobile application with one page which has a heading and a line item.

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex">
	<xe:singlePageApp id="xpagesMobileApp"
		selectedPageName="homePage">
	<xe:appPage id="appPage1" pageName="homePage" resetContent="false">
		<xe:djxmHeading id="homePageHeading" label="Home"></xe:djxmHeading>
		<xe:djxmLineItem id="djxmLineItem1"
			moveTo="#viewPage" label="All Documents">
		</xe:djxmLineItem>
	</xe:appPage>
 	</xe:singlePageApp>
</xp:view>

djxmRoundRectList - Rounded List

Displays a rectangle with rounded corners.

Category

Mobile Apps

Syntax

<xe:djxmRoundRectList attributes>content</xe:djxmRoundRectList>

Table 99. Essential properties
Property	Description
id	Defaults to `djxmRoundRectList1`, `djxmRoundRectList2`, and so on.
back	Specifies a label for the navigational control to return to the previous view.
moveTo	Specifies a target view when the `next` control is pressed in the current view.

Table 100. All properties
Category	Properties
accessibility	title
basics	binding, dir, iconBase, iconPos, id, lang, loaded rendered, rendererType, transition
dojo	dojoAttributes, dojoType, tooltip
styling	disableTheme, style, styleClass, themeId

Examples

This example demonstrates a mobile page that uses a rounded list.

<xe:appPage id="appPage4" pageName="newDocumentPage"
	preload="true" resetContent="true">
	<xe:djxmHeading id="newDocumentPageHeading" label="New Document"
		back="Cancel" moveTo="viewPage">
	</xe:djxmHeading>
	<xp:panel>
	<xp:this.data>
		<xp:dominoDocument var="document1" formName="MainTopic"	computeWithForm="onsave">
		</xp:dominoDocument>
	</xp:this.data>
	<xe:tabBar id="newDocumentTabBar" barType="segmentedControl">
		<xe:tabBarButton id="tabBarButtonSubmit" label="Submit">
			<xp:eventHandler event="onclick" submit="true"
				refreshMode="complete">
				<xp:this.action>
					<xe:moveTo forceFullRefresh="true" saveDocument="true"
						targetPage="viewPage" transitionType="slide" direction="Left to Right">
					</xe:moveTo>
				</xp:this.action>
			</xp:eventHandler>
		</xe:tabBarButton>
	</xe:tabBar>
	<xe:djxmRoundRectList id="djxmRoundRectList1">
		<xp:label value="Subject: " id="labelSubject2"></xp:label>
		<xp:inputText id="inputTextSubject2" value="#{document1.Subject}"></xp:inputText>
		<xp:br />
		<xp:label value="Category: " id="labelCategory2"></xp:label>
		<xp:inputText id="inputTextCategory2" value="#{document1.NewCats}"></xp:inputText>
		<xp:br />
		<xp:inputTextarea id="inputTextareaBody" value="#{document1.Body}" cols="40" rows="10">
		</xp:inputTextarea>
	</xe:djxmRoundRectList>
	</xp:panel>
</xe:appPage>

djxmSwitch - Mobile Switch

Works as an on/off switch with behavior like a checkbox.

Category

Mobile Apps

Syntax

<xe:djxmSwitch attributes>content</xe:djxmSwitch>

Table 101. Essential properties
Property	Description
id	Defaults to `djxmSwitch1`, `djxmSwitch2`, and so on.
back	Specifies a label for the navigational control to return to the previous view.
moveTo	Specifies a target view when the `next` control is pressed in the current view.

Table 102. All properties
Category	Properties
accessibility	title
basics	binding, dir, id, lang, leftLabel, loaded rendered, rendererType, rightLabel, value
dojo	dojoAttributes, dojoType, tooltip
styling	disableTheme, style, styleClass, themeId

dynamicContent - Dynamic Content

Contains dynamic content.

Category

Extension Library

Syntax

<xe:dynamicContent attributes>
	<xp:this.facets>
		<xp:panel xp:key="facetID">content</panel>
		...
	</xp:this.facets>
</xe:dynamicContent>

Table 103. Essential properties
Property	Description
id	Defaults to `dynamicContent1`, `dynamicContent2`, and so on.

Table 104. All properties
Category	Properties
basics	binding, defaultFacet, id, loaded, partialEvents, rendered, rendererType, useHash
events	afterContentLoad, beforeContentLoad
styling	disableTheme, themeId

Usage

This control defines areas of alternative content that is loaded dynamically. Each content area is a panel in a facet.

To display dynamic content in a server-side script, execute the following code where dynamicContent1 is the control identifier and key_1 is the facet identifier:

getComponent("dynamicContent1").show("key_1")

Alternatively you can use a simple action. See Change Dynamic Content (Simple actions - JavaScript).

The Dynamic Content control can initially load a facet by identifying it as the default:

defaultFacet="key_1"

See Dynamic content for additional information.

Examples

<xe:dynamicContent id="dynamicContent1" defaultFacet="mainView">
	<xp:this.facets>
		<xp:panel xp:key="subjectView">
			<xp:button value="Switch to main view" id="button4">
				<xp:eventHandler event="onclick" submit="true" refreshMode="partial" 
					refreshId="dynamicContent1">
					<xp:this.action>
						<![CDATA[#{javascript:getComponent("dynamicContent1").show("mainView")}]]>
					</xp:this.action>
				</xp:eventHandler>
			</xp:button>
			<xp:viewPanel rows="30" id="viewPanel1">
				<xp:this.facets>
					<xp:pager partialRefresh="true" layout="Previous Group Next" 
						xp:key="headerPager" id="pager1">
					</xp:pager>
				</xp:this.facets>
				<xp:this.data>
					<xp:dominoView var="view1" viewName="subject"></xp:dominoView>
				</xp:this.data>
				<xp:viewColumn columnName="subject" id="viewColumn1">
					<xp:viewColumnHeader value="subject" id="viewColumnHeader1"></xp:viewColumnHeader>
				</xp:viewColumn>
				<xp:viewColumn columnName="number" id="viewColumn2">
					<xp:viewColumnHeader value="number" id="viewColumnHeader2"></xp:viewColumnHeader>
				</xp:viewColumn>
				<xp:viewColumn columnName="$2" id="viewColumn3">
					<xp:viewColumnHeader value="last modified" id="viewColumnHeader3"></xp:viewColumnHeader>
				</xp:viewColumn>
			</xp:viewPanel>
		</xp:panel>
		<xp:panel xp:key="mainView">
			<xp:button value="Switch to subject view" id="button3">
				<xp:eventHandler event="onclick" submit="true" refreshMode="partial" 
					refreshId="dynamicContent1">
					<xp:this.action>
						<![CDATA[#{javascript:getComponent("dynamicContent1").show("subjectView")}]]>
					</xp:this.action>
				</xp:eventHandler>
			</xp:button>
			<xp:viewPanel rows="30" id="viewPanel2">
				<xp:this.facets>
					<xp:pager partialRefresh="true" layout="Previous Group Next" 
						xp:key="headerPager" id="pager2">
					</xp:pager>
				</xp:this.facets>
				<xp:this.data>
					<xp:dominoView var="view2" viewName="main"></xp:dominoView>
				</xp:this.data>
				<xp:viewColumn columnName="category" id="viewColumn4">
					<xp:viewColumnHeader value="category" id="viewColumnHeader4"></xp:viewColumnHeader>
				</xp:viewColumn>
				<xp:viewColumn columnName="subject" id="viewColumn5">
					<xp:viewColumnHeader value="subject" id="viewColumnHeader5"></xp:viewColumnHeader>
				</xp:viewColumn>
				<xp:viewColumn columnName="number" id="viewColumn6">
					<xp:viewColumnHeader value="number" id="viewColumnHeader6"></xp:viewColumnHeader>
				</xp:viewColumn><xp:viewColumn columnName="$2" id="viewColumn7">
					<xp:viewColumnHeader value="last modified" id="viewColumnHeader7"></xp:viewColumnHeader>
				</xp:viewColumn>
			</xp:viewPanel>
		</xp:panel>
	</xp:this.facets>
</xe:dynamicContent>

Dynamic content

The Dynamic Content control contains alternate sets of content that can be presented as desired.

Here is an example where the control can either display a view or a form when the user clicks a link. The browser in fact stays on the same page as the click triggers a partial refresh of the content of the control. On the server side, the dynamic content control is replacing its children.

Here is the page after the user clicks All Contacts View:

Dynamic content after clicking on All Contacts View

Here is the page after the user clicks Edit First Contact:

Dynamic content after clicking on Edit First Contact

The Dynamic Content control

The Dynamic Content control contains any number of facets. Each facet represents one UI that can be displayed. Use the key property to identify a facet for reference.

<xe:dynamicContent id="dynp" defaultFacet="view" useHash="true" >
  <xp:this.facets>
    <xp:panel xp:key="view" id="panel1" >
      <xp:viewPanel rows="10" id="viewPanel1" var="row" >
        ...
      </xp:viewPanel>
    </xp:panel>
    <xp:panel xp:key="contact" id="panel2" >
      <xp:this.data>
        <xp:dominoDocument var="document1" formName="Contact" >
        </xp:dominoDocument>
      </xp:this.data>
        ...
    </xp:panel>
  </xp:this.facets>
</xe:dynamicContent>

Use the following server-side code to discard any existing dynamic content and display the content of a facet. In this example, dynp is the identity of the Dynamic Content control and view is the identity of a facet.

var c = getComponent("dynp")
c.show("view")

The show() method has an optional parameter used to pass URL parameters to the control children. Those parameters are added temporarily to the requestParameterMap and can be consumed by the controls and complex types. Built-in data sources, like the document data source, are reading the parameters from this map.

var c = getComponent("dynp")
c.show("contact",{action:'editDocument'
,documentId:dataAccess.firstContactID})

A typical link implementation calls the show() method and partially refreshes the Dynamic Content control.

By default, the dynamic UI control forces a partial execution and refresh of its children. This can be prevented by using this property:

partialExecute false

Default content

Initially a Dynamic Content control can display nothing or can display one of the facets. Specify the defaultFacet property for initial content.

Keeping track of the content

It is sometimes interesting to keep track of the current facet being displayed, as well as the parameters, in the browser URL. This allows a user to bookmark the page and to use the back button. Unfortunately changes to the URL force the browser to refresh and send a request to the server. The only URL update that doesn't trigger a page refresh is when the # part of the URL is modified. The technique of using this # part is well known in JavaScript. The Dynamic Content control can automatically manage this if the following property is set:

useHash true

The URL is updated when a new facet is selected:

http://.../XPagesExt.nsf/Core_DynamicPage.xsp#content=contact&action=editDocument&documentId=8FA

A Dojo listener is also installed for tracking the URL changes by the user (going to a bookmark or using the back or next button). When a change is detected, an Ajax request is automatically sent to the server and the content is updated.

When this option is enabled, the Dynamic Content control can be controlled by client-side JavaScript:

XSP.showContent("#{id:dynp}","view")

Or by a simple relative URL:

#content=view

On the server side, the parameters from the hash are automatically added to the requestMap or the requestParameterMap, making it transparent to the data sources and other controls.

Implementing the OK button

Do not use a regular submit button as this would redirect to a different page on success. Instead, the button should be a simple button with the following simple actions:

The script in the second action simply resets the content:

var c = getComponent("dynp")
c.show("view")

The button event should do a partial refresh on the Dynamic Content control:

Clicking on a view column

When a click happens on a view column, you would like to dynamically switch to the entry form without refreshing the entire page. A solution consists in adding an onclick event to the view column with one of the techniques to change the dynamic content (server-side code, client-side code, or relative URL). Here is an example using server-side code:

var c = getComponent("dynp")
var id = row.getNoteID()
c.show("contact",{action:'editDocument',documentId:id})

formColumn - Form Layout Column

Divides a form table or a layout row into columns.

Category

Extension Library

Syntax

<xe:formColumn attributes>content</xe:formColumn>

Table 105. Essential properties
Property	Description
id	Defaults to `formColumn1`, `formColumn2`, and so on.
colSpan	Spans columns starting at the current column. The default `1` means no span, and `0` means span to the last column.

Table 106. All properties
Category	Properties
basics	binding, colSpan, id, loaded, rendered, rendererType
styling	disableTheme, style, styleClass, themeId

Examples

This example displays a table with two columns each with one row containing an edit box. The effect is to display the edit boxes on one line. A header provides explanatory text and a footer provides save and cancel buttons.

<xe:formTable id="formTable1" formTitle="Subject and number"
formDescription="Provide your input in the boxes below.">
	<xe:formColumn>
		<xe:formRow id="formRow1" label="Subject" for="inputText1">
		<xp:inputText id="inputText1"
			value="#{document1.subject}">
		</xp:inputText>
		</xe:formRow>
	</xe:formColumn>
	<xe:formColumn>
		<xe:formRow id="formRow2" label="Number" for="inputText2">
		<xp:inputText id="inputText2"
			value="#{document1.number}">
		</xp:inputText>
		</xe:formRow>
	</xe:formColumn>
	<xp:this.facets>
		<xp:panel xp:key="footer" id="panel1">
			<xp:button value="Save" id="button1">
				<xp:eventHandler event="onclick" submit="true"
					refreshMode="complete" immediate="false" save="true">
				</xp:eventHandler>
			</xp:button>
			<xp:button value="Cancel" id="button2">
				<xp:eventHandler event="onclick" submit="true"
					refreshMode="complete" immediate="true" save="false">
				</xp:eventHandler>
			</xp:button>
		</xp:panel>
	</xp:this.facets>
</xe:formTable>

formRow - Form Layout Row

Specifies a row of content in a form layout column or the layout table itself.

Category

Extension Library

Syntax

<xe:formRow attributes>content</xe:formRow>

Table 107. Essential properties
Property	Description
id	Defaults to `formRow1`, `formRow2`, and so on.
for	Identifies the control to which the row applies. Not needed if the control is contained in the row.
label	Associates a label with the control.
labelPosition	Specifies the position of the label in relation to the control: `left`, `above`, `none`, or `inherit from the parent table` (the table default is `left`).

Table 108. All properties
Category	Properties
basics	binding, for, helpId, id, label, labelWidth, loaded, rendered, rendererType
format	labelPosition
styling	disableTheme, style, styleClass, themeId

Examples

<xe:formTable id="formTable1" formTitle="Subject and number"
formDescription="Provide your input in the boxes below.">
	<xe:formColumn>
		<xe:formRow id="formRow1" label="Subject" for="inputText1">
		<xp:inputText id="inputText1"
			value="#{document1.subject}">
		</xp:inputText>
		</xe:formRow>
	</xe:formColumn>
	<xe:formColumn>
		<xe:formRow id="formRow2" label="Number" for="inputText1">
		<xp:inputText id="inputText2"
			value="#{document1.number}">
		</xp:inputText>
		</xe:formRow>
	</xe:formColumn>
	<xp:this.facets>
		<xp:panel xp:key="footer" id="panel1">
			<xp:button value="Save" id="button1">
				<xp:eventHandler event="onclick" submit="true"
					refreshMode="complete" immediate="false" save="true">
				</xp:eventHandler>
			</xp:button>
			<xp:button value="Cancel" id="button2">
				<xp:eventHandler event="onclick" submit="true"
					refreshMode="complete" immediate="true" save="false">
				</xp:eventHandler>
			</xp:button>
		</xp:panel>
	</xp:this.facets>
</xe:formTable>

formTable - Form Table

Formats input controls in rows and columns. Provides header, footer, and message areas.

Category

Extension Library

Syntax

<xe:formTable attributes>content</xe:formTable>

Table 109. Essential properties
Property	Description
id	Defaults to `formTable1`, `formTable2`, and so on.
formTitle	Specifies a title for the top of the table.
formDescription	Specifies text to be placed under the title.
labelPosition	Specifies the default position for labels in rows in relation to the control: `left` (default), `above`, or `none`.

Table 110. All properties
Category	Properties
accessibility	legend
basics	binding, disableErrorSummary, disableRowError, errorSummaryText, fieldHelp, formDescription, formTitle, id, labelWidth, loaded, rendered, rendererType
format	disableRequiredMarks, labelPosition
styling	disableTheme, style, styleClass

Examples

<xe:formTable id="formTable1" formTitle="Subject and number"
formDescription="Provide your input in the boxes below.">
	<xe:formColumn>
		<xe:formRow id="formRow1" label="Subject" for="inputText1">
		<xp:inputText id="inputText1"
			value="#{document1.subject}">
		</xp:inputText>
		</xe:formRow>
	</xe:formColumn>
	<xe:formColumn>
		<xe:formRow id="formRow2" label="Number" for="inputText2">
		<xp:inputText id="inputText2"
			value="#{document1.number}">
		</xp:inputText>
		</xe:formRow>
	</xe:formColumn>
	<xp:this.facets>
		<xp:panel xp:key="footer" id="panel1">
			<xp:button value="Save" id="button1">
				<xp:eventHandler event="onclick" submit="true"
					refreshMode="complete" immediate="false" save="true">
				</xp:eventHandler>
			</xp:button>
			<xp:button value="Cancel" id="button2">
				<xp:eventHandler event="onclick" submit="true"
					refreshMode="complete" immediate="true" save="false">
				</xp:eventHandler>
			</xp:button>
		</xp:panel>
	</xp:this.facets>
</xe:formTable>

inPlaceForm - In Place Form

Contains a dynamic form.

Category

Extension Library

Syntax

<xe:inPlaceForm attributes>content</xe:inPlaceForm>

Table 111. Essential properties
Property	Description
id	Defaults to `inPlaceForm1`, `inPlaceForm2`, and so on.

Table 112. All properties
Category	Properties
basics	binding, id, loaded, partialEvents, rendered, rendererType
events	afterContentLoad, beforeContentLoad
styling	disableTheme, themeId

Usage

This control defines a dynamic form which acts as a container for other controls.

To display the form in a server-side script, execute the following code where inPlaceForm1 is the control identifier:

getComponent("inPlaceForm1").show()

To hide the form, execute the following code:

getComponent("inPlaceForm1").hide()

To show or hide the form depending on the current state, execute the following code:

getComponent("inPlaceForm1").toggle()

See In place editing for additional information.

Examples

Here a view-based repeat control contains a computed field, a link, and a dynamic form. The dynamic form contains an edit box and a button. The computed field displays the subject column for each row in the view. Clicking the link for the row displays the dynamic form whose edit box is bound to the subject data for that row, or hides the dynamic form if it is in display mode. With the form in display mode, the user can modify the data in the edit box. Clicking the button saves the data and hides the dynamic form.

<xp:this.data>
	<xp:dominoView var="view1" viewName="subject"></xp:dominoView>
</xp:this.data>
<xp:repeat id="repeat1" rows="30" value="#{view1}" var="row">
	<xp:text escape="true" id="computedField1" value="#{row.subject}"></xp:text>
	<xp:link escape="true" id="link1"><xp:this.text>
		<![CDATA[#{javascript:var c = getComponent("inPlaceForm1")
if(c.isVisible()) {
	return "Close";
} else {
	return "Edit"
}}]]></xp:this.text>
		&#160;
		<xp:eventHandler event="onclick" submit="true"
			refreshMode="partial" refreshId="repeat1">
			<xp:this.action>
				<![CDATA[#{javascript:getComponent("inPlaceForm1").toggle()}]]>
			</xp:this.action>
		</xp:eventHandler>
	</xp:link>
	<xp:br></xp:br>
	<xp:panel>
		<xe:inPlaceForm id="inPlaceForm1" partialEvents="true">
			<xp:inputText id="inputText1" value="#{document1.subject}"></xp:inputText>
			&#160;
			<xp:button value="OK" id="button1">
				<xp:eventHandler event="onclick" submit="true"
					refreshMode="partial" refreshId="repeat1">
					<xp:this.action>
						<xp:actionGroup>
							<xp:saveDocument></xp:saveDocument>
							<xp:executeScript>
								<xp:this.script>
									<![CDATA[#{javascript:getComponent("inPlaceForm1").hide()}]]>
								</xp:this.script>
							</xp:executeScript>
						</xp:actionGroup>
					</xp:this.action>
				</xp:eventHandler>
			</xp:button>
		</xe:inPlaceForm>
		<xp:this.data>
			<xp:dominoDocument var="document1" action="editDocument"
				documentId="#{javascript:row.getNoteID()}" formName="main">
			</xp:dominoDocument>
		</xp:this.data>
	</xp:panel>
</xp:repeat>

In place editing

In place editing dynamically shows an entry form containing data, typically in response to a user click. The user can enter data and close the form.

For example, the user may see a list of names followed by links:

Clicking a link opens a form that lets the user edit that entry:

How this works

An inPlaceForm control contains the controls used in the form.

The inPlaceForm control content can be displayed and hidden by calling the following server-side methods:

var c = getComponent("inPlaceForm1") // inPlaceForm1 being the ID of the control
c.show()
c.hide()
c.toggle()

The control automatically creates and inserts the child controls into the JSF tree, or deletes them, as necessary. The control can be located with a repeat and maintains a list of contexts in which it is visible. The controls are removed from the JSF tree when there is no longer valid contexts.

The show() and toggle() methods have an optional map to emulate URL parameters. The content of the map is temporarily pushed to the requestScope and removed after the request is processed.

The content of an inPlaceForm control is not loaded unless the form is used, minimizing the runtime cost.

Implementing an `OK` button in the form

Implementing an OK button is not as trivial as calling show() or hide(). Some server-side processing should be done, for example, saving the document. You should not redirect to a different page if the update is successful. You should stay on the same page and refresh the part of the page showing the new values of the edited data.

Take the following steps:

Add a simple button not a submit button.
Add a server-side event that saves the document then hides the form content. This can be done with two simple actions: Save Document and Execute Script.
If Save Document succeeds, Execute Script runs. It should simply hide the form:
```
var c = getComponent("inPlaceForm1")
c.hide()
```
Have the onclick event do a partial refresh of the edited value. The refresh ID should contain the entire form plus the edited value.

If the form is editing a row within the repeat control, refresh the entire repeat control:

Accessing the current context

The inPlaceForm control, as well as its children, can access the current page context. This means, for example, that an inPlaceForm control located in a repeat can access the current repeat context. Here is an example of a form opening a document and using a document data source the current note ID:

<xe:inPlaceForm id="inPlaceForm1">
  <xp:panel>
    <xp:this.data>
      <xp:dominoDocument
        var="document1" formName="Contact" action="editDocument" 
          documentId="#{ javascript:row.getNoteID() }"
          ignoreRequestParams="true" >
      </xp:dominoDocument>
    </xp:this.data>

To force the data source to use the computed properties and prevent it from using the actual requests parameters, specify ignoreRequestParams="true".

jsonRpcService - Remote Services

Exposes a remote service.

Category

Data Access

Syntax

<xe:jsonRpcService attributes>content</xe:jsonRpcService>

Table 113. Essential properties
Property	Description
id	Defaults to `jsonRpcService1`, `jsonRpcService2`, and so on.
pathInfo	Identifies the location of the service relative to the XPage. The URL for accessing the service takes the following form: `http://myserver/mydatabase.nsf/myxpage.xsp/pathInfo`
serviceName	Name of the client-side JavaScript service. Overrides the pathInfo property.
methods	One or more remoteMethod properties each of which has the following properties: arguments, loaded, name, and script.

Table 114. All properties
Category	Properties
basics	binding, id, loaded, pathInfo, rendered, rendererType, serviceName, state
	methods
styling	disableTheme, themeId

Examples

This example exposes a remote service then uses a button with a client-side script to call a service method and redirect its JSON output to the local file system.

<xe:jsonRpcService id="jsonRpcService1" serviceName="userinfo">
	<xe:this.methods>
		<xe:remoteMethod name="getUserName">
			<xe:this.script><![CDATA[return @UserName()]]&gt;</xe:this.script>
		</xe:remoteMethod>
		<xe:remoteMethod name="add" script="return arg1 + arg2">
			<xe:this.arguments>
				<xe:remoteMethodArg name="arg1"></xe:remoteMethodArg>
				<xe:remoteMethodArg name="arg2"></xe:remoteMethodArg>
			</xe:this.arguments>
		</xe:remoteMethod>
	</xe:this.methods>
</xe:jsonRpcService>
<xp:button value="Display the user" id="button3">
	<xp:eventHandler event="onclick" submit="false">
		<xp:this.script><![CDATA[var deferred = userinfo.getUserName()
deferred.addCallback(function(result) {
	alert(result)
});]]>
		</xp:this.script>
	</xp:eventHandler>
</xp:button>

namePicker - Name Picker

Displays a modal dialog containing name choices. Applies selected names to an associated control.

Category

Extension Library

Syntax

<xe:namePicker attributes>content</xe:namePicker>

Table 115. Essential properties
Property	Description
id	Defaults to `namePicker1`, `namePicker2`, and so on.
for	Specifies the control to which selected names are applied.
dataProvider	Specifies choices for the name selection: beanNamePicker dominoNABNamePicker dominoViewNamePicker namePickerAggregator

Table 116. All properties
Category	Properties
basics	binding, dataProvider, dialogTitle, for, id, listHeight, listWidth, loaded, pickerIcon, pickerText, rendered, rendererType
dojo	dojoAttributes, dojoType
styling	disableTheme, themeId

Usage

When the user clicks this control, a modal dialog appears with a choice of names. The user can select names. The selected names are applied to the associated control.

See Value and name pickers for additional information.

Examples

This name picker provides a choice of names for an input box from the local names.nsf database.

<xp:this.data>
	<xp:dominoDocument var="document1" formName="main"></xp:dominoDocument>
</xp:this.data>
<xp:inputText id="inputText3" value="#{document1.subject}"></xp:inputText>
<xe:namePicker id="namePicker1" for="inputText3">
	<xe:this.dataProvider>
		<xe:dominoNABNamePicker addressBookSel="db-name"
			addressBookDb="names.nsf">
		</xe:dominoNABNamePicker>
	</xe:this.dataProvider>
</xe:namePicker>

Value and name pickers

A value picker lets the user choose one or multiple values from a list. A name picker lets the user choose one or multiple names from a list. The value or values are applied to an associated control. Both pickers work similarly.

Using the pickers

A picker renders an icon that triggers a dialog when clicked:

The picker is associated with another control through the for property. The picker uses the value, if any, of the associated control for its initial selection. When the user closes the picker dialog with the OK button, the picker applies selected values to the associated control.

The picker knows if the associated control accepts single or multiple values and adapts its behavior accordingly. The picker also recognizes the character used to separate the multiple values if appropriate.

The pickers can display data from various sources and have different renderings.

Selecting the data to display

The pickers use a complex type dataProvider to access the selection data. This separates the UI from the data and allows different data sources. Each data provider has its own set of properties which can be set on the All Properties tab:

This list shows the default providers and is extensible on a global or application basis.

The name picker also allows the user to choose from multiple directories. This is done by using a data provider aggregator, which is a custom data provider that delegates to other concrete implementations. This example provides data from both a Domino address book and a view in the current database:

The values returned by the data providers can have optional labels. The picker displays the label and stores the value.

Setting the picker UI

Both the value and the name picker come with a default rendering. It is a basic list for the value picker and a more complex dialog for the name picker:

Other user interfaces can be assigned using the dojoType and dojoAttributes properties. For example, a checkbox dialog can be applied by setting the following values :

Enabling typeahead

The typeAhead control can be used with the pickers. The picker adapts the data coming from the data provider to what the typeahead control expects whenever it is a basic list of data or custom markup.

To set up typeahead, add a typeAhead control to the control associated with the picker and set the following properties:

<xp:typeAhead mode="partial" minChars="1" preventFiltering="true">

The preventFiltering property ensures that typeahead lets the data provider filter the data. This is not required but makes the control perform better. The mode="partial" property ensures that only the typeahead control is triggered when a typeahead request occurs.

Specify the typeahead suggestions formula to get its input from the picker:

Providing custom data providers

Custom data providers can be provided. Here are the possibilities:

Using JavaScript for the value picker simpleDataProvider.
The data provider implementation allows a developer to execute server-side JavaScript. To keep the JavaScript simple, this provider can only return string values without associated labels.
Here is the kind of JavaScript that can be coded:
```
var a = new Array("a","b","c","d","e","f","g","h")
return a
```
You can return a single string if valueListSeparator is specified:
```
return "a,b,c,d,e,f,g,h"
```
Using a managed bean for a value/name picker beanXXXPicker.
This method gives the full capability of a data provider without having to register a new complex type to the XPages runtime. This method can be chosen when the provider is specific to an application.
- Create a Java class that implements either IValuePickerData or INamePickerData, depending of the kind of data. Look, at the SimplePicker class in the demo application.
- Add a beanXXXPicker data provider and make it point to your bean. If a class name is specified, an instance is created when needed. To get better control of the life cycle of the bean, use a managed bean and use its published name in the dataBean property.

Providing a custom UI

A developer can provide a custom UI for a picker. It has to be done via a custom Dojo module that defines a new dijit. This dijit should extend extlib.dijit.TemplateDialog. Although it is not required, extending this base class provides help for displaying the popup dialog, managing the browser differences, and handling some common events such as OK and Cancel.

The XPages runtime generates a set of parameters that are passed to the dijit at runtime. Here are the typical parameters that are passed to the dijit:

dlgTitle: the title of dialog
control: the client id of the associated input text
url: the REST service URL
sources: an optional array of source (directory list)

This can be extended by using custom picker renderers. For more information, look at the PickerCheckbox.js file, which defines the simplest dijit. It shows how the REST service should be called, how it communicates with the input text and how it creates check boxes based on the data list.

pagerAddRows - Pager Add Rows

Adds rows to an iterator control.

Category

Extension Library

Syntax

<xe:pagerAddRows attributes>content</xe:pagerAddRows>

Table 117. Essential properties
Property	Description
id	Defaults to `pagerAddRows1`, `pagerAddRows2`, and so on.
for	Identifies the iterator control. Not needed if this control is a facet of the iterator control.
rowCount	Specifies the number of rows to add on each click.

Table 118. All properties
Category	Properties
basics	binding, for, id, loaded, partialExecute, partialRefresh, refreshId, refreshPage, rendered, rendererType, rowCount, state, text
format	disabledFormat
styling	disableTheme, style, styleClass, themeId

Usage

The iterator control starts with the number of rows determined by its properties. The user clicks the Pager Add Rows control to add rows.

Examples

Here a data table starts with 10 rows and allows the user to add 3 rows at a time.

<xp:dataTable id="dataTable1" rows="10"
value="#{javascript:return database.getAllDocuments()}" var="rowdoc">
	<xp:column id="column1">
		<xp:this.facets>
			<xp:label value="subject" id="label1" xp:key="header"
				style="font-weight:bold">
			</xp:label>
		</xp:this.facets>
		<xp:text escape="true" id="computedField1">
			<xp:this.value>
				<![CDATA[#{javascript:return rowdoc.getItemValueString("subject")}]]>
			</xp:this.value>
		</xp:text>
	</xp:column>
</xp:dataTable>
<xe:pagerAddRows id="pagerAddRows1" for="dataTable1" rowCount="3"></xe:pagerAddRows>

pagerDetail - Pager Show/Hide Details

Shows and hides detail areas of an iterator control.

Category

Extension Library

Syntax

<xe:pagerDetail attributes>content</xe:pagerDetail>

Table 119. Essential properties
Property	Description
id	Defaults to `pagerDetail1`, `pagerDetail2`, and so on.
for	Identifies the iterator control. Not needed if this control is a facet of the iterator control.

Table 120. All properties
Category	Properties
basics	binding, for, hideText, id, loaded, partialExecute, partialRefresh, refreshId, rendered, rendererType, showText
styling	disableTheme, style, styleClass, themeId

Usage

In an iterator control, you can specify a detail area as a facet control whose key property is detail.

The user clicks the Pager Show/Hide Details control to toggle display of a detail area.

Examples

Here a data view contains a detail area and a Pager Show/Hide Details control to toggle its display.

<xe:dataView id="dataView1" columnTitles="true"
collapsibleDetail="true" collapsibleRows="true" expandedDetail="true" var="entry">
	<xp:this.facets>
		<xp:panel xp:key="detail">
			<xp:label value="Number: " id="label1"></xp:label>
			<xp:text escape="true" id="computedField1">
				<xp:this.value>
					<![CDATA[#{javascript:return entry.getColumnValue("number")}]]>
				</xp:this.value>
			</xp:text>
		</xp:panel>
		<xe:pagerDetail id="pagerDetail1"
			xp:key="pagerBottomLeft">
		</xe:pagerDetail>
	</xp:this.facets>
	<xe:this.data>
		<xp:dominoView var="view1" viewName="main"
			expandLevel="2">
		</xp:dominoView>
	</xe:this.data>
	<xe:this.summaryColumn>
		<xe:viewSummaryColumn columnName="subject"
			columnTitle="subject">
		</xe:viewSummaryColumn>
	</xe:this.summaryColumn>
</xe:dataView>

pagerExpand - Pager Expand/Collapse

Expands or collapses all the rows of an iterator control.

Category

Extension Library

Syntax

<xe:pagerExpand attributes>content</xe:pagerExpand>

Table 121. Essential properties
Property	Description
id	Defaults to `pagerExpand1`, `pagerExpand2`, and so on.
for	Identifies the iterator control. Not needed if this control is a facet of the iterator control.

Table 122. All properties
Category	Properties
basics	binding, collapseText, expandText, for, id, loaded, partialExecute, partialRefresh, refreshId, rendered, rendererType
styling	disableTheme, style, styleClass, themeId

Examples

Here a data view contains a Pager Expand/Collapse control to toggle its display.

<xe:dataView id="dataView1" columnTitles="true"
collapsibleDetail="true" collapsibleRows="true" expandedDetail="true" var="entry">
	<xp:this.facets>
		<xe:pagerExpand id="pagerExpand1"
			xp:key="pagerBottomLeft">
		</xe:pagerExpand>
	</xp:this.facets>
	<xe:this.data>
		<xp:dominoView var="view1" viewName="main"
			expandLevel="2">
		</xp:dominoView>
	</xe:this.data>
	<xe:this.summaryColumn>
		<xe:viewSummaryColumn columnName="subject"
			columnTitle="subject">
		</xe:viewSummaryColumn>
	</xe:this.summaryColumn>
</xe:dataView>

pagerSaveState - Pager Save State

Saves the number of rows displayed by an iterator control if the user navigates away from the page and back.

Category

Extension Library

Syntax

<xe:pagerSaveState attributes>content</xe:pagerSaveState>

Table 123. Essential properties
Property	Description
id	Defaults to `pagerSaveState1`, `pagerSaveState2`, and so on.
for	Identifies the iterator control. Not needed if this control is a facet of the iterator control.

Table 124. All properties
Category	Properties
basics	binding, for, globalRows, id, loaded, partialExecute, partialRefresh, refreshId, rendered, rendererType
styling	disableTheme, style, styleClass, themeId

Examples

Here a Pager Save State control is applied to a data view.

<xe:pagerSaveState id="pagerSaveState1" for="dataView1"
	globalRows="true">
</xe:pagerSaveState>
<xe:dataView id="dataView1" columnTitles="true" collapsibleRows="true">
	<xp:this.facets>
		<xe:pagerSizes id="pagerSizes1" xp:key="pagerTopLeft"
			sizes="4|8|all">
		</xe:pagerSizes>
	</xp:this.facets>
	<xe:this.data>
		<xp:dominoView var="view1" viewName="main"
			expandLevel="2">
		</xp:dominoView>
	</xe:this.data>
	<xe:this.summaryColumn>
		<xe:viewSummaryColumn columnName="subject"
			columnTitle="subject">
		</xe:viewSummaryColumn>
	</xe:this.summaryColumn>
</xe:dataView>

pagerSizes - Pager Sizes

Allows selection of the number of rows displayed by an iterator control.

Category

Extension Library

Syntax

<xe:pagerSizes attributes>content</xe:pagerSizes>

Table 125. Essential properties
Property	Description
id	Defaults to `pagerSizes1`, `pagerSizes2`, and so on.
for	Identifies the iterator control. Not needed if this control is a facet of the iterator control.
sizes	Specifies the choices for the number of rows. Separate choices with the vertical bar (`\|`) character. The keyword `all` means all rows.

Table 126. All properties
Category	Properties
basics	binding, for, id, loaded, partialExecute, partialRefresh, refreshId, rendered, rendererType, sizes, text
styling	disableTheme, style, styleClass, themeId

Usage

The user is presented with a display that allows the selection of a number of rows or all rows.

Examples

Here a data view contains a Pager Sizes control to set the number of rows displayed.

<xe:dataView id="dataView1" columnTitles="true" collapsibleRows="true">
	<xp:this.facets>
		<xe:pagerSizes id="pagerSizes1" xp:key="pagerTopLeft"
			sizes="4|8|all">
		</xe:pagerSizes>
	</xp:this.facets>
	<xe:this.data>
		<xp:dominoView var="view1" viewName="main"
			expandLevel="2">
		</xp:dominoView>
	</xe:this.data>
	<xe:this.summaryColumn>
		<xe:viewSummaryColumn columnName="subject"
			columnTitle="subject">
		</xe:viewSummaryColumn>
	</xe:this.summaryColumn>
</xe:dataView>

restService - REST Service

Exposes a REST service.

Category

Data Access

Syntax

<xe:restService attributes>content</xe:restService>

Table 127. Essential properties
Property	Description
id	Defaults to `restService1`, `restService2`, and so on.
pathInfo	Identifies the location of the service relative to the XPage. The URL for accessing the service takes the following form: `http://myserver/mydatabase.nsf/myxpage.xsp/pathInfo`
service	The service being exposed. One of the following: xe:calendarJsonLegacyService xe:databaseCollectionJsonService xe:documentJsonService xe:viewCollectionJsonService xe:viewItemFileService xe:viewJsonLegacyService xe:viewJsonService xe:viewXmlLegacyService The service has properties as follows: compact, contentType, databaseName (defaults to the current database), dojoAttributes, dojoType, and loaded.

Table 128. All properties
Category	Properties
basics	binding, id, ignoreRequestParams, jsld, loaded, pathInfo, preventDojoStore, rendered, rendererType, service, state
styling	disableTheme, themeId

Examples

This example exposes a REST service then uses a button to call the service and redirect its JSON output to the local file system.

<xe:restService id="restService1" pathInfo="dbPathInfo">
	<xe:this.service>
	<xe:databaseCollectionJsonService></xe:databaseCollectionJsonService></xe:this.service>
</xe:restService>
<xp:button id="button1" value="Database Collection">
	<xp:eventHandler event="onclick" submit="true">
		<xp:this.action><![CDATA[#{javascript:
	facesContext.getExternalContext().getResponse().sendRedirect(@FullUrl("restService.xsp/dbPathInfo"))
	}]]></xp:this.action>
	</xp:eventHandler>
</xp:button>

selectItem - Selection Item

Provides an item for user selection, for example, in a check box.

Category

None

Syntax

<xp:selectItem attributes>content</xp:selectItem>

Essential properties

itemLabel	Provides text for display to the user. Required.
itemValue	Provides a value for the parent control if the user selects this item. Required.

All properties

basics	attrs, binding, id, itemDescription, itemDisabled, itemLabel, rendered, rendererType
data	itemValue, value
format	disableTheme, themeId

Usage

Embed this control in another control to provide an item selection for the parent control.

In Design mode, put focus on the control that is to contain the item selection and click the Values tab under Properties. Use Add item and Import List to create selectItem controls.

To see the item selection properties under All properties, you must switch to Source mode and put focus on the embedded selectItem control (as opposed to the parent control).

Examples

This Check Box Group control contains two items for selection.

<xp:checkBoxGroup id="checkBoxGroup1" value="#{document1.fruit}">
	<xp:selectItem itemLabel="Apples" itemValue="apples"></xp:selectItem>
	<xp:selectItem itemLabel="Oranges" itemValue="oranges"></xp:selectItem>
</xp:checkBoxGroup>

selectItems - Selection Items

Provides one or more items for user selection, for example, in a check box.

Category

None

Syntax

<xp:selectItems attributes>content</xp:selectItems>

Essential properties

value

Provides labels, values, descriptions, and disable flags for one or more description items. A value here is different from data binding. See below.

All properties

basics	attrs, binding, id, loaded, rendered, rendererType
data	value
format	disableTheme, themeId

Usage

Embed this control in another control to provide item selections for the parent control.

In Design mode, put focus on the control that is to contain the item selection and click the Values tab under Properties. Use Add formula item to create a selectItems control.

To see the item selection properties under All properties, you must switch to Source mode and put focus on the embedded selectItems control (as opposed to the parent control).

The value formula must return an array. Each element of the array must define one selection item formatted as follows:

label|value|description|disabled

Where only label is required. The vertical bars are part of the syntax.

If value is not specified, it defaults to label. Specify disabled as true to disable (gray out) the selection item.

For the return value, you can explode (@Explode) the result of @DbColumn or @DbLookup.

Examples

This Check Box Group control contains two items for selection.

<xp:checkBoxGroup id="checkBoxGroup1" value="#{document1.fruit}">
	<xp:selectItems>
		<xp:this.value>
			<![CDATA[#{javascript:return new Array("Apples", "Oranges")}]]>
		</xp:this.value>
	</xp:selectItems>
</xp:checkBoxGroup>

This Check Box Group control uses different names for the labels and values.

<xp:checkBoxGroup id="checkBoxGroup1" value="#{document1.fruit}">
	<xp:selectItems>
		<xp:this.value>
			<![CDATA[#{javascript:return new Array("Apples|apples", "Oranges|oranges")}]]>
		</xp:this.value>
	</xp:selectItems>
</xp:checkBoxGroup>

This Check Box Group control disables the first selection.

<xp:checkBoxGroup id="checkBoxGroup1" value="#{document1.fruit}">
	<xp:selectItems>
		<xp:this.value>
			<![CDATA[#{javascript:return new Array("Apples|apples||true", "Oranges|oranges")}]]>
		</xp:this.value>
	</xp:selectItems>
</xp:checkBoxGroup>

This Check Box Group gets its item selections from the values in a view column.

<xp:checkBoxGroup id="checkBoxGroup1" value="#{document1.fruit}">
	<xp:selectItems>
		<xp:this.value>
			<![CDATA[#{javascript:var list = @DbColumn("", "fruits", 1);
			return @Explode(list,",")}]]>
		</xp:this.value>
	</xp:selectItems>
</xp:checkBoxGroup>

singlePageApp - Single Page Application

Contains a mobile application. Controls its layout and configuration.

Category

Mobile Apps

Syntax

<xe:singlePageApp attributes>content</xe:singlePageApp>

Table 129. Essential properties
Property	Description
id	Defaults to `singlePageApp1`, `singlePageApp2`, and so on.
selectedPageName	Identifies by `pageName` the `appPage` control that is displayed when the XPage loads.

Table 130. All properties
Category	Properties
basics	binding, id, loaded, rendered, rendererType, selectedPageName
styling	disableTheme, themeId

Examples

This example demonstrates a mobile application with one page which has a heading.

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex">
	<xe:singlePageApp id="xpagesMobileApp"
		selectedPageName="homePage">
		<xe:appPage id="appPage1" pageName="homePage" >
			<xe:djxmHeading id="homePageHeading" label="Home"></xe:djxmHeading>
		</xe:appPage>
 	</xe:singlePageApp>
</xp:view>

switchFacet - Switch

Displays alternate panels depending on key values.

Category

Extension Library

Syntax

<xe:switchFacet attributes>content</xe:switchFacet>

Table 131. Essential properties
Property	Description
id	Defaults to `switchFacet1`, `switchFacet2`, and so on.
selectedFacet	Specifies the key of the display panel.
defaultFacet	Specifies the key of the display panel if no display panel matches selectedFacet.

Table 132. All properties
Category	Properties
basics	binding, defaultFacet,id, loaded, rendered, rendererType, selectedFacet
styling	disableTheme, themeId

Usage

Define each alternative display as a panel that is content to the Switch control. Specify the key property for each panel. Use the selectedFacet and defaultFacet properties of the Switch control to determine which panel to display.

Examples

This tooltip dialog contains text that is displayed for a button when the button activates the dialog. The tooltip dialog displays alert boxes for the show and hide events.

What do you want to buy?>
<xp:comboBox id="comboBox1">
	<xp:selectItem itemLabel="Select an item..." itemValue=""></xp:selectItem>
	<xp:selectItem itemLabel="A Car" itemValue="car"></xp:selectItem>
	<xp:selectItem itemLabel="A Motorbike" itemValue="moto"></xp:selectItem>
	<xp:selectItem itemLabel="A Moped" itemValue="moped"></xp:selectItem>
	<xp:selectItem itemLabel="I don't know!" itemValue="dunno"></xp:selectItem>
	<xp:eventHandler event="onchange" submit="true" refreshMode="partial" refreshId="panel1">	</xp:eventHandler>
</xp:comboBox><xp:br></xp:br>
<xp:panel id="panel1">
	<xe:switchFacet id="switchFacet1" defaultFacet="else">
		<xe:this.selectedFacet>
			<![CDATA[#{javascript:return getComponent("comboBox1").getValue()}]]>
		</xe:this.selectedFacet>
		<xp:this.facets>
			<xp:panel xp:key="car">What about a Ford?></xp:panel>
			<xp:panel xp:key="moto">Hum, a nice <u>Harley</u> or a Japanese sports one?></xp:panel>
			<xp:panel xp:key="moped">Do you prefer <u>Peugeot</u> or <u>Piaggio</u>?</xp:panel>
			<xp:panel xp:key="else">
				<xp:label id="label1">
					<xp:this.value>
						<![CDATA[#{javascript:var v = getComponent("comboBox1").getValue();
if(v) {
	return "Please select another option"
} else {
	return ""
}}]]>
					</xp:this.value>
				</xp:label>
			</xp:panel>
		</xp:this.facets>
	</xe:switchFacet>
</xp:panel>

tabBar - Tab Bar

Presents a banner upon which buttons can be placed.

Category

Mobile Apps

Syntax

<xe:tabBar attributes>content</xe:tabBar>

Table 133. Essential properties
Property	Description
id	Defaults to `tabBar1`, `tabBar2`, and so on.
tabBar	Specify as `segmentedControl` to display tab bar buttons together as one though separated into individual buttons.
inHeading	Specify as `true` to position the bar inside the heading.

Table 134. All properties
Category	Properties
accessibility	title
basics	barType, binding, dir, id, inHeading, lang, loaded, rendered, rendererType
dojo	dojoAttributes, dojoType, tooltip
styling	disableTheme, style, styleClass, themeId

Examples

This example demonstrates a tab bar with three buttons.

<xe:tabBar id="documentTabBar" barType="segmentedControl">
	<xe:tabBarButton id="tabBarButtonCancel" label="Cancel">
		<xp:eventHandler event="onclick" submit="true" refreshMode="complete" immediate="true" save="false">
			<xp:this.action>
				<xe:moveTo targetPage="viewPage" transitionType="slide" direction="Right to Left"></xe:moveTo>
			</xp:this.action>
		</xp:eventHandler>
	</xe:tabBarButton>
	<xe:tabBarButton id="tabBarButtonEdit" label="Edit" rendered="#{javascript:!document1.isEditable()}">
		<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
			<xp:this.action>
				<xp:changeDocumentMode mode="edit" var="document1"></xp:changeDocumentMode>
			</xp:this.action>
		</xp:eventHandler>
	</xe:tabBarButton>
	<xe:tabBarButton id="tabBarButtonSave" label="Save" rendered="#{javascript:document1.isEditable()}">
		<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
			<xp:this.action>
				<xe:moveTo forceFullRefresh="true" saveDocument="true"
					targetPage="viewPage" transitionType="slide" direction="Left to Right">
				</xe:moveTo>
			</xp:this.action>
		</xp:eventHandler>
	</xe:tabBarButton>
</xe:tabBar>

tabBarButton - Tab Bar Button

Presents a banner upon which buttons can be placed.

Category

Mobile Apps

Syntax

<xe:tabBarButton attributes>content</xe:tabBarButton>

Table 135. Essential properties
Property	Description
id	Defaults to `tabBarButton1`, `tabBarButton2`, and so on.
onClick	Specifies the action when the button is clicked.

Table 136. All properties
Category	Properties
accessibility	title
basics	binding, dir, icon1, icon2, iconPos1, iconPos2, id, label, lang, loaded, rendered, rendererType, selected, selectOne, transition
dojo	dojoAttributes, dojoType, tooltip
events	onClick
styling	disableTheme, style, styleClass, themeId

Examples

This example demonstrates a tab bar with three buttons.

<xe:tabBar id="documentTabBar" barType="segmentedControl">
	<xe:tabBarButton id="tabBarButtonCancel" label="Cancel">
		<xp:eventHandler event="onclick" submit="true" refreshMode="complete" immediate="true" save="false">
			<xp:this.action>
				<xe:moveTo targetPage="viewPage" transitionType="slide" direction="Right to Left"></xe:moveTo>
			</xp:this.action>
		</xp:eventHandler>
	</xe:tabBarButton>
	<xe:tabBarButton id="tabBarButtonEdit" label="Edit" rendered="#{javascript:!document1.isEditable()}">
		<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
			<xp:this.action>
				<xp:changeDocumentMode mode="edit" var="document1"></xp:changeDocumentMode>
			</xp:this.action>
		</xp:eventHandler>
	</xe:tabBarButton>
	<xe:tabBarButton id="tabBarButtonSave" label="Save" rendered="#{javascript:document1.isEditable()}">
		<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
			<xp:this.action>
				<xe:moveTo forceFullRefresh="true" saveDocument="true"
					targetPage="viewPage" transitionType="slide" direction="Left to Right">
				</xe:moveTo>
			</xp:this.action>
		</xp:eventHandler>
	</xe:tabBarButton>
</xe:tabBar>

tooltip - Tooltip

Displays data when another control is in focus.

Category

Extension Library

Syntax

<xe:tooltip attributes>content</xe:tooltip>

Table 137. Essential properties
Property	Description
id	Defaults to `tooltip1`, `tooltip2`, and so on.
for	Specifies the control to which the tooltip applies.
label	Specifies the content of the tooltip.
dynamicContent	Set to true.

Table 138. All properties
Category	Properties
basics	binding, dynamicContent, for, id, label, loaded, rendered, rendererType, showDelay
dojo	dojoAttributes, dojoType
events	afterContentLoad, beforeContentLoad
layout	position
styling	disableTheme, themeId

Usage

Specify the tooltip content as the label property or as the control content.

See Dynamic tooltips for additional information.

Examples

This tooltip displays the last modified time for the document associated with a repeating computed field. The tooltip content is specified in the tooltip label.

<xp:this.data>
	<xp:dominoView var="view1" viewName="subject"></xp:dominoView>
</xp:this.data>
<xp:repeat id="repeat1" rows="30" value="#{view1}" var="row">
	<xp:text escape="true" id="computedField1"
		value="#{row.subject}">
	</xp:text><xp:br></xp:br>
	<xe:tooltip id="tooltip1" for="computedField1"
		dynamicContent="true">
		<xe:this.label>
			<![CDATA[#{javascript:var doc:NotesDocument = row.getDocument();
return "Last modified on " + doc.getLastModified().getLocalTime()}]]>
		</xe:this.label>
	</xe:tooltip>
</xp:repeat>

This tooltip displays the category and last modified time for the document associated with a repeating computed field. The tooltip content is specified in the tooltip content.

<xp:this.data>
	<xp:dominoView var="view1" viewName="subject"></xp:dominoView>
</xp:this.data>
<xp:repeat id="repeat1" rows="30" value="#{view1}" var="row">
	<xp:text escape="true" id="computedField1" value="#{row.subject}"></xp:text>
	<xp:br></xp:br>
	<xe:tooltip id="tooltip1" for="computedField1" dynamicContent="true">
		<xp:panel>
			<xp:table>
				<xp:tr>
					<xp:td>Category</xp:td>
					<xp:td><xp:text escape="true" id="computedField2">
						<xp:this.value>
							<![CDATA[#{javascript:var doc:NotesDocument = row.getDocument();
return doc.getItemValueString("category")}]]>
						</xp:this.value></xp:text>
					</xp:td>
				</xp:tr>
				<xp:tr>
					<xp:td>Last modified</xp:td>
					<xp:td><xp:text escape="true" id="computedField3">
						<xp:this.value>
							<![CDATA[#{javascript:var doc:NotesDocument = row.getDocument();
return doc.getLastModified().getLocalTime()}]]>
						</xp:this.value></xp:text>
					</xp:td>
				</xp:tr>
			</xp:table>
		</xp:panel>
	</xe:tooltip>
</xp:repeat>

Dynamic tooltips

The Tooltip control displays dynamic content when the user mouses over an associated control.

From a rendering standpoint, this control uses Dojo tooltip dijits and it gets its content from an Ajax request.

As a tooltip is read only, the server-side controls used to render the tooltip are created when the request comes in and are discarded right after they are rendered. This ensures that the JSF tree stays as clean and small as possible.

The Tooltip control gets its children directly from the control content or label.

Its dynamicContent property must be set to true to make sure the content is created dynamically:

The child controls have access to the tooltip context to, for example, specify the parameters of a data source:

<xe:tooltip id="tooltip2" for="computedField2" dynamicContent="true">
  <xp:panel>
    <xp:this.data>
      <xp:dominoDocument var="document1"
        formName="Contact" action="editDocument"
        documentId="#{ javascript:row.getNoteID() }"
        ignoreRequestParams="true" >
      </xp:dominoDocument>

tooltipDialog - Tooltip Dialog

Displays data when another control is in focus. Allows activation of client-side events when the data is shown and hidden.

Category

Extension Library

Syntax

<xe:tooltipDialog attributes>content</xe:tooltipDialog>

Table 139. Essential properties
Property	Description
id	Defaults to `tooltipDialog1`, `tooltipDialog2`, and so on.
onShow	Use this for a client-side event (no submission) when the control is activated.
onHide	Use this for a client-side event (no submission) when the control is deactivated.

Table 140. All properties
Category	Properties
accessibility	title, waiRole, waiState
basics	binding, dir, errorMessage, id, keepComponents, lang, loaded, loadingMessage, extractContent, href, partialRefresh, preload, preventCache, refreshOnShow, rendered, rendererType
dojo	dojoAttributes, dojoType, dragRestriction, parseOnLoad, tooltip
events	afterContentLoad, beforeContentLoad, onBlur, onClick, onClose, onContentError, onDblClick, onDownloadEnd, on DownloadError, onDownloadStart, onFocus, onHide, onKeyDown, onKeyPress, onKeyUp, onLoad, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onShow, onUnload
styling	disableTheme, style, styleClass, themeId

Usage

This control defines content and events. To activate the control, use the following client-side JavaScript where tooltipDialog1 is the identifier of the Tooltip Dialog control and button1 is the identifier of the associated control:

XSP.openTooltipDialog("#{id:tooltipDialog1}",'#{id:button1}')

Examples

This tooltip dialog contains text that is displayed for a button when the button activates the dialog. The tooltip dialog displays alert boxes for the show and hide events.

<xp:button value="Display a TooltipDialog with onShow/onHide events" id="button20">
	<xp:eventHandler event="onclick" submit="false">
		<xp:this.script><![CDATA[XSP.openTooltipDialog("#{id:tooltipDialog1}",'#{id:button20}')]]></xp:this.script>
	</xp:eventHandler>
</xp:button><xp:br></xp:br>
<xe:tooltipDialog id="tooltipDialog1" title="This is a tooltip dialog">
	<xp:panel>Are you seeing the events?</xp:panel>
	<xp:eventHandler event="onShow" submit="false">
		<xp:this.script><![CDATA[alert('TooltipDialog: OnShow - EventHandler')]]></xp:this.script>
	</xp:eventHandler>
	<xp:eventHandler event="onHide" submit="false">
		<xp:this.script><![CDATA[alert('TooltipDialog: OnHide - EventHandler')]]></xp:this.script>
	</xp:eventHandler>
</xe:tooltipDialog>

valuePicker - Value Picker

Displays a modal dialog containing value choices. Applies selected values to an associated control.

Category

Extension Library

Syntax

<xe:valuePicker attributes>content</xe:valuePicker>

Table 141. Essential properties
Property	Description
id	Defaults to `valuePicker1`, `valuePicker2`, and so on.
for	Specifies the control to which selected values are applied.
dataProvider	Specifies choices for the value selection: beanValuePicker dominoViewValuePicker simpleValuePicker

Table 142. All properties
Category	Properties
basics	binding, dataProvider, dialogTitle, for, id, listHeight, listWidth, loaded, pickerIcon, pickerText, rendered, rendererType
dojo	dojoAttributes, dojoType
styling	disableTheme, themeId

Usage

When the user clicks this control, a modal dialog appears with a choice of values. The user can select values. The selected values are applied to the associated control.

See Value and name pickers for additional information.

Examples

This value picker provides a choice of values for an input box from a simple list.

<xp:this.data>
	<xp:dominoDocument var="document1" formName="main"></xp:dominoDocument>
</xp:this.data>
<xp:inputText id="inputText1" value="#{document1.category}"></xp:inputText>
<xe:valuePicker id="valuePicker1" for="inputText1" dialogTitle="Select a category">
	<xe:this.dataProvider>
		<xe:simpleValuePicker>
			<xe:this.valueList><![CDATA[red
green
blue]]>
			</xe:this.valueList>
		</xe:simpleValuePicker>
	</xe:this.dataProvider>
</xe:valuePicker>

This value picker provides a choice of values for an input box from a view column.

<xp:this.data>
	<xp:dominoDocument var="document1" formName="main"></xp:dominoDocument>
</xp:this.data>
<xp:inputText id="inputText2" value="#{document1.subject}"></xp:inputText>
<xe:valuePicker id="valuePicker2" for="inputText2" dialogTitle="Select a subject">
	<xe:this.dataProvider>
		<xe:dominoViewValuePicker databaseName="Article.nsf"
			viewName="subject" labelColumn="subject">
		</xe:dominoViewValuePicker>
	</xe:this.dataProvider>
</xe:valuePicker>

Property reference

Specified here are the XPages Extension Library properties.

Note: This documentation is in progress. Not all the properties are here yet.

alt - Alternate Text

Specifies text to display when an image cannot be rendered.

Category

accessibility

Syntax

alt="text"

Usage

In Design mode, click the top tab under Properties and look for Alternate text, or click All Properties and look for alt under accessibility.

attrs - Attribute List

Adds attributes to a control. Use this property only where attributes are not available as properties.

Category

basics

Syntax

<xp:this.attrs>
	<xp:attr attributename="attributevalue" ...</xp:attr>
	...
</xp:this.attrs>

Usage

In Design mode, click All Properties and look for attrs under basics.

Attributes

You should minimally set name and value.

`loaded="true\|false"`	Creates the attribute when the page is loaded (default) or not.
`minimized="true\|false"`	Minimizes the attribute in the HTML, rendering only the name and not the value, or not (default).
`name="name"`	The name of a valid HTML attribute.
`rendered="true\|false"`	Renders (default) or does not render the attribute.
`uri="true\|false"`	Treats `value` as a URI or not (default). A URI value without a protocol (for example, `http://`) is relative to the current application. URL encoding is in effect so use `%20` for a space.
`value="value"`	The value of the attribute. Not rendered if `minimized` is true.

Usage

This property permits the inclusion of an HTML attribute for which no control property exists. Do not use attrs for attributes that can be generated through the specification of control properties.

Examples

This Edit Box adds the autofocus attribute without rendering its value.

<xp:inputText id="inputText3">
	<xp:this.attrs>
		<xp:attr name="autofocus" value="autofocus" minimized="true"></xp:attr>
	</xp:this.attrs>
</xp:inputText>

This Edit Box of type email adds the placeholder attribute.

<xp:inputText id="inputText3" type="email">
	<xp:this.attrs>
		<xp:attr name="placeholder" value="a@b.com"></xp:attr>
	</xp:this.attrs>
</xp:inputText>

binding - Control Binding

Specifies an expression that binds the control to a control property.

Category

basics

Syntax

binding="expression"

Usage

In Design mode, click All Properties and look for binding under basics.

Examples

converter - Converter

Defines data format if it is not string.

Category

data

Syntax

<xp:this.converter>
	converter
</xp:this.converter>

Where converter is one of the following:

<xp:convertNumber attributes>content</xp:convertNumber>
<xp:convertDateTime attributes>content</xp:convertDateTime>
<xp:convertMask attributes>content</xp:convertMask>
<xp:customConverter></xp:customConverter>

Usage

In Design mode, click the Data tab under Properties and look for Display type, or click All Properties and look for converter under data.

Contained properties

Converters have the following properties.

`asis="true\|false"`	(convertMask) Whether to remove data other than masked input. Defaults to false.
`currencyCode="option"`	(convertNumber) ISO 4712 currency code, for example, `USD`.
`currencySymbol="symbol"`	(convertNumber) Currency symbol.
`dateStyle="default\|short\|medium\|long\|full"`	(convertDateTime) Predefined formatting for a date value.
`groupingUsed="true\|false"`	(convertNumber) Whether grouping separators are used. Defaults to true.
`ignoreUserTimeZone="true\|false"`	(convertDateTime) Whether to ignore the user time zone in favor of the platform time zone.
`integerOnly="true\|false"`	(convertNumber) Whether the value is truncated to an integer. Defaults to false.
`loaded="true\|false"`	(convertDateTime, convertMask, convertNumber) Whether to create a tag instance at page load. Defaults to true.
`locale="option"`	(convertDateTime, convertNumber) A language and country code, for example, `en_US`.
`mask="mask"`	(convertMask) Mask characters where `#` is a digit placeholder and `?` is a letter placeholder.
`maxFractionDigits="n"`	(convertNumber) Maximum digits in the fractional part of a number.
`maxIntegerDigits="n"`	(convertNumber) Maximum digits in the integer part of a number.
`minFractionDigits="n"`	(convertNumber) Minimum digits in the fractional part of a number.
`minIntegerDigits="n"`	(convertNumber) Minimum digits in the integer part of a number.
`pattern="pattern"`	(convertDateTime, convertNumber) Pattern for formatting the converted date-time or number value.
`timeStyle="default\|short\|medium\|long\|full"`	(convertDateTime) Predefined formatting for a time value.
`timeZone="option"`	(convertDateTime) Time zone for formatted value, for example, `US/Eastern`.
`type="date\|time\|both"`	(convertDateTime) Which part or parts to format. Defaults to the date.
`type="number\|currency\|percent"`	(convertNumber) Formatting for conversion. Defaults to a plain number.

Examples

This Edit Box converts its associated data to a number.

<xp:inputText id="inputText1">
	<xp:this.converter>
		<xp:convertNumber type="number"></xp:convertNumber>
	</xp:this.converter>
</xp:inputText>

defaultValue - Default Value

Specifies an initial value for a bound data element.

Category

basics

Syntax

defaultValue="value"

Usage

In Design mode, click Data under Properties and look for Default value, or click All Properties and look for defaultValue under data.

If you specify a value not compatible with the data element, and the user does not change it, submission will fail with a type error.

Examples

This Edit Box control provides a default value.

<xp:inputText id="inputText1" value="#{document1.subject}" defaultValue="my subject">
</xp:inputText>

dir - Direction

Specifies text direction for a control that does not inherit its direction.

Category

basics

Syntax

dir="ltr|rtl"

Where ltr means left to right and rtl means right to left.

Usage

In Design mode, click All Properties and look for dir under basics.

Examples

This Input Box specifies the text direction as right to left.

<xp:inputText id="inputText1" value="#{document1.subject}"
		title="Subject edit box" autocomplete="off" dir="rtl">
</xp:inputText>

disableClientSideValidation - Disable Client Side Validation

Disables or enables client side validation.

Category

data

Syntax

disableClientSideValidation="true|false"

Usage

In Design mode, click All Properties and look for disableClientSideValidation under data.

By default, client side validation is enabled.

Examples

This Edit Box control disables client side validation.

<xp:inputText id="inputText1" value="#{document1.subject}"
	disableClientSideValidation="true">
</xp:inputText>

disabled - Disabled

Disables a control or not.

Category

basics

Syntax

disabled="true|false"

Usage

Disabled controls cannot receive focus and cannot be included in page submissions.

In Design mode, click the top tab under Properties and look for Disabled, or click All Properties and look for disabled under basics.

By default, a control is enabled.

Examples

This Edit Box control is disabled if the user is not Joe Bar.

<xp:inputText id="inputText1" value="#{document1.subject}">
	<xp:this.disabled>
		<![CDATA[#{javascript:session.getCommonUserName() != "Joe Bar"}]]>
	</xp:this.disabled>
</xp:inputText>

disableModifiedFlag - Disable Modified Flag

Disables or enables modified notifications for a control.

Category

data

Syntax

disableModifiedFlag="true|false"

Usage

In Design mode, click All Properties and look for disableModifiedFlag under data.

By default, modified notifications are enabled.

Examples

This Edit Box control disables modified notification.

<xp:inputText id="inputText1" value="#{document1.subject}"
	disableModifiedFlag="true">
</xp:inputText>

disableTheme - Disable Theme

Disables the theme or not.

Category

styling

Syntax

disableTheme="true|false"

Usage

In Design mode, click All Properties and look for disableTheme under styling.

By default, the theme is enabled.

If you compute this value, return a boolean value where true disables the theme.

disableValidators - Disable Validators

Disables execution of validators or not.

Category

basics

Syntax

disableValidators="true|false"

Usage

In Design mode, click All Properties and look for disableValidators under basics.

By default, validators are enabled.

The full JSF life cycle is processed (unlike immediate) but the validators are not executed. The converters are executed and can generate validation errors.

You might think of this as a "save as draft" mode.

dojoAttributes - Dojo Attributes

Specifies a list of Dojo attributes.

Category

dojo

Syntax

<xp:this.dojoAttributes>
	attribute ...
</xp:this.dojoAttributes>

Where attribute is:

<xp:dojoAttribute name="name"
	value="value">
</xp:dojoAttribute>

Usage

In Design mode, click the Dojo tab under Properties and look for Dojo attributes, or click All Properties and look for dojoAttributes under dojo.

You can adjust the toolbar that a rich text control renders by specifying an attribute named toolbarType with a value of lite, medium (default), or full.

You can specify a list of CSS classes to be applied when an icon is rendered by specifying an attribute named iconClass whose value specifies class names separated with spaces.

Examples

This Rich Text control renders a full toolbar.

<xp:inputRichText id="inputRichText1" value="#{document1.body}">
	<xp:this.dojoAttributes>
		<xp:dojoAttribute name="toolbarType" value="full"></xp:dojoAttribute>
	</xp:this.dojoAttributes>
</xp:inputRichText>

dojoType - Dojo Type

Specifies the default Dojo type for creating a control.

Category

dojo

Syntax

dojoType="type"

Usage

In Design mode, click the Dojo tab under Properties and look for Dojo type, or click All Properties and look for dojoType under dojo.

The CKEditor (http://ckeditor.com) is the default rich text editor for a rich text control. To change to the Dojo rich text editor, set this property to ibm.xsp.widget.layout.RichText.

Examples

This Rich Text control uses the Dojo editor.

<xp:inputRichText id="inputRichText1"
	value="#{document1.body}" dojoType="ibm.xsp.widget.layout.RichText">
</xp:inputRichText>

eventHandler - Event Handler

Specifies scripts and simple actions to be executed when a control event occurs.

Category

events

Syntax

For a server event:

<xp:eventHandler event="eventname" submit="true|false"
	refreshMode="complete|partial|norefresh" refreshId="controlid"
	immediate="true|false"	execMode="partial|full">
	<xp:this.action>
	<!--For a script:-->
		<![CDATA[#{javascript:script}]]> <!--where script is the text of the script-->
	<!--For a simple action:-->
		<xp:simpleactionname attributes>content</xp:simpleactionname>
	<!--For a simple action group:-->
	</xp:this.action>
		<xp:actionGroup condition="#{javascript:script}">
			<xp:simpleactionname attributes>content</xp:simpleactionname>
			...
			<!--Can embed simple action groups-->
		</xp:actionGroup>
	<xp:this.parameters>
		<xp:parameter name="name" value="value"></xp:parameter>
		...
	</xp:this.parameters>
</xp:eventHandler>

For a client event:

<xp:eventHandler event="eventname" submit="false">
	<xp:this.script>
	<!--For a script:-->
		<![CDATA[script]]> <!--where script is the text of the script-->
	<!--For a simple action:-->
		<xp:simpleactionname attributes>content</xp:simpleactionname>
	<!--For a simple action group:-->
		<xp:scriptGroup conditionScript="script">
			<xp:simpleactionname attributes>content</xp:simpleactionname>
			...
			<!--Can embed simple action groups-->
		</xp:scriptGroup>
	</xp:this.script>
</xp:eventHandler>

Where:

eventname specifies the name of the event, for example, onblur or onclick. In Design mode, select the appropriate event.
submit="true" causes a request to be sent to the server when the user activates the event. Any other value for submit deactivates the event. In Design mode, click No Submission to remove the event.
refreshMode is one of the following:
- complete reloads the entire page to the client after the server processes the request. In Design mode, click Full Update.
- partial reloads a selected part of the page using Asynchronous JavaScript and XML (AJAX) technology. In Design mode, click Partial Update.
- norefresh does not reload the page. In Design mode, click No Update.
refreshId applies only for refreshMode="partial" and specifies the control to be updated. In Design mode, click Select Element.
immediate="true" suppresses data processing on the server. For data processing, omit this attribute or specify anything but true. In Design mode, click Do not validate or update data.
execMode="partial" specifies a partial refresh when a code fragment is executed. For full refresh, omit this attribute or specify anything but partial. In Design mode, click Set partial execution mode.
action specifies either:
- the script where script is your code. In Design mode, click Script Editor. Enter the script in the script window or open the script dialog.
- the name of a simple action and its arguments. In Design mode, click Simple Actions. Use the various buttons and lists to create and edit simple actions.
- actionGroup which can contain simple actions and other action groups. The condition is optional.
parameters specifies the names and values of any event parameters. In Design mode, click Edit Event Parameters.

Usage

Events are actions that a user might perform such as clicking a button or removing focus from an edit box. Event handlers are actions that you (the designer) perform in response to events. An event handler can be a server script, a client script, a simple action, or a simple action group.

In Design mode with focus on the control or the page, click the Events tab. Events are treated as properties and appear on All Properties under Properties. However best practice is to not create or modify an event from All Properties.

Examples

This button onclick event creates a new document with a server script:

<xp:button value="Create document" id="button4">
	<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
		<xp:this.action>
			<![CDATA[#{javascript:var doc = database.createDocument();
			doc.replaceItemValue("subject", requestScope.subject);
			doc.save();
			requestScope.subject = null}]]>
		</xp:this.action>
	</xp:eventHandler>
</xp:button>

This button onclick event opens the page named main with a server simple action:

<xp:button id="button5" value="Main page">
	<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
		<xp:this.action>
			<xp:openPage name="/main.xsp" target="newDocument"></xp:openPage>
		</xp:this.action>
	</xp:eventHandler>
</xp:button>

This button onclick event creates a new document then opens the page named main with a simple action group:

<xp:button value="Create document" id="button6">
	<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
		<xp:this.action>
			<xp:actionGroup condition="#{javascript:true}">
				<xp:executeScript>
					<xp:this.script><![CDATA[#{javascript:var doc = database.createDocument();
					doc.replaceItemValue("subject", requestScope.subject);
					doc.save();
					requestScope.subject = null}]]>
					</xp:this.script>
				</xp:executeScript>
				<xp:openPage name="/main.xsp" target="newDocument"></xp:openPage>
			</xp:actionGroup>
		</xp:this.action>
	</xp:eventHandler>
</xp:button>

This edit box onblur event displays a message if the user text contains spaces:

<xp:inputText id="inputText2" value="#{requestScope.subject}">
	<xp:eventHandler event="onblur" submit="true" refreshMode="complete">
		<xp:this.script>
		<![CDATA[var e = window.document.getElementById("#{id:inputText2}");
		if(e.value.indexOf(" ") > -1) {
		window.alert("You should not have spaces in this value.")}]]>
		</xp:this.script>
	</xp:eventHandler>
</xp:inputText>

for - Select Target Control

Redirects focus to another control on the XPage.

Category

basics

Syntax

for="id"

Where id is the identifier of a control on the XPage.

Usage

In Design mode, click the top tab under Properties and look for Select target control, or click All Properties and look for for under basics.

When the user clicks or otherwise puts focus on this control, focus goes to the target control.

Examples

This Label control redirects focus to an Input Box control:

<xp:label
	value="#{javascript:session.getCommonUserName()}"
	id="label1" style="color:rgb(0,0,255)" for="inputText1">
</xp:label>

id - Name

Identifies a control uniquely among all controls on a page.

Category

basics

Syntax

id="name"

Usage

In Design mode, click the top tab under Properties and look for Name, or click All Properties and look for id under basics.

Most controls receive a default identifier consisting of the control tag plus an integer, for example, inputText1 and inputText2. You can change or remove the identifier although the simplest practice is to leave it as is.

Assigning an identifier that duplicates the identifier of another control on the page is illegal.

The identifier must be a static value.

Examples

This Edit Box control is named inputText1.

<xp:inputText id="inputText1" value="#{document1.subject}"></xp:inputText>

immediate - Immediate Action

Notifies listeners or converts and validates data immediately during the Apply Request Values phase rather than later during the Invoke Application or Process Validation phase.

Category

basics

Syntax

immediate="true|false"

Where true acts immediately.

Usage

In Design mode, click All Properties and look for immediate under basics or events.

By default, notification or validation is later.

Examples

This Edit Box control is validated immediately..

<xp:inputText id="inputText1" value="#{document1.subject}"
	immediate="true">
</xp:inputText>

itemDescription - Item Description

Describes a selection item.

Category

basics

Syntax

itemDescription="description"

Usage

In Source mode, select the control, click All Properties, and look for itemDescription under basics.

Examples

This Check Box Group control contains two items for selection with descriptions.

<xp:checkBoxGroup id="checkBoxGroup1" value="#{document1.fruit}">
	<xp:selectItem itemLabel="Apples" itemValue="apples"
		itemDescription="Select if apples are desired.">
	</xp:selectItem>
	<xp:selectItem itemLabel="Oranges" itemValue="oranges"></xp:selectItem>
</xp:checkBoxGroup>

itemDisabled - Item Disabled

Describes a selection item.

Category

basics

Syntax

itemDisabled="true"

Where this specification disables item selection. To enable item selection, do not specify this property.

Usage

In Source mode, select the control, click All Properties, and look for itemDisabled under basics.

A disabled selection item appears grayed out and cannot be selected.

Examples

This Check Box Group control contains two items for selection one of which is disabled conditionally.

<xp:checkBoxGroup id="checkBoxGroup1" value="#{document1.fruit}">
	<xp:selectItem itemLabel="Apples" itemValue="apples">
		<xp:this.itemDisabled>
			<![CDATA[#{javascript:if (session.getCommonUserName() == "Anonymous") return "true"}]]>
		</xp:this.itemDisabled>
	</xp:selectItem>
	<xp:selectItem itemLabel="Oranges" itemValue="oranges"></xp:selectItem>
</xp:checkBoxGroup>

itemLabel - Item Label

Displays text for a selection item.

Category

basics

Syntax

itemLabel="label"

Usage

In Design mode, select the parent control, click the Values tab under Properties, and look for Label. In Source mode, select the control, click All Properties, and look for itemLabel under basics.

Examples

This Check Box Group control contains two items for selection. The user sees "Apples" and "Oranges" next to the selection items.

<xp:checkBoxGroup id="checkBoxGroup1" value="#{document1.fruit}">
	<xp:selectItem itemLabel="Apples" itemValue="apples"></xp:selectItem>
	<xp:selectItem itemLabel="Oranges" itemValue="oranges"></xp:selectItem>
</xp:checkBoxGroup>

itemValue - Value

Specifies a value to return to the parent control when the user selects an item.

Category

data

Syntax

itemValue="value"

Usage

In Design mode, select the parent control, click the Values tab under Properties, and look for Value. In Source mode, select the control, click All Properties, and look for itemValue under data.

Examples

This Check Box Group control contains two items for selection. The value of document1.fruit is an empty string, apples, oranges, or both apples and oranges (document1.fruit must be a multi-value item) depending on what the user selects.

<xp:checkBoxGroup id="checkBoxGroup1" value="#{document1.fruit}">
	<xp:selectItem itemLabel="Apples" itemValue="apples"></xp:selectItem>
	<xp:selectItem itemLabel="Oranges" itemValue="oranges"></xp:selectItem>
</xp:checkBoxGroup>

lang - Language Code

Specifies a language and country code.

Category

basics

Syntax

lang="name"

Where name is a language and country code, for example, en_US.

Usage

In Design mode, click All Properties and look for lang under basics.

Examples

This Edit Box control provides a language and country code.

<xp:inputText id="inputText1" value="#{document1.subject}"
	lang="en_US">
</xp:inputText>

loaded - Loaded

Creates a control when the page is loaded or not.

Category

basics

Syntax

loaded="true|false"

Usage

In Design mode, click All Properties and look for loaded under basics.

By default, a control is loaded.

Examples

This Edit Box control is not created when the page is loaded.

<xp:inputText id="inputText1" value="#{document1.subject}"
	loaded="false">
</xp:inputText>

maxlength - Maximum Length

Specifies a maximum number of characters that the user can enter into a control.

Category

basics

Syntax

maxlength="n"

Where n is an integer.

Usage

In Design mode, click the top tab under Properties and look for Maximum length, or click All Properties and look for maxlength under basics.

If you compute this value, make the script Compute on Page Load and return an integer value.

Examples

This Edit Box control has a different maximum length depending on user identity.

<xp:inputText id="inputText1" value="#{document1.subject}">
	<xp:this.maxlength>
		<![CDATA[${javascript:if (session.getCommonUserName() == "anonymous") {
			return 24
		} else {
			return 80
		}}]]>
	</xp:this.maxlength>
</xp:inputText>

multipleSeparator - Multiple Values Separator

Specifies the character that separates elements of input for a control bound to a multi-value element.

Category

basics

Syntax

multipleSeparator="character"

Usage

In Design mode, click All Properties and look for multipleSeparator under basics.

Examples

This Edit Box control specifies a comma to separate multiple input elements.

<xp:inputText id="inputText3" multipleSeparator=","></xp:inputText>

multipleTrim - Multiple Trim

Removes leading and trailing white space from each element of multi-value input.

Category

basics

Syntax

multipleTrim="true|false"

Usage

In Design mode, click All Properties and look for multipleTrim under basics.

By default, white space is removed.

This property is effective only when a multiple separator is specified.

Examples

This Edit Box control leaves white space in multi-value elements.

<xp:inputText id="inputText3" multipleSeparator=","
	multipleTrim="false">
</xp:inputText>

onblur - Focus Off Script

Activates an event handler when a control loses focus.

Category

events

Syntax

<xp:eventHandler event="onblur" attributes>content</xp:eventHandler>

Usage

For detailed event handler syntax, see eventHandler - Event Handler.

Examples

This input box has a client handler for the onblur event. The client handler changes the value of the input box to upper case.

<xp:inputText id="inputText1" value="#{requestScope.status}">
	<xp:eventHandler event="onblur" submit="false">
		<xp:this.script>
			<![CDATA[var e = window.document.getElementById("#{id:inputText1}");
			e.value = e.value.toUpperCase()]]>
		</xp:this.script>
	</xp:eventHandler>
</xp:inputText>

onchange - Input Change Script

Activates an event handler when a control loses focus and its value changed since last gaining focus.

Category

events

Syntax

<xp:eventHandler event="onchange" attributes>content</xp:eventHandler>

Usage

For detailed event handler syntax, see eventHandler - Event Handler.

Examples

This input box has a client handler for the onchange event. The client handler changes the value of the input box to upper case.

<xp:inputText id="inputText1" value="#{requestScope.status}">
	<xp:eventHandler event="onchange" submit="false">
		<xp:this.script>
			<![CDATA[var e = window.document.getElementById("#{id:inputText1}");
			e.value = e.value.toUpperCase()]]>
		</xp:this.script>
	</xp:eventHandler>
</xp:inputText>

onclick - Click Script

Activates an event handler when a mouse click occurs.

Category

events

Syntax

<xp:eventHandler event="onclick" attributes>content</xp:eventHandler>

Usage

For detailed event handler syntax, see eventHandler - Event Handler.

Examples

This button has both client and server handlers for the onclick event. The client handler runs first. If the confirm statement returns true (the user responds OK), the server handler runs.

<xp:button value="Click" id="button1">
	<xp:eventHandler event="onclick" submit="true"
		refreshMode="complete">
		<xp:this.action>
			<![CDATA[#{javascript:requestScope.status = "Button clicked"}]]>
		</xp:this.action>
		<xp:this.script>
			<![CDATA[return confirm("Do you want to submit?")]]>
		</xp:this.script>
	</xp:eventHandler>
</xp:button>

ondblclick - Double Click Script

Activates an event handler when a mouse double click occurs.

Category

events

Syntax

<xp:eventHandler event="ondblclick" attributes>content</xp:eventHandler>

Usage

For detailed event handler syntax, see eventHandler - Event Handler.

Examples

This input box has both client and server handlers for the ondblclick event. The client handler runs first. If the confirm statement returns true (the user responds OK), the server handler runs.

<xp:inputText id="inputText1" value="#{requestScope.status}">
	<xp:eventHandler event="ondblclick" submit="true"
		refreshMode="complete">
		<xp:this.action>
			<![CDATA[#{javascript:requestScope.status = "Input box double clicked"}]]>
		</xp:this.action>
		<xp:this.script>
			<![CDATA[return confirm ("Do you want to submit?")]]>
		</xp:this.script>
	</xp:eventHandler>
</xp:inputText>

onfocus - Focus On Script

Activates an event handler when a control gains focus.

Category

events

Syntax

<xp:eventHandler event="onfocus" attributes>content</xp:eventHandler>

Usage

For detailed event handler syntax, see eventHandler - Event Handler.

Examples

This input box has both client and server handlers for the onfocus event. The client handler runs first. If the confirm statement returns true (the user responds OK), the server handler runs.

<xp:inputText id="inputText2">
	<xp:eventHandler event="onfocus" submit="true"
		refreshMode="complete">
		<xp:this.action>
			<![CDATA[#{javascript:requestScope.status = "Input box on focus"}]]>
		</xp:this.action>
		<xp:this.script>
			<![CDATA[return confirm("Do you want to submit?")]]>
		</xp:this.script>
	</xp:eventHandler>
</xp:inputText>

onkeydown - Key Down Script

Activates an event handler when a control receives a key press.

Category

events

Syntax

<xp:eventHandler event="onkeydown" attributes>content</xp:eventHandler>

Usage

For detailed event handler syntax, see eventHandler - Event Handler.

To identify the key, you can use the keyCode property for thisEvent. Other useful properties are altKey, ctrlKey, and shiftKey.

Examples

This button has a client handler for the onkeydown event. The client handler allows the button to accept keystrokes, adding them to an input box if they are 0 through 9 and ignoring them otherwise.

<xp:button value="Add keystroke" id="button1">
	<xp:eventHandler event="onkeydown" submit="false">
		<xp:this.script>
			<![CDATA[var e = window.document.getElementById("#{id:inputText1}");
			var k = thisEvent.keyCode;
			if (k >= 48 && k <= 57) {
				e.value = e.value + String.fromCharCode(k)
			}]]>
		</xp:this.script>
	</xp:eventHandler>
</xp:button>

onkeypress - Key Press Script

Activates an event handler when a control receives a key press and release.

Category

events

Syntax

<xp:eventHandler event="onkeypress" attributes>content</xp:eventHandler>

Usage

For detailed event handler syntax, see eventHandler - Event Handler.

Examples

This button has a client handler for the onkeypress event. The client handler sends an alert to the user.

<xp:button value="Test" id="button2">
	<xp:eventHandler event="onkeypress" submit="false">
		<xp:this.script>
			<![CDATA[window.alert("This control does not accept keystrokes.")]]>
		</xp:this.script>
	</xp:eventHandler>
</xp:button>

onkeyup - Key Up Script

Activates an event handler when a control receives a key release.

Category

events

Syntax

<xp:eventHandler event="onkeyup" attributes>content</xp:eventHandler>

Usage

For detailed event handler syntax, see eventHandler - Event Handler.

Examples

This button has a client handler for the onkeyup event. The client handler sends an alert to the user.

<xp:button value="Test" id="button2">
	<xp:eventHandler event="onkeyup" submit="false">
		<xp:this.script>
			<![CDATA[window.alert("This control does not accept keystrokes.")]]>
		</xp:this.script>
	</xp:eventHandler>
</xp:button>

onmousedown - Mouse Down Script

Activates an event handler when a control receives a mouse press.

Category

events

Syntax

<xp:eventHandler event="onmousedown" attributes>content</xp:eventHandler>

Usage

For detailed event handler syntax, see eventHandler - Event Handler.

Examples

This button has a client handler for the onmousedown event. The client handler puts a value in an input box.

<xp:button value="Test" id="button1">
	<xp:eventHandler event="onmousedown" submit="false">
		<xp:this.script>
			<![CDATA[var e = window.document.getElementById("#{id:inputText1}");
			e.value = "Mouse down"]]>
		</xp:this.script>
	</xp:eventHandler>
</xp:button>

onmousemove - Mouse Move Script

Activates an event handler when a control receives a mouse movement.

Category

events

Syntax

<xp:eventHandler event="onmousemove" attributes>content</xp:eventHandler>

Usage

For detailed event handler syntax, see eventHandler - Event Handler.

Examples

This button has client handlers for the onmousmove and onmouseout events. The onmousemove client handler alternately puts two values in an input box. the effect is that the text moves back and forth as the user moves the mouse. The onmouseout client handler clears that value.

<xp:button value="Test" id="button1">
	<xp:eventHandler event="onmousemove" submit="false">
		<xp:this.script>
			<![CDATA[var e = window.document.getElementById("#{id:inputText1}");
			if (e.value == "Mouse moving") {
				e.value = "    Mouse moving"
			} else {
				e.value = "Mouse moving"
			}]]>
		</xp:this.script>
	</xp:eventHandler>
	<xp:eventHandler event="onmouseout" submit="false">
		<xp:this.script>
			<![CDATA[var e = window.document.getElementById("#{id:inputText1}");
			e.value = null]]>
		</xp:this.script>
	</xp:eventHandler>
</xp:button>

onmouseout - Mouse Out Script

Activates an event handler when a control receives a mouse away movement.

Category

events

Syntax

<xp:eventHandler event="onmouseout" attributes>content</xp:eventHandler>

Usage

For detailed event handler syntax, see eventHandler - Event Handler.

Examples

This button has client handlers for the onmouseover and onmouseout events. The onmouseover client handler puts a value in an input box. The onmouseout client handler clears that value.

<xp:button value="Test" id="button1">
	<xp:eventHandler event="onmouseover" submit="false">
		<xp:this.script>
			<![CDATA[var e = window.document.getElementById("#{id:inputText1}");
			e.value = "Click this button to run the test"]]>
		</xp:this.script>
	</xp:eventHandler>
	<xp:eventHandler event="onmouseout" submit="false">
		<xp:this.script>
			<![CDATA[var e = window.document.getElementById("#{id:inputText1}");
			e.value = ""]]>
		</xp:this.script>
	</xp:eventHandler>
</xp:button>

onmouseover - Mouse Over Script

Activates an event handler when a control receives a mouse over movement.

Category

events

Syntax

<xp:eventHandler event="onmouseover" attributes>content</xp:eventHandler>

Usage

For detailed event handler syntax, see eventHandler - Event Handler.

Examples

This button has client handlers for the onmouseover and onmouseout events. The onmouseover client handler puts a value in an input box. The onmouseout client handler clears that value.

<xp:button value="Test" id="button1">
	<xp:eventHandler event="onmouseover" submit="false">
		<xp:this.script>
			<![CDATA[var e = window.document.getElementById("#{id:inputText1}");
			e.value = "Click this button to run the test"]]>
		</xp:this.script>
	</xp:eventHandler>
	<xp:eventHandler event="onmouseout" submit="false">
		<xp:this.script>
			<![CDATA[var e = window.document.getElementById("#{id:inputText1}");
			e.value = ""]]>
		</xp:this.script>
	</xp:eventHandler>
</xp:button>

onmouseup - Mouse Up Script

Activates an event handler when a control receives a mouse release.

Category

events

Syntax

<xp:eventHandler event="onmouseup" attributes>content</xp:eventHandler>

Usage

For detailed event handler syntax, see eventHandler - Event Handler.

Examples

This button has a client handler for the onmouseup event. The client handler puts a value in an input box.

<xp:button value="Test" id="button1">
	<xp:eventHandler event="onmouseup" submit="false">
		<xp:this.script>
			<![CDATA[var e = window.document.getElementById("#{id:inputText1}");
			e.value = "Mouse up"]]>
		</xp:this.script>
	</xp:eventHandler>
</xp:button>

readonly - Read Only Flag

Makes a control read-only or editable.

Category

data

Syntax

readonly="true|false"

Usage

In Design mode, click the top tab under Properties and look for Read-only, or click All Properties and look for readonly under basics.

By default, a control is editable.

This property affects all contained controls.

Examples

This Edit Box control is read-only if the user is not Joe Bar.

<xp:inputText id="inputText1" value="#{document1.subject}">
	<xp:this.readonly>
		<![CDATA[#{javascript:session.getCommonUserName() != "Joe Bar"}]]>
	</xp:this.readonly>
</xp:inputText>

required - Required Flag

Enforces the submission of a value for a control.

Category

basics

Syntax

required="true|false"

Usage

In Design mode, click Validation under Properties and look for Required field, or click All Properties and look for required under basics.

By default, a control is not required.

When this property is true, the user cannot submit the XPage without entering a value for the control.

Examples

This Edit Box control is required.

<xp:inputText id="inputText1" value="#{document1.subject}"
	required="true">
	<xp:this.validators>
		<xp:validateRequired message="Subject is required"></xp:validateRequired>
	</xp:this.validators>
</xp:inputText>

This Edit Box is required for a certain user.

<xp:inputText id="inputText1" value="#{document1.subject}">
	<xp:this.validators>
		<xp:validateRequired message="Subject is required"></xp:validateRequired>
	</xp:this.validators>
	<xp:this.required>
		<![CDATA[#{javascript:if (session.getCommonUserName() == "Joe Bar") {return true}}]]>
</xp:this.required></xp:inputText>

rendered - Visible

Makes a control visible or not.

Category

basics

Syntax

rendered="true|false"

Where false hides the control.

Usage

In Design mode, click the top tab under Properties and look for Visible, or click All Properties and look for rendered under basics.

By default, a control is visible.

Examples

This Edit Box control is hidden if the document bound to the page is not editable.

<xp:inputText id="inputText1" value="#{document1.subject}"
	rendered="#{javascript:return document1.isEditable()}">
</xp:inputText>

rendererType - Renderer Type

Specifies a renderer to encode and decode a control.

Category

basics

Syntax

rendererType="name"

Usage

In Design mode, click All Properties and look for rendererType under basics.

Examples

showReadonlyAsDisabled - Show disabled control for read-only

Displays a read-only control as disabled.

Category

data

Syntax

showReadonlyAsDisabled="true|false"

Usage

In Design mode, click the top tab under Properties and look for Show disabled control for read-only, or click All Properties and look for showReadonlyAsDisabled under data.

By default, a read-only control appears as text.

Examples

This Edit Box control displays as a disabled control if the user is not Joe Bar.

<xp:inputText id="inputText1" value="#{document1.subject}" showReadonlyAsDisabled="true">
	<xp:this.readonly>
		<![CDATA[#{javascript:session.getCommonUserName() != "Joe Bar"}]]>
	</xp:this.readonly>
</xp:inputText>

style - CSS Styles

Specifies font styles for a control.

Category

styling

Syntax

style="name:value;..."

Where name and value are joined by a colon to define one style element. Multiple style elements are separated by semicolons. The following table specifies the allowed names and values.

Name	Value	Examples
height	The keyword `auto` for automatic sizing A decimal number followed by `px` for pixels A decimal number followed by `em` for ems	`height:auto` `height:23.0px` `height:1.4375em`
width	The keyword `auto` for automatic sizing A decimal number followed by `px` for pixels A decimal number followed by `em` for ems A decimal number followed by `%` for a percentage of the height	`width:auto` `width:181.0px` `width:11.3125em` `width:27.0%`
font-family	The name of a font, a comma, and the keyword `serif` or `sans-serif`. Either part is optional in which case the comma is omitted.	`font-family:Baskerville` `font-family:serif` `font-family:Baskerville,serif`
font-size	An integer followed by `pt` for points.	`font-size:11pt`
color	The keyword `rgb` followed by integer values for red, green, and blue in parentheses separated by commas.	`color:rgb(0,0,255)`
font-weight	The keyword `bold`. Otherwise the weight is normal.	`font-weight:bold`
font-style	The keyword `italic`. Otherwise the style is plain.	`font-style:italic`
text-decoration	The keyword `underline`, `line-through`, or both separated by a space.	`text-decoration:underline` `text-decoration:line-through` `text-decoration:underline line-through`
text-align	The keyword `left`, `center`, `right`, or `justify`.	`text-align:center`

Usage

In Design mode, for height and width, click the top tab under Properties and look for Height and Width followed by Units, or click All Properties and look for style under styling. If you compute the value, return a number for height and width, and return px, em, %, or null for the unit. You can also change the height and width by grabbing and dragging in the editor.

For the other style specifications, click Font under Properties or click All Properties and look for style under styling. These values are static.

Examples

This Edit Box control specifies a static height and width.

<xp:inputText id="inputText1" value="#{document1.subject}"></xp:inputText style="height:3.75em;width:55.583332em">

This Edit Box control returns computed values for height and width (but static values for the unit).

<xp:inputText id="inputText1" value="#{document1.subject}">
	<xp:this.style><![CDATA[height:#{javascript:if (document1.isEditable()) {
	return 38	}}px;
	width:#{javascript:if (document1.isEditable()) {
	return 252}}px]]></xp:this.style>
</xp:inputText>

styleClass - CSS Style Classes

Specifies a list of CSS classes to be applied when a control is rendered.

Category

styling

Syntax

styleClass="name ..."

Where name identifies a class. Separate multiple names with spaces.

Usage

In Design mode, click All Properties and look for styleClass under styling.

This value must be passed through as the class attribute on generated markup.

tabindex - Tab Index

Specifies the order in which a control gets focus when the user presses the Tab key.

Category

accessibility

Syntax

tabindex="n"

Where n is an integer and 1 means first in order.

Usage

In Design mode, click the top tab under Properties and look for Tab order, or click All Properties and look for tabindex under accessibility.

By default, the tab order inherits the browser's default order.

Examples

This Edit Box control is third in tab order.

<xp:inputText id="inputText1" value="#{document1.subject}" tabindex="3"></xp:inputText>

themeId - Theme ID

Specifies a theme for setting component properties.

Category

styling

Syntax

themeId="name"

Usage

In Design mode, click All Properties and look for themeId under styling.

title - Advisory Title

Provides a screen readable title for a control.

Category

accessibility

Syntax

title="title"

Usage

In Design mode, click All Properties and look for title under accessibility.

At run time, the title displays in a box when the user hovers over the control.

Examples

This Edit Box control provides a title.

<xp:inputText id="inputText1" value="#{document1.subject}"
	title="Subject edit box">
/xp:inputText>

type - Type

Specifies the type of input control.

Category

basics

Syntax

type="text|color|date|datetime|datetime-local|month|week|time|email|number|range|search|tel|url"

Usage

In Design mode, click All Properties and look for type under basics.

This property defaults to text which is the standard Edit Box control.

You are not restricted to the types listed in the syntax. However, avoid using this property for standard XPage controls. In particular, you should not specify checkbox (Check Box control), file (File Upload control), hidden (Hidden Input control), or radio (Radio Button control).

Examples

This Edit Box of is of type email.

<xp:inputText id="inputText3" type="email">
	<xp:this.attrs>
		<xp:attr name="placeholder" value="a@b.com"></xp:attr>
	</xp:this.attrs>
</xp:inputText>

validator - Validator

Specifies a validator method called during Process Validations of MethodBinding to perform check the value of the control.

Category

data

Syntax

validator="#{expression}"

<xp:this.validator>
	<![CDATA[#{javascript:script}]]>
</xp:this.validator>

Where expression is an expression and script is a script. Use $ instead of # to compute on page load instead of dynamically.

Usage

In Design mode, click All Properties and look for validator under data.

This property must evaluate to a public method that takes FacesContext, UIComponent, and Object parameters, and returns void.

validators - Validators List

Enforces requirements for data entry.

Category

data

Syntax

<xp:this.validators>
	validator ...
</xp:this.validators>

Where validator is one of the following:

<xp:validateLength attributes>content</xp:validateLength>
<xp:validateRequired attributes>content</xp:validateRequired>

Usage

In Design mode, click the Validation tab under Properties, or click All Properties and look for validators under data.

Contained properties

Validators have the following properties which can be static or computed.

`maximum="n"` Where `n` is an integer greater than `minimum`.	(`validateLength`) The maximum number of characters that a user can enter for string input.
`message="string"`	(`validateLength`, `validateRequired`) The text of a message returned to the user when validation fails.
`minimum="n"`	(`validateLength`) The minimum number of characters that a user can enter for string input.

Examples

This Edit Box control is required.

<xp:inputText id="inputText1" value="#{document1.subject}"
	required="true">
	<xp:this.validators>
		<xp:validateRequired message="Subject is required"></xp:validateRequired>
	</xp:this.validators>
</xp:inputText>

This Edit Box has minimum and maximum lengths.

<xp:inputText id="inputText1" value="#{document1.subject}">
	<xp:this.validators>
		<xp:validateLength minimum="1" maximum="8">
			<xp:this.message>
				<![CDATA[#{javascript:return "Invalid: " + this.validators.value}]]>
			</xp:this.message>
		</xp:validateLength>
	</xp:this.validators>
</xp:inputText>

This Edit Box is required and has a maximum length.

<xp:inputText id="inputText1" value="#{document1.subject}"
	required="true">
	<xp:this.validators>
		<xp:validateLength maximum="64"
			message="Subject cannot exceed 64 characters">
		</xp:validateLength>
		<xp:validateRequired message="Subject is required"></xp:validateRequired>
	</xp:this.validators>
</xp:inputText>

value - Value

Binds a control to a data element or other value.

Category

data

Syntax

value="#{object.node1.moreNodesAsNeeded}"

value="${object.node1.moreNodesAsNeeded}"

<xp:this.value><![CDATA[#{javascript:textOfScript}]]></xp:this.value>

<xp:this.value><![CDATA[${javascript:textOfScript}]]></xp:this.value>

Where object is the name of a global object representing a data source, for example, document1 or view1, or the name of a scoped variable. Follow the object name with one or more node names to drill down to an element of data. And where textOfScript is Javascript that returns a value.

Usage

In Design mode, click the Data or Value tab under Properties and look under Bind data using, or click All Properties and look for value under data.

The general form of the XML is either:

An Expression Language statement enclosed in curly brackets preceded by a pound sign to compute dynamically or a dollar sign to compute on page load.
A CDATA section containing a JavaScript segment enclosed in curly brackets preceded by a pound sign to compute dynamically or a dollar sign to compute on page load.

For a discussion of data binding, see Binding and submitting data.

Examples

This edit box is bound to the subject field of the Domino document identified as document1.

<xp:inputText id="inputText1" value="#{document1.subject}"></xp:inputText>

This edit box is bound to the subject field of the Domino view identified as document1.

<xp:inputText id="inputText1" value="#{view1.subject}"></xp:inputText>

This edit box is bound to the sessionScope variable named scoped1.

<xp:inputText id="inputText1" value="#{sessionScope.scoped1}"></xp:inputText>

This edit box is bound to the component parameter named Parameter1.

<xp:inputText id="inputText1" value="#{componentParameters.Parameter1}"></xp:inputText>

This edit box is bound to the return value of a script. This might also be specified as a custom data. For JavaScript, you specify only the script. For custom, you specify ${javascript:text_of_script}.

<xp:inputText id="inputText1" value="#{document1.subject}"><xp:this.value><![CDATA[${javascript:document1.getItemValueString("subject")}]]&gt;</xp:this.value></xp:inputText>

Binding and submitting data

The data store for XPages is Domino. You can access the data store through Domino forms and views.

The Domino data store contains documents. A document has a universal identifier (UNID) and contains items of data.

If you are working non-programmatically outside XPages:

A Domino form defines documents for both access and display. For document creation, the user opens an empty document based on a form, enters values for fields defined on the form, and saves the document. The Domino system creates a new document, assigns item values based on the field values entered by the user, assigns a UNID, and assigns other values such as creation and modification dates. For document retrieval, the Domino system gets a document with a given UNID, fills in its associated form based on the item values, and presents the form to the user.
A Domino view accumulates and presents items from multiple documents as a table. Documents appear as rows, and items appear as column cells. A view provides access to the underlying documents. For example, a user can retrieve a document by double-clicking on its row.

If you are working non-programmatically in XPages, forms and views are used to define data sources but not the display:

Forms provide a means for controls that take values (Check Box, Check Box Group, Combo Box, File Download, File Upload, Hidden Input, Rich Text, Edit Box, Multiline Edit Box, List Box, Radio Button, Radio Button Group, Selection Item, Selection Items, and Computed Field) to access an item on a document. For XPages, the appearance of the form does not matter. What matters is the definition of each data field on the form: its name, its type, and whether is accepts multiple values.
Views provide a means for View controls to present documents. Here the appearance of the view matters as its columns will transform into the columns of an XPages View control.

Defining data sources

An XPage can contain data sources based on Domino forms and views.

The forms and views must already exist. See the Lotus Domino Designer Basic User Guide and Reference for descriptions and instructions.

The following XPage defines two data sources, one an existing form named main and the other an existing view named main. The var property assigns an identifier to access the data sources on the XPage.

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
	<xp:this.data>
		<xp:dominoDocument var="document1" formName="main"></xp:dominoDocument>
		<xp:dominoView var="view1" viewName="main"></xp:dominoView>
	</xp:this.data>
</xp:view>

Defining data sources in Design mode

The XPages interface provides the following means for defining data sources:

When you create a new XPage, a dialog offers you the chance to add a data source.
The page or container properties can be adjusted to add, remove, and modify data sources. With focus outside all controls, click the Data tab under Properties.
The data palette can be used to add a data source. Open the data palette (Window > Show Eclipse Views > Data). A dropdown list contains the names of the existing data sources for the page or container plus the entry Define Data Source for adding new ones.

Form-based data sources

Form-based data sources are used by core controls such as edit boxes to bind the control to an item of data. With focus on the control, click the Data tab under Properties to specify the data source or define a new one. See Binding data elements for a description of the binding process.

By default, a data source creates a new document when an XPage is saved:

<xp:dominoDocument var="document1" formName="main"></xp:dominoDocument>

To have the data source replace an existing document, the action property must be specified:

<xp:dominoDocument var="document1" formName="main" action="editDocument"></xp:dominoDocument>

View-based data sources

View-based data sources are used by View controls.

An existing view on the data palette displays its columns. Selecting one or more columns and dragging them to the XPage creates a new View control containing those columns. In this example, the designer drags two columns from view2 to the XPage.

<xp:this.data>
	<xp:dominoView var="view2" viewName="main"></xp:dominoView>
</xp:this.data>
<xp:viewPanel value="#{view2}" id="viewPanel2">
	<xp:this.facets>
		<xp:pager partialRefresh="true" layout="Previous Group Next"
			xp:key="headerPager" id="pager2">
		</xp:pager>
	</xp:this.facets>
	<xp:viewColumn columnName="subject" id="viewColumn3">
		<xp:this.facets>
			<xp:viewColumnHeader value="Subject" xp:key="header"
				id="viewColumnHeader3">
			</xp:viewColumnHeader>
		</xp:this.facets>
	</xp:viewColumn>
	<xp:viewColumn columnName="$1" id="viewColumn4">
		<xp:this.facets>
			<xp:viewColumnHeader value="Last modified"
				xp:key="header" id="viewColumnHeader4">
			</xp:viewColumnHeader>
		</xp:this.facets>
	</xp:viewColumn>
</xp:viewPanel>

You can create a View control by dragging it from the controls palette (Window > Show Eclipse Views > Controls). In this case, you specify the Domino view in the creation dialog and the definition of the dominoView becomes part of the viewPanel definition.

<xp:viewPanel rows="30" id="viewPanel1">
	<xp:this.facets>
	 <xp:pager partialRefresh="true" layout="Previous Group Next"
			xp:key="headerPager" id="pager1">
		</xp:pager>
	</xp:this.facets>
	<xp:this.data>
		<xp:dominoView var="view1" viewName="main"></xp:dominoView>
	</xp:this.data>
	<xp:viewColumn columnName="subject" id="viewColumn1"
		<xp:viewColumnHeader value="subject"
			id="viewColumnHeader1">
		</xp:viewColumnHeader>
	</xp:viewColumn>
	<xp:viewColumn columnName="$1" id="viewColumn2">
		<xp:viewColumnHeader value="last modified"
			id="viewColumnHeader2">
		</xp:viewColumnHeader>
	</xp:viewColumn>
</xp:viewPanel>

You can modify a view column. Put the column in focus and select the Data tab. You can change the binding or the display type. You can compute the value of the column rather than binding it to a Domino view column. You can also redefine a column by dragging an element from the data palette into the column.

To add a column, right-click the View control and specify Insert Column or Append Column. You can the specify the content of the new column by dragging from the data palette or specifying it on the dropdown menu on the Data tab.

All columns in a view must have the same view source.

Binding data elements

XPages controls can be bound to elements of data sources.

Once a Domino Document data source is defined, you have access to its items. You can bind these items to controls. This means that data entered into the control by the user is assigned to the bound item when the document is saved. Likewise when a document is retrieved, the value of an item is assigned to the bound control. In Source mode, a bound item takes the form of an EL expression starting with the name of the data source. Here an input box is bound to the subject item of the document1 data source.

<xp:inputText value="#{document1.subject}" id="inputText1"></xp:inputText>

Controls can also be bound to global variables and the return values of scripts.

Data palette

Data sources and their constituent items can be seen on the data palette (Window > Show Eclipse Views > Data). You can drag and drop data items onto the XPage. If a control already exists, dragging a data item into it binds the control to the item. For example, if you have the following unbound edit box:

<xp:inputText id="inputText1"></xp:inputText>

Dragging in the subject item from document1 yields:

<xp:inputText id="inputText1" value="#{document1.subject}"></xp:inputText>

If you drag a data item onto the XPage proper (outside all controls), an appropriate context is created. For example, dragging the subject item from document1 onto the XPage proper yields:

<xp:table>
	<xp:tr>	<xp:td>
		<xp:label value="Subject:" id="subject_Label1" for="subject1"></xp:label>
	</xp:td><xp:td>
		<xp:inputText value="#{document1.subject}" id="subject1"></xp:inputText>
	</xp:td></xp:tr>
</xp:table>

An input box is set up in column 2 of a table with a label in column 1.

The data palette contains a Select Controls dialog box toggle switch in the upper left. By default it is disabled. If you enable it (by clicking it), you are presented with a dialog when you drag a data item onto the XPage. The dialog permits you to:

Change the type of control.
Add a Button control of type Submit.
Add a Display Errors control

Data tab

A binding mechanism exists on the Data tab for controls that can be bound to Domino document items. A dropdown menu allows you to select or create the data source. Another dropdown menu allows you to select the item. Elsewhere you can verify the display type and format, and provide a default value.

In the following example, focus is on an Input Box control. The user selects the Data tab, selects document1 and number from the dropdown menus, verifies that the display type is Number, and provides a default value.

<xp:inputText id="inputText2" value="#{document1.number}" defaultValue="1">
	<xp:this.converter>
		<xp:convertNumber type="number"></xp:convertNumber>
	</xp:this.converter>
</xp:inputText>

Submitting and retrieving data

Bound data items can be submitted to their data sources as new and replacement documents.

Shown here are the simplest devices for creating, retrieving, and replacing documents. Data can also be manipulated through simple actions and the Domino library in JavaScript. Controls other than views, such as data tables, can be used to retrieve data.

Creating documents

A Button control of type Submit sends bound data to its source. By default a new document is created. The following example shows an entire page. It contains a Domino document data source (the form named main), an input box bound to an item on the data source, and a submit button. If the user enters a value in the input box and clicks the button, a document is created in the data store.

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
	<xp:this.data>
		<xp:dominoDocument var="document1" formName="main"></xp:dominoDocument>
	</xp:this.data>
	<xp:inputText id="inputText1" value="#{document1.subject}"></xp:inputText>
	<xp:br></xp:br>
	<xp:button value="submit" id="button1">
		<xp:eventHandler event="onclick" submit="true"
			refreshMode="complete" immediate="false" save="true">
		</xp:eventHandler>
	</xp:button>
	<xp:button value="cancel" id="button2"></xp:button>
</xp:view>

Clicking the submit button causes a request to be sent to the server. The server processes the request, creating the new document, and sends a response to the client. The default response is to open a fresh copy of the same XPage.

You might also place a Button control of type Cancel on the page. This button sends a request and gets the response, but the server does not process the data.

Retrieving documents

A view can be adjusted to retrieve documents:

The View property pageName specifies an XPage to open if the user selects an element that is a link. In Design mode, click on the View tab for the View control and specify At runtime, open selected document using. By default, the XPage associated with the data source's form is used.
The View Column property displayAs allows the user to use the element as a link to the underlying document. In Design mode, click on the Display tab for the View Column control and check Show values in this column as links.

The following View control opens the XPage named replace if the user clicks a link, and sets up the first column, which contains the value of the subject item, as a link. When the replace XPage opens, it is populated with any bound data from the target document in the view.

<xp:viewPanel rows="30" id="viewPanel1" pageName="/replace.xsp">
	<xp:this.facets>
	 <xp:pager partialRefresh="true" layout="Previous Group Next"
			xp:key="headerPager" id="pager1">
		</xp:pager>
	</xp:this.facets>
	<xp:this.data>
		<xp:dominoView var="view1" viewName="main"></xp:dominoView>
	</xp:this.data>
	<xp:viewColumn columnName="subject" id="viewColumn1"
		displayAs="link">
		<xp:viewColumnHeader value="subject"
			id="viewColumnHeader1">
		</xp:viewColumnHeader>
	</xp:viewColumn>
	<xp:viewColumn columnName="$1" id="viewColumn2">
		<xp:viewColumnHeader value="last modified"
			id="viewColumnHeader2">
		</xp:viewColumnHeader>
	</xp:viewColumn>
</xp:viewPanel>

Replacing documents

To modify an existing document, you first retrieve it, for example, as outlined in the previous section. The user can then make modifications on the XPage. Submission of the XPage results in a replacement when action="editDocument" is specified for the data source. You can set this on the Data tab for the XPage or other container.

The following example shows an entire XPage. It is the replace page opened as a result of clicking on a link in the View control shown in the previous section. The page contains an input box which is populated by the subject item from the retrieved document. Notice also that the XPage has a navigation rule that opens the main XPage after a submission.

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
	<xp:this.data>
		<xp:dominoDocument formName="main" var="document1" action="editDocument" />
	</xp:this.data>
	<xp:inputText id="inputText1" value="#{document1.subject}"></xp:inputText>
	<xp:br></xp:br>
	<xp:button value="submit" id="button1">
		<xp:eventHandler event="onclick" submit="true"
			refreshMode="complete" immediate="false" save="true">
		</xp:eventHandler>
	</xp:button>
	<xp:button value="cancel" id="button2">
		<xp:eventHandler event="onclick" submit="true"
			refreshMode="complete" immediate="true" save="false">
		</xp:eventHandler>
	</xp:button>
	<xp:this.navigationRules>
		<xp:navigationRule outcome="xsp-success" viewId="/main.xsp"></xp:navigationRule>
	</xp:this.navigationRules>
</xp:view>

At run time, the user clicks a link on the view on the main page. This opens and populates the replace page. The user can make changes on this page. Submitting the page causes the existing document to be replaced and the main page to be opened.

Query save agent

You can call an agent to process a document before it is saved. This agent can cancel the save operation.

Under All Properties for the page, open the pertinent data source (under data > data). For the WebQuerySaveAgent property, specify the name of an agent in the current application.

When the user makes a submission to the data source, the agent is called after field values are applied but before the document is saved. The agent can access the in-memory document through DocumentContext in the LotusScript® NotesAgentContext class or getDocumentContext in the Java AgentContext class. The agent can cancel the save operation by appending an item named SaveOptions with a value of 0 (zero). Any other value for SaveOptions results in the document being saved but without the SaveOptions item.

The following XPage calls the agent saveAgentJava before final submission on a save operation.

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

	<xp:this.data>
		<xp:dominoDocument var="document1" formName="City"
			webQuerySaveAgent="saveAgentJava">
		</xp:dominoDocument>
	</xp:this.data>
	<xp:messages id="messages1"></xp:messages>
	<xp:table>
		<xp:tr>
			<xp:td colspan="2">
				<xp:label
					value="If the field#1 is empty, then the agent will prevent it from being saved"
					id="label0"></xp:label>
			</xp:td>
		</xp:tr>
		<xp:tr>
			<xp:td>
				<xp:label value="Field1:" id="label1" for="inputText1"></xp:label>
			</xp:td>
			<xp:td>
				<xp:inputText value="#{document1.Field1}" id="inputText1"></xp:inputText>
			</xp:td>
		</xp:tr>
		<xp:tr>
			<xp:td>
				<xp:label value="Field2:" id="label2" for="inputText2">
				</xp:label>
			</xp:td>
			<xp:td>
				<xp:inputText value="#{document1.Field2}" id="inputText2"></xp:inputText>
			</xp:td>
		</xp:tr>
		<xp:tr>
			<xp:td>
				<xp:label value="Agent calculated Value:" id="label3">
				</xp:label>
			</xp:td>
			<xp:td>
				<xp:text escape="true" id="computedField2" value="#{document1.AgentValue}"></xp:text>
			</xp:td>
		</xp:tr>
		<xp:tr>
			<xp:td></xp:td>
			<xp:td>
				<xp:button value="Save" id="button1">

					<xp:eventHandler event="onclick" submit="true"
						refreshMode="complete">
						<xp:this.action>
							<xp:saveDocument var="document1"></xp:saveDocument>
						</xp:this.action>
					</xp:eventHandler>
				</xp:button>
			</xp:td>
		</xp:tr>
	</xp:table>
</xp:view>

Here is the code for saveAgentJava which conditionally cancels the save operation.

import lotus.domino.*;

public class JavaAgent extends AgentBase {

    public void NotesMain() {

      try {
          Session session = getSession();
          AgentContext agentContext = session.getAgentContext();

          // (Your code goes here)
          Document doc = agentContext.getDocumentContext();
          doc.replaceItemValue("AgentValue", "Processed by Java: "+doc.getItemValueString("Field1")+","+doc.getItemValueString("Field2"));
          
          String field1 = doc.getItemValueString("Field1");
          if(field1==null || field1.length()==0) {
        	  doc.replaceItemValue("SaveOptions", Integer.valueOf(0));
          }
          
      } catch(Exception e) {
          e.printStackTrace();
       }
   }
}

valueChangeListener - Value Change Listener

Specifies a listener method that is notified when a new value is set.

Category

data

Syntax

valueChangeListener="#{expression}"

<xp:this.valueChangeListener>
	<![CDATA[#{javascript:script}]]>
</xp:this.valueChangeListener>

Where expression is an expression and script is a script. Use $ instead of # to compute on page load instead of dynamically.

Usage

In Design mode, click All Properties and look for valueChangeListener under data.

This property must evaluate to a public method that takes a ValueChangeEvent parameter and returns void.

valueChangeListeners - Value change listeners

Specifies a collection of value change listeners.

Category

data

Syntax

valueChangeListener="#{expression}"

<xp:this.valueChangeListeners>
	<xp:valueChangeListener type="listener"></xp:valueChangeListener>
	...
</xp:this.valueChangeListeners>

Where listener is one value change listener.

Usage

In Design mode, click All Properties and look for valueChangeListeners under data.

End of document

Notices

This information was developed for products and services offered in the U.S.A.

IBM may not offer the products, services, or features discussed in this document in other countries. Consult your local IBM representative for information on the products and services currently available in your area. Any reference to an IBM product, program, or service is not intended to state or imply that only that IBM product, program, or service may be used. Any functionally equivalent product, program, or service that does not infringe any IBM intellectual property right may be used instead. However, it is the user's responsibility to evaluate and verify the operation of any non-IBM product, program, or service.

IBM may have patents or pending patent applications covering subject matter described in this document. The furnishing of this document does not grant you any license to these patents. You can send license inquiries, in writing, to:

IBM Director of Licensing
IBM Corporation
North Castle Drive
Armonk, NY 10504-1785
U.S.A.

For license inquiries regarding double-byte (DBCS) information, contact the IBM Intellectual Property Department in your country or send inquiries, in writing, to:

Intellectual Property Licensing
Legal and Intellectual Property Law
IBM Japan Ltd.
1623-14, Shimotsuruma, Yamato-shi
Kanagawa 242-8502 Japan

The following paragraph does not apply to the United Kingdom or any other country where such provisions are inconsistent with local law: INTERNATIONAL BUSINESS MACHINES CORPORATION PROVIDES THIS PUBLICATION "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF NON-INFRINGEMENT, MERCHANTABILITY OR FITNESS FOR A PARTICULAR PURPOSE. Some states do not allow disclaimer of express or implied warranties in certain transactions, therefore, this statement may not apply to you.

This information could include technical inaccuracies or typographical errors. Changes are periodically made to the information herein; these changes will be incorporated in new editions of the publication. IBM may make improvements and/or changes in the product(s) and/or the program(s) described in this publication at any time without notice.

Any references in this information to non-IBM Web sites are provided for convenience only and do not in any manner serve as an endorsement of those Web sites. The materials at those Web sites are not part of the materials for this IBM product and use of those Web sites is at your own risk.

IBM may use or distribute any of the information you supply in any way it believes appropriate without incurring any obligation to you.

Licensees of this program who wish to have information about it for the purpose of enabling: (i) the exchange of information between independently created programs and other programs (including this one) and (ii) the mutual use of the information which has been exchanged, should contact:

IBM Corporation
5 Technology Park Dr.
Westford Technology Park
Westford, MA 01886
U.S.A.

Such information may be available, subject to appropriate terms and conditions, including in some cases, payment of a fee.

The licensed program described in this document and all licensed material available for it are provided by IBM under terms of the IBM Customer Agreement, IBM International Program License Agreement or any equivalent agreement between us.

Information concerning non-IBM products was obtained from the suppliers of those products, their published announcements or other publicly available sources. IBM has not tested those products and cannot confirm the accuracy of performance, compatibility or any other claims related to non-IBM products. Questions on the capabilities of non-IBM products should be addressed to the suppliers of those products.

This information can contain sample application programs in source language, which illustrate programming techniques on various operating platforms. You may copy, modify, and distribute these sample programs in any form without payment to IBM, for the purposes of developing, using, marketing or distributing application programs conforming to the application programming interface for the operating platform for which the sample programs are written. These examples have not been thoroughly tested under all conditions. IBM, therefore, cannot guarantee or imply reliability, serviceability, or function of these programs. The sample programs are provided "AS IS", without warranty of any kind. IBM shall not be liable for any damages arising out of your use of the sample programs.

Each copy or any portion of these sample programs or any derivative work, must include a copyright notice as follows:

Trademarks

IBM, the IBM logo, and ibm.com are trademarks or registered trademarks of International Business Machines Corp., registered in many jurisdictions worldwide. Other product and service names might be trademarks of IBM or other companies. A current list of IBM trademarks is available on the Web at "Copyright and trademark information" at www.ibm.com/legal/copytrade.shtml.