how to get id of BorderContainer at runtime in Flex - actionscript-3

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 ;

Related

as3 tilelist with custom itemrender add to selectedIndices

I create a TileList with custom renderer.
<s:BorderContainer
id="bcImage"
width="120"
height="99%"
borderVisible="true"
borderStyle="solid"
borderColor="#B3B3B3"
borderWeight="1"
cornerRadius="2"
backgroundAlpha=".8"
backgroundColor="#F8F8FF"
dropShadowVisible="true"
>
<mx:Canvas id="cvsImage" width="100%" click="cvsImage_clickHandler(event)">
<s:HGroup width="100%" paddingBottom="0" paddingTop="5" >
<s:CheckBox id="cbImgSelect"/>
<s:Label x="23" y="3" width="82" fontSize="11" fontWeight="normal" text="{data.imDate}"
textAlign="right" color="#000000"/>
</s:HGroup>
<mx:Image id="iconCanvas" x="10" y="20" width="99" height="99" horizontalAlign="center"
maintainAspectRatio="true" scaleContent="true"
verticalAlign="middle" mouseDown="iconCanvas_mouseDownHandler(event)"
>
</mx:Image>
</mx:Canvas>
<s:BorderContainer width="100%" y="124" height="25" bottom="1" left="3" right="3"
backgroundColor="#FFFFFF" id="bcTitre" borderAlpha="0" >
<s:VGroup width="100%" y="124" height="25" bottom="0" left="0" right="0"
paddingBottom="0" paddingTop="0" gap="0" click="iconCanvasLabel_mouseUp(event)">
<s:Label text="{data.imType}" height="50%" fontSize="10" paddingBottom="1" id="lType"
fontWeight="normal" width="99%" textAlign="center" toolTip="{data.imType}"/>
<s:Label text="{data.imStade}" fontSize="10" textAlign="center" paddingTop="1"
fontWeight="normal" width="99%" id="lStade" toolTip="{data.imStade}"/>
</s:VGroup>
</s:BorderContainer>
</s:BorderContainer>
My TileList has allowMultipleSelection enable.
I'd to check CheckBox when item is selected by click or by selection (continus or not) and if CheckBox.selected=true I'd like to show color selection around selected item.
Could you help me to do that ?
Best regards
It seems that you're trying to resolve the issue from opposite side, which is wrong
I suppose yo can consider following way:
set mouseEnabled to false for checkBox so that all the list item triggers click
alter default selection behaviour by intercepting changing event and doing something like
protected function lst_changingHandler(evt:IndexChangeEvent):void {
evt.preventDefault();
var ids:Vector.<int> = (evt.currentTarget as List).selectedIndices;
(evt.currentTarget as List).selectedIndices = ids.concat(new <int>[evt.newIndex]);
bind checkBox selected state to the renderer selected one

Dynamic variable for binding

I have a variable myVar which can take several values (1, 2, 3 etc...).
I have also many s:Group named G1, G2, G3 etc...
How can I define dynamic variable name in {} to make binding ?
Something like :
<s:Group id="anotherGroup" height="{Group(this['G' + myVar]).height}" />
Thanks for help
What you have done looks good to me. Here is an example of using variable as component id to access the property and use it for binding:
<?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[
[Bindable]
private var myVar:int = 1;
private function changeGroup_clickHandler(event:MouseEvent):void
{
if(++myVar > 3)
{
myVar = 1;
}
}
]]></fx:Script>
<s:VGroup height="500" width="1000">
<s:Group id="G1" height="25" width="100%" contentBackgroundColor="red">
<s:BorderContainer borderColor="red" height="100%" width="100%">
<s:Label text="Inside G1. Height: {G1.height}"/>
</s:BorderContainer>
</s:Group>
<s:Group id="G2" height="50" width="100%" >
<s:BorderContainer borderColor="blue" height="100%" width="100%">
<s:Label text="Inside G2. Height: {G2.height}"/>
</s:BorderContainer>
</s:Group>
<s:Group id="G3" height="75" width="100%">
<s:BorderContainer borderColor="green" height="100%" width="100%">
<s:Label text="Inside G3. Height: {G3.height}"/>
</s:BorderContainer>
</s:Group>
<s:Group id="anotherGroup" height="{(this['G'+myVar] as Group).height}" width="100%">
<s:BorderContainer borderColor="yellow" height="100%" width="100%">
<s:Label text="Inside anotherGroup. Height: {anotherGroup.height}"/>
</s:BorderContainer>
</s:Group>
<s:Button label="Change Group" click="changeGroup_clickHandler(event)"/>
</s:VGroup>
</s:Application>

how can I call mxml application from actionscript [duplicate]

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

flex4 add group with transition effect

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>

get id inactionscript/flex

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?