Application Layout Control

45 %
55 %
Information about Application Layout Control
Technology

Published on March 14, 2014

Author: Teamstudio

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

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

Application Layout Control Updated 2016 - Applications

Application control | watchguard technologies, Application control is watchguard technologies' security module that allows, blocks or restricts a user's ...
Read more

Windows Forms Layout

Windows Forms Layout ... Grouping lets us break down our control layout into manageable ... specializing in distributed applications in .NET and ...
Read more

[Webinar] Application Layout Control - YouTube

The Application Layout control may be the most useful and powerful tool available to an XPages developer. A well designed Application Layout can ...
Read more

OpenNTF XSnippet: OneUI Application Layout Custom Control

If you don't use Extension Library, then this 'Layout' custom control might be handy. Installation: 1. Copy all into a new Custom Control 2. Delete or hide ...
Read more

WPF Layouts - A Visual Quick Start - CodeProject

A beginner's guide to the default control layout ... WPF Layouts - A Visual Quick ... on the screen for standard 2D applications.
Read more

Shiny - Application layout guide - RStudio – Open source ...

Application layout guide. Added: 24 Jan ... Custom application layouts ... In general we recommend using fluid grids unless you absolutely require the ...
Read more

Application Layout Control - YouTube

What Does This Do? This video is a quick overview of the Application Layout Control from the XPages Extension Library
Read more

applicationLayout - Application Layout - applicationLayout ...

Examples Here is a custom control that defines an application layout using the oneuiApplication configuration. The configuration provides editable areas ...
Read more