Rapid XPages Development using Application Layout and Dojo UI Controls (9.0)
Duration: 4 classroom equivalent days
Discussion Access: One Year

Summary Description
Want to quickly build a great user interface for your XPages applications? The Rapid XPages Development using Application Layout and Dojo UI Controls course takes a deep dive into many of the controls now included in IBM Notes and Domino 9. These controls will empower you to make your XPages applications look and function great with a minimal amount of time. Learn how to maximize the Form Table and Dynamic View Panel to build XPages that surface Domino forms and views. Then take your application to a Web 2.0 look with the many many Dojo controls to allow user input with sliders, spinners, drop down selections, date-time pickers and much more. Use dialog controls such as the value and name picker dialog controls, tooltips and the InPlace Form control to provide for editing the information right in a view. Learn how to use the very powerful Data View control to surface Domino views. Then use the Application Layout control and the related navigation controls to be able to create one custom control that is the backbone of your application user interface. Different design methodologies are presented to give you the experience you need to take what you have learned and immediately apply it to your applications.
This course will also help prepare you for the required exams to be certified as an IBM Certified Application Developer - Notes and Domino 9.

Audience and Prerequisites
Experienced Notes and Domino application developers with XPages development experience. Experience with JavaScript and the Domino Object Model (LotusScript or Java) is also strongly suggested.
The following TLCC courses (or their equivalent) are prerequisite for this course:
  • JavaScript for XPages Development
  • XPages Development 1 for Notes and Domino 9.0

System Requirements
The system requirements for this course are:
  • Domino Designer 9
    (This must be installed prior to installing this TLCC course.)
  • A current web browser client
  • Access to the Internet for instructor support

Course Modules

Module 1 - Introduction to Rapid XPages Development and Tools
This module begins with a review of XPages design concepts and structures applicable to controls in the Extension Library used for the rapid development of XPages applications. An overview of the areas and function of the Application Layout control is initially covered in this module to show how it is used to provide a consistent layout and interface for the demonstrations and activities in this course. Later, the Application Layout control will be covered in much more detail in module 7. Finally, this module shows how the Dump Object control can be effectively used to display the contents of almost any object available in the XPages context.
  • Familiarize yourself with some of the Extension Library terminology used in course
  • Distinguish between the XPages core library and the Extension Library
  • Understand how the XPages namespace definitions and control tag prefixes are used to identify and distinguish the different control types used on an XPage
  • Understand the purpose and function of editable areas, facets and keys
  • Distinguish between named and unnamed facets
  • Discover how the Application Layout control can be used to define a consistent application layout and user experience
  • Learn the different areas of the Application Layout control
  • Use the Dump Object control to display the contents of a JavaScript object or XPage component object
  • Use the TLCC provided custom controls to dump a named object or component
Module 2 - Dynamic Content and the Form Table Control
This module shows how the Form Table control can be used to quickly create a Web 2.0 looking form for document creation and display. Several extLib controls that enable developers to deliver dynamic content are then covered and demonstrated in this module.
  • Discover the features and advantages of using the Form Table control
  • Use a Switch control to dynamically render only one of its child facets
  • Understand the benefits of using a Dynamic Content control
  • Use a Multi-image Output control to display one of several images
  • Use a Dynamic View Panel control to dynamically display one of several Domino views
  • Provide the necessary additional coding to open the selected document in a Dynamic View Panel control in read mode
Module 3 - Dojo Form Input Controls and Effects
This module covers the Dojo Form input and selection controls from the ExtLib as well as Dojo effects actions that can be applied to a target control on the XPage.
  • Introduce the Dojo controls in the Extension Library
  • Add an ExtLib Dojo input control to an XPage
  • Use the Dojo Text Box , Dojo Text Area and Dojo Simple Text Area controls
  • Validate input using the Dojo Validation Text Box control
  • Use a regular expression to validate a Dojo Validation Text Box
  • Discover the features and benefits of using Dojo Number, Currency, Spinner and Slider controls
  • Display date and time pickers using the Dojo Date and Time controls
  • Discover the advantages of using the Dojo Combo Box and Dojo Filtering Select controls over the core Combo Box control
  • Use the Dojo Link Select control to display a listing of selectable links that can be bound to a document field or scoped variable
  • Use the Dojo Toggle Button control to toggle the value of a bound field
  • Add Dojo effects and animation to fade, wipe, move and animate a target control on the XPage
