Flex ; get the value of RadioButton inside a FormItem - apache-flex

I'm working on Flash Builder with latest flex SDK.
I have a problem getting the value radioButton of the selceted radio button inside a form:
<mx:Form id="form_new_contribution">
<mx:FormItem label="Contribution type" includeIn="project_contributions">
<mx:RadioButtonGroup id="myG" enabled="true" />
<mx:RadioButton id="subtitle" label="subtitle" groupName="{myG}" value="subtitle"/>
<mx:RadioButton id="note" label="notes / chapters" groupName="{myG}" value="note"/>
</mx:FormItem>
</mx:Form>
the function is:
protected function button_add_new_clickHandler(event:MouseEvent):void{
Alert.show(myG.selectedValue.toString());
}
I tried also:
Alert.show(myG.selection.toString());
bothe codes show error:
TypeError: Error #1009: Cannot access a property or method of a null object reference.
and if It only works if I put :
Alert.show(myG.toString());
it alerts : Object RadioButtonGroup
thanx for any hints, and sorry for the long message :)

The only thing I see wrong here is that the groupName property of RadioButton is a string, not a curly-braced reference to a RadioButtonGroup.
You should render it as:
<mx:RadioButton id="subtitle" label="subtitle" groupName="myG" value="subtitle"/>
not
<mx:RadioButton id="subtitle" label="subtitle" groupName="{myG}" value="subtitle"/>
Or you can also use the group property with an RBG reference:
<mx:RadioButton id="subtitle" label="subtitle" group="{myG}" value="subtitle"/>

When are you calling this alert function? Is it possible that neither of the radio buttons are selected when the alert is called, thus selection and selectedValue are accurately returned as null?

Related

Flex Data binding on an mx component's property

Getting a warning from the compiler that data binding won't see assignments to "cmRepeater"
<mx:Repeater id="cmRepeater">
<support:CancelMembershipRowSelector lineItem="{cmRepeater.currentItem}" selectedTicketsOBJ="{selectedTicketsCancel}" />
</mx:Repeater>
Also getting that it can't see assignments to "TICKETS" here where deRep is a repeater and the currentItem will be an XML object.
dataProvider="{deRep.currentItem.TICKETS.TICKET}" itemClick="viewCharacs(event);">
Thanks for any help!
I don't think it will work if you try to bind to an XML object or property directly but it might work if you convert your data to an ArrayCollection, something like
<fx:Declarations>
<fx:Model id="myXML" source="../assets/myXML.xml"/>
<s:ArrayCollection id="myArrayCollection" source="{myXML.myNode}"/>
</fx:Declarations>
<mx:Repeater id="cmRepeater" dataProvider={myArrayCollection}>
<support:CancelMembershipRowSelector lineItem="{cmRepeater.currentItem}" selectedTicketsOBJ="{selectedTicketsCancel}" />
</mx:Repeater>
Apparently cmRepeater had not been marked as Bindable. I marked it as Bindable and now I don't get the warning.

Gettinf Property **text** not found error in DataGrid

I am using a custom itemEditor for my DataGrid.
The itemEditor has a simple TextField as a component.
But when ever i am clicking the cell i am getting an error as :
ReferenceError: Error #1069: Property text not found on editors.customItemEditor and there is no default value.
at mx.controls::DataGrid/itemEditorItemEditEndHandler()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\controls\DataGrid.as:4827]
Plz help me to resolve this issue.
My Opinion is that the error is coming for the "text" field. But i havn't accessed "text" field or used it anywhere in my code.
Regards,
Ravi
i solved the problem with commiting incluting "return data["selected"].toString()" into get text:
<mx:DataGridColumn dataField="selected" rendererIsEditor="true" >
<mx:itemRenderer>
<fx:Component>
<mx:Box styleName="" width="100%" height="100%" backgroundAlpha="0.0"
horizontalAlign="center" verticalAlign="middle">
<fx:Script>
<![CDATA[
public function get text():String
{
return data["selected"].toString();
}
public function set text(value:String):void
{
}
protected function checkbox1_clickHandler(event:MouseEvent):void
{
data["selected"]=event.target["selected"];
}
]]>
</fx:Script>
<mx:CheckBox selected="{data.selected}" click="checkbox1_clickHandler(event)"/>
</mx:Box>
</fx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
Taken from http://livedocs.adobe.com/flex/3/html/help.html?content=celleditor_8.html
By default, Flex expects an item editor to return a single value to the list-based control. You use the editorDataField property of the list-based control to specify the property of the item editor that contains the new data. Flex converts the value to the appropriate data type for the cell.
The default item editor is a TextInput control. Therefore, the default value of the editorDataField property is "text", which corresponds to the text property of the TextInput control. If you specify a custom item editor, you also set the editorDataField property to the appropriate property of the item editor
I am still Struck in this error but i think there is a hope of coming out of it.... :)
If we take TextInput as the itemEditor, like:
dataGridColumn.itemEditor = new ClassFactory(TextInput);
Then there was no problem as "text" is being internally defined inside TextInput.as.
On a similar note if i copy set text and get text inside our custom Editor, then its working fine.. only problem that is
coming is regarding commiting the changed values.
I am working on it, hope i'll be able to sort it out.
P.S.: I am a newbie here, so plz pardon me of any idiotic RnD... :p

Flex Combobox and "Access of undefined property ..." error

