flex4 - CheckBox and RadioButton validation - actionscript-3

In my application i have both radio buttons and check boxes. Here I want to validate both CheckBox and RadioButton when I move to the next contol.
Edit:
My coding is here
<fx:Declarations>
<s:RadioButtonGroup id="genderOption"/>
<mx:StringValidator
id="radioButtonValidator"
source="{genderOption}"
property="selectedValue"
trigger="{groupLevel}"
listener="{groupLevel}"
required="true"
requiredFieldError="field is required"/>
<mx:StringValidator
id="checkBoxValidation"
source="qualificationGroup"
required="true"
property="selectedValue"
listener="{qualificationGroup}"
requiredFieldError="field is required"/>
</fx:Declarations>
<s:layout>
<s:HorizontalLayout/>
</s:layout>
<mx:HDividedBox width="100%" height="100%">
<s:Panel id="mainPanel" title="Employee Details" height="100%" width="50%">
<s:Form id="mainForm" height="100%" width="100%" left="10%" right="10%" top="10%">
<s:FormItem id="genderLabel" label="Gender" showErrorSkin="true" showErrorTip="false">
<s:HGroup id="groupLevel">
<s:RadioButton group="{genderOption}" label="Male" id="male" selected="false"/>
<s:RadioButton group="{genderOption}" label="Female" id="female" selected="false"/>
</s:HGroup>
</s:FormItem>
<s:FormItem id="quaLabel" label="Qualification" showErrorSkin="true" showErrorTip="false">
<s:HGroup id="qualificationGroup">
<s:CheckBox id="bsc" label="B.Sc"/>
<s:CheckBox id="be" label="BE"/>
<s:CheckBox id="mca" label="MCA"/>
<s:CheckBox id="mba" label="MBA"/>
<s:CheckBox id="others" label="Others"/>
</s:HGroup>
</s:FormItem>
</s:Form>
</s:Panel>
</mx:HDividedBox>
And I am the new one for flex. If i am using change or click event, it will display the error message via alert box. But i don't want alert box. Is any other way to display the error message is there?

