XPages Workshop: Concepts And Exercises

IBM Software Group

®

XPages Workshop, May 5th – 6th 2009

Domino XPages Workshop

IBM Software Group

* 2XPages Workshop – Paris, 5&6 May 2009

Agenda

Workshop Introduction What is XPages ?

Domino Discussion template (demo) Working with XPages in IBM Lotus Domino Designer 8.5

Introduction with Designer 8.5 interface and XPage element Exercise 1 & 2

The profile application Other Exercises (3 => 26)

Jacobs Engineering - Real Customer Scenario Development Model Deployment/Co-existence Environment Reuse of existing business logic

XPages Futures... XPages on the client.. Write once, run on Web and Client Composite Application integration

IBM Software Group


Materials

Lotus Domino server Lotus Notes & Domino Designer 8.5

Folders : Starting database = profile00.nsf

IBM Software Group


What is XPages ?Présentation

Microsoft PowerPoint

IBM Software Group


Domino discussion database

IBM Software Group


Introduction Exercises

IBM Software Group


Working with XPages in IBM Lotus Domino Designer 8.5 (1)

IBM Software Group



XPages must be compiled before the page is viewed in the broser

HTTP Error 404 or old Xpages …

Compilation errors

IBM Software Group



Ctrl (shift) Alt and direction keys to resize controls

Previewing xpage : Domino Server

• Security : XPages = agents

Local Domino Designer (localhost)

• Anonymous (must be in LCA)

• Project saved & builded

Not for custom controls

IBM Software Group


Exercise 1 : Hello World !

Create an application Create a custom control Create a xpage and include the custom control

IBM Software Group


Exercise 2

Hello World updated Label and Editbox to type your name Button to change the Label text and hide the editbox Partial refresh

Tip : getComponent

• Global function to access the objects backing up UI controls

• Methods setValue() & getValue() New property definition iknowyou

• To hide the editbox

• compositeData object to access custom properties

− compositeData.iknowyou

IBM Software Group


The profile application

IBM Software Group


The Profiles Application

What is it? An XPages application that manages user profiles information.

Main features: Entry page allows a search to be submitted to retrieve profiles

information based on that search:

• A simple “by name” search Results page lists the retrieved results in a tabular format:

• Drill-down on a selected result will navigate into that profile Profile information page displays read-only information about the

selected profile

Edit profile page allows a user to edit their own profile

Create profile page allows a new user to fill out their profile

IBM Software Group


IBM Software Group


IBM Software Group


IBM Software Group


The starting database

Contains “classic” Domino elements Forms

Profile

Keyword

Friend

agentDemo View

Profiles

keywordLookup

Friends

agentDemos Some documents

TimeZones, Countries

…

IBM Software Group


Exercise 3

Update : start with the beginning database

Creation of a custom control : container Creation of 3 XPages : home, results, profile Import resources (style sheet and images) Map styles to panels

Tips Use outline to retriew or reorganize elements (nested panels)

IBM Software Group


Editable Areas (callback controls)

Editable areas are regions that users can modify when the custom control is placed on an XPage. All other regions that fall outside of editable areas are read-only and cannot be modified.

Have unique facet names (determines how UI controls get displayed in the editable area at run time). Facet names can be static or computed.

Static : you can add only one UI control to the editable area. If you want to add more than one UI control, you can add a container control such as a table and add UI controls to it.

Computed, you can determine which UI controls are displayed dynamically.

Editable areas require you to add UI controls and set properties for them after you add the custom control to an XPage.

IBM Software Group


Exercise 4

Adding tabbed control Adding an editable area 3 new custom controls : searchForm, profilForm, searchResults

Tips : Clic under the tab to see and update tab properties (or outline)

Or right-click on the tab and select « Select Active Tab Contents »

IBM Software Group


Working with data in XPages (1)

Define a data source on the xpage and then drag&drop fields onto the xpage

• Control dialog box enabled or disable Define a data source from the Data panel

and then drag&drop data on controls

IBM Software Group


Working with data in XPages (2)

Data binding Simple data : a field

JavaScript : a document, a collection …

Advanced : a variable … Tip

