A button-like control used by the Client Framework 2.
This component is provided by the ui:button element.
The following table lists the observable properties associated with this component.
| Property | Description | Type | Access |
|---|---|---|---|
| enabled | The enabled state of the button. | boolean | read/write |
The cf2:activate event is fired whenever the button is activated.
| Property | Description | Type |
|---|---|---|
| target | The component that has been activated. | any |
The :enabled and :disabled pseudo classes allow the content and styling of an element or component to be changed based on the state of that element or component. This mechanism allows, for example, to specify the button state-specific content and styling. Please note that the regular content of a button element can be set using either the content property or markup, but the state-specific content can only be specified using the content property.
The following two pseudo classes allow page authors to define the state-specific styling.
| Pseudo class | Description | CSS |
|---|---|---|
| :enabled | Defines style rules to be used when the selected element is active. | ui|button:enabled {content: url("enabled-next.png")} |
| :disabled | Defines style rules to be used when the selected element is inactive. | ui|button:disabled {content: url("disabled-next.png")} |
The ::after and ::before pseudo elements and content property keyword contents cannot be used with the ui:button element or the :disabled and :enabled pseudo classes.
The following table and the XDIME following page contain examples illustrating the use of the :enable and :disable pseudo classes.
| CSS | Description |
|---|---|
| ui|button {content: url("normal-next.png")} | There is no stateful content. The content of the button will stay the same throughout its lifetime. |
| ui|button {content: url("normal-next.png")} ui|button:disabled {content: url("disabled-next.png")} | The image specified using the :disabled pseudo class will be used when the button is inactive, otherwise the normal content will be used. |
| ui|button {content: url("normal-next.png")} ui|button:enabled {content: url("enabled-next.png")} | The image specified using the :enabled pseudo class will be used when the button is active, otherwise the normal content will be used. |
| ui|button {content: url("normal-next.png")} ui|button:disabled {content: url("disabled-next.png")} ui|button:enabled {content: url("enabled-next.png")} | Both the :enabled and :disabled pseudo classes are specified for the button element. The button will either be in one of those states; the normal content will never be used. |
<?xml version="1.0" encoding="UTF-8"?>
<html
xmlns="http://www.w3.org/2002/06/xhtml2"
xmlns:mcs="http://www.volantis.com/xmlns/2006/01/xdime/mcs"
xmlns:cf2="http://www.volantis.com/xmlns/2009/07/cf2"
xmlns:ui="http://www.volantis.com/xmlns/2009/07/cf2/ui"
xmlns:event="http://www.w3.org/2001/xml-events"
xmlns:template="http://www.volantis.com/xmlns/marlin-template">
<head>
<title>UI Buttons state styling</title>
<style type="text/css">
a:hover {
color: yellow;
}
#_1 {
border: 1px red solid;
content: "enabled button";
}
#_1:disabled {
border: 1px gray solid;
content: "disabled button";
}
#secondBtn {
color: red;
border: 2px red solid;
content: mcs-component-url('/images/close.mimg');
}
#secondBtn:disabled {
color: gray;
border: 2px #2F4F4F solid;
content: mcs-component-url('/images/close-gray.mimg');
}
#_3:enabled {
color: red;
border: 3px red solid;
content: mcs-component-url('/images/close.mimg');
}
#_3:disabled {
color: gray;
border: 3px #2F4F4F solid;
content: mcs-component-url('/images/close-gray.mimg');
}
#_4:enabled {
color: red;
border: 4px red solid;
content: mcs-component-url('/images/close.mimg');
}
#_4 {
color: gray;
border: 4px #2F4F4F solid;
content: mcs-component-url('/images/close-gray.mimg');
}
#_5:enabled {
color: red;
border: 5px red solid;
content: mcs-component-url('/images/close.mimg');
}
#_5 {
color: gray;
border: 5px #2F4F4F solid;
}
#_6:enabled {
content: mcs-component-url('/images/close.mimg') mcs-component-url('/images/close-gray.mimg');
}
#_7 {
border: 1px red solid;
}
#_7:disabled {
border: 1px gray solid;
content: "disabled button";
}
#_8 {
border: 1px red solid;
}
#_8:disabled {
border: 1px gray solid;
content: "disabled button" " label";
}
#_9 {
border: 1px red solid;
content: mcs-component-url('/images/next.mimg')
}
#_9:disabled {
border: 1px gray solid;
content: mcs-component-url('/images/next-gray.mimg')
}
#_10 {
border: 1px red solid;
}
#_10:disabled {
border: 1px gray solid;
}
#_11 {
border: 1px red solid;
}
</style>
</head>
<body>
<div>
<span>
ui|button { border: 1px red solid; content: "enabled button" }<mcs:br/>
ui|button:disabled { border: 1px gray solid; content: "disabled button" }
</span>
<mcs:br/>
<ui:button id="_1">
<cite>Label_1a</cite>
<cite>Label_1b</cite>
</ui:button>
<mcs:br/>
<ui:button>
<span>Disable Button</span>
<cf2:on event="cf2:activate" set="_1#enabled" boolean="false"/>
</ui:button>
<span> | </span>
<ui:button>
<span>Enable Button</span>
<cf2:on event="cf2:activate" set="_1#enabled" boolean="true"/>
</ui:button>
<p> ******************************** </p>
<span>
ui|button { color: red; border: 2px red solid; content: mcs-component-url('/images/close.mimg'); }<mcs:br/>
ui|button:disabled { color: gray; border: 2px #2F4F4F solid; content: mcs-component-url('/images/close-gray.mimg'); }
</span>
<mcs:br/>
<ui:button id="secondBtn">
<span>Close Box</span>
<cf2:on event="cf2:activate" set="popup#displayed" boolean="true"/>
</ui:button>
<mcs:br/>
<ui:button>
<span>Disable Button</span>
<cf2:on event="cf2:activate" set="secondBtn#enabled" boolean="false"/>
</ui:button>
<span> | </span>
<ui:button>
<span>Enable Button</span>
<cf2:on event="cf2:activate" set="secondBtn#enabled" boolean="true"/>
</ui:button>
<ui:box id="popup" initial-displayed-state="false">
<p style="color: green">My message</p>
</ui:box>
<p> ******************************** </p>
<span>
ui|button:enabled { color: red; border: 3px red solid; content: mcs-component-url('/images/close.mimg'); }<mcs:br/>
ui|button:disabled { color: gray; border: 3px #2F4F4F solid; content: mcs-component-url('/images/close-gray.mimg');}
</span>
<mcs:br/>
<ui:button id="_3">
<span>Close Box</span>
</ui:button>
<mcs:br/>
<ui:button>
<span>Disable me</span>
<cf2:on event="cf2:activate" set="_3#enabled" boolean="false"/>
</ui:button>
<span> | </span>
<ui:button>
<span>Enable me</span>
<cf2:on event="cf2:activate" set="_3#enabled" boolean="true"/>
</ui:button>
<p> ******************************** </p>
<span>
ui|button:enabled { color: red; border: 4px red solid; content: mcs-component-url('/images/close.mimg'); }<mcs:br/>
ui|button { color: gray; border: 4px #2F4F4F solid; content: mcs-component-url('/images/close-gray.mimg'); }
</span><mcs:br/>
<ui:button id="_4">
<span>Close Box 4</span>
</ui:button>
<mcs:br/>
<ui:button>
<span>Disable me</span>
<cf2:on event="cf2:activate" set="_4#enabled" boolean="false"/>
</ui:button>
<span> | </span>
<ui:button>
<span>Enable me</span>
<cf2:on event="cf2:activate" set="_4#enabled" boolean="true"/>
</ui:button>
<p> ******************************** </p>
<span>
<ui:button>Close Box 5</ui:button><mcs:br/>
ui|button:enabled { color: red; border: 5px red solid; content: mcs-component-url('/images/close.mimg'); }<mcs:br/>
ui|button { color: gray; border: 5px #2F4F4F solid;}
</span>
<mcs:br/>
<ui:button id="_5">
Close Box 5
</ui:button>
<mcs:br/>
<ui:button>
<span>Disable me</span>
<cf2:on event="cf2:activate" set="_5#enabled" boolean="false"/>
</ui:button>
<span> | </span>
<ui:button>
<span>Enable me</span>
<cf2:on event="cf2:activate" set="_5#enabled" boolean="true"/>
</ui:button>
<p> ******************************** </p>
<span>
<ui:button>Close Box 6</ui:button><mcs:br/>
ui|button:enabled { content: mcs-component-url('/images/close.mimg') mcs-component-url('/images/close-gray.mimg'); }<mcs:br/>
</span>
<mcs:br/>
<ui:button id="_6">
Close Box 6
</ui:button>
<mcs:br/>
<ui:button>
<span>Disable me</span>
<cf2:on event="cf2:activate" set="_6#enabled" boolean="false"/>
</ui:button>
<span> | </span>
<ui:button>
<span>Enable me</span>
<cf2:on event="cf2:activate" set="_6#enabled" boolean="true"/>
</ui:button>
<p> ******************************** </p>
<span>
<ui:button">
<cite>Label_1a</cite>
<cite>Label_1b</cite>
</ui:button><mcs:br/>
ui|button { border: 1px red solid;}<mcs:br/>
ui|button:disabled { border: 1px gray solid; content: "disabled button" }
</span>
<mcs:br/>
<ui:button id="_7">
<cite>Label_1a</cite>
<cite>Label_1b</cite>
</ui:button>
<mcs:br/>
<ui:button>
<span>Disable me</span>
<cf2:on event="cf2:activate" set="_7#enabled" boolean="false"/>
</ui:button>
<span> | </span>
<ui:button>
<span>Enable me</span>
<cf2:on event="cf2:activate" set="_7#enabled" boolean="true"/>
</ui:button>
<p> ******************************** </p>
<span>
<ui:button">
some inline text - plain text
</ui:button><mcs:br/>
ui|button { border: 1px red solid;}<mcs:br/>
ui|button:disabled { border: 1px gray solid; content: "disabled button" " label" }
</span>
<mcs:br/>
<ui:button id="_8">
some inline text - plain text
</ui:button>
<mcs:br/>
<ui:button>
<span>Disable me</span>
<cf2:on event="cf2:activate" set="_8#enabled" boolean="false"/>
</ui:button>
<span> | </span>
<ui:button>
<span>Enable me</span>
<cf2:on event="cf2:activate" set="_8#enabled" boolean="true"/>
</ui:button>
<p> ******************************** </p>
<span>
<ui:button">
some inline text
</ui:button><mcs:br/>
ui|button { border: 1px red solid; content: mcs-component-url('/images/next.mimg') }<mcs:br/>
ui|button:disabled { border: 1px gray solid; content: mcs-component-url('/images/next-gray.mimg') }
</span>
<mcs:br/>
<ui:button id="_9">
some inline text
</ui:button>
<mcs:br/>
<ui:button>
<span>Disable me</span>
<cf2:on event="cf2:activate" set="_9#enabled" boolean="false"/>
</ui:button>
<span> | </span>
<ui:button>
<span>Enable me</span>
<cf2:on event="cf2:activate" set="_9#enabled" boolean="true"/>
</ui:button>
<p> ******************************** </p>
<span>
<ui:button">
label
</ui:button><mcs:br/>
ui|button { border: 1px red solid; }<mcs:br/>
ui|button:disabled { border: 1px gray solid; }
</span>
<mcs:br/>
<ui:button id="_10">
label
</ui:button>
<mcs:br/>
<ui:button>
<span>Disable me</span>
<cf2:on event="cf2:activate" set="_10#enabled" boolean="false"/>
</ui:button>
<span> | </span>
<ui:button>
<span>Enable me</span>
<cf2:on event="cf2:activate" set="_10#enabled" boolean="true"/>
</ui:button>
<p> ******************************** </p>
<span>
<ui:button">
label 11
</ui:button><mcs:br/>
ui|button { border: 1px red solid; }<mcs:br/>
</span>
<mcs:br/>
<ui:button id="_11">
label
</ui:button>
<mcs:br/>
<ui:button>
<span>Disable me</span>
<cf2:on event="cf2:activate" set="_11#enabled" boolean="false"/>
</ui:button>
<span> | </span>
<ui:button>
<span>Enable me</span>
<cf2:on event="cf2:activate" set="_11#enabled" boolean="true"/>
</ui:button>
</div>
</body>
</html>