Inspect Component Properties using Component Binding
Inspired by Paul Withers recent component binding post, I discovered another use for component binding whilst I was preparing for my upcoming presentation ‘Anatomy of a UI Control’ this Thursday at AUSLUG.
In my presentation I demonstrate how to determine a component’s Component Family and it’s Renderer Type which are both essential to determine which renderer is selected for the component by XPages.
It is extremely similar purpose to a technique that was previously demonstrated by the late Tim Tripcony on his blog. Tim demonstrated how to determine a component’s StyleKitFamily, which is an important setting when applying theme properties.
All I have done is rejig the concept to use component binding to link the component to the computed values which output the properties.
In this example I am inspecting the settings of the widget Container, however if you want to inspect a different component, then remove the widgetcontainer, replace it with whatever component you want to inspect, and make sure the ‘binding’ property is set the same as it was with the widgetcontainer.
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex">
Bind the Component that you want to inspect to a request scope
variable by using the binding property We Will use myComponent as
scope variable name
<!-- Output the properties of that Component -->
<xp:label value="Component Family" id="label1"></xp:label>
<!-- Output the Components Component Family using getFamily() -->
<xp:text escape="true" id="computedField1"
<xp:label value="Renderer Type" id="label2"></xp:label>
Output the Components Renderer Type using getRendererType()
rendererType in EL Notation
<xp:text escape="true" id="computedField2"
<xp:label value="StyleKit Family" id="label3"></xp:label>
Output the Components Style Kit Family using getStyleKitFamily()
styleKitFamily in EL Notation
<xp:text escape="true" id="computedField3"
When the Bootstrap theme is applied to the application, the properties are as follows:
Obviously with different themes applied you might get different renderer types for the same component.
I have added it as an XSnippet
At the end of the day, this is not really groundbreaking stuff! You could achieve the same result beforehand with a few SSJS computed values as follows:
var c = getComponent("widgetContainer1");
However if you are weird like me and prefer to use EL because it looks nicer in the markup, then using the Component Binding might be an option for you!