Watch the data source name

IBM Software Group


Exercise 5

Optional, included in the starting database

Creation of the Notes profile form (and data)

Creation of Notes profiles view

Creation of the profile XPage

Tips Property «

computeWithForm » to included computed fields in the document (ex.21)

Use outline to reorder fields in table

IBM Software Group


Simple actions

Basic actions Confirm action, execute script, open page, save data sources

Document actions Change doc mode, create response document, delete (selected)

document, modify field, save doc

IBM Software Group


Exercise 6

Complete the profile custom control

Style

Buttons Save, Delete, Cancel, Edit

• Add also hide properties to Save button

Tips : Use the script editor to

choose properties or methods

• document1 is the datasource of the form

IBM Software Group


@Functions and lists

Most of old @Functions are implemented Can be mixted with JavaScript code

Changes : Case sensitive

Separator , instead of ;

Lists : Fixed values (or import a list)

Formula (@DbLookup & @DbColumn)

Also used in type ahead (suggestions)

IBM Software Group


Exercise 7

Optional, included in the starting database Adding « setup » forms, views and documents (for lists)

• keywords form, keywordLookup view

Customize the profil custom control Add type-ahead and suggestion on country field

Add values to Gender combobox

Add values to TimeZones combobox

Tips : Use the script editor to choose functions

IBM Software Group


View control

Linked to a Domino view Automatic pager (different styles)

Rows / page, category filter, keys …

Columns properties Sortable, checkbox, content type,

links,

Tips Watch the data source name

“var” properties defines the request-scope attribute to access to a row data

IBM Software Group


Exercise 8

Add a simple view control

IBM Software Group


Global objects

Share values across pages Can bind control to a scoped

variable Use objects with properties and

