The document discusses using the Application Layout control in IBM Notes and Domino to rapidly develop a consistent user interface. It describes prerequisites like installing the Extension Library, configuring OneUI themes, and using tree nodes and navigators. The key aspects covered are designing an Application Layout within a custom control by enabling all six facet areas and adding properties, handling navigation and context, and strategies like using Bootstrap themes. The document aims to demonstrate how the Application Layout control can help implement a "One UI" design framework for an application.
3. Who are we?
Howard Greenberg & Paul Della-Nebbia
– Teaching Notes and Domino since 1994
– Partners at TLCC, the Leader in Notes and Domino Training
– And Now, the Leader in XPages Training
3
4. About TLCC
Lots of XPages Courses for both 9 and 8.5!
‒
‒
‒
‒
‒
Introduction to XPages Development … FREE !!
JavaScript for XPages Development
XPages Development 1
XPages Development 2
Rapid XPages Development Using the Application
Layout and Dojo UI Controls
‒ Mobile XPages for Domino
‒ Java 1 for XPages Developers
‒ Java 2 for XPages Developers
Self Paced Training
‒ Learn anywhere!
‒ An Instructor is a click away
Instructor Led (Private)
‒ Online or at your site
TLCC Mentoring Services
4
5. Application Layout control
The Application Layout control is used to Rapidly develop a consistent user interface that can
implement the “One UI” design framework
5
6. Prerequisites & Configuration
OneUI version 2.1 Themes
Tree Nodes and Navigators
Application Layout Design Framework
Designing an Application Layout in a Custom Control
Navigation and Context
Application Layout Design strategies
Wrap up
6
7. System Prerequisites
Notes and Domino 8.5.3 (Install Extension Library from
OpenNTF or IBM’s Update Pack 1)
– Domino Server
• Copy files or use an Update Site Database (preferred)
– Designer
• Install Plugin
– Notes client (only needed for XPINC apps)
• Use Update Site
Notes and Domino 9 (Extension Library is already included for
Domino server, Designer, and Notes clients)
– Optionally install Bootstrap4XPages plugin - to use Bootstrap
and Bootstrap responsive themes
7
9. Prerequisites & Configuration
OneUI version 2.1 Themes
Tree Nodes and Navigators
Application Layout Design Framework
Designing an Application Layout in a Custom Control
Navigation and Context
Application Layout Design strategies
Wrap up
9
13. Prerequisites & Configuration
OneUI version 2.1 Themes
Tree Nodes and Navigators
Application Layout Design Framework
Designing an Application Layout in a Custom Control
Navigation and Context
Application Layout Design strategies
Wrap up
13
15. One onItemClick event per navigator
CSJS … XSP.getSubmitValue()
SSJS … context.getSubmittedValue()
15
DemoXPage617
16. Useful Tree Nodes for the Application Layout
dominoViewEntriesTreeNode & dominoViewListTreeNode
16
DemoXPage618 & DemoXPage619
17. Other Useful Tree Nodes for the Application Layout
pageTreeNode, userTreeNode & loginTreeNode
17
DemoXPage621a, 621b, 621c
18. Prerequisites & Configuration
OneUI version 2.1 Themes
Tree Nodes and Navigators
Application Layout Design Framework
Designing an Application Layout in a Custom Control
Navigation and Context
Application Layout Design strategies
Wrap up
18
21. One onItemClick event for All Nodes in Configuration
onItemClick – triggered when any node in any of its configuration properties is fired,
including:
– bannerApplicationLinks
SSJS - get submitted value for clicked node:
– bannerUtilityLinks
– titleBarTabs
– placeBarActions
– footerLinks
CSJS - get the submit value for clicked node:
DemoXPage711, DemoXPage712
21
22. Prerequisites & Configuration
OneUI version 2.1 Themes
Tree Nodes and Navigators
Application Layout Design Framework
Designing an Application Layout in a Custom Control
Navigation and Context
Application Layout Design strategies
Wrap up
22
24. Designing an Application Layout in a Custom Control
(the right way)
Enable all six facet area in the
applicationLayout by adding an Editable
Area control (xp:callback) to each facet
Add Property Definitions to the custom
control to pass property values from the
XPage to ccAppLayout (like
navigationPath, enableSearch,
enableSalesBar enablePartsBar, etc…)
Demo761_AppLayout (custom control)
24
25. Designing an Application Layout in a Custom Control
(procedure)
Step 1: Create a Custom Control and drag in an Application Layout control
– Choose a OneUI version 2.1 theme
25
26. Designing an Application Layout in a Custom Control
(procedure continued)
Step 2: Set the configuration properties:
– Banner nodes
– Title Bar nodes (tabs)
– Place Bar nodes (buttons)
– Footer links
– Legal text
26
27. Designing an Application Layout in a Custom Control
(procedure continued)
Step 3: Enable required columns (not the recommended approach)
– Left column
– Middle column
– Right column
27
28. Detour: What’s a facet?
A.
A named area in a control, addressable via xp:key
B.
The resulting drop location to add a component for an Editable Area added to a
custom control.
C.
A named child instead of a sequential one. Only used if the parent chooses to.
Sequential children are comparatively autonomous.
D.
All of the above.
E.
None of the above.
28
31. Designing an Application Layout in a Custom Control
(procedure continued after the facet detour)
Step 3: Enable ALL SIX facet areas in the applicationLayout by adding an
Editable Area control (xp:callback) to each facet
31
32. Designing an Application Layout in a Custom Control
(procedure continued)
Step 3 continued: Establish a Naming Convention for facets and panels
32
33. Designing an Application Layout in a Custom Control
(procedure continued)
Step 4: Add Property Definitions to the custom control to pass property values from the
XPage to ccAppLayout (like navigationPath, enableSearch, enableSalesBar, etc…)
ccAppLayout
33
34. Prerequisites & Configuration
OneUI version 2.1 Themes
Tree Nodes and Navigators
Application Layout Design Framework
Designing an Application Layout in a Custom Control
Navigation and Context
Application Layout Design strategies
Wrap up
34
39. Prerequisites & Configuration
OneUI version 2.1 Themes
Tree Nodes and Navigators
Application Layout Design Framework
Designing an Application Layout in a Custom Control
Navigation and Context
Application Layout Design strategies
Wrap up
39
43. Prerequisites & Configuration
OneUI version 2.1 Themes
Tree Nodes and Navigators
Application Layout Design Framework
Designing an Application Layout in a Custom Control
Navigation and Context
Application Layout Design strategies
Wrap up
43
44. Get the Slides and Demo Database
http://www.tlcc.com/BP202
44
45. Key Points
OneUI is a very good idea
The Application Layout control is used to Rapidly develop a consistent user interface that
can implement the “One UI” design framework (awesome)
Application Layout control + Bootstrap4XPages (totally awesome)
One onItemClick event per navigator
– CSJS … XSP.getSubmitValue()
– SSJS … context.getSubmittedValue()
Enable all six facet areas in the applicationLayout by adding an Editable Area control
(xp:callback) to each facet
Add Property Definitions to the custom control to pass property values from the XPage to
ccAppLayout (like navigationPath, enableSearch, enableSalesBar enablePartsBar, etc…)
45
46. Access Connect Online to complete your session surveys using any:
– Web or mobile browser
– Connect Online kiosk onsite
46