When you move to the next control add and event listener to call a function to preform the validation checks.
Without more information i cant say which event listener will be applicable, but it will most likely be a click event.
<Script>
<![CDATA[
protected function validate_HDivide(event:MouseEvent):void
{
if(mycheckboxes.validate())
{
//do things
}
else
{
//display error
}
}
<s:HDividedBox id="mycheckboxes" change="validate_HDivide(event)"/>
<s:Button label="submit" click="validate_HDivide(event)"/>
then within your HDividedBox you can preform your validation
Thats how i would do it, hope this help.

Related

as3 tilelist with custom itemrender add to selectedIndices

I create a TileList with custom renderer.
<s:BorderContainer
id="bcImage"
width="120"
height="99%"
borderVisible="true"
borderStyle="solid"
borderColor="#B3B3B3"
borderWeight="1"
cornerRadius="2"
backgroundAlpha=".8"
backgroundColor="#F8F8FF"
dropShadowVisible="true"
>
<mx:Canvas id="cvsImage" width="100%" click="cvsImage_clickHandler(event)">
<s:HGroup width="100%" paddingBottom="0" paddingTop="5" >
<s:CheckBox id="cbImgSelect"/>
<s:Label x="23" y="3" width="82" fontSize="11" fontWeight="normal" text="{data.imDate}"
textAlign="right" color="#000000"/>
</s:HGroup>
<mx:Image id="iconCanvas" x="10" y="20" width="99" height="99" horizontalAlign="center"
maintainAspectRatio="true" scaleContent="true"
verticalAlign="middle" mouseDown="iconCanvas_mouseDownHandler(event)"
>
</mx:Image>
</mx:Canvas>
<s:BorderContainer width="100%" y="124" height="25" bottom="1" left="3" right="3"
backgroundColor="#FFFFFF" id="bcTitre" borderAlpha="0" >
<s:VGroup width="100%" y="124" height="25" bottom="0" left="0" right="0"
paddingBottom="0" paddingTop="0" gap="0" click="iconCanvasLabel_mouseUp(event)">
<s:Label text="{data.imType}" height="50%" fontSize="10" paddingBottom="1" id="lType"
fontWeight="normal" width="99%" textAlign="center" toolTip="{data.imType}"/>
<s:Label text="{data.imStade}" fontSize="10" textAlign="center" paddingTop="1"
fontWeight="normal" width="99%" id="lStade" toolTip="{data.imStade}"/>
</s:VGroup>
</s:BorderContainer>
</s:BorderContainer>
My TileList has allowMultipleSelection enable.
I'd to check CheckBox when item is selected by click or by selection (continus or not) and if CheckBox.selected=true I'd like to show color selection around selected item.
Could you help me to do that ?
Best regards
It seems that you're trying to resolve the issue from opposite side, which is wrong
I suppose yo can consider following way:
set mouseEnabled to false for checkBox so that all the list item triggers click
alter default selection behaviour by intercepting changing event and doing something like
protected function lst_changingHandler(evt:IndexChangeEvent):void {
evt.preventDefault();
var ids:Vector.<int> = (evt.currentTarget as List).selectedIndices;
(evt.currentTarget as List).selectedIndices = ids.concat(new <int>[evt.newIndex]);
bind checkBox selected state to the renderer selected one

Flash Builder 4.6 - ComboBox set to visible on underlying component MouseOver, but flickers when MouseOver of ComboBox

I have a ComboBox that is set to be visible when a component that lies beneath it is hovered, my problem is that when I hover over the ComboBox it starts flickering because I am leaving the underlying component.
My code is:
<fx:Script>
<![CDATA[
private function videoRollOut():void
{
controls.visible=false;
}
private function videoRollOver():void
{
controls.visible=true;
}
]]>
</fx:Script>
<mx:Canvas width="100%" height="46%">
<mx:VideoDisplay id="localVideoDisplay" top="0" right="0" bottom="0" left="0" height="100%" width="100%" rollOver="videoRollOver()" rollOut="videoRollOut()"/>
<s:VGroup id="controls" bottom="10" right="0" left="0" horizontalAlign="center" visible="false" mouseOver="videoRollOver()" mouseOut="videoRollOut()">
<s:HGroup verticalAlign="middle">
<s:Label color="0xFFFFFF" text="Audio: "/>
<s:ComboBox id="micSelection" change="micChanged(event)"
dataProvider="{micNames}"/>
</s:HGroup>
<s:HGroup verticalAlign="middle">
<s:Label color="0xFFFFFF" text="Video: "/>
<s:ComboBox id="cameraSelection" change="cameraChanged(event)"
dataProvider="{cameraNames}"/>
</s:HGroup>
</s:VGroup>
</mx:Canvas>
I attempted to add the same mouseOver and mouseOut functions to the ComboBox, and while I could now hover over the ComboBox without it flickering, when I tried to hover over some of the options it would leave both the ComboBox and the VideoDisplay, making the ComboBox once again invisible however keeping the options of the ComboBox visible.
I attempted to add a mouseEnabled="false" mouseChildren="false" to the ComboBox, however the ComboBox was then unusable.
If anyone has any advice that would be great!
You can use something like this in your videoRollOut method
controls.visible=controls.getBounds(this).contains(mouseX,mouseY)?true:false;

Flex 4 - How to align FormItem Label and TextInput?

I have the FormItem with Label and TextInput controls.
Sample code
<s:FormItem id="mobileLabel" label="Mobile Number">
<s:TextInput id="mobileInput"/>
</s:FormItem>
<s:FormItem id="emailLabel" label="Email ID" required="true">
<s:HGroup>
<s:TextInput id="emailInput"/>
<s:Label id="bindingLabel" text="#xyz.com"/>
</s:HGroup>
</s:FormItem>
Output like this:
How to align the label text as bottom of the label?
like this
You can use the HGroup's proberty verticalAlign. Then your HGroup statement will look like:
<s:HGroup verticalAlign="middle">
<s:TextInput id="emailInput"/>
<s:Label id="bindingLabel" text="#xyz.com"/>
</s:HGroup>

Example program for StringValidator and DateValidator in Flex4

I want to make both string and date validator in a single program using flex. can you anyone help me?
Thank you.
I got answer for this question.
`
<fx:Script>
<![CDATA[
// Import necessary classes.
import mx.controls.Alert;
import mx.events.ValidationResultEvent;
import mx.validators.Validator;
private function validate():void
{
var errors : Array = Validator.validateAll([uName,uMail]);
if(errors.length>0)
submitButton.enabled = false;
else
submitButton.enabled = true;
/* submitButton.percentHeight */
}
// Submit form is everything is valid.
private function submitForm():void {
Alert.show("Form Submitted!");
}
]]>
</fx:Script>
<s:layout>
<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
</s:layout>
<fx:Declarations>
<mx:StringValidator
id="uName"
source="{userName}"
property="text"
requiredFieldError="User name is required!"
tooShortError="This string is shorter than the minimum allowed length of 4. "
tooLongError="This string is longer than the maximum allowed length of 20."
minLength="4" maxLength="20"
required="true"/>
<mx:EmailValidator
id="uMail"
source="{userMail}"
property="text" invalidCharError="Invalid character"
required="true" />
</fx:Declarations>
<s:Panel title="Validator Example" width="100%" height="100%"
color="0x000000"
borderAlpha="0.15">
<s:layout>
<s:HorizontalLayout horizontalAlign="left"
paddingLeft="10" paddingRight="10"
paddingTop="10" paddingBottom="10"/>
</s:layout>
<mx:Form color="0x323232" >
<mx:FormItem label="Enter Your Name: " height="40" horizontalAlign="right" required="true">
<s:TextInput id="userName" width="100%" change="validate()"/>
</mx:FormItem>
<mx:FormItem label="Enter Your E-mail Address: " height="40">
<s:TextInput id="userMail" width="100%" change="validate()"/>
</mx:FormItem>
<mx:FormItem >
<s:Button id="submitButton" enabled="false" label="Validate" click="submitForm()"/>
</mx:FormItem>
</mx:Form>
</s:Panel>
`

requiredFieldError doesnt work

It seems like a code written right but I don't get an error message when I try to skip first name field. Instead I see a little yellow triangle with an exclamation mark in it, that appears next to the first name field. What can be a reason for this? Thanks.
<fx:Declarations>
<s:RadioButtonGroup id="phoneRadioButtonGroup"/>
<mx:StringValidator id="firstNameValidator" source="{firstNameTextInput}"
property="text" requiredFieldError="This field is required" required="true"/>
<mx:StringValidator id="lastNameValidator" source="{lastNameTextInput}"
property="text" required="false" tooShortError="Please enter at least four characters" minLength="4"/>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Form width="380" height="615" backgroundColor="#56A1B9">
<s:FormHeading label="Contact Editor"/>
<s:FormItem width="252" height="36" label="First Name" required="true">
<s:TextInput id="firstNameTextInput"/>
</s:FormItem>
<s:FormItem width="251" height="36" label="Last Name" required="false">
<s:TextInput id="lastNameTextInput"/>
</s:FormItem>
<mx:HRule width="100%" height="15"/>
<s:FormItem width="252" height="37" label="Email" required="true">
<s:TextInput id="emailTextInput"/>
</s:FormItem>
Set the required field to ..
and set the errorMessage ="required message"
This will resolve the issue