I am kind of puzzled and not sure how to tackle this issue: Got two comboxes with dataproviders. Also, I created a separate index.as in /as folder. I have these two functions:
In my .mxml page, I have :
<mx:FormItem label="Property Code:" id="fi_propertyCode" width="100%">
<mx:ComboBox id="propertyCode" width="50%" dataProvider="{qry_communites}" change="showPropertyCode()" />
</mx:FormItem>
<mx:FormItem label="Utility Type:" id="fi_utilityType" width="100%">
<mx:ComboBox id="utilityType" width="50%" dataProvider="{qry_utilityTypes}" change="showUtilityType()" />
</mx:FormItem>
and in my index.as, I have:
private function showPropertyCode():void {
mx.controls.Alert.show(propertyCode.selectedItem.label, propertyCode.selectedItem.data);
}
private function showUtilityType():void {
mx.controls.Alert.show(utilityType.selectedItem.label, utilityType.selectedItem.data);
}
I get an error saying
Access of undefined property utilityType.
The funny thing is I don't get this error for "propertyCode". Moreover, If I copy pasyte showUtilityType() function and put inside my .mxml page, I don't get this error either. Btw. I have :
....
in my .mxml page. What should I do? How can I get rid of this error? Why does Flex see propertyCode combobox but not utilityType combobox? I would rather keep index.as as it is. Thanks in advance.
That's strange. Did you try specifying the script using the source attribute?
<mx:Script source="../as/index.as"/>

Preventing validator from firing after bound value changes

I am working on a product options form whose contents should be cleared by a clearOptions() method each time the user adds an option. The option name TextInput is bound to a value object that is reinstantiated each time the the user adds a product option. The problem I am having is that the StringValidator fires each time the bound value object is reinstantiated.
<mx:StringValidator id="valOptionName" minLength="1" source="{txtOptionName}" property="text" trigger="{btnAddChangeOption}" triggerEvent="click"/>
<mx:TextInput id="txtOptionName" width="120" text="{currentProductOption.name}"/>
<mx:LinkButton id="btnAddChangeOption" label="Add/Change Option" click="saveUpdateOption(event)" horizontalCenter="0"/>
The following code is what causes the StringValidator to fire when it shouldn't. It results in a red outline around a text box.
private function clearOptions():void
{
currentProductOption = new ProductOptionVO();
}
Thank you for any help,
Orville
I solved the problem by setting the source of the validator manually in the validation code and then switching it off before currentProductOption is reinstantiated.

Required fields in flex

I've got a question about flex.
I have a form and the email is required.
I googled this and found the following solution:
<mx:FormItem label="Email" id="emailFormItem" width="100%" styleName="formEven" required="true">
<mx:TextInput id="emailTextInput" width="100%" text="{user.email}"/></mx:FormItem>
The problem is that when I press ok the call is still made.
I know you have to validate the following by yourself but does anyone has an idea how I can validate the field(s)?
Solution:
I've found a solution for this:
You can create a validator for each field you want to validate and then create this function:
private function isValid():Boolean {
var failedValidators:Array = Validator.validateAll([emailValidator, userNameValidator, languageValidator, firstNameValidator, lastNameValidator]);
return failedValidators.length == 0;
}
This can be closed.
what I generally do is create a method called something like isSubmitEnabled or isFormComplete. I call it on keyUp on every field that is required and check for values in all of the fields (and any other validation I want to do) and then as long as everything checks out I set the submit button to be enabled otherwise I set the submit button to be disabled. As long as you disable the button when you start then you should be good to go.
I have used this method several times and find it to be the easiest to use and especially to maintain. I will look at the docs and see if I can see what you can do with the required attribute on the form item though.
Update:
According to the docs:
This property controls the indicator
display only. You must attach a
validator to the children if you
require input validation.
What you want is mx.validators.Validator (http://livedocs.adobe.com/flex/3/langref/mx/validators/Validator.html)
<mx:Validator id="reqValid" required="true"
source="{fname}" property="text"
valid="handleValid(event)" invalid="handleValid(event)"/>
See the code examples on that link to see how to use it. The example is actually exactly what you are looking for I think. HTH
<fx:Declarations>
<mx:RadioButtonGroup id="a1" itemClick="usdradio(event);"/>
<fx:Model id="creditcard">
<card>
<cardType>{cardTypeCombo.selectedItem.data}</cardType>
<cardNumber>{cardNumberInput.text}</cardNumber>
</card>
</fx:Model>
<mx:CreditCardValidator id="ccV"
cardTypeSource="{creditcard}" cardTypeProperty="cardType"
cardNumberSource="{creditcard}" cardNumberProperty="cardNumber"
trigger="{myButton}" triggerEvent="click"
cardTypeListener="{cardTypeCombo}"
cardNumberListener="{cardNumberInput}"
valid="Alert.show('Validation Succeeded!')"/>
<mx:ArrayCollection id="dp">
<fx:Object label="American Express" data="American Express"/>
<fx:Object label="Diners Club" data="Diners Club"/>
<fx:Object label="Discover" data="Discover"/>
<fx:Object label="MasterCard" data="MasterCard"/>
<fx:Object label="Visa" data="Visa"/>
</mx:ArrayCollection>
<mx:CurrencyValidator source="{priceUS}" property="text" precision="2"
trigger="{myButton2}" triggerEvent="click"
valid="Alert.show('Validation Succeeded!')"/>

Resources