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>
Related
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
I use a fileReference.browse() to select an image file from the harddrive.
How can I load the selected image on DataGrid column?
Thanks
Edit:
My coding is here:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
minWidth="955" minHeight="600">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
public var loadFile:FileReference;
[Bindable]
private var arrayCollection : ArrayCollection = new ArrayCollection ();
private function onBrowseButtonClicked(event : MouseEvent) : void
{
loadFile = new FileReference();
loadFile.addEventListener(Event.SELECT, selectHandler);
var fileFilter:FileFilter = new FileFilter("Images: (*.jpeg, *.jpg, *.gif, *.png)", "*.jpeg; *.jpg; *.gif; *.png");
loadFile.browse([fileFilter]);
}
private function selectHandler(event:Event):void
{
loadFile.addEventListener(Event.COMPLETE, loadCompleteHandler);
loadFile.load();
employeeImageName.text =event.target.name;
}
private var data:ByteArray;
private function loadCompleteHandler(event:Event):void
{
var fileReference:FileReference=event.target as FileReference;
data=fileReference["data"];
employeeImage.source = data;
}
private function storeInputs(event:MouseEvent) : void
{
arrayCollection.addItem({
name : employeeName.text,
id : employeeID.text,
email : employeeEmail.text,
gender : genderOption.selectedValue,
address : employeeAddress.text,
img : data
});
}
]]>
</fx:Script>
<fx:Declarations>
<s:RadioButtonGroup id="genderOption"/>
</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="nameLabel" label="Employee Name">
<s:TextInput id="employeeName" />
</s:FormItem>
<s:FormItem id="idLabel" label="Embloyee ID">
<s:TextInput id="employeeID" maxChars="6"/>
</s:FormItem>
<s:FormItem id="emailLabel" label="Email">
<s:TextInput id="employeeEmail" />
</s:FormItem>
<s:FormItem id="genderLabel" label="Gender">
<s:HGroup>
<s:RadioButton group="{genderOption}" label="Male" id="male" />
<s:RadioButton group="{genderOption}" label="Female" id="female"/>
</s:HGroup>
</s:FormItem>
<s:FormItem id="addressLabel" label="Address">
<s:TextArea id="employeeAddress"/>
</s:FormItem>
<s:FormItem id="imageLabel" label="Image">
<mx:HBox>
<s:TextInput id="employeeImageName"/>
<s:Image id="employeeImage" height="100" width="100"/>
<s:Button id="imageButton" label="Browse" click="onBrowseButtonClicked(event)"/>
</mx:HBox>
</s:FormItem>
<s:FormItem>
<s:layout>
<s:HorizontalLayout gap="10"/>
</s:layout>
<s:Button id="submitButton" label="Submit" click="storeInputs(event)"/>
</s:FormItem>
</s:Form>
</s:Panel>
<s:DataGrid width="100%" height="100%" dataProvider="{arrayCollection}" id="employeeGrid" variableRowHeight="true">
<s:columns>
<s:ArrayList>
<s:GridColumn headerText="Name" dataField="name" />
<s:GridColumn headerText="ID" dataField="id"/>
<s:GridColumn headerText="Email" dataField="email"/>
<s:GridColumn headerText="Gender" dataField="gender" />
<s:GridColumn headerText="Address" dataField="address" itemEditor="mx.controls.TextArea"/>
<s:GridColumn headerText="Employee" dataField="img">
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer>
<mx:HBox>
<s:Image id="image" source="outerDocument.data" />
</mx:HBox>
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
</s:ArrayList>
</s:columns>
</s:DataGrid>
</mx:HDividedBox>
Here, all the controls are worked well in form. I could get the image and i could load the selected image on the image control. But I couldn't display the image in the DataGrid column when the submit button was clicked. This is my problem.
It can be done using flex custom itemrenderer. I've found a tutorial for you here . Gives a detailed explanation.
I did It
arrayCollection.addItem({
name : employeeName.text,
id : employeeID.text,
email : employeeEmail.text,
gender : genderOption.selectedValue,
qual : getCheckBoxexValues(),
address : employeeAddress.text,
imageData: loadFile.data
});
In grid
<s:GridColumn headerText="Employee" id="imageColumn" dataField="imageData" >
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer>
<s:Image id="image" width="120" height="80" source="{data.imageData}" visible="true" />
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
Thank you
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.
<mx:FormItem label="Blood:" width="100%" >
<s:ComboBox id="blood" prompt="Blood Group" >
<s:dataProvider>
<mx:ArrayList>
<fx:String>B+ve</fx:String>
<fx:String>A+ve</fx:String>
<fx:String>O+ve</fx:String>
<fx:String>O-ve</fx:String>
<fx:String>A-ve</fx:String>
<fx:String>B-ve</fx:String>
</mx:ArrayList>
</s:dataProvider>
</s:ComboBox>
</mx:FormItem>
This my code. I want add blood group values to data grid.
public function adddetails():void{
if(txtname.text !=""&&txtdob.text != "")//)&&( txtEmpname !="" )&&( txtEmpphone !="")
{
ac.addItem({Name:txtname.text, DOB:txtdob.text,
Standard:txtstd.value,Gender:txtg.selectedItem,Blood:Bloodtype});
//Alert.show("Form Submitted!");
clearInputs();
}
}
<s:VGroup gap="2">
<mx:FormItem label="Gender" width="200" required="true">
<s:ComboBox id="txtg" width="100%" prompt="Select Gender">
<s:dataProvider>
<mx:ArrayList>
<fx:String>Male</fx:String>
<fx:String>Female</fx:String>
</mx:ArrayList>
</s:dataProvider>
</s:ComboBox>
</mx:FormItem>
<s:Label text="The selected item is: {txtg.selectedItem}"/>
</s:VGroup>
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>
`