HTML Elements and Layout
The Property component was written to be used within the
PropertySheetSection component, which is in turn used within
the context of a PropertySheet component. The
Property component allows you to encapsulate a logic
"property" and help you lay it out on the page. A "property" has a number
of configuration options, including: the property content; an optional
label; the ability to stretch the property to include the label area (in
addition to the content area of the "property"; the ability to mark a
property required; and the ability to associate help text with the property
to inform your end user how to interact with the property.
Help text can be provided for each property by supplying the
helpText attribute. This attribute may be a literal String
or a ValueBinding expression. The help text will appear
below the content of the "property". Optionally, the helpText may also
be provided as a facet named "helpText". This allows advanced users to
have more control over the types of content provided in the helpText
area.
The label may be provided via the label attribute. The label
will be rendered to the left of the content area of the "property". The
label area will not exist if the overlapLabel attribute is set
to true. Optionally advanced users may provide a label facet named
"label". This allows developers to have more control over the content of
the label area.
The labelAlign attribute can use used to specify "left" or
"right" alignment of the label table cell.
Setting the noWrap attribute to true specifies that the label
should not be wraped to a new line.
The overlapLabel attribute causes the content of the property
to be stretched into the label area as well as the content area. This may
be useful for titles which should span the entire width, or other cases
where you need the whole width of the PropertySheet.
Client Side Javascript Functions
None.
Examples
Example 1
The label is specified via the label attribute. The components of
the content area are specified as children of the
ui:property tag.
<ui:property id="prop1" label="Log file name: ">
<ui:textField id="logfile" required="true"/>
<h:message id="logfile_error" for="logfile" showDetail="true"/>
</ui:property>
Example 2
The components of the content area are specified as children of the
ui:property tag. The label is specified via a label
facet, to label the dropDown in the content area.
<ui:property id="prop2">
<f:facet name="label">
<ui:label id="prop2label"
text="Select update frequency"
for="unit"/>
</f:facet>
<ui:textField id="frequency"
text="#{Logger.frequency.number}"
label="Every "/>
<ui:dropDown id="unit"
selected="#{Logger.frequency.unit}"
items="#{Logger.frequency.units}"
required="true"/>
<h:message id="msg1"_msg4b" for="frequency" showDetail="true"/>
<h:message id="msg2" for="unit" showDetail="true"/>
</ui:property>
Example 3
The components of the content area are specified inside a
PanelGroup child component.
<ui:property id="prop3" label="Admin Server URI">
<ui:panelGroup id="pg">
<ui:textField id="uri" text="#{Server.uri}" required="true"/>
<h:message id="msg3" for="uri" showDetail="true"/>
</ui:panelGroup>
</ui:property>
Example 4
The components of the content area are specified inside a
PanelGroup inside a facet.
<ui:property id="prop3" label="Admin Server URI">
<f:facet name="content">
<ui:panelGroup id="pg">
<ui:textField id="uri" text="#{Server.uri}" required="true"/>
<h:message id="msg3" for="uri" showDetail="true"/>
</ui:panelGroup>
</f:facet>
</ui:property>
Auto-generated component class.
Do NOT modify; all changes
will be lost!
|