ActionScript 3.0 - reading each MXML element - actionscript-3

If there is already a post for this, I'm sorry but I could not find it.
I have the following form (sample):
<mx:Label x="105.5" y="0" text="Cadastramento Basico" fontSize="22"/>
<mx:Text x="140" y="42" text="Nome:"/>
<mx:TextInput x="176" y="40" id="nome"/>
<mx:Text x="138" y="74" text="E-mail:"/>
<mx:TextInput x="177" y="72" id="email"/>
<mx:Text x="125" y="105" text="Telefone:"/>
<mx:TextInput x="177" y="103" restrict="012456789" id="telefone"/>
And I need to read each element in ActionScript to clean up every one after a user has clicked on a submit button. In jQuery we have the function elements.each(), I just need something like this.
How can I do this please?

Please make sure you read the documentation before asking questions:
You should wrap your form into a <mx:Form> tag:
<mx:Form id="myForm" label="Cadastramento Basico">
<mx:FormItem label="Nome:" >
<<mx:TextInput id="nome"/>
</mx:FormItem>
<mx:FormItem label="E-mail:" >
<<mx:TextInput id="mail"/>
</mx:FormItem>
<mx:FormItem label="Telefone:" >
<<mx:TextInput id="telefone" restrict="012456789"/>
</mx:FormItem>
</mx:Form>
Then do it manually by running through all items of the form and check if they have the proper type and a valid property to be reset (add them to the code below if necessary).
private function clearForm():void
{
for each(var o:* in loginForm.getChildren() ){
if(o is FormItem){
var item:FormItem = o as FormItem;
for each(var o2:Object in item.getChildren()){
if(o2.hasOwnProperty("text")) {
o2.text = "";
}
}
}
}
}

Related

AdvancedDataGrid editable property issue

I have an AdvancedDataGrid control with two columns UserName and eSigner. Which looks like:
Code for this:
<mx:AdvancedDataGrid id="UserGroupGrid" left="10" bottom="40" right="10" editable="true" height="226">
<mx:dataProvider>
<mx:GroupingCollection id="gc" source="{UserGroupList}">
<mx:Grouping>
<mx:GroupingField name="UserGroupName"/>
</mx:Grouping>
</mx:GroupingCollection>
</mx:dataProvider>
<mx:columns>
<mx:AdvancedDataGridColumn textAlign="left" headerText="UserName" dataField="UserName" editable="false"/>
<mx:AdvancedDataGridColumn width="100" dataField="eSignor" headerText="eSigner" editable="true" textAlign="center" rendererIsEditor="true" editorDataField="cbSelected" editorYOffset="30">
<mx:itemRenderer>
<mx:Component>
<mx:HBox horizontalAlign="center">
<mx:Script>
<![CDATA[
public var cbSelected:Boolean;
]]>
</mx:Script>
<mx:CheckBox id="SignorCk" width="10" selected="{data.eSignor}" enabled="true" click="cbSelected = SignorCk.selected;" visible="{data.eSignor == null ? false : true}"/>
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:AdvancedDataGridColumn>
</mx:columns>
</mx:AdvancedDataGrid>
As you can see in the code I want the column UserName to be non-editable and column eSigner to be editable. When I load up the page I am running into an issue where the grouping header Accounts Payable becomes editable. This happens when I click on Accounts Payable and then click somewhere off the browser and then click back on Accounts Payable again. It looks like this:
I have tried this with less success. Since the column UserName has the editable set to false I wonder what is going on here.
itemEditBegin="preventEdit(event);"
The property above does the trick here. In the code posted, just add this property.
<mx:AdvancedDataGrid id="UserGroupGrid" itemEditBegin="preventEdit(event);" left="10" bottom="40" right="10" editable="true" height="226">
In the script tag add the function:
private function preventEdit(event:AdvancedDataGridEvent):void
{
if(event.itemRenderer.data.UserName == null)
event.preventDefault();
}
Whenever we focus out and focus back in, on the grouping header, this would call the preventEdit function and that would cancel the events' default behavior of editing. I think this is just a workaround, hope they've fixed all this in Flex 4.
Source: Adobe

flex4 - CheckBox and RadioButton validation

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.

How to use "this" in Flash Builder 4.5

I'm trying to learn Flash builder 4.5, and now I'm stuck with this question.
I got this code:
<fx:Script>
<![CDATA[
public function showList():void
{
tier2.x=(this.x+this.width);
tier2.y=(this.y+this.height);
tier2.visible=true;
}
]]>
</fx:Script>
// on mouseover I'm calling function showList()
<mx:LinkButton x="10" y="20" width="143"
label="Class 1" id="t_id1"
mouseOver="showList()"
color="#FFFFFF" fontFamily="Arial" fontSize="16" fontWeight="bold"/>
<s:List id="tier2" visible="false" width="111" borderColor="#FEFEFE"
borderVisible="true" color="#FAF3F3" contentBackgroundAlpha="0.5"
contentBackgroundColor="#5D5E5E">
</s:List>
In function showList() I'm trying to move the list to the linkbutton on mouseover.
How can I get the linkbutton's x and y position?

