Description

The advent of XPages brings Domino 8.5 into the fold of leading-edge web applications built on top of a rock-solid database engine, the Dojo toolkit, and JavaServer Faces technology.

This course leads you through the essential steps to adapt an application originally developed for Notes and then modified as a classic Domino web application, to become a fully functional XPage application.

Course goals

This course will teach you how to:

• Compare and contrast classic Notes and Domino web applications and XPage applications from user and developer perspectives
• Use Forms and Views as schemas for XPage Data Sources
• Establish a correct and secure server and client software environment to develop, test, and deploy XPage applications
• Fully utilize the XPage-related development features of Eclipse-based Domino Designer
• Use both the drag and drop GUI features of the Design tab and the raw editing power of the Source tab
• Use “click to set” properties and Simple Actions when feasible but dig deep into client-side and server-side JavaScript for advanced event handler programming using browser DOM, Domino, and XSP object methods
• Convert an existing classic Domino web application to a full-featured XPage application
• Add and configure user input and container Controls as you build an XPage application step-by-step
• Add and configure both Document and View Data Sources and bind Controls to Field and Column
• Provide full user navigation to create, refresh, edit, save, and delete documents and response documents
• MaximizeView Control features by adding click-to-sort, unread marks, categories and category filtering, response document hierarchy, paging with user-selectable row counts, check boxes, View-level document operations, soft deletes, filter by key, Full Text Search, computed columns, image columns, and columns that perform lookups to other Data Sources
• Learn to spot and troubleshoot syntax and programming mistakes and trap for and report runtime errors
• Implement built-in input translation and validation and create custom converters and validators for more advanced data checking
• Emulate Notes computed, computed for display, and computed when composed Fields
• Leverage internal and external resource files, such as client- and server-side JavaScript libraries (including Dojo/Dijit already on the server), CSS, and image
• Fully implement Domino server, application, XPage, and document security mechanisms including multi-value Authors and Readers Fields, and Active Content Filtering to prevent cross-site scripting hacks
• Control save/replication conflicts and implement Document Locking
• Use scoped variables and Profile Documents to overcome the stateless nature of browser-based applications
• Conditionally load and render all types of Controls and Container Controls based on runtime conditions and learn the secrets behind the new breed of “one page applications”
• Style applications using conventional HTML layout devices, as well as Theme-driven CSS styling such as is done with default server and OneUI Themes
• Display JavaScript Array, multi-value Field, bound View, and ViewEntry collections, and document collections in Repeat and Data Table Controls
• Utilize almost every type of Control and Container Control, and when those aren’t enough, add Dijit widgets that run both client-side and server-side JavaScript
• Integrate XPage applications with classic Domino web applications.

Audience

This course is designed for Notes programmers well versed in using Domino Designer but who are new to XPages. We assume at a bare minimum that you have these skills prior to taking the course:

• Thorough knowledge of the Domino Designer development environment (this course brings you up to speed with Eclipse-based Domino Designer), including Form and View design, @Functions, and how to set the ACL
• Understanding of the Domino object classes, either from using them in LotusScript or Java (Java is preferred)
• Basic knowledge of web development technologies, including browser DOM, (X)HTML, XML, AJAX, Cascading Style Sheets, and some basic JavaScript.

Advanced XPages developers must know Java and Java EE (including JavaServer Faces (JSF) and JavaServer Pages (JSP) technologies).

Duration

This course is sold as a 4-day course.

Course design

This is a lecture/lab course that follows a task-oriented approach. During the many hands-on exercises, you will adapt an existing Notes/classic Domino web application to be an XPage application. As part of the adaptation you will add and exploit almost every type of Control and Container Control through in-depth explanation and hands-on assignments. As you expand your knowledge about XPages and Eclipse-based Domino Designer, you will immediately apply the concepts and techniques taught in the course as you work on your exercise application.

Outline

