The Application Layout control may be the most useful and powerful tool available to an XPages developer. A well designed Application Layout can be used to provide a consistent design across all of your XPages applications and increase your XPages development productivity. This webinar will cover:
-How to enable and design the Application Layout in a custom control to provide a consistent user interface
-Compare several application layout design strategies that can be used with the Application Layout control
-Use the Application Layout control with the Bootstrap4XPages project to create a responsive design for desktop, tablet and mobile devices
3. Who We Are
• Our background is in creating tools for collaborative
computing in mid-size and large enterprises,
primarily for IBM Notes
• Easy-to-use tools for developers and administrators
• 2300+ active customers, 47 countries
• Offices in US, UK and Japan
• Entered mobile space in 2010 with Unplugged: easy
mobilization of Notes apps to Blackberry, Android
and iOS
4. Teamstudio Unplugged
• Your mobile Domino server: take your Notes apps
with you!
• End-users access Notes applications from mobile
devices whether online or offline
• Leverages existing skills and technology – XPages –
a replication model you already know
• Unplugged 3.0 recently released
5. Unplugged Templates
• Continuity – Mobile offline access to
BCM programs
• OneView Approvals – Expense
approvals; anywhere, anytime
• CustomerView – lightweight CRM
framework for field sales and field
service teams
• Contacts – customer information database
• Activities – customer activity log
• Media – mobile offline file storage and access
6. • Next Wireless Wednesdays webinar: Part 3 on April 2,
2014
o Learn Domino mobile development
• Next Teamstudio/TLCC webinar: April 10, 2014
• May Teamstudio/TLCC webinar: May 13, 2014
• Promotion:
• Demo our end-to-end source code control and version
management tools, and be entered to win an XBOX gaming
system
7. Rapid XPages Development using the
Application Layout Control
1
#XPages
Your Hosts and Presenters Today:
Howard Greenberg
TLCC
@TLCCLtd
Paul Della-Nebbia
TLCC
@PaulDN
8. TLCC Courses and Services
• The Leader in Notes and Domino Training since
1997
• Self Paced Distance Learning Courses for
Notes/Domino
– XPages, Development, and Administration (user too!)
• OnSite Private Classes
• Mentoring/Consulting Services
• Free demo courses
– Intro. To XPages Development
– Application Development 1
2
9. Upcoming and Recorded Webinars
3
Webinar Schedule
Ask The XPages Experts – April 10th
It’s Not Infernal: Dante’s Nine Circles of XPages Heaven – May 13th
Bootstrap4XPages – June 17th
www.tlcc.com/xpages-webinar
View Previous Webinars
(use url above)
10. Engage User Conference
• In Europe? Don’t Miss Engage (formerly BLUG)
– March 17th and 18th
– FREE!
– Over 50 breakout sessions by
the leading experts
• Tack on an extra day of training on March 19th
– Rapid XPages Development
• With Howard Greenberg
• Get TLCC’s Four Day Rapid XPages Development course as
part of the tuition!!!
– A $600 value by itself!
Click here for more information
4
12. Application Layout control
6
• The Application Layout control is used to Rapidly develop a consistent
user interface that can implement the “One UI” design framework
13. Agenda
7
• 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
14. System Prerequisites
8
• 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
16. Agenda
10
• 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
20. Agenda
14
• 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. One onItemClick event per navigator
16
• CSJS … XSP.getSubmitValue()
• SSJS … context.getSubmittedValue()
DemoXPage617
23. Useful Tree Nodes for the Application Layout
17
DemoXPage618 & DemoXPage619
dominoViewEntriesTreeNode & dominoViewListTreeNode
24. Other Useful Tree Nodes for the Application Layout
18
pageTreeNode, userTreeNode & loginTreeNode
DemoXPage621a, 621b, 621c
25. Agenda
19
• 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
28. One onItemClick event for All Nodes in Configuration
22
• onItemClick – triggered when any node in any of its
configuration properties is fired, including:
– bannerApplicationLinks
– bannerUtilityLinks
– titleBarTabs
– placeBarActions
– footerLinks
DemoXPage711, DemoXPage712
SSJS - get submitted value for clicked node:
CSJS - get the submit value for clicked node:
29. Agenda
23
• 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
31. Designing an Application Layout in a Custom Control
25
Demo761_AppLayout (custom control)
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.)
32. Designing an Application Layout in a Custom Control
26
• Step 1: Create a Custom Control and drag in an Application Layout control
– Choose a OneUI version 2.1 theme
33. Designing an Application Layout in a Custom Control
27
• Step 2: Set the configuration
properties:
– Banner nodes
– Title Bar nodes (tabs)
– Place Bar nodes (buttons)
– Footer links
– Legal text
34. Designing an Application Layout in a Custom Control
28
• Step 3: Enable required columns (not the recommended approach)
– Left column
– Middle column
– Right column
35. Detour: What’s a facet?
29
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.
38. Designing an Application Layout in a Custom Control (continuued)
32
• Step 3: Enable ALL SIX facet areas in the applicationLayout by adding an
Editable Area control (xp:callback) to each facet
39. Designing an Application Layout in a Custom Control
33
• Step 3 continued: Establish a Naming Convention for facets and panel
40. Designing an Application Layout in a Custom Control
34
• Step 4: Add Property Definitions to the custom control to pass property values from
the XPage to ccAppLayout (like navigationPath, enableSearch, enableSalesBar, etc…)
ccAppLayout
41. Agenda
35
• 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
46. Agenda
40
• 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
50. Agenda
44
• 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
51. Get the Slides and Demo Database
http://www.tlcc.com/mar-webinar
45
52. Key Points
46
• 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…)
54. Download the demo - www.tlcc.com/mar-webinar
Upcoming Events:
Engage in the Netherlands, March 17th-18th
TLCC TackItOn the day after!
Atlanta User Group Meeting on April 7th
Question and Answer Time!
48
Teamstudio Questions?
contactus@teamstudio.com
877-228-6178
TLCC Questions?
howardg@tlcc.com paul@tlcc.com
888-241-8522 or 561-953-0095
Howard Greenberg Courtney Carter
#XPages
@ptcalhoun
@TLCCLtd
@Teamstudio
@PaulDN
Paul Della-Nebbia