Just the Facets Ma'am - MWLUG 2013

MWLUG 2013

Just the Facets, Ma’am

Brad Balassaitis, PSC GroupPaul Della-Nebbia, TLCC

Just the Facets, Ma’am

2

Join special agents Joe Friday and Frank Smith (Brad B and Paul D) as they uncover all the facts, and just the facts, about facets. Watch as they filter through the opinions, rumors and misconceptions to get answers to all the tough questions like "What are facets?", "When and how should I use them?", "Who else is using them?" and "Why should I even care?" Witness as they discover the xp:key differences and benefits of both named and unnamed facets. Follow our pragmatic pair as they argue and each make a case for xe:dynamicContent or xe:switchFacet. Listen as they reveal the flexibility and power of facets in the Form Table, Data View and Application Layout design frameworks.

Paul Della-NebbiaFounding Partner

TLCC

Brad BalassaitisSenior Consultant/XPages Developer

PSC Group

What We’ll Cover …

• Callbacks, Facets and Keys• Adding an Editable Area to a Custom Control • Form Table design framework• Data View design framework • Application Layout design framework • Dynamic Content and Facets• Q & A

3

Callbacks, Facets, and Keys

What’s a facet?

A. A named area in a control, addressable via xp:keyB. 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.

4

Callbacks, Facets and Keys

What’s a callback?

A. An event on a custom control that can be coded return a value from its containing XPage.

B. A design editable area added to a custom control.C. Usually, an indication that your initial audition went well.D. All of the above.E. None of the above.

5

Callbacks, Facets and Keys

6… cont …

Callbacks, Facets and Keys

7

DemoXPage112

DemoXPage112

Named and Unnamed Facets …

8

… cont …

Named and Unnamed Facets

9

DemoXPage113

What We’ll Cover …

• Callbacks, Facets and Keys • Adding an Editable Area to a Custom Control • Form Table design framework • Data View design framework • Application Layout design framework • Dynamic Content and Facets• Q & A

10

Editable Area control

• Add Editable Area control (xp:callback) to Custom Control

11

Editable Area control

• Add custom control with callback to XPage• Add panel to editable area• Custom control gets this.facets tag and panel gets xp:key attribute

12

Creating Custom Layout Control

• Set up a layout structure in a custom control• Add Editable Area controls to each section

13

Creating Custom Layout Control

• Add layout control to an XPage and drop in content

14

What We’ll Cover …

• Callbacks, Facets and Keys • Adding an Editable Area to a Custom Control • Form Table design framework • Data View design framework • Application Layout design framework • Dynamic Content and Facets• Q & A

15

Form Table design framework

16

Tip: Alternative Approach

• Form Table and Form Layout Row

17

Add a Form Table to an XPage

• Procedure: Adding and configuring form rows

18

1

2

3

Add Form Layout Row to Form Table

… cont’d …

Tip: Alternative Approach

• Tip: Alternative approach to adding the Input controls

19

Multi-Column Form table

• Creating a Multi-Column Form table

20

Add a Form Table to an XPage

• Procedure: Form Buttons and Page Navigation

21

Add action controls & set navigation

What We’ll Cover …

• Callbacks, Facets and Keys • Adding an Editable Area to a Custom Control • Form Table design framework • Data View design framework • Application Layout design framework • Dynamic Content and Facets• Q & A

22

Data View versus View Panel control

23

24

Data View design framework

• Properties, Complex Properties, and Facets

Procedure: Creating a Data View

25

… cont …

• Add a Data View

Procedure: Creating a Data View

26

… cont …

• Data View Design

Procedure: Creating a Data View

27

… cont …

• Set the var property

Procedure: Creating a Data View

28

… cont …

• Summary Column and Extra Columns

Procedure: Creating a Data View

29

… cont …

• Data View Properties

Procedure: Creating a Data View

30

DemoXPage512View

• Computed Details

In-View Editing using a Dialog control

• Technique: In-View Editing using a Dialog Control …

31

… cont …

In-View Editing Using Dialog Control …

• Technique: In-View Editing Using a Dialog Control …

32

… cont …

1 2

return viewEntry.getNoteID();

In-View Editing Using Dialog Control …

• Technique: In-View Editing Using a Dialog Control …

33

34

var c = getComponent("dialog1"); c.hide("detailPanel");

DemoXPage543View … cont …

In-View Editing using a Tooltip Dialog

• Technique: In-View Editing using a Tooltip Dialog control

34

DemoXPage544View

XSP.openTooltipDialog("#{id:tooltipDialog1}","#{id:computedField2}")

In-View Editing using an In-Place Form

• Technique: In-View Editing using an In-Place Form Control

35

DemoXPage545View

36

Customizing Summary

• Technique: Customizing Summary• Add panel to Summary facet and add custom content into panel• Build link to open document

37

Toggle the Detail Row

• Toggle the Detail Row

DemoXPage554

What We’ll Cover …

• Callbacks, Facets and Keys • Adding an Editable Area to a Custom Control • Form Table design framework • Data View design framework • Application Layout design framework • Dynamic Content and Facets• Q & A

38

OneUI Version 2.1 Themes

39

The oneuiv2.1 Themes

40

