XPages Workshop: Concepts And Exercises

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

Materials Lotus Domino server Lotus Notes & Domino Designer 8.5 Folders : Starting database = profile00.nsf

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 broser HTTP Error 404 or old Xpages … Compilation errors

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

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

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

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

The starting database Contains “classic” Domino elements Forms Profile Keyword Friend agentDemo View Profiles keywordLookup Friends agentDemos Some documents TimeZones, Countries …

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)

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.

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 »

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

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

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

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

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

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

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

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

Exercise 8 Add a simple view control

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

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

Data validation (1) « Required field » + additionnal validation properties « Classics » events onBlur, onChange, onClick … Field Validators Regular expression Scripted expression

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

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

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

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

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

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

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

Exercise 16 Optional, included in starting database Preparing « Friends » part Every profile can have a list of connected friends Classic Domino elements (forms & views)

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)

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

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

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"

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

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

Calling an agent - Pass the document NoteID to the agent Get the document in the agent Session.currentAgent..ParamaterDocID Session.DocumentContext Getting the document context PostSave Document already in it’s saved state WebQuerySave Processed by the server, but before hits the disk Event xPage, 8.5 Old web dev.

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

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

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

Exercise 23 In the TableWalker database Create an XPage 1 subject, multi (Color, Shape, Taste) fields 1 table to add Color / Shape / Taste row(s) 1 repeat control to display existing values

Exercise 23 The script library : Resource in the XPage addRow, removeRow using Library getDataSource : source of the repeat control Collection Name = fieldGroup Index Name = rowIndex

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

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

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

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

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: Concepts And Exercises

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to XPages Workshop: Concepts And Exercises (20)

More from ddrschiw (19)

Recently uploaded (20)

XPages Workshop: Concepts And Exercises

Editor's Notes