Module 4 - Dialogs, Tooltips, Name and Value Pickers
This module covers several useful extension library controls to enhance the user interface and experience.
  • Enable Tooltip controls to display either a simple or complex message for its target control
  • Provide different interface options for a Value Picker control including check boxes, search, validation and type-ahead support
  • Configure the Name Picker control to pick names or groups from public and personal address books or names from a specified Domino view
  • Design Dialog controls to display static information or to be used as a type of "dialog form" for user input
  • Understand the differences in design and interface between the Dialog and Tooltip Dialog controls
  • Discover how the In Place Form control can be used as an efficient interface control to read or edit document data
  • Use the In Place Form to enable editing of a document right in the "view" XPage
Module 5 - Data View Control
The Data View control provides a complete and robust framework for displaying the contents of a Domino view. This module first introduces the design framework of the Data View control and then describes and demonstrates some of the unique features and capabilities it provides in XPages development.
  • Understand the Data View design framework and its differences/advantages to the core View control
  • Use and configure the five different ExtLib pager controls for use with a Data View
  • Categorize columns in a Data View by either setting the categoryColumn property or by using the categoryRow facet
  • Realize the power the Detail Facet can provide as a built-in repeat control for delivering information in different ways right in the view
  • Configure the Detail Facet for in-view editing applications, look-ups to other data sources and single page read-only applications
  • Disable the summary column link for single-page read-only applications
  • Create single-page read-only applications with by doing lookups in the Details Facet
  • Apply other techniques including an "Embedded View", changing the row style when hovered and adding an icon column
Module 6 - Navigation Controls
The ExtLib offers several navigational controls each with their own unique characteristics and functionality allowing an XPages developer to choose the best tool for the job. This module first introduces and demonstrates the different tree node types selectable for the treeNodes property used with most of the navigation controls covered in this module. The remainder of the module covers each of the navigation controls along with several techniques to exploit their full capabilities.
  • Introduce the different treeNodes property choices used to build a "tree" of choices (nodes) with branches and sub-branches
  • Use a Navigator control to create a list of navigation options to either navigate to a different XPage or to navigate/change the content in the existing XPage
  • Use the Bread Crumbs control interface to both show the current location in the application's hierarchy and provide links to jump back to any page in the hierarchy path
  • Use either a List of Links control or Sort Links control to render the node tree as a horizontal list of links with a vertical bar separator between them
  • Discover how both the List Container control and Inline List Container control can be used as container controls for creating a list of items
  • Use the Popup Menu control to create a menu of choices from the nodes added to its treeNodes property
  • Discover how the Toolbar control can be used to provide an interface functionally and visually similar to the Action Bar in Notes Form and View design
  • Create an accordion menu interface by using the Accordion control or by using the Dojo Accordion Container and Dojo Accordion Pane controls together
  • Configure a Tag Cloud control to provide a visual weighting for the most recurring words or tags
  • Configure a Widget Container control with options to display a title bar, collapse/expand the container, include a drop-down menu and scroll the container contents
Module 7 - Application Layout and Design Strategies
This module takes a deep dive into the design of the Application Layout and how to fully exploit its framework for rapid XPages development. Before examining and demonstrating several effective "design layout" strategies using the Application Layout, key concepts and features of the Application layout are covered. These key concepts such as enabling the search feature, applying a consistent design using custom controls and providing effective and intuitive navigation will provide the necessary foundation to understand and implement the presented design layout strategies. Finally, this module covers how to customize the Application Layout control using CSS and an HTML/CSS debugger like Firebug.
  • Identify and understand how the six facet areas and five bar areas of the Application Layout are set
  • Set a oneuiv2.1 theme for an application
  • Allow a user to change the color theme of an application to select their own color theme
  • Use the xe:userTreeNode and xe:loginTreeNode as a utility link
  • Create a custom login and logout node
  • Use the userBean to render action nodes
  • Render document edit and delete privileges with custom code to determine if the user has author priviledges
  • Implement the two different ways to provide a search feature with the Application Layout
  • Understand the natural benefits of designing an Application Layout in a Custom Control
  • Use the navigationPath property to pass navigational context information from the XPage to the Application Layout in the custom control
  • Examine several effective design layout strategies and how to implement them into your own applications
  • Learn how to customize the Application Layout control