methods requestScope.put("hello", "Hello

request")

requestScope.get("hello")

requestScope applicationScope sessionScope

IBM Software Group


Exercise 9

In the searchForm control Add a « New profile » button

Add profile search In the searchResults control

Add a computed field (search criteria)

Update the view selection

Tips A sessionScope variable is

used to pass search criteria from one form to another

Can also bind the search editbox to the sessionScope

IBM Software Group


Data validation (1)

« Required field » + additionnal validation properties

« Classics » events onBlur, onChange, onClick …

Field Validators Regular expression

Scripted expression

IBM Software Group


Data validation (2)

Client side or server side validation Error message popup or « Diplay

error(s) » control

In server properties, application properties or xpage / control properties

Tips : use a generic library to check specific fields

Optional Exercise 12

IBM Software Group


Exercise 10

Add validation to search criteria

Optional (check firstName <> lastName)

IBM Software Group


Exercise 11

Data validation tests

Update : in the profileSearch custom control

disableclientSideValidation = false for field FirstName

Add a Display Error control for field LastName and place disableclientSideValidation to true

DOB must be less than « now » and place disableclientSideValidation to true

Add a Display Errors control before buttons

IBM Software Group


Exercise 12 (optional)

Data validation with a generic JavaScript library Tests on the existing validationTest XPage

IBM Software Group


Exercise 13

Data validation with validators

Update : in the profileForm EMail field mandatory

Create « EMailConfirm » field

• Mandatory

• Use a regular constraint as validator in EMail

− [\w-]+@([\w-]+\.)+[\w-]+

Check that EMailConfirm & Email have same values

• Using a validateExpression

• Add a « Display error » for EMailConfirm field

IBM Software Group


Exercise 14

Complete tab navigation Clic on the result tab = clears the search term & open results XPage

Add a new property « selectedTabId »

• Store the active tab

• Default tab = selectedTabId

• Fill the property for XPage (homeTab, resultsTab, profileTab)

Tip Don’t forget « No data validation » when clicking on tabs

compositeData object to access custom properties

IBM Software Group


Exercise 15

Adding an icon to the page Import .ico file in the webconten folder of the Java application

Reference the icône in XPages (with page title)

Tip Java perspective can be used to import other elements

IBM Software Group


Exercise 16

Optional, included in starting database

Preparing « Friends » part Every profile can have a list of connected friends

Classic Domino elements (forms & views)

IBM Software Group


Repeat control (1)

Allows to repeat controls on an XPage Responses documents to a document

Phone numbers for a contact, … Has a source property (data)

Can be … document, view, JavaScript expression

• Returns a document collection Has a collection name property

Allows to programmatically access to each document in the collection

Return a NotesDocument (ie : friend)

IBM Software Group


Repeat control (2)

To manipulate each document of the collection Use methods

• friend.removePermanently(true)

« Classics controls » To repeat, just place them into the Repeat control

To link to a field, use NotesDocument methods

• friend.getItemValueString("Name")

IBM Software Group


Exercise 17

Add a friend part in the profilForm custom control

To list connected friends or to add a new one Profiles and friends will be linked by the

NoteID=friendID

Fields friendName (typeahead) and friendEMail (auto filled) and button to add a new friend to the current profile

• The button creates a new NotesDocument

Add a panel with a repeat control to list connected friend

• Source is all friends having friendID = NoteID of current profile

Tips friendName onBlur event : try to refresh only the

friendEMail field

IBM Software Group


Theme

Define the look and feel of an application Themes are server-side customization of HTML generation Can be set globally, to apply to all applications run on that

server, or applied to a single application Themes are different from Style Sheets in that they are not

restricted to CSS styles number of rows displayed by a view

can assign values to any JSF control properties when the XPage is created.

can be targeted to apply specifically to pages created by XPages or Domino Web Engine technology.

Can extend existing theme Each control has a themeId

INPUTFIELD_EDITBOX = "InputField.EditBox"

IBM Software Group


Exercise 18

Themes Explore themes in the discussion database Create your own theme in profile application

IBM Software Group


Exercise 19

Client and server side validation combined

Add a client side validation before removing a connected friend Execute a client script to get DbName & sessionScope

Tips Instruction “#{javascript: xxxxxx}”; is evaluated on server side

• @DbName() only works on server side

IBM Software Group


Calling an agent

Old web dev. xPage, 8.5

Event WebQuerySave

Processed by the server, but before hits the disk

PostSave

Document already in it’s saved state

Getting the document context

Session.DocumentContext - Pass the document NoteID to the agent-Get the document in the agent -Session.currentAgent..ParamaterDocID

IBM Software Group


Exercise 20

Call agent from XPages

Optional (in the starting database) Create view, form Create XPage to add data and show entries

Tips : Watch the data source name

IBM Software Group


Exercise 21 - Using existing @Formulas

Add @Formulas to agentDemo form

Tips : computeWithForm property

IBM Software Group


Exercise 22

Convert an existing Notes view into an XPage

Import adequat xslt Use DXL Utilities

Export Notes view into xml using xslt Import exported view

IBM Software Group


Exercise 24

Playing with HTML within an xPage Add HTML and Javascript embedded

xPages renders any markup in computed fields into literal strings

To avoid disable the output-escaping attribute

Each control has this attribute Computed field can include JS or CSS You can provide the ID of elements

IBM Software Group


Localization (1)

Database properties to specify languages => Extract localizable text into .properties files (clean project)

Resources (properties files) are then created in the application Accessible in the package explorer eclipse view (can be exported)

Contains : in-line text, values of localizable properties (labels, …) All .properties files are "compiled in" to your XPages, Matching with user's browser locale, but can be programmatically

force

IBM Software Group


Localization (2)

JavaScript and computed values are not extracted Create a properties file

Add the file as xp:bundle resource in the xPage

Use the bundle resource variable

IBM Software Group


Exercise 25

Localization

IBM Software Group


Exercise 26

Call a Java function in an xPage

In the Java perspective Create folders

Create an HelloWorld class

Create an xPage Add an editbox control to fill the name

Add a button calling the java class and setting a requestScope variable

Ad a computed field displaying the requestScope variable

IBM Software Group


FAQs

Session & Application Scope Session is for 1 user & 1 application

Application is for 1 application and all users

Sizing limitations ? JVM Heap Size Icon for all pages … not just a xPage property How to enforce a specific language

Technology

XPages Workshop: Concepts And Exercises