Topic 1: Classic Applications and XPage Applications
Classic applications for both Lotus Notes and browsers
How classic applications use Forms
XPage applications
Exercise: Open XPage application in a browser
How XPage applications use Forms
Document Universal NoteID (UNID) and NoteID refresher
XPage applications use XPages
Topic 2: Server and Client Software Requirements
XPages 8.5 versus 8.5.1+
Domino Server installation
XPages are run by the Domino HTTP task
Security enforcement for XPages
Domino Web Server settings
XPages server properties files
Lotus Notes 8.5.1+
Exercise: Open XPage application in Notes
Topic 3: Eclipse Framework
Eclipse Perspective and Eclipse Views
Open and remove applications from Applications View
Open applications in the Applications View
Working Sets of applications
Application properties
Design element properties
Multiple Editor View tabs
Customize Eclipse Views
Customize and save a Perspective
Eclipse Help System
Search
Code Compare
Topic 4: XPages in Domino Designer
Eclipse Views used for XPage development
Complementary design elements
Exercise: Create project application from a template
Exercise: Set database ACL
Exercise: Create local replica
Exercise: Create Product document in your database from Notes
Exercise: Open the application in browser
Build Project automatically
Topic 5: Create an XPage and Controls
Create a new XPage
Exercise: Create a new XPage
Add a Label Control
Exercise: Add a Label Control and test the XPage
Add a Data Source and Fields
Exercise: Add a Data Source and Fields
Edit Box Control properties
Edit Box tab
Data tab simple binding
Data tab Default value and Display type
Validation tab
Exercise: Set Edit Box Control properties
Topic 6: Save a Document
Submit XPage to create a document
Button Control to save the document
Save and Close button onclick event handler
Exercise: Add Save and Close Button Control
Exercise: Add Refresh Button Control
Navigate away warning
Topic 7: List Documents in a View Control
Exercise: Create XPage with View Control
Open document from link in View
How Domino picks an XPage to open a document
Exercise: Open product documents from the allProducts XPage
Add, delete, reorder Columns
Add a Column
Delete a Column
Reorder Columns
Click-to-sort and categorized Columns
View Control Display properties
View Control Style properties
Show Unread marks
Pager Control
Navigation between XPages
Launch application to XPage
Exercise: Launch project application to allProducts XPage
Topic 8: Controls that Use Simple Actions
Add Button Control
Simple Actions
Open Page Simple Action
Execute Script (server-side)
Confirm Action
Action Group
Exercise: Create product from allProducts XPage
Exercise: Go to allProducts after saving a product document
Exercise: Close, edit, or delete document from Read mode
Link Control
Simple Actions Help
Topic 9: Computed Properties & Edit Box Default Value
Static property values
Data type of a computed property value
Compute a property value
Two types of JavaScript
Example of server-side JavaScript: redirectToPage() method
Compute the defaultValue property of an Edit Box Control
Technique 1: Set value from Form Field with computeWithForm
Technique 2: Server-side script using Domino objects
Exercise: Server-side script using Domino objects
Colon operator shows data type
Technique 3: Server-side script using @Functions
Exercise: Server-side script using @Functions
Technique 4: Bind data using Advanced options
Topic 10: Debugging
Locate JavaScript syntax errors
When things don’t seem to be working
Catch and print runtime errors
Get XPage and Domino object information
Default error page
Client-side JavaScript debugging using Firebug
Firebug Lite Debug Console
Developer Tools in IE8
Topic 11: Input Translation and Custom Converters
Input translation in general
Technique 1: Client-side using browser DOM
Technique 2: Server-side onblur/onchange using Domino objects
Technique 3: Server-side beforeRenderResponse event handler
Built-in converters
Technique 4: Custom Converter for Strings
Exercise: Add custom converter
Topic 12: Computed Field Controls
Computed Field Control value property
Emulate classic computed Fields
Client-side JavaScript to change a Computed Field
Exercise: Compute and save the value of Total
Simple Action to Set Value
Topic 13: JavaScript Script Libraries
Create a JavaScript Script Library
Exercise: Server-side JavaScript Library
External JavaScript library files
Load Dojo module
Topic 14: Data Entry Validation
DIY Field validation using client-side JavaScript
DIY Field validation using server-side JavaScript
Client-side and server-side event handler interaction
Reusing classic onSubmit event handler validation code
Client-side validation using the Validation tab
Server-side validation using the Validation tab
Array of validators property
Add validators using the All Properties tab
Exercise: validateConstraint validator
customValidator validator
Exercise: Create customValidator validator
Exercise: validateExpression validator
Rules of the validators
Demo: Server-side event handler model
Exercise: beforeRenderResponse event handler
Topic 15: XPage and Document Security
XPage ACL entries array of properties
Document security: Name storage
Technique 1: computeWithForm property
Problem with a multi-value list of names
Technique 2: JavaScript to set Field Flag in Data Source
Exercise: Set Authors Field programmatically
Authors Fields you should always include
Readers Fields
Other ways to protect an XPage and its document data
Save/replication conflicts
Document Locking
Document Locking and document deletion
Active Content Filtering
Topic 16: Fixed Option Controls
List Box Control
Combo Box Control
Check Box Control
Checkbox group Control
Programmatic access to values selected in Checkbox group Control
Radio Button and Radio Button group Controls
Exercise: Grouped Radio Button Controls bound to a Field
Programmatic access to grouped Radio Button Controls
Dependent Fixed Option Controls
Exercise: Dependent Fixed Option Controls
Edit Box Control with Type Ahead
Type Ahead Computed Suggestions list
Exercise: Add Categories (Department) Field to product XPage
Exercise: Type Ahead Computed Suggestions list
Split multiple entries in Edit Box Control into a multi-value Field
Topic 17: Scoped Variables and Profile Documents
Scoped variable objects
Default value of an Edit Box Control
Bind value of Control to scoped variable
The scope of scoped variables
Client-side JavaScript access to a scoped variable
Exercise: Display view information
Exercise: Scoped variable for Type Ahead Computed Suggestions
Profile Documents
Create Profile Document
Set Profile Document Field
Read Profile Document Field
Delete Profile Document
Exercise: Profile Document
Topic 18: View Operations
Display database and View information
Show check boxes
Exercise: Select and delete documents from View Control
View Control object methods
Go to top of View
Change rows property from a Button Control
Return to same View page after opening document
Soft deletions
Categorized Views
Set expandLevel property in View Control
Pass expandLevel parameter in URL
Show single category
Set categoryFilter property in View Control
Pass categoryFilter parameter in URL
Filter column(s) by key
Set keys property in View Control
Pass keys parameter in URL
Exercise: Filter View Control by two keys
Full Text Search
Search items using [FIELD]
Pass search parameter in URL
Exercise: Create Full Text Search XPage
Topic 19: Response Documents
Create the response document Form
Establish the response relationship
Exercise: Create adjustInventory XPage
Real-time display of item value from parent document
Views that show responses
Traditional hierarchical View to show responses
Display a computed value
Single Category View to show responses
Exercise: Single Category View to show responses
Topic 20: Container Controls
Panel Control
Exercise: Panel Control
Tabbed Panel Control
Exercise: Tabbed Panel Control
Section Control
Exercise: Section Control
Custom Controls
Exercise: Basic Custom Control
Custom Control properties
Step 1: Create the custom properties in the Custom Control
Step 2: Read the custom properties inside the Custom Control
Step 3: Set the custom properties from the XPage
Exercise: Custom Control parameters
Complex data Type and Editor in Property Creator
Editable Area Control (Facet)
Step 1: Add the Editable Area Control to a Custom Control
Step 2: Add the Custom Control to XPage and add more controls to it
Change the appearance of Custom Control in the XPage design
Shop for Custom Controls
Topic 21: Conditional Display and Styles
Properties that affect control display and access
Ways to set display properties
Some conditions to test
Example from the Discussion template
Exercise: Conditionally display Save and Edit Button Controls
Exercise: Conditionally display Adjust Inventory Button Controls
Top down styling with Themes
Tweak the defaults
Pick a new Theme
Exercise: Apply a Theme
Add a style sheet to an XPage
Exercise: Alternating row backgrounds
CSS frameworks
Exercise: Add a style to a Panel
Framework resources
Topic 22: Computed View Elements
XPage and View designs
Computed View Column Header label
Computed Column value for InStock icon
Computed Column value with lookup to Domino Directory
Display HTML from underlying View column
Display paperclip icon if there is an attached file
Display picture of the attached file
Buttons to toggle the display of the paper clip and picture
Array of NoteIDs from documents selected in a View Control
Delete documents at the View level with Document Locking enabled
Topic 23: Rich Text and File Upload/Download
Rich Text Control
Exercise: Add Rich Text Control to XPage
Backend methods to create a Rich Text Field
Rich Text fidelity between storage formats and clients
Stop XPage users from editing Notes Rich Text
File Upload and Download Controls
Topic 24: Repeat and Data Table Controls
Repeat Control Data Source 1: JavaScript Array
Additional ways to build an Array as a Data Source
Repeat Control Data Source 2: Simple binding to a View
Use JavaScript instead to get value of column
Repeat Control Data Source 3: Collection of ViewEntries
Repeat Control Data Source 4: Collection of documents
Layout inside a Repeat Control
Nested Repeat Controls
Data Table Control
Review of Data Sources and value access
Topic 25: Dijit Widgets
What this Topic doesn’t cover
dijit.form.Button
dijit.form.Slider
Topic 26: Navigation
Review of codeless navigation mechanisms you have used
Link Control for navigation
Exercise: Navigation menu using Link Controls
Programmatic redirection to an XPage inside the application
Get URL and parameters of current XPage request
Login/Logout Link Control
Toggle between Edit and Read mode
Programmatic redirection to URL outside the application
“One-Page” applications
Exercise: Move adjustInventory into product XPage
Integrate XPages with classic Domino web applications
1. Open document to XPage from a hyperlink in a View
2. Open document using a Form from a View Control
3. Run Agent
WebQuerySave Agent
Web Agents