just the facets ma'am ... mwlug august 23, 2013, indianapoilis, in
TRANSCRIPT
![Page 1: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/1.jpg)
MWLUG 2013
Just the Facets, Ma’am
Brad Balassaitis, PSC GroupPaul Della-Nebbia, TLCC
![Page 2: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/2.jpg)
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
![Page 3: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/3.jpg)
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
![Page 4: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/4.jpg)
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
![Page 5: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/5.jpg)
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
![Page 6: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/6.jpg)
Callbacks, Facets and Keys
6… cont …
![Page 7: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/7.jpg)
Callbacks, Facets and Keys
7
DemoXPage112
DemoXPage112
![Page 8: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/8.jpg)
Named and Unnamed Facets …
8
… cont …
![Page 9: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/9.jpg)
Named and Unnamed Facets
9
DemoXPage113
![Page 10: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/10.jpg)
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
![Page 11: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/11.jpg)
Editable Area control
• Add Editable Area control (xp:callback) to Custom Control
11
![Page 12: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/12.jpg)
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
![Page 13: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/13.jpg)
Creating Custom Layout Control
• Set up a layout structure in a custom control• Add Editable Area controls to each section
13
![Page 14: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/14.jpg)
Creating Custom Layout Control
• Add layout control to an XPage and drop in content
14
![Page 15: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/15.jpg)
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
![Page 16: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/16.jpg)
Form Table design framework
16
![Page 17: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/17.jpg)
Tip: Alternative Approach
• Form Table and Form Layout Row
17
![Page 18: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/18.jpg)
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 …
![Page 19: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/19.jpg)
Tip: Alternative Approach
• Tip: Alternative approach to adding the Input controls
19
![Page 20: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/20.jpg)
Multi-Column Form table
• Creating a Multi-Column Form table
20
![Page 21: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/21.jpg)
Add a Form Table to an XPage
• Procedure: Form Buttons and Page Navigation
21
Add action controls & set navigation
![Page 22: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/22.jpg)
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
![Page 23: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/23.jpg)
Data View versus View Panel control
23
![Page 24: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/24.jpg)
24
Data View design framework
• Properties, Complex Properties, and Facets
![Page 25: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/25.jpg)
Procedure: Creating a Data View
25
… cont …
• Add a Data View
![Page 26: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/26.jpg)
Procedure: Creating a Data View
26
… cont …
• Data View Design
![Page 27: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/27.jpg)
Procedure: Creating a Data View
27
… cont …
• Set the var property
![Page 28: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/28.jpg)
Procedure: Creating a Data View
28
… cont …
• Summary Column and Extra Columns
![Page 29: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/29.jpg)
Procedure: Creating a Data View
29
… cont …
• Data View Properties
![Page 30: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/30.jpg)
Procedure: Creating a Data View
30
DemoXPage512View
• Computed Details
![Page 31: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/31.jpg)
In-View Editing using a Dialog control
• Technique: In-View Editing using a Dialog Control …
31
… cont …
![Page 32: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/32.jpg)
In-View Editing Using Dialog Control …
• Technique: In-View Editing Using a Dialog Control …
32
… cont …
1 2
return viewEntry.getNoteID();
![Page 33: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/33.jpg)
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 …
![Page 34: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/34.jpg)
In-View Editing using a Tooltip Dialog
• Technique: In-View Editing using a Tooltip Dialog control
34
DemoXPage544View
XSP.openTooltipDialog("#{id:tooltipDialog1}","#{id:computedField2}")
![Page 35: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/35.jpg)
In-View Editing using an In-Place Form
• Technique: In-View Editing using an In-Place Form Control
35
DemoXPage545View
![Page 36: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/36.jpg)
36
Customizing Summary
• Technique: Customizing Summary• Add panel to Summary facet and add custom content into panel• Build link to open document
![Page 37: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/37.jpg)
37
Toggle the Detail Row
• Toggle the Detail Row
DemoXPage554
![Page 38: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/38.jpg)
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
![Page 39: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/39.jpg)
OneUI Version 2.1 Themes
39
![Page 40: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/40.jpg)
The oneuiv2.1 Themes
40
OneUI version 2 Themes:<NotesDominoDataDirectory>\domino\html\oneuiv2.1
OneUI version 2 Theme definitions:<NotesDominoProgramDirectory>\xsp\nsf\themes
![Page 41: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/41.jpg)
Setting a oneuiv2.1 Theme
• Procedure: Setting a oneuiv2.1 Theme for an Application
41
OR …
![Page 42: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/42.jpg)
42
Extend oneuiv2.1 Theme
• Procedure: Creating a Theme That Extends a oneuiv2.1 Theme
DemoXPage721
(xrd9one.nsf )
![Page 43: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/43.jpg)
Configuration Property & Facets
43… cont …
• Six facet areas
• Five bar areas
![Page 44: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/44.jpg)
44
Adding Application Layout Control
• Procedure: Adding an Application Layout Control to an XPage …
… cont …
![Page 45: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/45.jpg)
Configuration Property & Facets
45
![Page 46: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/46.jpg)
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
![Page 47: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/47.jpg)
47
Example xe:applicationLayout Design
• Example xe:applicationLayout Design for Following Procedure
DemoXPage761_CustByNameView
![Page 48: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/48.jpg)
48
Designing an Application Layout in a CC
• Procedure: Designing an Application Layout in a Custom Control
… cont …
![Page 49: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/49.jpg)
49
Designing an Application Layout in a CC
• Procedure: Designing an Application Layout in a Custom Control
… cont …
![Page 50: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/50.jpg)
50
Designing an Application Layout in a CC
• Procedure: Designing an Application Layout in a Custom Control
![Page 51: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/51.jpg)
Recommendations for Facets …
• Design and Naming Recommendations for Facets …
51… cont …
![Page 52: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/52.jpg)
Recommendations for Facets
• Design and Naming Recommendations for Facets
52
![Page 53: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/53.jpg)
53
Demo App - Design Overview
• Overview for Design of Six XPages in Demonstration Application
Demo761_AppLayout.xsp
![Page 54: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/54.jpg)
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
![Page 55: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/55.jpg)
Application Layout Design Strategies …
55… cont …
Design Layout #4 – titleBarTabs with LeftColumn facet Navigation
Design Layout #5 – Application Suites via bannerApplicationLinks
![Page 56: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/56.jpg)
Application Layout Design Strategies
56
Design Layout #6 – Web site Design
Design Layout #7 – Enabling the Search Bar in a Multi-Application Design
![Page 57: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/57.jpg)
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
![Page 58: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/58.jpg)
Rendered Property (like Hide-When)
58
(viewScope.Country=="USA")?true:false
(viewScope.Country==“Canada")?true:false
DemoXPage231
![Page 59: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/59.jpg)
Rendered Property and JSF Life Cycle
59
XPages Masterclass Video Series with Tony McGuckinhttp://tonymcguckin.wordpress.com/2013/04/22/xpages-masterclass-series-1/
![Page 60: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/60.jpg)
Switch facet control
60
![Page 61: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/61.jpg)
Procedure: Add Switch Control to XPage
61
Add/configure selectable facets to editable area
… cont …
![Page 62: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/62.jpg)
62
Procedure: Add Switch Control to XPage
Configure “switch” functionality
![Page 63: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/63.jpg)
Switch Control (with No Default Facet)
63
DemoXPage242 …
![Page 64: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/64.jpg)
Dynamic Content control
• Dynamic Content Control and the XPages Component Tree …
64
… cont …
![Page 65: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/65.jpg)
65
XPages Component Tree …
• Dynamic Content Control and the XPages Component Tree …
… cont …
![Page 66: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/66.jpg)
66
XPages Component Tree
• Dynamic Content Control and the XPages Component Tree
switchFacet versus dynamicContent
DemoXPage253
![Page 67: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/67.jpg)
Add Dynamic Content Control …
67… cont …
Add/configure selectable facets to editable area
![Page 68: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/68.jpg)
Changing Content on Client Side
• Two ways to change content on client side:
68
1
2
![Page 69: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/69.jpg)
Changing Content on Server Side
• Two ways to change content on server side:
69
1
2
DemoXPage251
var dc=getComponent("dynamicContent1");
dc.show("provinces")
![Page 70: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/70.jpg)
Dynamic Rendering Techniques
• Comparison of Dynamic Rendering Techniques
70
![Page 71: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/71.jpg)
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
![Page 72: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/72.jpg)
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
![Page 73: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/73.jpg)
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
![Page 74: Just the Facets Ma'am ... MWLUG August 23, 2013, Indianapoilis, IN](https://reader035.vdocuments.mx/reader035/viewer/2022081516/55c0ea34bb61eb72678b4705/html5/thumbnails/74.jpg)
Brad BalassaitisPSC GroupSenior Consultant/XPages DeveloperTwitter: @BalassaitisXcellerant.net
Q & A
74
Paul Della-NebbiaTLCC, founding partner, [email protected]: @pauldnwww.tlcc.com/mwlug