XPages Extension Library Lab

Lance Spellman | President, WorkFlow Studios

Objective

Build an event registration system with XPages Extension Library

Use new capabilities provided by the Extension Library for:Layout

Page Navigation

Login/Logout

Search

User information

Event Registration Demo and Setup

This application allows a team to setup events, such as this Xpages Workshop, and allow people on the web to register for them

On the Domino server, there is a database named events.nsf

Events is the application interface and where event data will be capturedEvents.nsf has a Registration form in it and nothing else

On the Domino server, there is a database named users.nsf

Users is a copy of a Public Name and Address Book, and is registered in Directory Assistance as a secondary address book

Anyone listed in users will be able to login to the server and use the Events application

Begin Lab

Open events.nsf

Go to XPages section

Add New XPage named Home, save and close

Enable Extension Library

Open Application Properties

Go to Advanced Tab

Enable the Extension Library by clicking the checkmark for:com.ibm.xsp.extlib.library

Set Theme to oneuiv2

Go to the Xpages tab of Application Properties

In the Application Theme field, type oneuiv2

Set Error Page to Display Runtime Error

Go to the Errors and Timeouts section

Checkmark the box for:Display Xpages runtime error page

Set Home as Launch Page

Go to the Launch tab of Application Properties

In the Web Browser Launch section, set launch to:Open Designated Xpage

Set Xpage toHome

Preview Application Home Page

http://127.0.0.1/events.nsf

home.xsp page should launchIf not, check previous steps for accuracy

Check security settings in server document for Xpages field

Restart http

Check that events.nsf is in the Server's data directory...not the Client's data dir

Create Layout Custom Control

Go to Custom Controls section

Create new Custom Control called Layout

Make habit of filling in the Comment field

Add Application Layout Extlib Control

Go to the Extension Library panel

Select Application Layout

Drag on the Layout Custom Control

Set Application Layout Configuration

Click on the Application Layout control

Go to the All Properties tab

Select Other and configuration

Click in the Value column and click the selector

Choose xe:applicationConfiguration

Save Layout control and add to Home

Save the Layout custom control

Open the Home Xpage

Add the Layout control to Home by clicking and dragging

Save Home and Preview

Save the Home Xpage

Preview in browser by going to:http://127.0.0.1/events.nsf

Create events theme

Create new theme named events

Extend the oneuiv2 theme

In application properties, change the theme to events

Create and add events.css resource

Create a new Stylesheet called events.css

Add events.css as a resource in the events theme

Replace default Lotus logo

Open events.css

Create new class to overwrite .lotusui .lotusLogoNew logo image is already in Resources

Preview Home Page for new Logo

http://127.0.0.1/events.nsf

Understanding Editable Areas

When an Editable Area is added to a custom control, it creates a placeholder called a callback.

The callback automatically generates an id for itself, usually called facet_1 for the first Editable Area on the page

Try creating a new custom control called test and add an Editable Area to it

Look at source

Using the Editable Area

When the custom control containing the Editable Area is put on an XPage, it allows the developer to put arbitrary content into that spotThink of it as a placeholder the control developer has set aside for the Xpage developer

Example: For left-hand column of a layout, I, as the layout builder, want to define a space for a navigator. But I don't want to arbitrarily decide what that navigator will be or what it will contain.

By putting an Editable Area in the layout, when the layout control is used on an Xpage, the Xpage developer can decide what kind of navigator he wants to put there and simply drag it into the Editable Area placeholder.

Create a new Xpage called UseTest

Drag the test custom control on to the XPage

Add Label to the Editable Area

The green dot in the Editable Area indicates the target where content can be added

Drag a label control over the green dot

A blinking cursor should appear between the gray facet_1 box and the green dot indicating it's going to put the label there. Drop the label control

After the drop, the label should appear within the dotted line box boundaries of the editable area as shown below

Delete the Test Custom Control and XPage

The Custom Control and XPage were for isolated demonstration purposes, they aren't needed in the app

Applying Editable Area Knowledge

Open the custom control named layout we created earlier

It contains the Application Layout extension control we added

The Application Layout control contains 3 editable areasLeftColumn

OneUIMainAreaCallback (no facetName)

RightColumn

The Application Layout Control

If the Application Layout control was on an Xpage, the developer could add a page or view navigator in the LeftColumn Editable Area

But what if the application will use the same navigation for every Xpage?

It makes sense to add the navigation at the layout custom control level

Then every Xpage that uses the layout control will already have the navigator built-in

We also would like to allow the Xpage developer to append additional content into the LeftColumn so we'll make sure there's still an Editable Area available at the Xpage level

We'll create the Navigator in its own custom control, and when we're done, add it to the layout custom control

First, we need to update the code in the layout custom control

Copy Code Snippets #2 to layout

code_snippets.txt #2

What's That Code Do?

