Just the Facets Ma'am - MWLUG 2013

1,814
-1

Published on

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.

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,814
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
52
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • Just the Facets Ma'am - MWLUG 2013

    1. 1. MWLUG 2013 Just the Facets, Ma’am Brad Balassaitis, PSC Group Paul Della-Nebbia, TLCC
    2. 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. 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. 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. 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. 6. Callbacks, Facets and Keys 5… cont …
    7. 7. Callbacks, Facets and Keys 6 DemoXPage112 DemoXPage112
    8. 8. Named and Unnamed Facets … 7 … cont …
    9. 9. Named and Unnamed Facets 8 DemoXPage113
    10. 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. 11. Editable Area control • Add Editable Area control (xp:callback) to Custom Control 10
    12. 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. 13. Creating Custom Layout Control • Set up a layout structure in a custom control • Add Editable Area controls to each section 12
    14. 14. Creating Custom Layout Control • Add layout control to an XPage and drop in content 13
    15. 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. 16. Form Table design framework 15
    17. 17. Tip: Alternative Approach • Form Table and Form Layout Row 16
    18. 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. 19. Tip: Alternative Approach • Tip: Alternative approach to adding the Input controls 18
    20. 20. Multi-Column Form table • Creating a Multi-Column Form table 19
    21. 21. Add a Form Table to an XPage • Procedure: Form Buttons and Page Navigation 20 Add action controls & set navigation
    22. 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. 23. Data View versus View Panel control 22
    24. 24. Data View design framework • Properties, Complex Properties, and Facets 23
    25. 25. Procedure: Creating a Data View 24 … cont … • Add a Data View
    26. 26. Procedure: Creating a Data View 25 … cont … • Data View Design
    27. 27. Procedure: Creating a Data View 26 … cont … • Set the var property
    28. 28. Procedure: Creating a Data View 27 … cont … • Summary Column and Extra Columns
    29. 29. Procedure: Creating a Data View 28 … cont … • Data View Properties
    30. 30. Procedure: Creating a Data View 29 DemoXPage512View • Computed Details
    31. 31. In-View Editing using a Dialog control • Technique: In-View Editing using a Dialog Control … 30 … cont …
    32. 32. In-View Editing Using Dialog Control … • Technique: In-View Editing Using a Dialog Control … 31 … cont … 1 2 return viewEntry.getNoteID();
    33. 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. 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. 35. In-View Editing using an In-Place Form • Technique: In-View Editing using an In-Place Form Control 34 DemoXPage545View
    36. 36. Customizing Summary • Technique: Customizing Summary • Add panel to Summary facet and add custom content into panel • Build link to open document 35
    37. 37. Toggle the Detail Row • Toggle the Detail Row 36 DemoXPage554
    38. 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. 39. OneUI Version 2.1 Themes 38
    40. 40. The oneuiv2.1 Themes 39 OneUI version 2 Themes: <NotesDominoDataDirectory>dominohtmloneuiv2.1 OneUI version 2 Theme definitions: <NotesDominoProgramDirectory>xspnsfthemes
    41. 41. Setting a oneuiv2.1 Theme • Procedure: Setting a oneuiv2.1 Theme for an Application 40 OR …
    42. 42. Extend oneuiv2.1 Theme • Procedure: Creating a Theme That Extends a oneuiv2.1 Theme 41 DemoXPage721 (xrd9one.nsf )
    43. 43. Configuration Property & Facets 42 … cont … • Six facet areas • Five bar areas
    44. 44. Adding Application Layout Control • Procedure: Adding an Application Layout Control to an XPage … 43 … cont …
    45. 45. Configuration Property & Facets 44
    46. 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. 47. Example xe:applicationLayout Design • Example xe:applicationLayout Design for Following Procedure 46 DemoXPage761_CustByNameView
    48. 48. Designing an Application Layout in a CC • Procedure: Designing an Application Layout in a Custom Control 47 … cont …
    49. 49. Designing an Application Layout in a CC • Procedure: Designing an Application Layout in a Custom Control 48 … cont …
    50. 50. Designing an Application Layout in a CC • Procedure: Designing an Application Layout in a Custom Control 49
    51. 51. Recommendations for Facets … • Design and Naming Recommendations for Facets … 50 … cont …
    52. 52. Recommendations for Facets • Design and Naming Recommendations for Facets 51
    53. 53. Demo App - Design Overview • Overview for Design of Six XPages in Demonstration Application 52 Demo761_AppLayout.xsp
    54. 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. 55. Application Layout Design Strategies … 54… cont … Design Layout #4 – titleBarTabs with LeftColumn facet Navigation Design Layout #5 – Application Suites via bannerApplicationLinks
    56. 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. 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. 58. Rendered Property (like Hide-When) 57 (viewScope.Country=="USA")?true:false (viewScope.Country==“Canada")?true:false DemoXPage231
    59. 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. 60. Switch facet control 59
    61. 61. Procedure: Add Switch Control to XPage 60 Add/configure selectable facets to editable area … cont …
    62. 62. Procedure: Add Switch Control to XPage 61 Configure “switch” functionality
    63. 63. Switch Control (with No Default Facet) 62 DemoXPage242 …
    64. 64. Dynamic Content control • Dynamic Content Control and the XPages Component Tree … 63 … cont …
    65. 65. XPages Component Tree … • Dynamic Content Control and the XPages Component Tree … 64 … cont …
    66. 66. XPages Component Tree • Dynamic Content Control and the XPages Component Tree 65 switchFacet versus dynamicContent DemoXPage253
    67. 67. Add Dynamic Content Control … 66 … cont … Add/configure selectable facets to editable area
    68. 68. Changing Content on Client Side • Two ways to change content on client side: 67 1 2
    69. 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. 70. Dynamic Rendering Techniques • Comparison of Dynamic Rendering Techniques 69
    71. 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. 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. 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. 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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×