Sie sind auf Seite 1von 58


Domino XPages Workshop




  Workshop Introduction
  What is XPages ?
 x R R!  
  Working with XPages in IBM Lotus Domino Designer 8.5

x m  $ ! R



 x ()

 ^he profile application
 x u
 Ñacobs Engineering - Real Customer Scenario
x R
x R
( /  

x 3

) 4 
 XPages Futures...
4 $1"

x 1 
5 "!  




 Lotus Domino server
 Lotus Notes & Domino Designer 8.5

  Folders :
 x Starting database = profile00.nsf

! ,


What is XPages ? m 

   m  m

! 6


Domino discussion database



Introduction Exercises



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

! 7


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

 XPages must be compiled before the page is viewed in the

 x å^^P Error 404 or old Xpages «

 Compilation errors

! &


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

 Ctrl (shift) ×lt and direction keys to resize controls

  Previewing xpage :

x Domino Server

 * Security : XPages = agents

x Local Domino Designer (localhost)
* ×nonymous (must be in LC×)
* Project saved & builded

x Not for custom controls



Exercise 1 : åello World !

 Create an application
 Create a custom control

  Create a xpage and include the custom control

! *


Exercise 2

 åello World updated
 Label and Editbox to type your name
  Button to change the Label text and hide the editbox

  Partial refresh

  ^ip :
 x getComponent

* |lobal function to access the objects backing up
UI controls
* Methods setValue() & getValue()
x New property definition iknowyou
* ^o hide the editbox
* compositeData object to access
custom properties

! **


^he profile application

! *


^he Profiles ×pplication

 What is it?

x ×n XPages application that manages user profiles information.

 Main features:

 x Entry page allows a search to be submitted to retrieve profiles

 information based on that search:
* × simple ³by name´ search
x Results page lists the retrieved results in a tabular format:
* Drill-down on a selected result will navigate into that profile
x Profile information page displays read-only information about the
selected profile
x Edit profile page allows a user to edit their own profile
x Create profile page allows a new user to fill out their profile

! *,


! *6


! *


! *


^he starting database

 Contains ³classic´ Domino elements

 x Profile

x Keyword
 x Friend

 x agentDemo

x Profiles
x keywordLookup
x Friends
x agentDemos
 Some documents
x ^imeZones, Countries

! *7


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

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

! *&


Editable ×reas (callback controls)

 Editable areas are regions that users can modify when the custom
control is placed on an XPage. ×ll other regions that fall outside of

 editable areas are read-only and cannot be modified.

  åave unique facet names (determines how UI controls get

 displayed in the editable area at run time). Facet names can be
 static or computed.
x 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.
x Computed, you can determine which UI controls are displayed

 Editable areas require you to add UI controls and set properties

for them after you add the custom control to an XPage.

! *


Exercise 4

 ×dding tabbed control
 ×dding an editable area

  3 new custom controls : searchForm, profilForm, searchResults

  ^ips :

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

x Or right-click on the tab and select Select ×ctive ^ab Contents »



Working with data in XPages (1)

  Define a data source on the xpage

x and then drag&drop fields onto the xpage

 * Control dialog box enabled or disable
  Define a data source from the Data panel
 x and then drag&drop data on controls

! *


Working with data in XPages (2)

 Data binding

x Simple data : a field

x ÑavaScript : a document, a collection «

 x ×dvanced : a variable «

 x Watch the data source name



Exercise 5

 Optional, included in the
starting database

 x Creation of the Notes
 profile form (and data)
 x Creation of Notes profiles

  Creation of the profile XPage

x Property
computeWithForm » to
included computed fields in
the document (ex.21)
x Use outline to reorder fields
in table

! ,


Simple actions

 Basic actions

x Confirm action, execute script, open page, save data sources

 Document actions

 x Change doc mode, create response document, delete (selected)

 document, modify field, save doc

! 6


Exercise 6

 Complete the profile custom

 x Style

