Sie sind auf Seite 1von 58



m 
 

Domino XPages Workshop


     

 m 
 




×genda

  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
"
012
)
!
( /  

x 3


) 4 
"!
 XPages Futures...
x 
 
!"
''
x  
 !
  
4 $1"

x 1 
5 "!  
 

! 

 m 
 




Materials



 Lotus Domino server
 Lotus Notes & Domino Designer 8.5


  Folders :
 x Starting database = profile00.nsf




! ,

 m 
 
















What is XPages ? m 

   m  m


! 6

 m 
 




Domino discussion database













! 

 m 
 
















Introduction Exercises


! 

 m 
 


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















! 7

 m 
 


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





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

 x å^^P Error 404 or old Xpages «




 Compilation errors



! &

 m 
 


 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

! 

 m 
 




Exercise 1 : åello World !



 Create an application
 Create a custom control

  Create a xpage and include the custom control







! *

 m 
 




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
compositeData.iknowyou

! **

 m 
 
















^he profile application


! *

 m 
 




^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

! *,

 m 
 


















! *6

 m 
 


















! *

 m 
 


















! *

 m 
 




^he starting database



 Contains ³classic´ Domino elements
 Forms

 x Profile

x Keyword
 x Friend

 x agentDemo

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

! *7

 m 
 




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


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

! *&

 m 
 




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
dynamically.

 Editable areas require you to add UI controls and set properties


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

! *

 m 
 




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 »

! 

 m 
 




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




! *

 m 
 




Working with data in XPages (2)



 Data binding

x Simple data : a field


x ÑavaScript : a document, a collection «

 x ×dvanced : a variable «


 ^ip
 x Watch the data source name

! 

 m 
 




Exercise 5



 Optional, included in the
starting database

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

  Creation of the profile XPage

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

! ,

 m 
 




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

 m 
 




Exercise 6



 Complete the profile custom
control

 x Style

x Buttons Save, Delete, Cancel,

 Edit
 * ×dd also hide properties to

Save button

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

! 

 m 
 




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)

! 

 m 
 




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

 m 
 




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,
links,

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

! &

 m 
 




Exercise 8



 ×dd a simple view control









! 

 m 
 




|lobal objects



 Share values across pages
 Can bind control to a scoped

 variable
  Use objects with properties and
 methods

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

 requestScope
 applicationScope
 sessionScope

! ,

 m 
 




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

 criteria)

x Update the view selection

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

! ,*

 m 
 




Data validation (1)

  ü Required field » + additionnal

validation properties


  ü Classics » events

x onBlur, onChange, onClick «


  Field Validators
x Regular expression
x Scripted expression

! ,

 m 
 




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
 properties


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

! ,,

 m 
 




Exercise 10



 ×dd validation to search criteria

  Optional (check firstName <> lastName)







! ,6

 m 
 




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
true
x DOB must be less than ü now »
and place
disableclientSideValidation to
true

x ×dd a Display Errors control


before buttons

! ,

 m 
 




Exercise 12 (optional)



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









! ,

 m 
 




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
[\w-]+([\w-]+\.)+[\w-]+
x Check that EMailConfirm &
Email have same values
* Using a validateExpression
* ×dd a ü Display error » for
EMailConfirm field

! ,7

 m 
 




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)

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

! ,&

 m 
 




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)


  ^ip

 x Ñava perspective can be used to import other elements

! ,

 m 
 


 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

 m 
 




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*

 m 
 




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

 m 
 




Exercise 17

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

NoteID=friendID


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

! 6,

 m 
 




^heme



 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

 m 
 




Exercise 18



 ^hemes
 Explore themes in the discussion database

  Create your own theme in profile application







! 6

 m 
 




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


  ^ips

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

! 6

 m 
 




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
context

! 67

 m 
 




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&

 m 
 




Exercise 21 - Using existing Formulas



 ×dd Formulas to agentDemo form

  ^ips :

x computeWithForm property





! 6

 m 
 




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


! 

 m 
 




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

! *

 m 
 




Exercise 23



 ^he script library :

x Resource in the XPage


x addRow, removeRow using Library

 x getDataSource : source of the repeat


 control

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

! 

 m 
 




Exercise 24



 Playing with å^ML within an xPage

x ×dd å^ML and Ñavascript embedded


 xPages renders any markup in computed fields into literal


strings
 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

! ,

 m 
 




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
force

! 6

 m 
 




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

! 

 m 
 




Exercise 25



 Localization









! 

 m 
 




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
variable
x ×d a computed field displaying the requestScope variable

! 7

 m 
 




F×Qs



 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

! &