Just the Facets, Ma'am

Just the facets, ma’am
Tweet about this event: #xpages
and mention us: @teamstudio @TLCCLTD @Balassaitis
September 25, 2013

@teamstudio
teamstudio.com
@TLCCLTD
@Balassaitis
Taline Badrikian
Marketing Director

Who we are
• Our background is in creating tools for collaborative
computing in mid-size and large enterprises, primarily for
Lotus 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 – Replication model you already know
• IBM Collaboration Solutions Award Winner 2013

Teamstudio Continuity
• Mobile BCM application for smartphones and tablets
– iOS, Android and BB
• Offline access to all your BCM and
Disaster Recovery data
• Store plans, contacts, call trees, and more
• Client available for download from app stores

Teamstudio
• Next webinar October 17
• DCLUG – October 24th
• BLUG All Things Mobile – October 29th
• Promotions:
– Free Analyzer and Upgrade Filters when you buy Build Manager
– Chance to win an iPad mini when you get a demo of Teamstudio
Continuity

Howard Greenberg
TLCC
@TLCCLtd
#XPages
Your Host Today:
Who the heck is that guy and
where did you come up with the
name for this webinar?
For those outside the U.S. and/or under 50,
Dragnet was a long running TV police series in
the 50’s (revived several times after that).

Upcoming and Recorded Webinars
1
Next Webinar on October 17th
The Autobahn has no speed limit - Your
XPages shouldn't either!
www.tlcc.com/xpages-webinar
View Previous Webinars
(use url above)

TLCC Courses and Services
2
• The Leader in Notes and Domino Training since 1987
• Self Paced Distance Learning Courses for Notes/Domino
– XPages, Development, and Administration (user too!)
– Learn anywhere using your Notes client
– Many demos and activities
– An Instructor is a click away
• Instructor Led Online Classes
• OnSite Private Classes
• TLCC Mentoring Services

What’s New at TLCC
3
 Free course – Introduction to XPages Development (both 8.5 and 9.0)
 New Courses!
• Notes Domino 9 Application Development Update
• Java 1 for XPages Development (9.0)
• Notes Domino 9 System Administration Update
• Notes Domino 9 System Administration 1
 New Packages!
• XPages and JavaScript for Domino 9 Package
• XPages and Rapid Development for Domino 9 Package
• XPages, JavaScript and Rapid Development for Domino 9 Package
TLCC’s Fall Sale – Save until Oct. 11th

XPages Skills Path
4
Core Notes/Domino
Skills
Domino Object
Model skills
LotusScript or
Java
JavaScript for XPages
Developers
XPages Development 1
ILO - October 28th
Rapid XPages
Development (user
interface controls)
ILO – December 9th
XPages Development 2
Mobile XPages
Development
Java for XPages
Suggested TLCC Skills Path at TLCC.com
TLCC Can Help:
• Self Paced Courses
• Instructor Led Online
• OnSite Private Instructor Led
• Blended Learning
• Custom courses

Asking Questions
5
Q & A at the end!
Type in your
questions as they
come up

Your Presenters Today:
#XPages
6
Paul Della-Nebbia
Founding Partner
TLCC
Brad Balassaitis
Senior Consultant/XPages Developer
PSC Group

7
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

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

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

10
Callbacks, Facets and Keys …
… cont …

11
DemoXPage112
DemoXPage112

12
Named and Unnamed Facets …
… cont …

14
• Q & A

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

16
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

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

18
Creating Custom Layout Control
• Add layout control to an XPage and drop in content

19
• Q & A

20
Form Table design framework

21
Tip: Alternative Approach
• Form Table and Form Layout Row

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

23
Tip: Alternative approach to adding the Input controls

24
Multi-Column Form table
• Creating a Multi-Column Form table

25
Add a Form Table to an XPage
• Procedure: Form Buttons and Page Navigation
Add action controls and set navigation

26
• Q & A

27
Data View versus View Panel control

28
Data View design framework
• Properties, Complex Properties, and Facets

29
Procedure: Creating a Data View …
• Add a Data View
… cont …

30
• Data View Design
… cont …

31
• Set the var property
… cont …

32
• Summary Column and Extra Columns
… cont …

33
• Data View Properties
… cont …

34
Procedure: Creating a Data View
• Computed Details
DemoXPage512View

35
Technique: In-View Editing using a Dialog Control …
… cont …

36
… cont …
1 2
return viewEntry.getNoteID();

37
3
4
… cont …
var c = getComponent("dialog1");
c.hide("detailPanel");
DemoXPage543View

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

39
Technique: In-View Editing using an In-Place Form Control
DemoXPage545View

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

41
Toggle the Detail Row
DemoXPage554

42
Blog Series
http://xcellerant.net/data-views-in-xpages/

43
• Q & A

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

46
Procedure: Setting a oneuiv2.1 Theme for an Application
OR …

47
Procedure: Creating a Theme That Extends a oneuiv2.1 Theme
DemoXPage721
(xrd9one.nsf)

48
Configuration Property & Facets
… cont …
• Six facet areas
• Five bar areas

49
Procedure: Adding an Application Layout Control to XPage …
… cont …

50
Configuration Property & Facets

51
Example xe:applicationLayout Design
• Example xe:applicationLayout Design for Following Procedure
DemoXPage761_CustByNameView

52
Procedure: Designing an Application Layout in a CC …
… cont …

53
Procedure: Designing an Application Layout in a CC …
… cont …

54
Procedure: Designing an Application Layout in a CC

55
Design and Naming Recommendations for Facets …
… cont …

56
Design and Naming Recommendations for Facets …
… cont …

57
Overview for Design of Six XPages in Demo Application
Demo761_AppLayout.xsp

58
Application Layout Design Strategies …
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

59
Application Layout Design Strategies …
• Application Layout Design Strategies …
… cont …
Design Layout #4 – titleBarTabs with LeftColumn facet Navigation
Design Layout #5 – Application Suites via bannerApplicationLinks

60
Application Layout Design Strategies
• Application Layout Design Strategies
Design Layout #6 – Web site Design
Design Layout #7 – Enabling the Search Bar in a Multi-Application Design

61
• Q & A

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

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

65
Procedure: Adding a Switch Control to an XPage …
Add/configure selectable facets to editable area
… cont …

66
Procedure: Adding a Switch Control to an XPage
Configure “switch” functionality

67
Dynamic Content Control and the XPages Component Tree …
… cont …

68
Dynamic Content Control and the XPages Component Tree …
… cont …DemoXPage253

69
Dynamic Content Control and the XPages Component Tree
switchFacet versus dynamicContent

70
Add Dynamic Content Control …
… cont …
Add/configure selectable facets to editable area

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

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

73
Comparison of Dynamic Rendering Techniques

74
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

Questions????
75
Use the Q&A pane in
WebEx to ask questions
We will answer your
questions verbally

Question and Answer Time!
76
Teamstudio Questions?
contactus@teamstudio.com
877-228-6178
TLCC Questions?
howardg@tlcc.com paul@tlcc.com
888-241-8522 or 561-953-0095
Howard Greenberg Taline Badrikian
Upcoming Events:
TLCC Fall Sale
TLCC ILO Classes this Fall
IBM Connect 2014 Registration is now open
#XPages
@Balassaitis
@TLCCLtd
@Teamstudio
@PaulDN
Paul Della-Nebbia Brad Balassaitis

Just the Facets, Ma'am

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (16)

Similar a Just the Facets, Ma'am

Similar a Just the Facets, Ma'am (20)

Más de Teamstudio

Más de Teamstudio (20)

Último

Último (20)

Just the Facets, Ma'am