A Closer Look at XPages in IBM Lotus Domino Designer 8.5 Ray Chan Advisory I/T Specialist Lotus, IBM Software Group 2008 IBM Corporation
Agenda XPage overview From palette to properties: Controls, Ajax & Localization Look and feel: CSS & Themes Where's the logic? Events, simple actions, JavaScript and more IBM Software Group Lotus software Measure twice, cut once: Custom controls It's a wrap 2
XPages A Big Leap Forward Visual Web page construction Advanced U/I controls Drag and drop development Instant Application Development XML markup with source Full control of HTML Business logic using JavaScript Presentation using CSS Skinning using themes Leverages existing NSF assets Web agents, formulas, security,... IBM Software Group Lotus software 3
XPages What is it? A new Domino design element A runtime designed to generate modern Web applications Pure XML markup, defining: Controls, data sources, business logic, custom controls Solves age-old limitations expressed by the Domino community IBM Software Group Lotus software UI/Data separation, HTML generation control, server state, localization, extensibility Capable of targeting multiple clients Highly extensible runtime and design time Standards-based technology: JSF Full integrated into Domino Designer 8.5 Visual Design Page, Source Page, Control Palette, Outline View etc 4
XPage Prerequisites Installation and configuration XPage runtime is installed by default If doing custom install, make sure its checked HTTP task must be running Skills Knowledge of Domino object model HTML, CSS, XML and JavaScript are very beneficial but you can built an application without them Question = Do I need to learn Java? Answer = NO! 5
XPage Security XPages use agent security model. Settings for Xpage application access XPage signer must have explicit access to server or select users listed in all trusted directories. Other settings which likely require XPage design element signature to be added XPage Web user access Standard Domino Web authentication applies See Xpage User Guide: Designing with XPages \ Creating XPages \ Signing XPages 6
Agenda XPage overview From palette to properties: Controls, Ajax & Localization Look and feel: CSS & Themes Where's the logic? Events, simple actions, JavaScript and more IBM Software Group Lotus software Measure twice, cut once: Custom controls It's a wrap 7
XPages in Domino Designer 8.5 Controls palette XPage design element IBM Software Group Lotus software Optional source mode Scripting & Simple Actions Custom Controls palette Outline Property sheets 8
XPage Controls Extensive palette of pre-built controls All the basic controls and containers expected for developing Web 2.0 apps Two categories of controls Core single entities used in XPage or custom control Container more complex and contain other controls Extensible palette of controls Custom controls More on that later... 9
XPage in 5 min Demo
Built-In AJAX Support AJAX partial page refresh Available on any event Pre-built on View Pager AJAX Typeahead Add behavior to any edit control Content can be returned through a simple formula in the page No need to write a separate service Dojo is provided as the client side library Will share some common controls with the classic Web applications 11
Partial Update Demo
CSS Support All look and feel is driven by CSS Enforce consistency between applications Help solving accessibility issues (Section 508 compliant) XPages feature global references to CSS files Style classes and inline styles can be applied per control 13
CSS Skinning Themes Allows an application to pick up a look and feel without touching the actual application code Default styles are applied to controls without any explicit style set per control every property can be set Skinning can be disabled per application/control Association between control done through a Theme Defined at different levels: server or application Stored in a shared database Easily customizable by a developer and/or an administrator 14
Switch from this
To This... In seconds, the flexibility and agility of Themes
Apply Theme Demo
Application Properties XPages tab GZip support Localization 18
Localization Demo IBM Software Group Lotus software
Agenda XPage overview From palette to properties: Controls, Ajax & Localization Look and feel: CSS & Themes Where's the logic? Events, simple actions, JavaScript and more IBM Software Group Lotus software Measure twice, cut once: Custom controls It's a wrap 20
Supported Languages JavaScript On the Client On the Server Access to back-end classes, @function support Global objects Extended API for i18n, XPages data... Server Side state: application scope, session scope & request scope Simple Actions Java IBM Software Group Lotus software Adding a Java class/library to an NSF JavaScript/Java bridge JSF managed beans Using EL 21
XPages Events Model XPages events Page events Control Events Data sources events Computed Properties Data binding IBM Software Group Lotus software Server side JavaScript Libraries Validating data Validation can occur on the client and on the server The predefined validators Creating custom validators 22
Leveraging Existing Business Logic Forms Default Values Validation Formulas Views The query engine IBM Software Group Lotus software Agents Calling an agent (LotusScript) 23
Custom Controls Made by assembling existing controls Behave exactly as native controls Appear in the Control palette Define their own set of properties IBM Software Group Lotus software Hierarchical properties, with custom editors Editable areas Can be used As reusable UI assets (ex: an address control, a toolbar...) As a way to share some layout (ex: common page layout) Can be shared through templates (NTF) as any other design element 24
Agenda XPage overview From palette to properties: Controls, Ajax & Localization Look and feel: CSS & Themes Where's the logic? Events, simple actions, JavaScript and more IBM Software Group Lotus software Measure twice, cut once: Custom controls It's a wrap 25
XPage - Help Accessed from menu Two reference guides IBM Software Group F1 Lotus for software context sensitive help 26
Resources New XPage Tutorial Use instead of one in public betas kits Will ship with Designer Learning objectives Set up and view an application containing XPage elements Create an XPage Add controls to an XPage Bind data to an Xpage Add navigation to an Xpage Create a custom control Download new XPage Tutorial here Use advanced binding and scripting No need for server use Designer preview in Web browser * 27
Resources Continued Discussion 8.5 Coming soon to Lotus Greehouse https://greenhouse.lotus.com XPages articles and examples IBM Software Group Lotus software http://www.thenorth.com/northern.nsf/html/xpagesarticle http://www.jmackey.net/ http://www.lotus911.com/nathan/escape.nsf/d6plinks/ntfn- 7FRG79 28