The tag tells the Application Layout control that we are going to take advantage of the Editable Areas it had defined

The panel with xp:key=LeftColumn identifies that this content is going in the LeftColumn facet defined in the Application Layout control

Within the panel, we can now put a custom control (like a navigator)

Also within the panel, we define our own Editable Area called LeftColumn that will be passed on to the Xpage using this custom controlThat gives the Xpage developer to ALSO add a control at the Xpage level

The same thing applies for the RightColumn facet

The callback for OneUIMainAreaCallback is special. Because the Application Layout control did not specify a facetName property for that Editable Area, it falls outside the scope of the tag

It allows for multiple controls to be loaded inside of it

By adding the callback to layout we pass on the ability to use it at the Xpage level

Build site navigator

Create new custom control

Name it main_navigator

This will appear in the left-hand column of the layout manager and provide navigation to all the site areas

Drag Page Navigator Control to the Canvas

In the control pallete, go to the Extended Library controls

Find and click on the Page Navigator control

Drag it on to the screen

How Page Navigator Works

A Page Navigator is a container that is designed to present a list of links that can be clicked to change pages

It has a default appearance for background and displaying links in a vertical list

The Page Navigator works by adding treeNodes into the container

Go to the PageNavigator, All Properties tab and click the icon next to the treeNodes attribute

Add Page Tree Node for Events

The main page for the site will be a listing of Events

The Page Navigator should provide a link to this page

After clicking the selector next to treeNodes, a list of node types is displayed

Click pageTreeNode

Fill in the PageTreeNode Properties

Enter Events for both the label and the page

This will display Events as the link in the Page Navigator

When clicked, it will open the XPage named Events

Add Page Navigator to the Layout

Now that we have at least 1 item in the navigator, let's add it to the layout custom control

Open the layout custom control

Go to source mode

Find the panel with xp:key=LeftColumn

Drag the main_navigator custom control as the top element inside the panel

Preview the Home Page for Navigator

Green box with blue Events link should now appear

When clicked, it generates an error because we haven't created an Events Xpage yet

Create Events XPage

Create New Xpage

Name it Events

Drag the layout custom control on to it

Save and preview Home page again

Click Events link now

Notice how navigator changes link to indicate the currents page

Add Home Page Link to Navigator

Open the main_navigator custom control

Go to All Properties, treeNodes

Add new pageTreeNode

Fill in pageTreeNode Attributes

For label and page, add Home value

Save main_navigator

Preview Home and Events Pages

See the Home entry added to the navigator

See how the active link changes when going between pages

The Order's Wrong...how to fix

In main_navigator, go to source mode

See the 2 pageTreeNodes

Copy and paste the Home page so that it's the first of the two listed

Save and preview

Add View List and Dynamic View to Events

When the Events page is clicked, show a default view and ComboBox for switching to different views

Create new custom control called view_events

Drag a panel control on to the page, name it panel_view_events

Go to the data tab for the panel and create a view datasource

Compute the View Name Property

For the datasource, click the diamond next to view name and enter a script for computing the value

Code for View Name Property

We'll use a viewScope variable to determine what view to show

We'll use a ComboBox to set viewScope.viewName

If viewScope.viewName hasn't been set, choose a default view to display

Copy the code from code_snippets.txt #3

code_snippets.txt #3

Add Dynamic View Panel

From the Extension Library controls, drag a Dynamic View Panel into panel_view_events

On the data tab for the Dynamic View Panel, select the view1 datasource defined in panel_view_events

Leave bind to ComboBox blank

Whenever the panel's datasource formula changes, the Dynamic View Panel will reflect it

Add View Picker ComboBox

Drag a ComboBox into the panel_view_events panel, above the Dynamic View Panel

Name it viewPicker

Enter a return after it so the Dynamic View Panel is on the next line

Bind ComboBox to viewScope.viewName

In the data tab for viewPicker, select:Advanced

Use: Scoped Variable

Parameter: View Scope

Variable Name: viewName

Set ComboBox Selection Values

On the Values tab, add the following items:By Date

By Location

By Name

Set values to the aliases of those views

Add Label in front of ComboBox

Drag a label control before the ComboBox

Change the label to Events Views:

When complete, save and preview the Events page again

Completing the Application Configuration

We did the initial setup for Application Configuration in our layout control

There are additional items to be setup:Banner Application Links (links to other sites, like company intranet)

Banner Utility Links (login/logout, register, current user, etc...)

Title Bar Tabs (My Profile)

Search Bar

Place Bar Name

Place Bar Actions

Add Banner Application Links

In the layout custom control, select the Application Layout control

Go to All Properties tab

Expand the configuration section

Click the bannerApplicationLinks selector

Choose basicLeafNode

Add IBM link

Configure the basicLeafNode to provide an IBM linkHref: http://www.ibm.com

Label: IBM

Preview the Home or Events page

Adding Banner Utility Links

