XPages Application Layout Control - TLCC March, 2014 Webinar

50 %
50 %
Information about XPages Application Layout Control - TLCC March, 2014 Webinar
Technology

Published on March 12, 2014

Author: HowardGreenberg

Source: slideshare.net

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. We will compare several application layout design strategies that can be used with the Application Layout control and use the Application Layout control with the Bootstrap4XPages project to create a responsive design for desktop, tablet and mobile devices.

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? 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

#xpages presentations

Add a comment

Related presentations

Related pages

XPages Application Layout Control - TLCC March, 2014 ...

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 ...
Read more

Demo Database and slides from TLCC/Teamstudio March XPages ...

Thanks for attending our webinar. The webinar was based on TLCC's Rapid XPages Development using Application Layout and Dojo UI Controls self-paced course.
Read more

Recorded Webinars - TLCC XPages Webinar Series

XPages Webinar Series Recordings. ... Tips for Building Your First Java XPages Application: December 2, 2014: ... Application Layout Control. March 13, ...
Read more

Creating a Great XPages User Interface, TLCC Teamstudio ...

Creating a Great XPages User Interface, TLCC Teamstudio Webinar - Feb, 2014 Dec 18, 2014 Technology howard-greenberg
Read more

Creating an Application Layout with CSS/HTML Provided by a ...

I recently started working on an XPages application for which the UI had already ... 2014 in XPages; ... Creating an Application Layout with CSS/HTML ...
Read more

Layout And Control | LinkedIn

View 2001 Layout And Control posts, presentations, ... pcb layout at Control Technology Corp. ... Application/Control Engineer at Westport, ...
Read more

Tlcc | LinkedIn

By Mayor Dale Ross The U.S. Census Bureau recently announced that in 2014, ... TLCC director, as well as a representative... Dale Ross.
Read more