Triad Flex User Group Logo
Welcome Guest Search | Active Topics | Members | Log In | Register

Newbie seeking help Options
papalpha
Posted: Wednesday, November 05, 2008 2:57:13 PM
Rank: Newbie
Groups: Member

Joined: 11/5/2008
Posts: 1
Points: 3
Location: Charlotte
I asked Shawn the following question and he requested I post an example here for him to look at. Thanks for any assistance.
Question: I am trying to use the validation of field A to also make field B enabled, editable, and if feasible, required. (Previously field B would be non-editable and not enabled) I would like for the validation on field A to trigger whether the user tabs out of the field or presses the enter key after entering a value in field A.

My code - I started with some code that I had done while trying to do the on line "Flex in a week" tutorial, and added some fields as I was testing various things. The two fields that I am using for the issue in the question are the 'fullname' and 'address' fields. I have set the 'address' field to editable="false" enabled="false" and want the successful validation of the 'fullname' field to make the 'address' field enabled/editable for input and navigate to it.

Code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
borderStyle="solid" borderColor="#D4D4D4"
dropShadowEnabled="true" dropShadowColor="#B3B3B3"
shadowDirection="right" shadowDistance="10"
creationComplete="init()" height="630" width="696">

<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.events.CollectionEvent;
import mx.events.FlexEvent;
import mx.events.ItemClickEvent;
import mx.events.ValidationResultEvent;
import mx.validators.Validator;
[Bindable] public var selectedOptions:ArrayCollection;
[Bindable] public var formIsValid:Boolean = false;
[Bindable] public var formIsEmpty:Boolean = true;
// Holds a reference to the currently focussed control on the form.
private var focussedFormControl:DisplayObject;

private var myValidators:Array = new Array();
private function init():void{
selectedOptions.addEventListener(CollectionEvent.COLLECTION_CHANGE, addToList);
myValidators = [fullnameV, addressV, cityV, stateV, postalcodeV, phoneV, dateNeededV];
}
private function addToList(event:CollectionEvent):void{
thelist.dataProvider = selectedOptions;
}
private function validateForm():void{
var vals:Array = new Array();
vals = Validator.validateAll(myValidators);
}
//enter="nextField(address)"
private function nextField(formObject:Object):void {
var ti:TextInput = formObject as TextInput;
ti.setFocus();
}
//change="toggleEditControl(address)"
private function toggleEditControl(formObject:Object):void {
var ti:TextInput = formObject as TextInput;
ti.enabled = !ti.enabled;
ti.editable = !ti.editable;
ti.setFocus();
}

// Event handler function to display the selected button in an Alert control.
private function handleCard(event:ItemClickEvent):void {
if (event.currentTarget.selectedValue == "F") {
Alert.show("You selected Female")
}
else {
if (event.currentTarget.selectedValue == "M") {
Alert.show("You selected Male")
}
}
}
]]>
</mx:Script>
<mx:StringValidator id="fullnameV" source="{fullname}" property="text"
valid="{toggleEditControl(address)}" />
<mx:StringValidator id="addressV" source="{address}" property="text" trigger="{button}"/>
<mx:StringValidator id="cityV" source="{city}" property="text" trigger="{button}"/>
<mx:StringValidator id="stateV" source="{state}" property="text" trigger="{button}"/>
<mx:StringValidator id="postalcodeV" source="{postalcode}" property="text" trigger="{button}"/>
<mx:NumberValidator id="numeditV" source="{numericEdit}" property="text" allowNegative="false"
domain="real" required="false" valid="{focusManager.setFocus(memoedit)};"
invalid="Alert.show('Numbers, commas, and a decimal are the only valid characters');" />

<mx:PhoneNumberValidator id="phoneV" source="{phone}" property="text" allowedFormatChars="-"
trigger="{button}" />
<mx:DateValidator id="dateNeededV" source="{dateNeeded}" property="text" allowedFormatChars="/"
trigger="{button}" />

<mx:FormHeading label="Contact Information" x="100" y="4"/>

<mx:FormItem label="Full Name" required="true" x="15" y="27" height="22" width="260"
horizontalAlign="right" indicatorGap="50">
<mx:TextInput id="fullname" />
</mx:FormItem>

<mx:FormItem label="Address:" required="true" x="15" y="51" height="22" width="260"
horizontalAlign="right" indicatorGap="60" >
<mx:TextInput id="address" editable="false" enabled="false" />
</mx:FormItem>

<mx:FormItem label="City:" required="true" x="15" y="75" height="22" width="260"
horizontalAlign="right" indicatorGap="105">
<mx:TextInput id="city"/>
</mx:FormItem>

<mx:FormItem label="State:" required="true" x="15" y="99" height="22" width="260"
horizontalAlign="right" indicatorGap="90">
<mx:TextInput id="state" />
</mx:FormItem>

<mx:FormItem label="Postal Code:" required="true" x="15" y="123" height="22" width="260"
horizontalAlign="right">
<mx:TextInput id="postalcode" height="27"/>
</mx:FormItem>

<mx:FormItem label="Phone:" required="true" x="15" y="147" height="22" width="260"
horizontalAlign="right" indicatorGap="78">
<mx:TextInput id="phone" />
</mx:FormItem>

<mx:FormHeading label="Room Information" x="60" y="173"/>
<mx:FormItem label="Date Needed:" required="true" height="22" width="196" y="196" x="15">
<mx:DateField id="dateNeeded" selectableRange="{{rangeStart : new Date()}}"/>
</mx:FormItem>

<mx:FormHeading label="Selected Options" x="60" y="223"/>
<mx:FormItem label="Selected Options:" y="245" height="209" x="0" width="299">
<mx:List id="thelist"
width="182" height="207"
fontSize="9" borderStyle="none"
backgroundAlpha="0" leading="0" />
</mx:FormItem>

<mx:Button id="button" label="Submit" click="validateForm()" y="459" x="124"/>
<mx:FormItem label="Gender" height="60" horizontalAlign="left" width="129" x="386" y="3">
<mx:RadioButtonGroup id="Gender" labelPlacement="right" itemClick="handleCard(event);" />
<mx:RadioButton groupName="Gender" id="Female" label="Female" value="F" />
<mx:RadioButton groupName="Gender" id="Male" label="Male" value="M" />
</mx:FormItem>

<mx:FormItem label="Memo" x="22" y="494">
<mx:TextArea id="memoedit"
verticalScrollPolicy="auto" x="107" y="399"/>
</mx:FormItem>

<mx:FormItem label="Number Edit" x="299" y="70">
<mx:TextInput x="386" y="99" id="numericEdit" />

</mx:FormItem>
</mx:Canvas>

shawny
Posted: Monday, November 10, 2008 10:18:50 AM
Rank: Administration
Groups: Administration

Joined: 8/8/2008
Posts: 39
Points: 32
Check this out regarding validation and data manipulation:
http://www.adobe.com/devnet/flex/quickstart/validating_data/#section2

I will post more on this later this afternoon.
Users browsing this topic
Guest


Forum Jump
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.

Main Forum RSS : RSS

Powered by Yet Another Forum.net version 1.9.1.7 (NET v2.0) - 11/20/2007
Copyright © 2003-2006 Yet Another Forum.net. All rights reserved.
This page was generated in 0.744 seconds.