Problem
You want to display a red error border and around a CheckBox control with a data tip which displays when the user hovers their mouse over the control.
Solution
The following example shows how you can set an error string on a Flex CheckBox control by setting the errorString property.
Detailed explanation
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/21/setting-an-error-string-on-a-checkbox-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
private function checkBox_change(evt:Event):void {
if (checkBox.selected) {
checkBox.errorString = "";
} else {
checkBox.errorString = "You must click here to continue";
}
}
]]>
</mx:Script>
<mx:Panel width="100%" height="100%">
<mx:TextArea id="textArea"
condenseWhite="true"
editable="false"
textAlign="justify"
width="100%"
height="100%">
<mx:htmlText>
<![CDATA[
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque vitae massa. Curabitur sed dolor. Maecenas risus lacus, pretium eget, tempor vestibulum, mattis vitae, sem. Pellentesque ligula nisi, sagittis sit amet, tincidunt vitae, volutpat non, arcu. Mauris non arcu. In molestie nunc. Nam molestie dui lacinia massa commodo vehicula. Ut sed ante sit amet tellus aliquam rhoncus. Nunc orci urna, dictum eget, faucibus vitae, tempus vel, dui. Vestibulum quis arcu. Morbi felis justo, hendrerit quis, tempus ac, elementum sit amet, quam. Proin congue, leo eget aliquet rhoncus, tellus lectus varius ipsum, ac ultrices erat ligula non justo. Nunc porttitor diam vel dolor luctus semper. Ut non eros volutpat mi condimentum ornare. Praesent quis nunc et libero pulvinar pretium. Sed leo lorem, fringilla vel, sodales ac, suscipit ut, nunc. Vestibulum faucibus elit. Vivamus pharetra libero ut arcu. Curabitur sit amet tellus.</p>
]]>
</mx:htmlText>
</mx:TextArea>
<mx:ControlBar>
<mx:CheckBox id="checkBox"
label="I have read and agreed to your license"
errorString="You must click here to continue"
change="checkBox_change(event);"
width="100%" />
<mx:Button label="Next >>"
enabled="{checkBox.selected}" />
</mx:ControlBar>
</mx:Panel>
</mx:Application>
For more information, see "Setting an error string on a CheckBox control in Flex" at FlexExamples.com.
Report abuse
