Example program for StringValidator and DateValidator in Flex4 - actionscript-3

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>
`

Related

Flex: Spark image resize does not work

When I use resize component on image, it just disappears. Even if I give widthTo and heightTo values more than image size.
Code
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:net="flash.net.*">
<fx:Script>
<![CDATA[
import mx.effects.Resize;
import mx.utils.ObjectUtil;
private function btn_click(evt:MouseEvent):void {
var arr:Array = [];
arr.push(new FileFilter("Images", ".gif;*.jpeg;*.jpg;*.png"));
fileReference.browse(arr);
}
private function fileReference_select(evt:Event):void {
fileReference.load();
}
private function fileReference_complete(evt:Event):void {
img.source = fileReference.data;
}
]]>
</fx:Script>
<fx:Declarations>
<net:FileReference id="fileReference"
select="fileReference_select(event);"
complete="fileReference_complete(event);" />
<s:Resize id="resizeBig"
target="{img}"
widthFrom="{img.width}" widthTo="{newWidth.text as Number}"
heightFrom="{img.height}" heightTo="{newHeight.text as Number}"/>
<s:Resize id="myResizeEffect"
target="{img}"
widthBy="10" heightBy="10"/>
</fx:Declarations>
<s:Image id="img"
verticalCenter="0"
horizontalCenter="0"
maxWidth="200"
maxHeight="200"
/>
<mx:ControlBar>
<mx:Button id="btn"
label="Upload"
click="btn_click(event);" />
<s:HGroup verticalAlign="middle">
<s:Label>Width:</s:Label>
<!-- <s:NumericStepper id="newWidth" minimum="1" maximum="100" value="10" /> -->
<s:TextInput id="newWidth" restrict="0-9.\\-" />
</s:HGroup>
<s:HGroup verticalAlign="middle">
<s:Label>Height:</s:Label>
<s:TextInput id="newHeight" restrict="0-9.\\-"/>
</s:HGroup>
<s:HGroup verticalAlign="middle">
<s:Button id="resize"
label="Resize"
click="resizeBig.end();resizeBig.play();"
/>
<s:Button label="Resize Me"
click="myResizeEffect.end();myResizeEffect.play();"/>
</s:HGroup>
</mx:ControlBar>
</s:WindowedApplication>
I think the binding expression doesn't like the "as Number" thing. I would try with a function that does the conversion:
widthTo="{getNumber(newWidth.text)}"

How to load an image on spark DataGrid column?

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

I want to add choices from combo box to data grid in flex

<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>

Show A Total using Numeric Input Fields in Flash Builder 4.6 Mobile Project

I am new to Flash Builder but so far everything is going good. What i am trying to accomplish is using 5 numeric input fields that calculates a total. First of this is a mobile project i am trying to develop, i already have the UI created, i just need the assistance of using these numeric fields and calculating a total just below it.
<?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">
<s:layout>
<s:VerticalLayout />
</s:layout>
<fx:Script>
<![CDATA[
import spark.events.TextOperationEvent;
[Bindable]
protected var total:Number = 0;
protected function inputChangeHandler(event:TextOperationEvent):void
{
var n:Number;
total = 0;
n = Number(input1.text);
if (!isNaN(n))
total += n;
n = Number(input2.text);
if (!isNaN(n))
total += n;
n = Number(input3.text);
if (!isNaN(n))
total += n;
n = Number(input4.text);
if (!isNaN(n))
total += n;
n = Number(input5.text);
if (!isNaN(n))
total += n;
}
]]>
</fx:Script>
<s:TextInput id="input1"
change="inputChangeHandler(event)" />
<s:TextInput id="input2"
change="inputChangeHandler(event)" />
<s:TextInput id="input3"
change="inputChangeHandler(event)" />
<s:TextInput id="input4"
change="inputChangeHandler(event)" />
<s:TextInput id="input5"
change="inputChangeHandler(event)" />
<s:Label text="{total}" />
</s:Application>
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" title="Transaction" xmlns:components="components.*"
viewDeactivate="callout.close()"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Declarations>
<s:RadioButtonGroup id="PaymentMethod"/>
<components:MyCalloutComp id="callout" height="200" close="location.text=event.data" verticalPosition="after"/>
</fx:Declarations>
<s:Label x="17" y="15" color="#1294E7" fontSize="18" fontWeight="bold" text="Method of Payment"/>
<s:RadioButton x="291" y="46" label="CREDIT CARD" groupName="PaymentMethod"/>
<s:RadioButton x="11" y="46" label="CASH" groupName="PaymentMethod"/>
<s:RadioButton x="144" y="47" label="CHECK" groupName="PaymentMethod"/>
<s:Label x="26" y="90" text="Card Type"/>
<s:Button x="686" y="413" width="82" label="Print"/>
<s:Button x="800" y="413" width="96" label="Process"/>
<s:TextArea x="25" y="175" height="38" maxChars="7"/>
<s:Label x="25" y="159" text="Drivers License #"/>
<s:TextInput softKeyboardType="number" x="616" y="34" width="175"/>
<s:TextInput softKeyboardType="number" x="847" y="33" width="154"/>
<s:TextInput softKeyboardType="number" x="616" y="106" width="175"/>
<s:TextInput softKeyboardType="number" x="847" y="103" width="154"/>
<s:TextInput softKeyboardType="number" x="616" y="180" width="175"/>
<s:Label x="638" y="17" text="Towing Charge"/>
<s:Label x="870" y="16" text="Mileage Charge"/>
<s:Label x="656" y="88" text="Labor Charge"/>
<s:Label x="849" y="86" text="Extra Person Charge"/>
<s:Label x="636" y="162" text="Special Equipment"/>
<s:TextInput softKeyboardType="number" x="847" y="178" width="154"/>
<s:Label x="867" y="160" text="Storage Charge"/>
<s:Label x="800" y="264" text="Subtotal"/>
<s:Label x="815" y="311" fontSize="19" fontWeight="bold" text="Total"/>
<s:TextInput softKeyboardType="number" x="262" y="106" width="320"/>
<s:Label x="265" y="89" text="Credit Card Number"/>
<s:Label x="422" y="159" text="Expiry Date"/>
<s:TextArea x="622" y="321" width="139" height="38"/>
<s:DateSpinner x="295" y="274"/>
<s:TextInput id="location" x="22" y="107" width="205" editable="false" enabled="true"
focusIn="callout.open(this.location,true)" text="Select..."/>
</s:View>

How to come back in main application on click of logout button which is in application's component in flex4?

Please check the code and tell me How I will be back in Login Page after click of logout which is in application's component.
Project.mxml
<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" width="100%" height="100%" creationComplete="init()">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
<mx:StringValidator source="{uname}" id="unameValid" property="text"/>
<mx:StringValidator source="{password}" id="passwordValid" property="text"/>
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.ValidationResultEvent;
import mx.validators.Validator;
private var myValidators:Array = new Array;
private var nav:Navigation;
private function init():void{
btnLogin.addEventListener(MouseEvent.CLICK,validateForm);
myValidators = [unameValid,passwordValid];
}
private function validateForm(event:Event):void{
//Alert.show("in validate form");
var errors:Array = Validator.validateAll(myValidators);
if(errors.length == 0){
loginUser();
}else{
Alert.show("in else");
}
}
private function loginUser():void{
//Alert.show("In login Form");
nav = new Navigation();
this.addElement(nav);
}
]]>
</fx:Script>
<s:Label text="Login Form" fontWeight="bold" fontSize="16" horizontalCenter="-110"
verticalAlign="middle" verticalCenter="-280"/>
<mx:Form horizontalCenter="-120" verticalCenter="-200" fontWeight="bold" verticalGap="20">
<mx:FormItem label="UserName">
<s:TextInput id="uname" restrict="A-Z a-z" focusIn="uname.errorString = null" text="Priyanka"/>
</mx:FormItem>
<mx:FormItem label="Password">
<s:TextInput id="password" displayAsPassword="true" focusIn="password.errorString = null" text="aamir#23"/>
</mx:FormItem>
<mx:FormItem>
<mx:HBox horizontalGap="20">
<s:Button label="Login" id="btnLogin" />
<mx:LinkButton label="Register" id="register"/>
</mx:HBox>
</mx:FormItem>
</mx:Form>
</s:Application>
Navigation.mxml
<mx:Panel xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" layout="absolute" width="100%" height="100%" xmlns:local="*">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import spark.components.Application;
private function logout(event:MouseEvent):void{
}
]]>
</fx:Script>
<s:TabBar id="tabs" left="10" y="5" dataProvider="{vs}"/>
<mx:ViewStack id="vs" width="90%" height="90%" left="10" y="30">
<s:NavigatorContent label="DashBoard" width="100%" height="100%">
<s:BorderContainer width="100%" height="100%" borderWeight="2" cornerRadius="3" dropShadowVisible="true">
<s:Label text="in DashBoard"/>
</s:BorderContainer>
</s:NavigatorContent>
<s:NavigatorContent label="User Information" width="100%" height="100%">
<s:BorderContainer width="100%" height="100%" borderWeight="2" cornerRadius="3" dropShadowVisible="true">
<s:Label text="in UserInfo"/>
</s:BorderContainer>
</s:NavigatorContent>
</mx:ViewStack>
<s:Button x="494" y="1" label="Logout" id="btnLogout" click="logout(event);"/>
</mx:Panel>
You should create a custom event:
package
{
import flash.events.Event;
public class LogoutEvent extends Event
{
public static const LOG_OUT:String = "logOut";
public function LogoutEvent(type:String)
{
super(type,false,false);
}
public override function clone():Event
{
return new LogoutEvent(type);
}
public override function toString():String
{
return formatToString("LogoutEvent");
}
}
}
Now you should dispatch this event:
<mx:Panel xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" layout="absolute" width="100%" height="100%" xmlns:local="*">
<fx:Metadata>
[Event(name="logOut", type="LogoutEvent")]
</fx:Metadata>
<fx:Script>
<![CDATA[
import spark.components.Application;
private function logout(event:MouseEvent):void{
dispatchEvent(new LogoutEvent(LogoutEvent.LOG_OUT));
}
]]>
</fx:Script>
<s:TabBar id="tabs" left="10" y="5" dataProvider="{vs}"/>
<mx:ViewStack id="vs" width="90%" height="90%" left="10" y="30">
<s:NavigatorContent label="DashBoard" width="100%" height="100%">
<s:BorderContainer width="100%" height="100%" borderWeight="2" cornerRadius="3" dropShadowVisible="true">
<s:Label text="in DashBoard"/>
</s:BorderContainer>
</s:NavigatorContent>
<s:NavigatorContent label="User Information" width="100%" height="100%">
<s:BorderContainer width="100%" height="100%" borderWeight="2" cornerRadius="3" dropShadowVisible="true">
<s:Label text="in UserInfo"/>
</s:BorderContainer>
</s:NavigatorContent>
</mx:ViewStack>
<s:Button x="494" y="1" label="Logout" id="btnLogout" click="logout(event);"/>
</mx:Panel>
Finally, you should handle it and close your window:
<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" width="100%" height="100%" creationComplete="init()">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
<mx:StringValidator source="{uname}" id="unameValid" property="text"/>
<mx:StringValidator source="{password}" id="passwordValid" property="text"/>
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.ValidationResultEvent;
import mx.validators.Validator;
private var myValidators:Array = new Array;
private var nav:Navigation;
private function init():void{
btnLogin.addEventListener(MouseEvent.CLICK,validateForm);
myValidators = [unameValid,passwordValid];
}
private function validateForm(event:Event):void{
//Alert.show("in validate form");
var errors:Array = Validator.validateAll(myValidators);
if(errors.length == 0){
loginUser();
}else{
Alert.show("in else");
}
}
private function loginUser():void{
//Alert.show("In login Form");
nav = new Navigation();
this.addElement(nav);
nav.addEventListener(LogoutEvent.LOG_OUT, nav_logOutHandler);
}
private function nav_logOutHandler(event:LogoutEvent):void
{
removeElement(nav);
nav.removeEventListener(LogoutEvent.LOG_OUT, nav_logOutHandler);
nav = null;
}
]]>
</fx:Script>
<s:Label text="Login Form" fontWeight="bold" fontSize="16" horizontalCenter="-110"
verticalAlign="middle" verticalCenter="-280"/>
<mx:Form horizontalCenter="-120" verticalCenter="-200" fontWeight="bold" verticalGap="20">
<mx:FormItem label="UserName">
<s:TextInput id="uname" restrict="A-Z a-z" focusIn="uname.errorString = null" text="Priyanka"/>
</mx:FormItem>
<mx:FormItem label="Password">
<s:TextInput id="password" displayAsPassword="true" focusIn="password.errorString = null" text="aamir#23"/>
</mx:FormItem>
<mx:FormItem>
<mx:HBox horizontalGap="20">
<s:Button label="Login" id="btnLogin" />
<mx:LinkButton label="Register" id="register"/>
</mx:HBox>
</mx:FormItem>
</mx:Form>
</s:Application>
The quickest way would be:
private function logout(event:MouseEvent):void{
parent.removeElement(this);
}
However, Constantiner's method is the proper way.
Also, if you are using flex 4, why not use the spark Form,FormItem,Panel and HGroup (Instead of HBox)