Application Layout Control Tweet about this event: #XPages and mention us: @teamstudio @TLCCLTD @PaulDN March 13, 2014
Dec 05, 2014
Application Layout Control
Tweet about this event: #XPages and mention us: @teamstudio @TLCCLTD
@PaulDN March 13, 2014
@teamstudio teamstudio.com
@TLCCLTD
tlcc.com
Courtney Carter Inbound Marketing Specialist
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
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
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
• 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
Rapid XPages Development using the Application Layout Control
1
#XPages
Your Hosts and Presenters Today:
Howard Greenberg TLCC
@TLCCLtd
Paul Della-Nebbia TLCC
@PaulDN
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
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)
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
Asking Questions
5
Q & A at the end! Type in your questions as they come up
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
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
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
Application Configuration
9
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
The oneuiv2.1 Themes
11
Procedure: Setting a oneuiv2.1 Theme for an Application
12
Procedure: Creating a Theme That Extends a Theme
13
DemoXPage721
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
Tree Nodes and Navigators
15
One onItemClick event per navigator
16
• CSJS … XSP.getSubmitValue() • SSJS … context.getSubmittedValue()
DemoXPage617
Useful Tree Nodes for the Application Layout
17 DemoXPage618 & DemoXPage619
dominoViewEntriesTreeNode & dominoViewListTreeNode
Other Useful Tree Nodes for the Application Layout
18
pageTreeNode, userTreeNode & loginTreeNode
DemoXPage621a, 621b, 621c
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
Adding an Application Layout Control to an XPage (the wrong way)
20
Six Facets and Five Bar Areas
21
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:
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
Designing an Application Layout in a Custom Control
24
Demo761_CustByNameView
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.)
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
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
Designing an Application Layout in a Custom Control
28
• Step 3: Enable required columns (not the recommended approach) – Left column – Middle column – Right column
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.
Detour: Named versus Unnamed Facets
30
Detour: Named versus Unnamed Facets
31
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
Designing an Application Layout in a Custom Control
33
• Step 3 continued: Establish a Naming Convention for facets and panel
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
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
Navigation and Context – You are Here!
36
Demo761_CustByNameView
Navigation and Context (Custom Control)
37
Navigation and Context (XPages)
38
Navigation and Context (Customers XPages)
39 Demo761_AppLayout (custom control)
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
Application Layout Design Strategies
41
Application Layout Design Strategies
42
App Layout
Application Configuration for Bootstrap4XPages
43
• Install Bootstrap4XPages plugin – Domino server – Domino Designer – Notes client (for XPiNC)
• Application settings (xsp.properties)
– xsp.library.depends= com.ibm.xsp.extlib.library, org.openntf.xsp.bootstrap.library
– xsp.theme= (one of these)
• bootstrapv2.3.2 • bootstrapv2.3.2r • bootstrapv3.0.0
DemoXPage722
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
Get the Slides and Demo Database
http://www.tlcc.com/mar-webinar
45
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…)
Questions????
47
Use the Q&A pane in WebEx to ask questions We will answer your questions verbally
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? [email protected] 877-228-6178
TLCC Questions?
[email protected] [email protected] 888-241-8522 or 561-953-0095
Howard Greenberg Courtney Carter
#XPages
@ptcalhoun
@TLCCLtd
@Teamstudio
@PaulDN
Paul Della-Nebbia