application layout control
DESCRIPTION
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 devicesTRANSCRIPT
![Page 1: Application Layout Control](https://reader031.vdocument.in/reader031/viewer/2022020115/5496f1b4ac795959288b5325/html5/thumbnails/1.jpg)
Application Layout Control
Tweet about this event: #XPages and mention us: @teamstudio @TLCCLTD
@PaulDN March 13, 2014
![Page 2: Application Layout Control](https://reader031.vdocument.in/reader031/viewer/2022020115/5496f1b4ac795959288b5325/html5/thumbnails/2.jpg)
@teamstudio teamstudio.com
@TLCCLTD
tlcc.com
Courtney Carter Inbound Marketing Specialist
![Page 3: Application Layout Control](https://reader031.vdocument.in/reader031/viewer/2022020115/5496f1b4ac795959288b5325/html5/thumbnails/3.jpg)
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
![Page 4: Application Layout Control](https://reader031.vdocument.in/reader031/viewer/2022020115/5496f1b4ac795959288b5325/html5/thumbnails/4.jpg)
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
![Page 5: Application Layout Control](https://reader031.vdocument.in/reader031/viewer/2022020115/5496f1b4ac795959288b5325/html5/thumbnails/5.jpg)
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
![Page 6: Application Layout Control](https://reader031.vdocument.in/reader031/viewer/2022020115/5496f1b4ac795959288b5325/html5/thumbnails/6.jpg)
• 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
![Page 7: Application Layout Control](https://reader031.vdocument.in/reader031/viewer/2022020115/5496f1b4ac795959288b5325/html5/thumbnails/7.jpg)
Rapid XPages Development using the Application Layout Control
1
#XPages
Your Hosts and Presenters Today:
Howard Greenberg TLCC
@TLCCLtd
Paul Della-Nebbia TLCC
@PaulDN
![Page 8: Application Layout Control](https://reader031.vdocument.in/reader031/viewer/2022020115/5496f1b4ac795959288b5325/html5/thumbnails/8.jpg)
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
![Page 9: Application Layout Control](https://reader031.vdocument.in/reader031/viewer/2022020115/5496f1b4ac795959288b5325/html5/thumbnails/9.jpg)
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)
![Page 10: Application Layout Control](https://reader031.vdocument.in/reader031/viewer/2022020115/5496f1b4ac795959288b5325/html5/thumbnails/10.jpg)
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
![Page 11: Application Layout Control](https://reader031.vdocument.in/reader031/viewer/2022020115/5496f1b4ac795959288b5325/html5/thumbnails/11.jpg)
Asking Questions
5
Q & A at the end! Type in your questions as they come up
![Page 12: Application Layout Control](https://reader031.vdocument.in/reader031/viewer/2022020115/5496f1b4ac795959288b5325/html5/thumbnails/12.jpg)
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
![Page 13: Application Layout Control](https://reader031.vdocument.in/reader031/viewer/2022020115/5496f1b4ac795959288b5325/html5/thumbnails/13.jpg)
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
![Page 14: Application Layout Control](https://reader031.vdocument.in/reader031/viewer/2022020115/5496f1b4ac795959288b5325/html5/thumbnails/14.jpg)
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
![Page 15: Application Layout Control](https://reader031.vdocument.in/reader031/viewer/2022020115/5496f1b4ac795959288b5325/html5/thumbnails/15.jpg)
Application Configuration
9
![Page 16: Application Layout Control](https://reader031.vdocument.in/reader031/viewer/2022020115/5496f1b4ac795959288b5325/html5/thumbnails/16.jpg)
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
![Page 17: Application Layout Control](https://reader031.vdocument.in/reader031/viewer/2022020115/5496f1b4ac795959288b5325/html5/thumbnails/17.jpg)
The oneuiv2.1 Themes
11
![Page 18: Application Layout Control](https://reader031.vdocument.in/reader031/viewer/2022020115/5496f1b4ac795959288b5325/html5/thumbnails/18.jpg)
Procedure: Setting a oneuiv2.1 Theme for an Application
12
![Page 19: Application Layout Control](https://reader031.vdocument.in/reader031/viewer/2022020115/5496f1b4ac795959288b5325/html5/thumbnails/19.jpg)
Procedure: Creating a Theme That Extends a Theme
13
DemoXPage721
![Page 20: Application Layout Control](https://reader031.vdocument.in/reader031/viewer/2022020115/5496f1b4ac795959288b5325/html5/thumbnails/20.jpg)
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
![Page 21: Application Layout Control](https://reader031.vdocument.in/reader031/viewer/2022020115/5496f1b4ac795959288b5325/html5/thumbnails/21.jpg)
Tree Nodes and Navigators
15
![Page 22: Application Layout Control](https://reader031.vdocument.in/reader031/viewer/2022020115/5496f1b4ac795959288b5325/html5/thumbnails/22.jpg)
One onItemClick event per navigator
16
• CSJS … XSP.getSubmitValue() • SSJS … context.getSubmittedValue()
DemoXPage617
![Page 23: Application Layout Control](https://reader031.vdocument.in/reader031/viewer/2022020115/5496f1b4ac795959288b5325/html5/thumbnails/23.jpg)
Useful Tree Nodes for the Application Layout
17 DemoXPage618 & DemoXPage619
dominoViewEntriesTreeNode & dominoViewListTreeNode
![Page 24: Application Layout Control](https://reader031.vdocument.in/reader031/viewer/2022020115/5496f1b4ac795959288b5325/html5/thumbnails/24.jpg)
Other Useful Tree Nodes for the Application Layout
18
pageTreeNode, userTreeNode & loginTreeNode
DemoXPage621a, 621b, 621c
![Page 25: Application Layout Control](https://reader031.vdocument.in/reader031/viewer/2022020115/5496f1b4ac795959288b5325/html5/thumbnails/25.jpg)
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
![Page 26: Application Layout Control](https://reader031.vdocument.in/reader031/viewer/2022020115/5496f1b4ac795959288b5325/html5/thumbnails/26.jpg)
Adding an Application Layout Control to an XPage (the wrong way)
20
![Page 27: Application Layout Control](https://reader031.vdocument.in/reader031/viewer/2022020115/5496f1b4ac795959288b5325/html5/thumbnails/27.jpg)
Six Facets and Five Bar Areas
21
![Page 28: Application Layout Control](https://reader031.vdocument.in/reader031/viewer/2022020115/5496f1b4ac795959288b5325/html5/thumbnails/28.jpg)
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:
![Page 29: Application Layout Control](https://reader031.vdocument.in/reader031/viewer/2022020115/5496f1b4ac795959288b5325/html5/thumbnails/29.jpg)
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
![Page 30: Application Layout Control](https://reader031.vdocument.in/reader031/viewer/2022020115/5496f1b4ac795959288b5325/html5/thumbnails/30.jpg)
Designing an Application Layout in a Custom Control
24
Demo761_CustByNameView
![Page 31: Application Layout Control](https://reader031.vdocument.in/reader031/viewer/2022020115/5496f1b4ac795959288b5325/html5/thumbnails/31.jpg)
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.)
![Page 32: Application Layout Control](https://reader031.vdocument.in/reader031/viewer/2022020115/5496f1b4ac795959288b5325/html5/thumbnails/32.jpg)
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
![Page 33: Application Layout Control](https://reader031.vdocument.in/reader031/viewer/2022020115/5496f1b4ac795959288b5325/html5/thumbnails/33.jpg)
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
![Page 34: Application Layout Control](https://reader031.vdocument.in/reader031/viewer/2022020115/5496f1b4ac795959288b5325/html5/thumbnails/34.jpg)
Designing an Application Layout in a Custom Control
28
• Step 3: Enable required columns (not the recommended approach) – Left column – Middle column – Right column
![Page 35: Application Layout Control](https://reader031.vdocument.in/reader031/viewer/2022020115/5496f1b4ac795959288b5325/html5/thumbnails/35.jpg)
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.
![Page 36: Application Layout Control](https://reader031.vdocument.in/reader031/viewer/2022020115/5496f1b4ac795959288b5325/html5/thumbnails/36.jpg)
Detour: Named versus Unnamed Facets
30
![Page 37: Application Layout Control](https://reader031.vdocument.in/reader031/viewer/2022020115/5496f1b4ac795959288b5325/html5/thumbnails/37.jpg)
Detour: Named versus Unnamed Facets
31
![Page 38: Application Layout Control](https://reader031.vdocument.in/reader031/viewer/2022020115/5496f1b4ac795959288b5325/html5/thumbnails/38.jpg)
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
![Page 39: Application Layout Control](https://reader031.vdocument.in/reader031/viewer/2022020115/5496f1b4ac795959288b5325/html5/thumbnails/39.jpg)
Designing an Application Layout in a Custom Control
33
• Step 3 continued: Establish a Naming Convention for facets and panel
![Page 40: Application Layout Control](https://reader031.vdocument.in/reader031/viewer/2022020115/5496f1b4ac795959288b5325/html5/thumbnails/40.jpg)
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
![Page 41: Application Layout Control](https://reader031.vdocument.in/reader031/viewer/2022020115/5496f1b4ac795959288b5325/html5/thumbnails/41.jpg)
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
![Page 42: Application Layout Control](https://reader031.vdocument.in/reader031/viewer/2022020115/5496f1b4ac795959288b5325/html5/thumbnails/42.jpg)
Navigation and Context – You are Here!
36
Demo761_CustByNameView
![Page 43: Application Layout Control](https://reader031.vdocument.in/reader031/viewer/2022020115/5496f1b4ac795959288b5325/html5/thumbnails/43.jpg)
Navigation and Context (Custom Control)
37
![Page 44: Application Layout Control](https://reader031.vdocument.in/reader031/viewer/2022020115/5496f1b4ac795959288b5325/html5/thumbnails/44.jpg)
Navigation and Context (XPages)
38
![Page 45: Application Layout Control](https://reader031.vdocument.in/reader031/viewer/2022020115/5496f1b4ac795959288b5325/html5/thumbnails/45.jpg)
Navigation and Context (Customers XPages)
39 Demo761_AppLayout (custom control)
![Page 46: Application Layout Control](https://reader031.vdocument.in/reader031/viewer/2022020115/5496f1b4ac795959288b5325/html5/thumbnails/46.jpg)
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
![Page 47: Application Layout Control](https://reader031.vdocument.in/reader031/viewer/2022020115/5496f1b4ac795959288b5325/html5/thumbnails/47.jpg)
Application Layout Design Strategies
41
![Page 48: Application Layout Control](https://reader031.vdocument.in/reader031/viewer/2022020115/5496f1b4ac795959288b5325/html5/thumbnails/48.jpg)
Application Layout Design Strategies
42
App Layout
![Page 49: Application Layout Control](https://reader031.vdocument.in/reader031/viewer/2022020115/5496f1b4ac795959288b5325/html5/thumbnails/49.jpg)
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
![Page 50: Application Layout Control](https://reader031.vdocument.in/reader031/viewer/2022020115/5496f1b4ac795959288b5325/html5/thumbnails/50.jpg)
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
![Page 51: Application Layout Control](https://reader031.vdocument.in/reader031/viewer/2022020115/5496f1b4ac795959288b5325/html5/thumbnails/51.jpg)
Get the Slides and Demo Database
http://www.tlcc.com/mar-webinar
45
![Page 52: Application Layout Control](https://reader031.vdocument.in/reader031/viewer/2022020115/5496f1b4ac795959288b5325/html5/thumbnails/52.jpg)
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…)
![Page 53: Application Layout Control](https://reader031.vdocument.in/reader031/viewer/2022020115/5496f1b4ac795959288b5325/html5/thumbnails/53.jpg)
Questions????
47
Use the Q&A pane in WebEx to ask questions We will answer your questions verbally
![Page 54: Application Layout Control](https://reader031.vdocument.in/reader031/viewer/2022020115/5496f1b4ac795959288b5325/html5/thumbnails/54.jpg)
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