In the Utility Links area of the Banner, we want to addCurrent User

Login (if not logged in)

Logout (if logged in)

In the configuration section, click the selector for bannerUtilityLinks

Add a userTreeNode

Add a Login Link

In the configuration section, click the selector for bannerUtilityLinks

Add a loginTreeNode

Save and preview

Nothing happens, why? It's smart and knows you're logged in already

Add a logout link

In the configuration section, click the selector for bannerUtilityLinks

Add a basicLeafNodeThere is no custom node for logout, we have to create it

Label: Logout

Href: provides the link that should be executed to logout

Rendered: determines whether the logout link should be visible or not

For href use the code from code_snippets.txt #4

For rendered use the code from code_snippets.txt #5We can only logout from a session authentication based login

Check to see if user has a login cookie, and if so, render the logout link

code_snippets.txt #4

Change to Session Authentication

Open Domino Administrator Client

Select the Configuration tab

Select the Xpages/Lotus server if not already selected

Expand Web and click Web Server Configurations

In the view, open Domino Server

Go to Edit mode

Go to Internet Protocols tab, Domino Web Engine sub-tab

Change Session Authentication to Single Server

Go to Security tab

In the Access Server field add, LocalDomainServers

Save and close

At the server console, tell http restart

Restart browser

Go to events.nsf and login with Domino Admin : passw0rd

Try out Logout Link

Once logged in as Domino Admin, the logout link should be visible

Click Logout link, remain on same page

Username is now Anonymous and Login link available

Login takes to form based authentication

On successful login, redirected to Home page for app

Username appears along with Logout link

Enable Placebar Features

In Application Layout configuration, go to placeBarName

Enter Upcoming Events

Preview the Home page

Turn on SearchBar

In Application Layout configuration, click on selector next to searchBarInactiveText: Search...

PageName: Search

QueryParam: searchText

This tells the application to enable the search bar, put Search... as the default value in the input box which will be cleared when user clicks inside it

When the user clicks search button, the Search Xpage (not built yet) will be returned and a queryString parameter of searchText= will be provided to that page with the value of what was input into the field

Create a Search XPage

Create new Xpage named Search

Drag a label control on to the page, give it the label, Search String:

Drag a computed field control on to the page

Compute the value withparamValues.get('searchText')[0]

This will give you the string that was entered by the user to search on

Save and try it out by going to Home page and enter a search term

Add a View to the Search Page

Now that we know we've got functionality, let's delete the label and computed field on the Search Xpage

Add the layout custom control

Drag a view control into the content area of the page

Choose Events By Location as the view to display

Go to the Data tab of the view control

For Search in view results: compute the value to:paramValues.get('searchText')[0]

Try Search now

If you search for Austin, the search page will show the view with 1 entry in it

If you search for Dallas, a blank view will be returned

Other Things You Could Do

Add Tabs to the layout in the Title Bar

Add Action buttons in the Place Bar

Add content to the RightColumn of the layout

Add footer and legal content to the layout

It's all there in the Application Configuration

Questions?

Resources

Almost all the information today is coming from the project at openntf.orghttp://extlib.openntf.org/

Some of the videos surfaced there are also making their way into the Domino wiki media galleryhttp://www-10.lotus.com/ldd/ddwiki.nsf/xpViewCategories.xsp?lookupName=Media%20gallery

Legal Disclaimers

WorkFlow Studios 2010. All Rights Reserved.

The information contained in this publication is provided for informational purposes only. While efforts were made to verify the completeness and accuracy of the information contained in this publication, it is provided AS IS without warranty of any kind, express or implied. WorkFlow Studios shall not be responsible for any damages arising out of the use of, or otherwise related to, this publication or any other materials. Nothing contained in this publication is intended to, nor shall have the effect of, creating any warranties or representations from WorkFlow Studios or its suppliers or licensors, or altering the terms and conditions of the applicable license agreement governing the use of IBM software.

References in this presentation to IBM products, programs, or services do not imply that they will be available in all countries in which IBM operates. Product release dates and/or capabilities referenced in this presentation may change at any time at IBMs sole discretion based on market opportunities or other factors, and are not intended to be a commitment to future product or feature availability in any way. Nothing contained in these materials is intended to, nor shall have the effect of, stating or implying that any activities undertaken by you will result in any specific sales, revenue growth or other results.

IBM, the IBM logo, Lotus, Lotus Notes, Notes, Domino and Lotusphere are trademarks of International Business Machines Corporation in the United States, other countries, or both.

Java and all Java-based trademarks are trademarks of Sun Microsystems, Inc. in the United States, other countries, or both.

Dissemination or reuse of this presentation is allowed provided full attribution to WorkFlow Studios is made by retaining the title slide and this legal disclaimer slide in their original form.

Click to edit the title text format

Click to edit the title

Click to edit the outline text formatSecond Outline LevelThird Outline Level