Exception on trying to change the state in Flex 3

I am trying to change the stage state to different state on click of a button. The problem is some times am getting exception as The supplied DisplayObject must be child of the caller.
Here is what am trying to do to change the state
this.currentState = 'fullScreen';
here this is a canvas.
Here is the MXML for the State fullscreen
<mx:State name="fullScreen">
<mx:RemoveChild target="{lstExpert}"/>
<mx:RemoveChild target="{screenToggle}"/>
<mx:AddChild relativeTo="{outContainer}" position="firstChild">
<mx:HBox id="topHeaderBox" horizontalAlign="left" verticalAlign="middle" width="98.5%" height="60"/>
</mx:AddChild>
<mx:AddChild relativeTo="{topHeaderBox}" position="firstChild" >
<mx:Label id="lblCourseName" width="100%" text="Name" color="#ffffff" fontFamily="Arial" fontSize="14" fontWeight="bold" height="20" />
</mx:AddChild>
<mx:AddChild target="{screenToggle}" relativeTo="{lblCourseName}" position="after" />
<mx:AddChild relativeTo="message" position="before">
<mx:Spacer id="Bar" height="5" width="2" />
</mx:AddChild>
</state>
What would be the mistake here?
You might want to bind the relativeTo property value of the last AddChild object. Meaning, to write it like this:
<mx:AddChild relativeTo="{message}" position="before">
Assuming you have an element with that id.
Hope this helps.

Flex 4 - Dragging from list - dragsource.dataForFormat("itemsByIndex") is null

Thanks in advance for anyone who tries to help me out,
I am working with Flex 4 and am trying to get Drag and Drop working between Lists and between a List and non-list component.
I have a custom itemRenderer which has an image and a label.
Graphically everything works great but the data that is attached to the item I am dragging comes up in dragSource as null every time.
Here is my code:
<s:List dataProvider="{userInventory}" itemRenderer="renderers.InventoryItemRenderer" width="198" height="294" y="34" dragEnabled="true" dragMoveEnabled="true" >
<s:layout>
<s:TileLayout />
</s:layout>
</s:List>
</s:BorderContainer>
<!-- /User Inventory -->
<s:BorderContainer dragEnter="fndragEnterHandler(event);"
dragOver="fndragOverHandler(event);"
dragDrop="fndragDropHandler(event);" includeIn="crib" x="243" y="206" width="200" height="200">
<s:Label x="10" y="10" text="This is supposed to be a baby" width="178" height="24"/>
<s:Label x="10" y="39" text="State:" width="42" height="19"/>
<s:Label x="59" y="37" width="80" height="24" id="baby_state"/>
</s:BorderContainer>
private function fndragEnterHandler(event:DragEvent):void
{
DragManager.acceptDragDrop(IUIComponent(event.currentTarget));
}
private function fndragOverHandler(event:DragEvent):void
{
DragManager.showFeedback(DragManager.MOVE);
}
private function dragOverCopyHandler(event:DragEvent):void {
event.preventDefault();
//if (event.dragSource.hasFormat("itemsByIndex"))
DragManager.showFeedback(DragManager.COPY);
}
private function fndragDropHandler(event:DragEvent):void
{
//event.preventDefault();
monsterDebugger.trace(this, event.dragSource, null, "DRAG DROP");
var items:Vector = event.dragSource.dataForFormat("itemsByIndex") as Vector;
var baby:Array = babyObject.source;
monsterDebugger.trace(this, items, null, "DRAG DROP");
items[0].baby_id = baby[0]['Baby']['id'];
var item:Object = new Object();
item.id = items[0].id;
item.baby_id = items[0].baby_id;
item.effect = JSON.decode(items[0].effect);
sendAction(item, "baby", userFbData.id, "use_item_on_baby");
//TextInput(event.currentTarget).text=itemsArray[0].label;
}
And here is my itemRenderer:
<mx:Image x="14" y="19" source="{data.image}" width="50" height="50" smoothBitmapContent="true"/>
<s:Label x="0" y="-1" text="{data.name}" fontFamily="Verdana" fontSize="12" color="#696565" width="80" height="21"/>
The items Vector in the drop handler comes back null every time and I can't quite figure out why.
I thought at first that it was because that particular case is not dragging from List to List, but I tried it that way also and the dragSource.dataForFormat("itemsByIndex") continues to return null.
If anyone can point me in the right direction I would greatly appreciate it, I've been banging my head against this for two days!
you cast to Vector may already nullify the dragsource data. so try with
var items:* = event.dragSource.dataForFormat("itemsByIndex");