®

IBM Software Group

Domino XPages Workshop

XPages Workshop, May 5th – 6th 2009

P a r i s , 5 & 6

IBM Software Group

Agenda
 Workshop Introduction  What is XPages ?
 Domino Discussion template (demo)

M a y 2 0 0 9

 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

*

2

P a r i s , 5 & 6

IBM Software Group

Materials
 Lotus Domino server  Lotus Notes & Domino Designer 8.5

M a y 2 0 0 9

 Folders :
 Starting database = profile00.nsf

*

3

P a r i s , 5 & 6 M a y 2 0 0 9

IBM Software Group

What is XPages ?

*

4

P a r i s , 5 & 6

IBM Software Group

Domino discussion database

M a y 2 0 0 9

*

5

P a r i s , 5 & 6 M a y 2 0 0 9

IBM Software Group

Introduction Exercises

*

6

P a r i s , 5 & 6

IBM Software Group

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

M a y 2 0 0 9

*

7

P a r i s , 5 & 6

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 …

M a y 2 0 0 9

 Compilation errors

*

8

P a r i s , 5 & 6

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)

M a y 2 0 0 9

• Anonymous (must be in LCA) • Project saved & builded
 Not for custom controls

*

9

P a r i s , 5 & 6

IBM Software Group

Exercise 1 : Hello World !
 Create an application  Create a custom control  Create a xpage and include the custom control

M a y 2 0 0 9

*

10

P a r i s , 5 & 6

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

M a y 2 0 0 9

 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

*

11

P a r i s , 5 & 6 M a y 2 0 0 9

IBM Software Group

The profile application

*

12

P a r i s , 5 & 6

IBM Software Group

The Profiles Application
 What is it?
 An XPages application that manages user profiles information.

M a y 2 0 0 9

 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

*

13

P a r i s , 5 & 6 M a y 2 0 0 9

IBM Software Group

*

14

P a r i s , 5 & 6 M a y 2 0 0 9

IBM Software Group

*

15

P a r i s , 5 & 6 M a y 2 0 0 9

IBM Software Group

*

16

P a r i s , 5 & 6

IBM Software Group

The starting database
 Contains “classic” Domino elements  Forms
 Profile

M a y 2 0 0 9

 Keyword
 Friend  agentDemo

 View
 Profiles
 keywordLookup  Friends  agentDemos

 Some documents
 TimeZones, Countries …
* 17

P a r i s , 5 & 6

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

M a y 2 0 0 9

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

*

18

P a r i s , 5 & 6

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.

M a y 2 0 0 9

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

P a r i s , 5 & 6

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 »

M a y 2 0 0 9

*

20

P a r i s , 5 & 6

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

M a y 2 0 0 9

 Define a data source from the Data panel
 and then drag&drop data on controls

*

21

P a r i s , 5 & 6

IBM Software Group

Working with data in XPages (2)
 Data binding
 Simple data : a field  JavaScript : a document, a collection …  Advanced : a variable …

M a y 2 0 0 9

 Tip
 Watch the data source name

*

22

P a r i s , 5 & 6

IBM Software Group

Exercise 5
 Optional, included in the starting database
 Creation of the Notes profile form (and data)  Creation of Notes profiles view

M a y 2 0 0 9

 Creation of the profile XPage  Tips
 Property « computeWithForm » to included computed fields in the document (ex.21)  Use outline to reorder fields in table
*

23

P a r i s , 5 & 6

IBM Software Group

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

M a y 2 0 0 9

 Document actions
 Change doc mode, create response document, delete (selected) document, modify field, save doc

*

24

P a r i s , 5 & 6

IBM Software Group

Exercise 6
 Complete the profile custom control
 Style  Buttons Save, Delete, Cancel, Edit
• Add also hide properties to Save button

M a y 2 0 0 9

 Tips :
 Use the script editor to choose properties or methods

• document1 is the datasource of the form

*

25

P a r i s , 5 & 6

IBM Software Group

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

M a y 2 0 0 9

 Changes :
 Case sensitive  Separator , instead of ;

 Lists :
 Fixed values (or import a list)  Formula (@DbLookup & @DbColumn)  Also used in type ahead (suggestions)

*

26

P a r i s , 5 & 6

IBM Software Group

Exercise 7
 Optional, included in the starting database
 Adding « setup » forms, views and documents (for lists) • keywords form, keywordLookup view

M a y 2 0 0 9

 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

*

27

P a r i s , 5 & 6

IBM Software Group

View control
 Linked to a Domino view
 Automatic pager (different styles)  Rows / page, category filter, keys …

M a y 2 0 0 9

 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

*

28

P a r i s , 5 & 6

IBM Software Group

Exercise 8
 Add a simple view control

M a y 2 0 0 9

