The oxy_checkbox built-in form control is used for a graphical user
interface box that you can click to enable or disable an option. A single check-box or multiple
check-boxes can be used to present and edit the value on an attribute or element.
The
oxy_checkbox form control supports the following properties:
-
edit - Lets you edit the value of an attribute, the
text content of an element, or Processing Instructions (PI). This property can have the
following values:
- resultSeparator - If multiple
check-boxes are used, the separator is used to compose the final result.
- tooltips - Associates tooltips to each value
in the values property. The value of this property is a list of
tooltips separated by commas. If you want the tooltip to display a comma, use the
${comma} variable.
- visible - Specifies whether or not the form
control is visible. The possible values of this property are true (the
form control is visible) and false (the form control is not
visible).
- values - Specifies the values that are committed when
the check-boxes are selected. If these values are not specified in the CSS, they are
collected from the associated XML Schema.
- fontInherit - This value specifies
whether the form control inherits its font from its parent element. The values of this
property can be true or false..
Note: To make the Check box form control inherit its font from its parent element, set
the fontInherit property to true.
- uncheckedValues - Specifies the
values that are committed when check-boxes are not selected.
- labels - This property must have the same
number of items as the values property. Each item provides a literal
description of the items listed in the values property.. If this property is not specified, the values property is used as the
label.
- columns - Controls the width of the form
control. The unit size is the width of the w character.
- color - Specifies the foreground color of the
form control. If the value of the color property is
inherit, the form control has the same color as the element in which
it is inserted.
- hoverPseudoclassName - Allows you to change the
way an element is rendered when you hover over a form control. The value is the name of a
CSS pseudo class. When you hover over the form control, the specified pseudo class will be
set on the element that contains the form
control.
p:before {
content: oxy_button(hoverPseudoclassName, 'showBorder')
}
p:showBorder {
border: 1px solid red;
}
Single Check-box Form Control
checkBox[attribute]:before {
content: "A check box editor that edits a two valued attribute (On/Off).
The values are specified in the CSS:"
oxy_checkbox(
edit, "@attribute",
values, "On",
uncheckedValues, "Off",
labels, "On/Off");
}
Multiple Check-boxes Form Control
multipleCheckBox[attribute]:before {
content: "Multiple checkboxes editor that edits an attribute value.
Depending whether the check-box is selected a different value is committed:"
oxy_checkbox(
edit, "@attribute",
values, "true, yes, on",
uncheckedValues, "false, no, off",
resultSeparator, ","
labels, "Present, Working, Started");
}
Note: You can use the
Content Completion
Assistant in the CSS or LESS editor to easily insert a sample of the form
control by selecting the corresponding code template. The form control code templates are
displayed with a

symbol in
the content complete list.
Tip: To insert a sample of the
oxy_checkbox form control, invoke
the
Content Completion Assistant by pressing
Ctrl Space (Command Space on OS
X) and select
the
oxy_checkbox code template.