changing the location of a component in different states

Question

Hello my good people of stackOverflow,

Recently, i was building a component where a certain dropDownList component with id = languageCombo, has to be relocated dynamically as the states change..here is the code for the two states: initial and chaingrp. i want the dropDownList component to change from one position X in the initial state to another position X = 500 in the tree_changeHandler function when the chaingrp state is called but the dropDownList component doesn't change. Could anyone point me to what the problem could be?

Thanks

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
     xmlns:s="library://ns.adobe.com/flex/spark"
     xmlns:mx="library://ns.adobe.com/flex/mx"
     xmlns:components="components.*"
     xmlns:searchComponents="searchComponents.*"
     minHeight="500" minWidth="500">


<fx:Metadata>
    [Event(name="SearchClick", type="eventClass.SelectedTableEvent")]
</fx:Metadata>



<fx:Script>
    <![CDATA[
        import eventClass.SelectedTableEvent;

        import mx.collections.ArrayCollection;
        import mx.events.ListEvent;
        import mx.events.TreeEvent;

        import spark.events.IndexChangeEvent;
        namespace simo="http://www.simo-project.org/simo";
        [Bindable]
        public var parentXmlCopy:XML;
        [Bindable]
        public var treeXml:XML;
        [Bindable]
        private var newXml:XML;
        private var transferredname:String;
        public var  modelType:String;
        public var selectedModelchainIndex:int;
        public var selectedTaskIndex:int;





        public function set variables(_xml:XML):void{
            parentXmlCopy = _xml;   
        }

        private function languageChange(event:Event):void{
            trace("languageChange");
            var cb:DropDownList=event.target as DropDownList;
            var temp:Object=cb.selectedItem;


            var chain:Array=[];
            for (var i:int=0; i < cb.dataProvider.length; i++)
            {
                if(cb.dataProvider[i].label == temp.label)
                {
                    chain.push(cb.dataProvider[i].locale);
                    resourceManager.localeChain=chain;
                }
            }

        }






        protected function tree_changeHandler(event:ListEvent):void
        {
            use namespace simo;
            var selectedItem:XML;

            transferredname = tree.selectedItem.localName();

            switch (transferredname){

                case "chain_group" : currentState = "chaingroup";
                 languageCombo.X = 500;

                 selectedItem = XML(tree.selectedItem);

                 trace(selectedItem);

                 this.chainGrpId.displayChainGrp(selectedItem);
                break;

            }

        }


            private function treeLabel(item:Object):String
            {

            return item.localName();        
        }



    ]]>
</fx:Script>



<s:states>
    <s:State name="initial"/>
    <s:State name="chaingroup"/>

</s:states>

    <s:HGroup><!--overall outer Hgroup-->
    <s:HGroup gap="8">
        <s:HGroup gap="5">
            <s:VGroup  height="460" paddingLeft="10" paddingTop="5">
                <s:HGroup gap="3">
                    <searchComponents:AutoComplete/>
                    <s:Button 
                        id="searchBT" 
                        height="24" 
                        width="24" 
                        skinClass="skins.searchBTskin"/>
                </s:HGroup>
                <s:List id="treeDP" height="120" width="180" labelField="@name"
                        change="treeDP_changeHandler(event)">
                    <s:dataProvider>
                        <s:XMLListCollection source="{parentXmlCopy.children()}" />
                    </s:dataProvider>
                </s:List>
                <s:Button id="delListBT" label="delList"/>
                <s:HGroup gap="70">
                    <s:Button 
                        id="backBT"
                        label="back"
                        height="24" 
                        width="24" 
                        />
                    <s:Button 
                        id="nextBT"
                        label="next"
                        height="24" 
                        width="24" 
                        />

                </s:HGroup>


                <mx:Tree id="tree" dataProvider="{treeXml}" labelField="{treeXml.localName()}"
                         top="72" left="50" labelFunction="treeLabel"
                         maxHorizontalScrollPosition="20"
                         maxVerticalScrollPosition="10"
                         showRoot="true"
                         change="tree_changeHandler(event)"
                         height="225" width="180"/>


                <s:Button id="delTreeBT" label="delTree"/>
            </s:VGroup>




            <s:Group includeIn="chaingroup/>

        </s:HGroup>

    </s:HGroup>

<s:HGroup paddingLeft="200" paddingTop="5"
          x.modelOperation="-38" y.modelOperation="-22" width.modelOperation="737"
          x.modelPrediction="-18" y.modelPrediction="-20">
    <s:DropDownList id="languageCombo" width="150" change="languageChange(event)" includeIn="initial"
                    dataProvider="{new ArrayCollection([{locale:'fi_FI',label:'Suomi'}, {locale:'en_US', label:'English'}])}"
                    prompt="{resourceManager.getString('modelChainUI','lang')}"
                    x.chaingroup="900"
                    x.condition="900"
                    x.modelchain="900"
                    x.task="900"/>
</s:HGroup>
    </s:HGroup><!--overall hgroup ends here!-->

<s:VGroup gap="5" paddingLeft="10"
          x.chaingroup="144" y.chaingroup="-69" height.chaingroup="148">
    <components:ChainGroup id="chainGrpId" includeIn="chaingroup"/>
    </s:VGroup>

Answer 1

Your languageCombo is within HGroup. HGroup is a container with horizontal layout. Horizontal layout doesn't consider any x and y coordinates of children (because of it is horizontal layout).

Maybe it better to use simple Group (taking in mind your HGroup has only one child — so horizontal layout hasn't sense)?