Domino Xpages Workshop: Ibm Software Group

®
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
*
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
*
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
*
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
 “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 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
*
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 :
*
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
*

Domino Xpages Workshop: Ibm Software Group

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Domino Xpages Workshop: Ibm Software Group

Uploaded by

Copyright:

Available Formats

®

IBM Software Group

Domino XPages Workshop

XPages Workshop, May 5th – 6th 2009

 Lotus Domino server

What is XPages ? Présentation

Domino discussion database

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

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

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

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

 Ctrl (shift) Alt and direction keys to resize controls

 Local Domino Designer (localhost)

 Not for custom controls

Exercise 1 : Hello World !

 Hello World updated

The profile application

The Profiles Application

The starting database

 Contains “classic” Domino elements

 Update : start with the beginning database

 Creation of a custom control : container

Editable Areas (callback controls)

 Have unique facet names (determines how UI controls get

 Editable areas require you to add UI controls and set properties

 Adding tabbed control

Working with data in XPages (1)

 Define a data source on the xpage

Working with data in XPages (2)

 Optional, included in the

 Complete the profile custom

@Functions and lists

 Most of old @Functions are implemented

 Optional, included in the starting database

 Customize the profil custom control

 Linked to a Domino view

 Add a simple view control

 Share values across pages

 In the searchForm control

Data validation (1)

 « Required field » + additionnal

Data validation (2)

 Client side or server side validation

 Tips : use a generic library to check

 Add validation to search criteria

 Optional (check firstName <> lastName)

 Data validation tests

 Update : in the profileSearch

 Add a Display Errors control

 Data validation with a generic JavaScript library

 Data validation with validators

 Update : in the profileForm

 Complete tab navigation

 Adding an icon to the page

 Optional, included in starting database

 Preparing « Friends » part

Repeat control (1)

 Allows to repeat controls on an XPage

Repeat control (2)

 To manipulate each document of the collection

 Fields friendName (typeahead) and friendEMail

 Add a panel with a repeat control to list