Extension Library Introduction A set of advanced and optimized, controls and other Xpage assets Provide a rich UI to web application through a set of a new Web 2.0 controls/behaviors. Integrates within domino designer. Work on both client and server, and provide mobile support. Fully implemented using the Xpage extensibility API. The controls include an application layout object, an improved dialog, pickers, in place

forms, Dojo components, dynamic content, and much more.

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

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.

1. Open Domino Designer.2. In File > Preferences for Domino Designer, check Enable Eclipse plug-in

install if it is not already checked.

3. Click File > Application > Install to open the Install/Update dialog.4. Select Search for new features to install and click Next.

5. 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.

6. Reply to any questions.a. Select all features if asked.b. Accept the feature license.c. Select Install this plug-in for each unsigned plug-in.

7. Restart Domino Designer and Notes after the update completes.8. Click Help > About IBM Lotus Domino Designer. Click Plug-in Details. Ensure that the

Extended Component Library for XPages plug-ins are present.

9. 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.

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.

1. 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.

2. Start or restart the Domino server, or stop (tell http quit) and start (load http) the web server.

3. 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

Installation of Extension Library in Note Client without Domino Designer client.

For a Notes install, add the following line to   Lotus\Notes\framework\rcp\plugin_customization.ini

com.ibm.notes.branding/enable.update.ui=true

Save and close file and restart Lotus Notes Client.You should now find the install menu option available in Lotus Notes.Select File ->Application ->Install

Add the Extension Library update site zip file ,For more help please see the above.Reply to the questions and restart Client

Open the application that uses the Extension Library and it works now properly

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.

Name DescriptionRemote Services Exposes a remote service.REST Service Exposes a REST service.

Dojo Form controls

The Dojo Form controls mimic components from the Dojo toolkit.

Name DescriptionDojo Button Activates an event handlerDojo Check Box Accepts a check box as true or false.Dojo Combo Box Accepts a selected value.Dojo Currency Text Box

Accepts currency input.

Dojo Date Text Box Accepts a date value.Image Select Accepts a value based on a selected image.Link Select Accepts a value based on a selected link.List Text Box Accepts a list of valuesName Text Box Accepts a list of names.

Dojo Filtering Select Accepts a selected and filtered value.Dojo Horizontal Slider

Accepts a numeric value from a horizontal slider.

Dojo Number Spinner

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

Dojo Number Text Box

Accepts a numeric value.

Dojo Radio Button Accepts the value of a selected radio button.Dojo Simple Text Area

Accepts text input on multiple lines.

Dojo Slider Rule Adds a rule (hash marks) for a horizontal or vertical slider.Dojo Slider Rule Labels

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

Dojo Text Area Accepts text input on multiple lines.Dojo Text Box Accepts text input on one line.Dojo Time Text Box Accepts a time value.Dojo Toggle Button Toggles between a checked value and an unchecked value.Dojo Validation Text Box

Accepts a validated value.

Dojo Vertical Slider Accepts a numeric value from a vertical slider.

Dojo Grid controls

The Dojo Grid controls present information in rows and columns.

Name Description

Dojo Data Grid Defines a grid of rows and columns.

Dojo Data Grid Column

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

Dojo Data Grid Row Defines multiple rows.

Dojo Layout controls

The Dojo Layout controls mimic components from the Dojo toolkit.

Accordion Container

Contains panes that expand to reveal their content.

Accordion Pane Provides content for one pane in an accordion container.Border Container Contains panes situated at various regions within the container.Border Pane Provides content for one pane in a border container.

Dojo Content Pane Provides content for a container.Stack Container Contains panes stacked on top of each other.Stack Pane Provides content for one pane in a stack container.Tab Container Contains panes on tabs.Tab Pane Provides content for one pane in a tab container.

Extension Library controls

Extension Library controls extend the capabilities of the core controls

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.

Application Layout A control that lays out an XPages application. A control that provides layout and positioning for areas in an XPages application.

Bread Crumbs Bread Crumbs control is used for indication of a current page location in regards to an application home page.

Data View Displays data as a view.Dialog Contains a modal dialog.Dialog Button Bar Contains buttons in a dialog.Drop Down Button A drop down button control.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.

Dynamic Content Contains dynamic content.Dynamic View Panel

A view panel that dynamically creates its columns based on the view definition.

Firebug Lite Inserts Firebug Lite, a debugging tool into the current page.Form Layout Column

Form layout column control.

Form Layout Row Form layout row control.Form Table Displaying a form of input controls with rows containing labels and error fields,

an overall title and an area at the bottom for the Save and Cancel actions.Forum Post Displaying the content of a user post.Forum View A high level control that renders an hierarchical view.Inline List Container A control that displays its children within an inline list (on one row with

separators between the items).In Place Form Contains a dynamic form.Keep Session Alive Keep the session server alive until the browser page is closed.List Container A list of links control.List of Links A control that displays its children within a basic HTML list.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.

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.

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

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.

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.

Pager Add Rows Adds rows to an iterator control.Pager Show/Hide Details

Shows and hides detail areas of an iterator control.

Pager Expand/Collapse

Expands or collapses all the rows of an iterator control.

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

Pager Sizes Allows selection of the number of rows displayed by an iterator control.Popup Menu 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.

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.

Switch Displays alternate panels depending on key values.Tag Cloud Control that displays a tag cloud.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.Tooltip Displays data when another control is in focus.Tooltip Dialog Displays data when another control is in focus. Allows activation of client-side

events when the data is shown and hidden.Value Picker Displays a modal dialog containing value choices. Applies selected values to an

associated control.Widget Container A container that displays a widget (in the larger sense).

iNotes controls

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

iCal Store Data Store for iCal Store.iNotes Calendar A control that displays an iNotes calendar.

iNotes ListView A control that displays an iNotes ListView.ListView Column Defines the view column as design structure.Notes Calendar Store Data Store for Notes Calendar View.Notes List View Design

Design Store for Notes List View.

Notes List View Store Data Store for Notes List View.

Mobile Apps controls

The Mobile Apps controls support mobile applications.

Mobile Page Contains one mobile page. Only one page displays at a time.Page Heading Provides header information and basic navigation.Static line item Provides a way to link to other mobile pages.Rounded List This control displays a rectangle with rounded corners.Mobile Switch Works as an on/off switch with behavior like a checkbox.Single Page Application

Contains a mobile application. Controls its layout and configuration.

Tab Bar Presents a banner upon which buttons can be placed.Tab Bar Button Presents a banner upon which buttons can be placed.

Simple actions

The XPages Extension Library contains a number of simple actions.

Add Rows Dynamically adds rows to a data iterator.Alert Displays a message in a modal dialog.Change Dynamic Content

Changes dynamic content so that a specified facet displays.

Dojo Animation Applies animation to a control.Dojo Fade In Effect Causes a target control to fade in.Dojo Fade Out Effect Causes a target control to fade out.Dojo Slide To Effect Causes a target control to slide to a specified position.Dojo Wipe In Effect Causes a target control to be wiped in.Dojo Wipe Out Effect Causes a target control to be wiped out.Move To Mobile Page Replaces the current page using a slick web movement.

Some uses….

Application Exercise

Demo 1

Complete……………!!!!

Demo 2: Mini Deep Dive

Page Navigator

Dynamic Content

Complete……….!!!

Demo 3

Help

1) http://www.youtube.com/watch?v=nGIFavVTw6s&feature=related 2) http://www-10.lotus.com/ldd/ddwiki.nsf/dx/

Master_Table_of_Contents_for_XPages_Extensibility_APIs_Developer_Guide