How to get all child ids of myCanvas1.Also for a specific mxml tag say <mx:Move /> how to get its id from action script
<?xml version="1.0" encoding="utf-8"?>
<mx:Application layout="absolute" xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
[Bindable("__NoChangeEvent__")]
[Embed(source="fruits.jpg")]
private var fruitImageClass:Class;
public function clickhandler(event:Event):void
{
//How to get all childs of myCanvas1
}
]]>
</mx:Script>
<mx:Canvas backgroundColor="#A9C0E7" borderStyle="solid" height="300" id="myCanvas1" width="300">
<mx:Move id="fruitAnimation1" target="{fruitImage}" xTo="100" yTo="10" />
<mx:Move id="fruitAnimation2" target="{fruitImage2}" xTo="100" yTo="10" />
</mx:Canvas>
<mx:Canvas backgroundColor="#A9C0E7" borderStyle="solid" height="800" id="myCanvas" width="800">
<mx:Image height="50" id="fruitImage" source="{fruitImageClass}" width="50" x="250" y="10" />
<mx:Image height="50" id="fruitImage2" source="{fruitImageClass}" width="50" x="250" y="10" />
</mx:Canvas>
<mx:Button click="clickhandler(event)" label="Generate" x="100" y="316" />
</mx:Application>
The problem of your code is children of myCanvas1 are not visual components and this declaration has no sense. You shouldn't put your animations, effects and transitions into visual container. That's all what I can say about your question :)
Have you looked at any of the getChild.. methods?
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/collections/HierarchicalCollectionView.html#getChildren%28%29
Does this help?
Related
I am getting error while attempting to get id of BorderContainer at runtime. I tried using getStyle but it is also failing.
<s:Panel id="colorPanel"
title="Dem display color"
width="500" height="500">
<s:layout>
<s:BasicLayout/>
</s:layout>
<s:Label id="label" y="4" horizontalCenter="0"/>
<s:BorderContainer id="Box1" x="70" y="70" height="50" width="50" backgroundColor="#0000ff">
</s:BorderContainer>
<s:BorderContainer id="Box2" x="90" y="90" height="51" width="50" backgroundColor="#00ff00">
</s:BorderContainer>
<s:BorderContainer id="Box3" x="50" y="50" height="52" width="50" backgroundColor="#ff0000">
</s:BorderContainer>
<s:Button label="Click" click="
colorPanel.setElementIndex(colorPanel.getElementAt(0),3);
label.text = ""+colorPanel.getElementAt(0).id ;
">
</s:Button>
</s:Panel>
Instead of casting to BorderContainer, it is safe to cast to UIComponent. In your example it crashes when the returned element is Label instead of BorderContainer. You can do as below:
<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script><![CDATA[
import mx.core.UIComponent;
]]></fx:Script>
<s:Panel id="colorPanel"
title="Dem display color"
width="500" height="500">
<s:layout>
<s:BasicLayout/>
</s:layout>
<s:Label id="label" text="Red" y="4" horizontalCenter="0"/>
<s:BorderContainer id="Blue" x="70" y="70" height="50" width="50" backgroundColor="#0000ff">
</s:BorderContainer>
<s:BorderContainer id="Green" x="90" y="90" height="51" width="50" backgroundColor="#00ff00">
</s:BorderContainer>
<s:BorderContainer id="Red" x="50" y="50" height="52" width="50" backgroundColor="#ff0000">
</s:BorderContainer>
<s:Button label="Click" click="{
colorPanel.setElementIndex(colorPanel.getElementAt(1),3);
label.text = UIComponent(colorPanel.getElementAt(3)).id;}"/>
</s:Panel>
</s:Application>
Solution I found seems like over rigidness on the part of Adobe. I was able to get value of Id the moment I casted the returned Element as BorderContainer. So we have to live with it till Adobe lowers it's compiler's expectations from us.
label.text = ""+ BorderContainer(colorPanel.getElementAt(0)).id ;
Let's say there is a TOP movieclip
and another BOTTOM movieclip
How would I trigger a mouse event when the mouse is over BOTTOM even if TOP is overlaying it?
Assuming you don't want any mouse events for the top one, set mouseEnabled to false for the top clip.
topClip.mouseEnabled= false;
Probably this can also be the solution if you don't want your topClip mouse disabled OR if you want to receive your mouse event on both movie clips.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" >
<mx:Script>
<![CDATA[
import mx.controls.Alert;
private function onMouseOver(evt:MouseEvent):void
{
if(evt.currentTarget==bottomClip)
{
Alert.show(bottomClip+" CLICKED");
}
if(evt.currentTarget==topClip)
{
Alert.show(topClip+" CLICKED");
}
}
]]>
</mx:Script>
<mx:Canvas id="can" width="600" height="400" horizontalCenter="0" verticalCenter="0" borderStyle="solid" borderColor="red" >
<mx:Canvas id="bottomClip" click="onMouseOver(event)">
<mx:Canvas id="actualBottomClip" width="400" height="300" x="100" y="50" backgroundColor="red" />
<mx:Canvas id="topClip" click="onMouseOver(event)">
<mx:Canvas id="actualTopClip" width="200" height="75" x="50" y="100" backgroundColor="green" />
</mx:Canvas>
</mx:Canvas>
</mx:Canvas>
</mx:Application>
This question already has an answer here:
how to call mxml application from action script
(1 answer)
Closed 9 years ago.
I've main.mxml which has login button. It looks like below -
<mx:Script>
<![CDATA[
private function onSuccessfulLogin(event):void {
// How to call second mxml application*/
}
]]>
</mx:Script>
<mx:Panel x="414" y="145" width="355" height="200" layout="absolute"
title="Enter Your Login Information">
<mx:TextInput id="textInputName" x="147" y="12"/>
<mx:TextInput id="textInputPassword" x="147" y="57"/>
<mx:Button x="142" y="115" label="Login" id="callToServer"
<mx:Label x="37" y="14" text="User Name"/>
<mx:Label x="41" y="59" text="Password"/>
</mx:Panel>
Now on successful login I want to call another mxml application, for example second.mxml. It looks like -
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns="*" creationComplete="iFrame.visible=true"
viewSourceURL="srcview/index.html">
<mx:HBox width="100%" height="100%">
<mx:Panel title="/ Company Home" width="200" height="100%" >
<mx:Tree id="tree" width="100%" height="100%" dataProvider="{treeData}"
labelField="#label" showRoot="false"
change="iFrame.source =
(Tree(event.target).selectedItem.attribute('path').toString());" />
</mx:Panel>
<mx:Panel width="100%" height="100%" title="Ticket Details" >
<IFrame id="iFrame" source="some url" width="100%" height="100%" />
</mx:Panel>
</mx:HBox>
</mx:Application>
Please let me know how will I do it. Thanks for your help!
One simple way to let 2 Applications communicate would be LocalConnectionDocumentation here
I've one main.mxml which has login button which looks like below -
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
backgroundColor="#C4D4EF" layout="absolute">
<mx:HTTPService id="serverCall" method="POST"
url="http://localhost:8080/LDAPService/reg"
result="on_Result(event)" fault="on_Fault(event)"
/>
<mx:Script>
<![CDATA[
private function on_Result(event:ResultEvent):void {
// How to write here
}
]]>
</mx:Script>
<mx:Panel x="414" y="145" width="355" height="200" layout="absolute"
<mx:Button x="142" y="115" label="Login" id="callToServer"
click="send_data(event)"/>
</mx:Panel>
</mx:Application>
Now I want to call second.mxml file which looks like below -
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns="*" creationComplete="iFrame.visible=true"
viewSourceURL="srcview/index.html">
<mx:HBox width="100%" height="100%">
<mx:Panel title="/ Company Home" width="200" height="100%" >
</mx:Panel>
<mx:Panel width="100%" height="100%" title="Ticket Details" paddingTop="1" >
<IFrame id="iFrame" source="some service call url" width="100%" height="100%" />
<mx:ControlBar>
<mx:CheckBox id="cbVisible" label="IFrame Visible" selected="true"
click="iFrame.visible=cbVisible.selected"/>
</mx:ControlBar>
</mx:Panel>
</mx:HBox>
</mx:Application>
How can I call second.mxml from main.mxml? Please advice, Thanks for your help!
OK this example is in flex 4! it uses spark instead of mx
This shows the basics of states.
You can read more here: http://www.artima.com/articles/flex_4_states.html
This article shows the difference between flex3 and flex4 states
This is only a start. Hope this helps you.
<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" >
<fx:Script ><![CDATA[
import mx.rpc.events.ResultEvent;
<![CDATA[
private function on_Result( event:ResultEvent ):void
{
currentState = "result";
}
]]>
]]>
</fx:Script >
<fx:Declarations >
<s:HTTPService id="serverCall"
url="http://localhost:8080/LDAPService/reg"
useProxy="false"
method="POST"
result="on_Result(event)" >
</s:HTTPService >
</fx:Declarations >
<s:states >
<s:State name="init" />
<s:State name="result" />
</s:states >
<s:Panel x="414"
y="145"
width="355"
height="200" >
<s:Button x="142"
y="115"
label="Login"
id="callToServer"
includeIn="init"
click="serverCall.send()" />
</s:Panel >
<s:Panel title="/ Company Home"
width="200"
height="100%"
includeIn="result" >
</s:Panel >
<s:Panel width="100%"
height="100%"
includeIn="result"
title="Ticket Details" >
.... your stuff
</s:Panel >
</s:Application >
How can i add a Group (with unknown size) to SkinnableContainer with a transformation effect?
Example
First, resize the SkinnableContainer smoothly to its final size and then fade in the Group.
Problem hereby
The Group-size is determined by adding it to the SkinnableContainer. Doing this, the SkinnableContainer gets the final size and the Group is shown, without playing the transition effect.
All examples i found are MXML- and State-based. But i need an Actionscript-only solution here.
<fx:Declarations>
<s:Parallel id="showEff">
<s:Rotate3D angleYFrom="-90" angleYTo="0" duration="7000"/>
<s:Fade alphaFrom="0.0" alphaTo="1.0" duration="7000" />
<mx1:WipeRight duration="9000"/>
</s:Parallel>
<s:Parallel id="hideEff">
<s:Rotate3D angleYFrom="0" angleYTo="-90" duration="4000" />
<s:Fade alphaFrom="1.0" alphaTo="0.0" duration="7000"/>
<mx1:WipeRight duration="5000"/>
</s:Parallel>
</fx:Declarations>
<s:Button id="btn"
label="Toggle Panel visibility"
click="skinnableContainerPanel.visible = !skinnableContainerPanel.visible;" />
<s:Panel id="skinnableContainerPanel" title="Using SkinnableContainer"
width="500" height="300" showEffect="{showEff}"
hideEffect="{hideEff}" >
<s:layout>
<s:VerticalLayout gap="10" verticalAlign="middle"
horizontalAlign="center"/>
</s:layout>
<s:SkinnableContainer
skinClass="com.SkinnableContainerSkin"
width="50%" height="50%" horizontalCenter="0"
verticalCenter="0">
<s:HGroup horizontalCenter="0" verticalCenter="0" >
<s:BorderContainer width="50" height="50"
borderWeight="2" color="0x323232" />
<s:BorderContainer width="50" height="50"
borderWeight="2" color="0x323232" />
<s:BorderContainer width="50" height="50"
borderWeight="2" color="0x323232" />
</s:HGroup>
</s:SkinnableContainer>
</s:Panel>