®

IBM Software Group

Domino XPages Workshop

XPages Workshop, May 5th – 6th 2009

 IBM Software Group

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

*
XPages Workshop – Paris, 5&6 May 2009
 IBM Software Group

Materials

 Lotus Domino server

 Lotus Notes & Domino Designer 8.5

 Folders :
 Starting database = profile00.nsf

*
XPages Workshop – Paris, 5&6 May 2009
 IBM Software Group

What is XPages ? Présentation

Microsoft PowerPoint

*
XPages Workshop – Paris, 5&6 May 2009
 IBM Software Group

Domino discussion database

*
XPages Workshop – Paris, 5&6 May 2009
 IBM Software Group

Introduction Exercises

*
XPages Workshop – Paris, 5&6 May 2009
 IBM Software Group

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

*
XPages Workshop – Paris, 5&6 May 2009
 IBM Software Group

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

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

broser
 HTTP Error 404 or old Xpages …

 Compilation errors

*
XPages Workshop – Paris, 5&6 May 2009
 IBM Software Group

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

 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

*
XPages Workshop – Paris, 5&6 May 2009
 IBM Software Group

Exercise 1 : Hello World !

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

*
XPages Workshop – Paris, 5&6 May 2009 1
 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

*
XPages Workshop – Paris, 5&6 May 2009 1
 IBM Software Group

The profile application

*
XPages Workshop – Paris, 5&6 May 2009 1
 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

*
XPages Workshop – Paris, 5&6 May 2009 1
 IBM Software Group

*
XPages Workshop – Paris, 5&6 May 2009 1
 IBM Software Group

*
XPages Workshop – Paris, 5&6 May 2009 1
 IBM Software Group

*
XPages Workshop – Paris, 5&6 May 2009 1
 IBM Software Group

The starting database

 Contains “classic” Domino elements

 Forms
 Profile
 Keyword
 Friend
 agentDemo
 View
 Profiles
 keywordLookup
 Friends
 agentDemos
 Some documents
 TimeZones, Countries
…

*
XPages Workshop – Paris, 5&6 May 2009 1
 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)

*
XPages Workshop – Paris, 5&6 May 2009 1
 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.

*
XPages Workshop – Paris, 5&6 May 2009 1
 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 »

*
XPages Workshop – Paris, 5&6 May 2009 2
 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

*
XPages Workshop – Paris, 5&6 May 2009 2
 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

*
XPages Workshop – Paris, 5&6 May 2009 2
 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

*
XPages Workshop – Paris, 5&6 May 2009 2
 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

*
XPages Workshop – Paris, 5&6 May 2009 2
 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

*
XPages Workshop – Paris, 5&6 May 2009 2
 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)

*
XPages Workshop – Paris, 5&6 May 2009 2
 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

*
XPages Workshop – Paris, 5&6 May 2009 2
 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

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

Exercise 8

 Add a simple view control

*
XPages Workshop – Paris, 5&6 May 2009 2
 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

*
XPages Workshop – Paris, 5&6 May 2009 3
 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

*
XPages Workshop – Paris, 5&6 May 2009 3
 IBM Software Group

Data validation (1)

 « Required field » + additionnal

validation properties

 « Classics » events
 onBlur, onChange, onClick …

 Field Validators
 Regular expression
 Scripted expression

*
XPages Workshop – Paris, 5&6 May 2009 3
 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

*
XPages Workshop – Paris, 5&6 May 2009 3
 IBM Software Group

Exercise 10

 Add validation to search criteria

 Optional (check firstName <> lastName)

*
XPages Workshop – Paris, 5&6 May 2009 3
 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

*
XPages Workshop – Paris, 5&6 May 2009 3
 IBM Software Group

Exercise 12 (optional)

 Data validation with a generic JavaScript library

 Tests on the existing validationTest XPage

*
XPages Workshop – Paris, 5&6 May 2009 3
 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

*
XPages Workshop – Paris, 5&6 May 2009 3
 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

*
XPages Workshop – Paris, 5&6 May 2009 3
 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

*
XPages Workshop – Paris, 5&6 May 2009 3
 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)

*
XPages Workshop – Paris, 5&6 May 2009 4
 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)

*
XPages Workshop – Paris, 5&6 May 2009 4
 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")

*
XPages Workshop – Paris, 5&6 May 2009 4
 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

*
XPages Workshop – Paris, 5&6 May 2009 4
 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"

*
XPages Workshop – Paris, 5&6 May 2009 4
 IBM Software Group

Exercise 18

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

*
XPages Workshop – Paris, 5&6 May 2009 4
 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

*
XPages Workshop – Paris, 5&6 May 2009 4
 IBM Software Group

Calling an agent

Old web dev. xPage, 8.5

Event WebQuerySave PostSave

Processed by the server, but Document already in it’s saved state

before hits the disk

Getting Session.DocumentContext - Pass the document NoteID to the agent

the -Get the document in the agent
document -Session.currentAgent..ParamaterDocID
context

*
XPages Workshop – Paris, 5&6 May 2009 4
 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

*
XPages Workshop – Paris, 5&6 May 2009 4
 IBM Software Group

Exercise 21 - Using existing @Formulas

 Add @Formulas to agentDemo form

 Tips :
 computeWithForm property

*
XPages Workshop – Paris, 5&6 May 2009 4
 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

*
XPages Workshop – Paris, 5&6 May 2009 5
 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

*
XPages Workshop – Paris, 5&6 May 2009 5
 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

*
XPages Workshop – Paris, 5&6 May 2009 5
 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

*
XPages Workshop – Paris, 5&6 May 2009 5
 IBM Software Group

Exercise 25

 Localization

*
XPages Workshop – Paris, 5&6 May 2009 5
 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

*
XPages Workshop – Paris, 5&6 May 2009 5
 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

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