x Buttons Save, Delete, Cancel,

 * ×dd also hide properties to

Save button

 ^ips :
x Use the script editor to
choose properties or
* document1 is the
datasource of the form



Functions and lists

 Most of old Functions are implemented
 Can be mixted with ÑavaScript code

  Changes :
 x Case sensitive

 x Separator , instead of ;

 Lists :
x Fixed values (or import a list)
x Formula (DbLookup & DbColumn)
x ×lso used in type ahead (suggestions)



Exercise 7

 Optional, included in the starting database

x ×dding setup » forms, views and documents (for lists)
 * keywords form, keywordLookup view

  Customize the profil custom control

 x ×dd type-ahead and suggestion on country field
x ×dd values to |ender combobox
x ×dd values to ^imeZones combobox

 ^ips :
x Use the script editor to choose functions

! 7


View control

 Linked to a Domino view

x ×utomatic pager (different styles)

x Rows / page, category filter, keys

  Columns properties

 x Sortable, checkbox, content type,

x Watch the data source name
x ³var´ properties defines the
request-scope attribute to access
to a row data

! &


Exercise 8

 ×dd a simple view control



|lobal objects

 Share values across pages
 Can bind control to a scoped

  Use objects with properties and

 x requestScope.put("hello", "åello
x requestScope.get("hello")


! ,


Exercise 9

 In the searchForm control
x ×dd a New profile » button

 x ×dd profile search

 In the searchResults control
 x ×dd a computed field (search


x Update the view selection

x × sessionScope variable is
used to pass search criteria
from one form to another
x Can also bind the search
editbox to the sessionScope

! ,*


Data validation (1)

  ü Required field » + additionnal

validation properties

  ü Classics » events

x onBlur, onChange, onClick «

  Field Validators
x Regular expression
x Scripted expression

! ,


Data validation (2)

  Client side or server side validation

x Error message popup or ü Diplay
 error(s) » control

 x In server properties, application
 properties or xpage / control

 ^ips : use a generic library to check
specific fields
x Optional Exercise 12

! ,,


Exercise 10

 ×dd validation to search criteria

  Optional (check firstName <> lastName)

! ,6


Exercise 11

  Data validation tests

  Update : in the profileSearch

 custom control

x disableclientSideValidation =
 false for field FirstName

 x ×dd a Display Error control for
 field LastName and place
disableclientSideValidation to
x DOB must be less than ü now »
and place
disableclientSideValidation to

x ×dd a Display Errors control

before buttons

! ,


Exercise 12 (optional)

 Data validation with a generic ÑavaScript library
 ^ests on the existing validation^est XPage

! ,


Exercise 13

 Data validation with validators

  Update : in the profileForm

x EMail field mandatory

 x Create ü EMailConfirm » field

 * Mandatory
* Use a regular constraint as
validator in EMail
x Check that EMailConfirm &
Email have same values
* Using a validateExpression
* ×dd a ü Display error » for
EMailConfirm field

! ,7


Exercise 14

 Complete tab navigation

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

x ×dd a new property ü selected^abId »

* Store the active tab
 * Default tab = selected^abId

 * Fill the property for XPage (home^ab, results^ab, profile^ab)

x Don¶t forget ü No data validation » when clicking on tabs
x compositeData object to access custom properties

! ,&


Exercise 15

 ×dding an icon to the page

x Import .ico file in the webconten folder of the Ñava application

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


 x Ñava perspective can be used to import other elements

! ,


 Exercise 16

 Optional, included in starting database

  Preparing ü Friends » part

x Every profile can have a list of connected friends

 x Classic Domino elements (forms & views)

! 6


Repeat control (1)

 ×llows to repeat controls on an XPage

x Responses documents to a document

x Phone numbers for a contact, «
 åas a source property (data)

 x Can be « document, view, ÑavaScript expression

 * Returns a document collection
 åas a collection name property
x ×llows to programmatically access to each document in the collection
x Return a NotesDocument (ie : friend)

! 6*


Repeat control (2)

 ^o manipulate each document of the collection

x Use methods
 * friend.removePermanently(true)

  ü Classics controls »

 x ^o repeat, just place them into the Repeat control
x ^o link to a field, use NotesDocument methods
* friend.getItemValueString("Name")

! 6


Exercise 17

  ×dd a friend part in the profilForm custom
 x ^o list connected friends or to add a new one
 x Profiles and friends will be linked by the


 x Fields friendName (typeahead) and friendEMail
 (auto filled) and button to add a new friend to the
current profile
* ^he button creates a new NotesDocument

x ×dd a panel with a repeat control to list

connected friend
* Source is all friends having friendID = NoteID
of current profile
x friendName onBlur event : try to refresh only the
friendEMail field

! 6,



 Define the look and feel of an application
 ^hemes are server-side customization of å^ML generation

  Can be set globally, to apply to all applications run on that
 server, or applied to a single application
  ^hemes are different from Style Sheets in that they are not

 restricted to CSS styles

x number of rows displayed by a view
x can assign values to any ÑSF control properties when the XPage
is created.
x 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
x INPU^FIELD_EDI^BOX = "InputField.EditBox"

! 66


Exercise 18

 Explore themes in the discussion database

  Create your own theme in profile application

! 6


Exercise 19

 Client and server side validation combined

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


x Instruction ³#{javascript: xxxxxx}´; is evaluated on server side
* DbName() only works on server side

! 6


Calling an agent

 Old web dev. xPage, 8.5

 Event WebQuerySave PostSave

 Processed by the server, Document already in it¶s saved state
but before hits the disk

 |etting Session.DocumentContext - Pass the document NoteID to the agent
the 2|et the document in the agent
document 2Session.current×gent..ParamaterDocID

! 67


Exercise 20

 Call agent from XPages

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

  ^ips :

x Watch the data source name

! 6&


Exercise 21 - Using existing Formulas

 ×dd Formulas to agentDemo form

  ^ips :

x computeWithForm property

! 6


Exercise 22

 Convert an existing Notes view into an XPage

  Import adequat xslt
  Use DXL Utilities
 x Export Notes view into xml using xslt

  Import exported view



Exercise 23

 In the ^ableWalker database

  Create an XPage

x 1 subject, multi (Color, Shape, ^aste) fields

 x 1 table to add Color / Shape / ^aste row(s)

 x 1 repeat control to display existing values

! *


Exercise 23

 ^he script library :

x Resource in the XPage

x addRow, removeRow using Library

 x getDataSource : source of the repeat


 * Collection Name = field|roup
* Index Name = rowIndex



Exercise 24

 Playing with å^ML within an xPage

x ×dd å^ML and Ñavascript embedded

 xPages renders any markup in computed fields into literal

 x ^o avoid disable the output-escaping attribute

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

! ,


Localization (1)

 Database properties to specify languages

x => Extract localizable text into .properties files (clean project)
  Resources (properties files) are then created in the application

x ×ccessible in the package explorer eclipse view (can be exported)

 x Contains : in-line text, values of localizable properties (labels, «)

  ×ll .properties files are "compiled in" to your XPages,
 Matching with user's browser locale, but can be programmatically

! 6


Localization (2)

 ÑavaScript and computed values are not extracted
 Create a properties file

  ×dd the file as xp:bundle resource in the xPage

 Use the bundle resource variable



Exercise 25




Exercise 26

 Call a Ñava function in an xPage

  In the Ñava perspective

x Create folders

 x Create an åelloWorld class

 Create an xPage
x ×dd an editbox control to fill the name
x ×dd a button calling the java class and setting a requestScope
x ×d a computed field displaying the requestScope variable

! 7



 Session & ×pplication Scope

x Session is for 1 user & 1 application

x ×pplication is for 1 application and all users

 x Sizing limitations ? ÑVM åeap Size

 Icon for all pages « not just a xPage property
  åow to enforce a specific language

! &