xpages application layout control - tlcc march, 2014 webinar

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)

http://www.tlcc.com/xpages-webinar�



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

http://www.tlcc.com/admin/tlccsite.nsf/pages/engagetackiton?opendocument�

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


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


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


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


Designing an Application Layout in a Custom Control

24

Demo761_CustByNameView


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


26

• Step 1: Create a Custom Control and drag in an Application Layout control – Choose a OneUI version 2.1 theme


27

• Step 2: Set the configuration properties:

– Banner nodes – Title Bar nodes (tabs) – Place Bar nodes (buttons) – Footer links – Legal text


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


33

• Step 3 continued: Establish a Naming Convention for facets and panel


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


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


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


Get the Slides and Demo Database

http://www.tlcc.com/mar-webinar

45

http://www.tlcc.com/mar-webinar�

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




http://engage.ug/�









http://redpilldevelopment.com/atlug-registration-now-open/�

mailto:[email protected]�



xpages application layout control - tlcc march, 2014 webinar

Technology