OneUI version 2 Themes:<NotesDominoDataDirectory>\domino\html\oneuiv2.1

OneUI version 2 Theme definitions:<NotesDominoProgramDirectory>\xsp\nsf\themes

Setting a oneuiv2.1 Theme

• Procedure: Setting a oneuiv2.1 Theme for an Application

41

OR …

42

Extend oneuiv2.1 Theme

• Procedure: Creating a Theme That Extends a oneuiv2.1 Theme

DemoXPage721

(xrd9one.nsf )

Configuration Property & Facets

43… cont …

• Six facet areas

• Five bar areas

44

Adding Application Layout Control

• Procedure: Adding an Application Layout Control to an XPage …

… cont …

Configuration Property & Facets

45

Application Layout in a CC

• Designing an Application Layout in a Custom Control

46

Differences when Designing an Application Layout in a Custom Control versus an XPage

47

Example xe:applicationLayout Design

• Example xe:applicationLayout Design for Following Procedure

DemoXPage761_CustByNameView

48

Designing an Application Layout in a CC

• Procedure: Designing an Application Layout in a Custom Control

… cont …

49

Designing an Application Layout in a CC

• Procedure: Designing an Application Layout in a Custom Control

… cont …

50

Designing an Application Layout in a CC

• Procedure: Designing an Application Layout in a Custom Control

Recommendations for Facets …

• Design and Naming Recommendations for Facets …

51… cont …

Recommendations for Facets

• Design and Naming Recommendations for Facets

52

53

Demo App - Design Overview

• Overview for Design of Six XPages in Demonstration Application

Demo761_AppLayout.xsp

Application Layout Design Strategies …

54

Design Layout #1 – One Application Layout Custom Control for each Application

… cont …

Design Layout #2 – LeftColumn Navigation

Design Layout #3 – titleBarTabs Navigation with no LeftColumn facet

Application Layout Design Strategies …

55… cont …

Design Layout #4 – titleBarTabs with LeftColumn facet Navigation

Design Layout #5 – Application Suites via bannerApplicationLinks

Application Layout Design Strategies

56

Design Layout #6 – Web site Design

Design Layout #7 – Enabling the Search Bar in a Multi-Application Design

What We’ll Cover …

• Callbacks, Facets and Keys • Adding an Editable Area to a Custom Control • Form Table design framework • Data View design framework • Application Layout design framework • Dynamic Content and Facets• Q & A

57

Rendered Property (like Hide-When)

58

(viewScope.Country=="USA")?true:false

(viewScope.Country==“Canada")?true:false

DemoXPage231

Rendered Property and JSF Life Cycle

59

XPages Masterclass Video Series with Tony McGuckinhttp://tonymcguckin.wordpress.com/2013/04/22/xpages-masterclass-series-1/

Switch facet control

60

Procedure: Add Switch Control to XPage

61

Add/configure selectable facets to editable area

… cont …

62

Procedure: Add Switch Control to XPage

Configure “switch” functionality

Switch Control (with No Default Facet)

63

DemoXPage242 …

Dynamic Content control

• Dynamic Content Control and the XPages Component Tree …

64

… cont …

65

XPages Component Tree …

• Dynamic Content Control and the XPages Component Tree …

… cont …

66

XPages Component Tree

• Dynamic Content Control and the XPages Component Tree

switchFacet versus dynamicContent

DemoXPage253

Add Dynamic Content Control …

67… cont …

Add/configure selectable facets to editable area

Changing Content on Client Side

• Two ways to change content on client side:

68

1

2

Changing Content on Server Side

• Two ways to change content on server side:

69

1

2

DemoXPage251

var dc=getComponent("dynamicContent1");

dc.show("provinces")

Dynamic Rendering Techniques

• Comparison of Dynamic Rendering Techniques

70

What We’ll Cover …

• Callbacks, Facets and Keys • Adding an Editable Area to a Custom Control • Form Table design framework • Data View design framework • Application Layout design framework • Dynamic Content and Facets• Q & A

71

Some Key Points …

• Facets are named areas in a control, addressable via xp:key• Form Table, Data View and Application Layout controls

– framework controls to display Domino documents and views– Rapid XPages development of Web 2.0 apps in a oneui framework– details facet of xe:dataView like a built-in repeat

• Rendered property …– Like hide-when, often the first choice for dynamic content, but …

• Inefficient in JSF life cycle (recalculated in all 4 application-level phases)• Inefficient in component tree (rendered=“false”)

• Use xe:dynamicContent control – Offers greatest flexibility to dynamically switch content– Only the displayed facet is added to the component tree

representation for XPage

72

73

For more information …

• www.tlcc.com/mwlug– Seven XPages Courses!– Rapid XPages Development using Application Layout and Dojo UI

Controls– 20% off special offer to MWLUG attendees to September 30th

• openNTF.org– Extension Library Project and ExtLib Demonstrations application

• Xcellerrant.net – Brad Balassaitis Blog series– Dojo Grids in XPages– Data View series

Brad BalassaitisPSC GroupSenior Consultant/XPages DeveloperTwitter: @BalassaitisXcellerant.net

Q & A

74

Paul Della-NebbiaTLCC, founding partner, instructorpaul@tlcc.comTwitter: @pauldnwww.tlcc.com/mwlug