*

29

P a r i s , 5 & 6

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")

M a y 2 0 0 9

 requestScope  applicationScope  sessionScope

*

30

P a r i s , 5 & 6

IBM Software Group

Exercise 9
 In the searchForm control
 Add a « New profile » button  Add profile search

M a y 2 0 0 9

 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

*

31

P a r i s , 5 & 6

IBM Software Group

Data validation (1)
 « Required field » + additionnal validation properties

M a y 2 0 0 9

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

 Field Validators
 Regular expression

 Scripted expression

*

32

P a r i s , 5 & 6

IBM Software Group

Data validation (2)
 Client side or server side validation
 Error message popup or « Diplay error(s) » control

M a y 2 0 0 9

 In server properties, application properties or xpage / control properties

 Tips : use a generic library to check specific fields
 Optional Exercise 12

*

33

P a r i s , 5 & 6

IBM Software Group

Exercise 10
 Add validation to search criteria  Optional (check firstName <> lastName)

M a y 2 0 0 9

*

34

P a r i s , 5 & 6

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

M a y 2 0 0 9

 Add a Display Errors control before buttons

*

35

P a r i s , 5 & 6

IBM Software Group

Exercise 12 (optional)
 Data validation with a generic JavaScript library  Tests on the existing validationTest XPage

M a y 2 0 0 9

*

36

P a r i s , 5 & 6

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-]+

M a y 2 0 0 9

 Check that EMailConfirm & Email have same values
• Using a validateExpression

• Add a « Display error » for EMailConfirm field

*

37

P a r i s , 5 & 6

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)

M a y 2 0 0 9

 Tip
 Don’t forget « No data validation » when clicking on tabs  compositeData object to access custom properties

*

38

P a r i s , 5 & 6

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)

M a y 2 0 0 9

 Tip
 Java perspective can be used to import other elements

*

39

P a r i s , 5 & 6

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)

M a y 2 0 0 9

*

40

P a r i s , 5 & 6

IBM Software Group

Repeat control (1)
 Allows to repeat controls on an XPage
 Responses documents to a document  Phone numbers for a contact, …

M a y 2 0 0 9

 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)

*

41

P a r i s , 5 & 6

IBM Software Group

Repeat control (2)
 To manipulate each document of the collection
 Use methods • friend.removePermanently(true)

M a y 2 0 0 9

 « Classics controls »
 To repeat, just place them into the Repeat control  To link to a field, use NotesDocument methods • friend.getItemValueString("Name")

*

42

P a r i s , 5 & 6

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  friendName onBlur event : try to refresh only the friendEMail field

M a y 2 0 0 9

 Tips

*

43

P a r i s , 5 & 6

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.

M a y 2 0 0 9

 Can extend existing theme  Each control has a themeId
 INPUTFIELD_EDITBOX = "InputField.EditBox"

*

44

P a r i s , 5 & 6

IBM Software Group

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

M a y 2 0 0 9

*

45

P a r i s , 5 & 6

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

M a y 2 0 0 9

*

46

P a r i s , 5 & 6

IBM Software Group

Calling an agent
Old web dev. Event WebQuerySave Processed by the server, but before hits the disk xPage, 8.5 PostSave Document already in it’s saved state

M a y 2 0 0 9

Getting the document context

Session.DocumentContext

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

*

47

P a r i s , 5 & 6

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

M a y 2 0 0 9

*

48

P a r i s , 5 & 6

IBM Software Group

Exercise 21 - Using existing @Formulas
 Add @Formulas to agentDemo form  Tips :
 computeWithForm property

M a y 2 0 0 9

*

49

P a r i s , 5 & 6

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

M a y 2 0 0 9

 Import exported view

*

50

P a r i s , 5 & 6

IBM Software Group

Exercise 24
 Playing with HTML within an xPage
 Add HTML and Javascript embedded

M a y 2 0 0 9

 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

*

53

P a r i s , 5 & 6

IBM Software Group

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

M a y 2 0 0 9

 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

*

54

P a r i s , 5 & 6

IBM Software Group

Localization (2)
 JavaScript and computed values are not extracted  Create a properties file

M a y 2 0 0 9

 Add the file as xp:bundle resource in the xPage

 Use the bundle resource variable

*

55

P a r i s , 5 & 6

IBM Software Group

Exercise 25
 Localization

M a y 2 0 0 9

*

56

P a r i s , 5 & 6

IBM Software Group

Exercise 26
 Call a Java function in an xPage  In the Java perspective
 Create folders
 Create an HelloWorld class

M a y 2 0 0 9

 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

*

57

P a r i s , 5 & 6

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

M a y 2 0 0 9

 Icon for all pages … not just a xPage property  How to enforce a specific language

*

58