Co-presented with Paul Della-Nebbia at MWLUG 2013. This presentation is all about facets in XPages. It explains the concepts, shows how you're already using facets without realizing it, and shows how to start making use of facets in your own custom controls. It digs further into how to use facets in developing form tables, data views, and the application layout control. Finally, it demonstrates why the Dynamic Content facet is a more performant option for dynamic components over the Switch Facet control or just using the Rendered property.

1. MWLUG 2013
Just the Facets, Ma’am
Brad Balassaitis, PSC Group
Paul Della-Nebbia, TLCC

2. Just the Facets, Ma’am
1
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-Nebbia
Founding Partner
TLCC
Brad Balassaitis
Senior Consultant/XPages Developer
PSC Group

3. 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
2

4. Callbacks, Facets, and Keys
What’s a facet?
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.
3

5. 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.
4

6. Callbacks, Facets and Keys
5… cont …

7. Callbacks, Facets and Keys
6
DemoXPage112
DemoXPage112

8. Named and Unnamed Facets …
7
… cont …

9. Named and Unnamed Facets
8
DemoXPage113

10. 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
9

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

12. 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
11

13. Creating Custom Layout Control
• Set up a layout structure in a custom control
• Add Editable Area controls to each section
12

14. Creating Custom Layout Control
• Add layout control to an XPage and drop in content
13

15. 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
14

16. Form Table design framework
15

17. Tip: Alternative Approach
• Form Table and Form Layout Row
16

18. Add a Form Table to an XPage
• Procedure: Adding and configuring form rows
17
1
2
3
Add Form Layout Row to Form Table
… cont’d …

19. Tip: Alternative Approach
• Tip: Alternative approach to adding the Input controls
18

20. Multi-Column Form table
• Creating a Multi-Column Form table
19

21. Add a Form Table to an XPage
• Procedure: Form Buttons and Page Navigation
20
Add action controls & set navigation

22. 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
21

23. Data View versus View Panel control
22

24. Data View design framework
• Properties, Complex Properties, and Facets
23

25. Procedure: Creating a Data View
24
… cont …
• Add a Data View

26. Procedure: Creating a Data View
25
… cont …
• Data View Design

27. Procedure: Creating a Data View
26
… cont …
• Set the var property

28. Procedure: Creating a Data View
27
… cont …
• Summary Column and Extra Columns

29. Procedure: Creating a Data View
28
… cont …
• Data View Properties

30. Procedure: Creating a Data View
29
DemoXPage512View
• Computed Details

31. In-View Editing using a Dialog control
• Technique: In-View Editing using a Dialog Control …
30
… cont …

32. In-View Editing Using Dialog Control …
• Technique: In-View Editing Using a Dialog Control …
31
… cont …
1 2
return viewEntry.getNoteID();

33. In-View Editing Using Dialog Control …
• Technique: In-View Editing Using a Dialog Control …
32
3
4
var c = getComponent("dialog1");
c.hide("detailPanel");
DemoXPage543View
… cont …

34. In-View Editing using a Tooltip Dialog
• Technique: In-View Editing using a Tooltip Dialog control
33
DemoXPage544View
XSP.openTooltipDialog("#{id:tooltipDialog1}","#{id:computedField2}")

35. In-View Editing using an In-Place Form
• Technique: In-View Editing using an In-Place Form Control
34
DemoXPage545View

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

37. Toggle the Detail Row
• Toggle the Detail Row
36
DemoXPage554

38. 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
37

39. OneUI Version 2.1 Themes
38

40. The oneuiv2.1 Themes
39
OneUI version 2 Themes:
<NotesDominoDataDirectory>dominohtmloneuiv2.1
OneUI version 2 Theme definitions:
<NotesDominoProgramDirectory>xspnsfthemes

41. Setting a oneuiv2.1 Theme
• Procedure: Setting a oneuiv2.1 Theme for an Application
40
OR …

42. Extend oneuiv2.1 Theme
• Procedure: Creating a Theme That Extends a oneuiv2.1 Theme
41
DemoXPage721
(xrd9one.nsf )

43. Configuration Property & Facets
42
… cont …
• Six facet areas
• Five bar areas

44. Adding Application Layout Control
• Procedure: Adding an Application Layout Control to an XPage …
43
… cont …

45. Configuration Property & Facets
44

46. Application Layout in a CC
• Designing an Application Layout in a Custom Control
45
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
46
DemoXPage761_CustByNameView

48. Designing an Application Layout in a CC
• Procedure: Designing an Application Layout in a Custom Control
47
… cont …

49. Designing an Application Layout in a CC
• Procedure: Designing an Application Layout in a Custom Control
48
… cont …

50. Designing an Application Layout in a CC
• Procedure: Designing an Application Layout in a Custom Control
49

51. Recommendations for Facets …
• Design and Naming Recommendations for Facets …
50
… cont …

52. Recommendations for Facets
• Design and Naming Recommendations for Facets
51

53. Demo App - Design Overview
• Overview for Design of Six XPages in Demonstration Application
52
Demo761_AppLayout.xsp

54. Application Layout Design Strategies …
53
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

55. Application Layout Design Strategies …
54… cont …
Design Layout #4 – titleBarTabs with LeftColumn facet Navigation
Design Layout #5 – Application Suites via bannerApplicationLinks

56. Application Layout Design Strategies
55
Design Layout #6 – Web site Design
Design Layout #7 – Enabling the Search Bar in a Multi-Application Design

57. 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
56

58. Rendered Property (like Hide-When)
57
(viewScope.Country=="USA")?true:false
(viewScope.Country==“Canada")?true:false
DemoXPage231

59. Rendered Property and JSF Life Cycle
58
XPages Masterclass Video Series with Tony McGuckin
http://tonymcguckin.wordpress.com/2013/04/22/xpages-masterclass-series-1/

60. Switch facet control
59

61. Procedure: Add Switch Control to XPage
60
Add/configure selectable facets to editable area
… cont …

62. Procedure: Add Switch Control to XPage
61
Configure “switch” functionality

63. Switch Control (with No Default Facet)
62
DemoXPage242 …

64. Dynamic Content control
• Dynamic Content Control and the XPages Component Tree …
63
… cont …

65. XPages Component Tree …
• Dynamic Content Control and the XPages Component Tree …
64
… cont …

66. XPages Component Tree
• Dynamic Content Control and the XPages Component Tree
65
switchFacet versus dynamicContent
DemoXPage253

67. Add Dynamic Content Control …
66
… cont …
Add/configure selectable facets to editable area

68. Changing Content on Client Side
• Two ways to change content on client side:
67
1
2

69. Changing Content on Server Side
• Two ways to change content on server side:
68
1
2
DemoXPage251
var dc=getComponent("dynamicContent1");
dc.show("provinces")

70. Dynamic Rendering Techniques
• Comparison of Dynamic Rendering Techniques
69

71. 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
70

72. 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
71

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
72

74. Brad Balassaitis
PSC Group
Senior Consultant/XPages Developer
Twitter: @Balassaitis
Xcellerant.net
Q & A
73
Paul Della-Nebbia
TLCC, founding partner, instructor
paul@tlcc.com
Twitter: @pauldn
www.tlcc.com/mwlug