10 Replies Latest reply on Aug 9, 2010 4:57 AM by Abhin S

    How to show all the controls used in a text area in an mxml file

    Abhin S Level 1

      kindly help me to show all the controls used in a file like buttons, text box, combobox,

      in a text area to denote tht these controls were used in the flex file

        • 1. Re: How to show all the controls used in a text area in an mxml file
          BhaskerChari Level 4

          Hi Abhin S,

           

          Your question is not clear ...please elaborate on this..??

           

          Thanks,

          Bhasker Chari.S

          1 person found this helpful
          • 2. Re: How to show all the controls used in a text area in an mxml file
            Abhin S Level 1

            Hi Bhasker Chari.S,

            i have created a mxml file in which i have used certain controls like buttons, link buttons, combobox,textarea etc.

            nw i want to show all the controls used in my file in a textarea. so that one is able to see what features i used in document..

            thnx fr ur concern..

            • 3. Re: How to show all the controls used in a text area in an mxml file
              BhaskerChari Level 4

              Hi Abhin S,

               

              If I understood correctly you want to display the whole mxml file in TextArea...?...If so then this is not possible

               

              I suggest you that you can display the contents of this file in a Container such as Canvas, HBox or VBox instead of TextArea..

               

              or else Do you want to display just the Control names used in the mxml file in a TextArea..?? However it is possible..??

               

              Can you post the code what exactly you're trying to achieve..??

               

               

              Thanks,

              Bhasker Chari

               

              Message was edited by: BhaskerChari

              1 person found this helpful
              • 4. Re: How to show all the controls used in a text area in an mxml file
                Abhin S Level 1

                yes i want the names of the controls used i.e button,combobox,textarea,link.

                 

                this is the code:

                 

                <?xml version="1.0" encoding="utf-8"?>

                <s:Application minWidth="955" minHeight="600"

                xmlns:fx="http://ns.adobe.com/mxml/2009"

                    xmlns:s="library://ns.adobe.com/flex/spark"

                    xmlns:mx="library://ns.adobe.com/flex/mx" 

                    initialize="createListener()">

                 

                <fx:Declarations>

                </fx:Declarations>

                 

                <fx:Script>

                    <![CDATA[

                        import spark.events.IndexChangeEvent;

                        // Define a custom function for the labelFunction property

                        // to display an Object in the DDL control.

                        public function myLabelFunc(item:Object):String {

                             return item.firstName + " " + item.lastName;

                        }

                        // Define a custom function for the labelToItemFunction property

                        // to convert the new value to an Object of the correct format

                        // for storage in the data provider of the control.

                        public function myLabelToItemFunc(value:String):Object {

                             var tempObj:Object = new Object();

                             var spaceChar:int = value.indexOf(' ');

                             tempObj.firstName = value.substr(0, spaceChar);

                             tempObj.lastName = value.substr(spaceChar+1, value.length);

                             return tempObj;

                            }

                             // Event handler to determine if the selected item is new.

                            protected function myCB_changeHandler(event:IndexChangeEvent):void

                            {

                                 // Determine if the index specifies a new data item.

                                 if(myCB.selectedIndex == spark.components.ComboBox.CUSTOM_SELECTED_ITEM)

                                     // Add the new item to the data provider.

                                     myCB.dataProvider.addItem(myCB.selectedItem);

                            }

                 

                 

                        import spark.components.ComboBox;

                       private function setLabel():void {

                            if (l2.label=="Show ComboBox") {

                                l2.label = "Show TextBox";

                 

                                               } else {               

                                l2.label = "Show ComboBox";

                 

                            }

                          }

                          private function createListener():void {

                                l2.addEventListener(MouseEvent.CLICK,showCustomBox);               

                            }

                          import mx.controls.Alert;

                          private function showCustomBox(e:MouseEvent):void{

                          t2.text += " listener." + "\n";

                          Alert.show("An event occurred.");

                           }

                 

                 

                        }

                 

                    ]]>

                </fx:Script>

                 

                 

                    <s:states >

                    <s:State name="Immediate"/>

                    <s:State name="Deferred"/>

                    </s:states>

                 

                <s:BorderContainer borderColor="#0b85b7"

                    cornerRadius="8"

                    borderWeight="4">

                <s:VGroup top="10" horizontalAlign="center" >

                <s:ComboBox id="myCB"

                            includeIn="Immediate"

                            itemCreationPolicy="immediate"

                 

                            labelFunction="myLabelFunc"

                labelToItemFunction="myLabelToItemFunc"

                change="myCB_changeHandler(event);">

                           <s:dataProvider>

                           <mx:ArrayCollection>

                            <fx:Object firstName="Abhinav" lastName="Somal"/>

                            <fx:Object firstName="Adit" lastName="Kumar"/>

                            </mx:ArrayCollection>

                          </s:dataProvider> 

                        </s:ComboBox>

                 

                 

                        <s:TextInput id="t1"

                 

                            includeIn="Deferred"           

                            itemCreationPolicy="deferred"/>

                 

                 

                 

                        <mx:LinkButton id="l2" label="Show TextBox"

                          click="currentState='Deferred';setLabel();"/>

                 

                        <s:TextArea id="t2"

                       

                        text="The selected item is: {myCB.selectedItem.firstName + ' '

                        + myCB.selectedItem.lastName};

                        {l2.label};

                        {b1.label};

                       

                        "/> 

                 

                <mx:Button id="b1" label="SEND"  >

                </mx:Button>

                 

                 

                      

                  

                </s:VGroup>

                </s:BorderContainer>   

                </s:Application>

                • 5. Re: How to show all the controls used in a text area in an mxml file
                  BhaskerChari Level 4

                  Hi Abhin,

                   

                  This involves a complex looping ....as your nesting of controls with in containers increases.....If your nesting of controls is simple say you are having all your controls with in a single container or few then  the below code may be helpful....

                   

                   

                  <?xml version="1.0" encoding="utf-8"?>
                  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                    creationComplete="init();">
                    <mx:Script>
                      <![CDATA[
                        import mx.controls.Alert; 
                        import mx.core.Container;
                           
                        private function init():void{
                          checkChildren(this);
                        }
                       
                        private function checkChildren(objToCheck:Object):void{
                                  for each(var obj:Object in objToCheck.getChildren()){
                            if(obj is Container){
                              mx.controls.Alert.show("Container:" + obj.toString());
                              checkChildren(obj);
                            }else{
                              mx.controls.Alert.show("Not container:" + obj.toString());
                            }
                                  }
                        }
                      ]]>
                    </mx:Script>
                    <mx:VBox>
                      <mx:Button id="btn1"/>
                      <mx:CheckBox id="chbx"/>
                      <mx:ComboBox>
                        <mx:String>one</mx:String>
                        <mx:String>two</mx:String>
                        <mx:String>three</mx:String>
                      </mx:ComboBox>
                    </mx:VBox>
                    <mx:Canvas>
                         <mx:Button id="btn2"/>
                    </mx:Canvas>
                  </mx:Application>

                   

                   

                  Thanks,

                  Bhasker Chari

                  • 6. Re: How to show all the controls used in a text area in an mxml file
                    Abhin S Level 1

                    thnx fr ur previous suggestion bt still m nt able to implement it.

                    this is the new code kindly check wht is the problem::-

                     

                    <?xml version="1.0" encoding="utf-8"?>

                    <s:Application minWidth="955" minHeight="600"

                    xmlns:fx="http://ns.adobe.com/mxml/2009"

                        xmlns:s="library://ns.adobe.com/flex/spark"

                        xmlns:mx="library://ns.adobe.com/flex/mx" 

                        creationComplete="init();">

                     

                    <fx:Declarations>

                    </fx:Declarations>

                     

                    <fx:Script>

                        <![CDATA[

                        import mx.controls.Alert; 

                            import mx.core.Container;

                            import spark.events.IndexChangeEvent;

                     

                            public function myLabelFunc(item:Object):String {

                                 return item.firstName + " " + item.lastName;

                            }

                     

                            public function myLabelToItemFunc(value:String):Object {

                                 var tempObj:Object = new Object();

                                 var spaceChar:int = value.indexOf(' ');

                                 tempObj.firstName = value.substr(0, spaceChar);

                                 tempObj.lastName = value.substr(spaceChar+1, value.length);

                                 return tempObj;

                                }

                     

                            protected function myCB_changeHandler(event:IndexChangeEvent):void

                                {

                     

                                     if(myCB.selectedIndex == spark.components.ComboBox.CUSTOM_SELECTED_ITEM)

                     

                                         myCB.dataProvider.addItem(myCB.selectedItem);

                                }

                     

                     

                           private function setLabel():void {

                                if (l2.label=="Show ComboBox") {

                                    l2.label = "Show TextBox";

                     

                                                   } else {               

                                    l2.label = "Show ComboBox";

                     

                                }

                              }

                     

                     

                          private function init():void{

                            checkChildren(this);

                          }

                     

                          private function checkChildren(objToCheck:Object):void{

                                    for each(var obj:Object in objToCheck.getChildren()){

                              if(obj is Container){

                                mx.controls.Alert.show("Container:" + obj.toString());

                                checkChildren(obj);

                              }else{

                                mx.controls.Alert.show("Not container:" + obj.toString());

                              }

                            }

                          }

                     

                        ]]>

                    </fx:Script>

                     

                     

                        <s:states >

                        <s:State name="Immediate"/>

                        <s:State name="Deferred"/>

                        </s:states>

                     

                    <s:BorderContainer borderColor="#0b85b7"

                        cornerRadius="8"

                        borderWeight="4">

                    <mx:VBox top="10" horizontalAlign="center" >

                    <s:ComboBox id="myCB"

                                includeIn="Immediate"

                                itemCreationPolicy="immediate"

                     

                                labelFunction="myLabelFunc"

                    labelToItemFunction="myLabelToItemFunc"

                    change="myCB_changeHandler(event);">

                               <s:dataProvider>

                               <mx:ArrayCollection>

                                <fx:Object firstName="Abhinav" lastName="Somal"/>

                                <fx:Object firstName="Adit" lastName="Kumar"/>

                                </mx:ArrayCollection>

                              </s:dataProvider> 

                            </s:ComboBox>

                     

                     

                            <s:TextInput id="t1"

                     

                                includeIn="Deferred"           

                                itemCreationPolicy="deferred"/>

                     

                     

                     

                            <mx:LinkButton id="l2" label="Show TextBox"

                              click="currentState='Deferred';setLabel();"/>

                     

                            <s:TextArea id="t2"

                           

                            text="The selected item is: {myCB.selectedItem.firstName + ' '

                            + myCB.selectedItem.lastName};

                            {l2.label};

                            {b1.label};

                           

                            "/> 

                     

                    <mx:Button id="b1" label="SEND"  >

                    </mx:Button>

                     

                     

                          

                      

                    </mx:VBox>

                    </s:BorderContainer>   

                    </s:Application>

                    • 7. Re: How to show all the controls used in a text area in an mxml file
                      Abhin S Level 1

                      Hi Bhasker Chari,

                      the code you have given is having mx:Application declareation

                      why can not we use s:Application declaration here

                      • 8. Re: How to show all the controls used in a text area in an mxml file
                        BhaskerChari Level 4

                        Hi Abhin,

                         

                        mx:Application  declaration is for Flex3...

                         

                        s:Application declaration is for Flex4 which is used in FlashBuilder4 IDE

                         

                        But the logic in Actionscript remains same..

                         

                        Thanks,

                        Bhasker Chari

                        • 9. Re: How to show all the controls used in a text area in an mxml file
                          Abhin S Level 1

                          i am using flex4 and there i am not able to implement it.

                          here is the code:

                          • 10. Re: How to show all the controls used in a text area in an mxml file
                            Abhin S Level 1

                            thnks.

                            problem is solved..

                            correct code:

                             

                            <?xml version="1.0" encoding="utf-8"?>

                            <mx:Application

                            xmlns:fx="http://ns.adobe.com/mxml/2009"

                                    xmlns:mx="library://ns.adobe.com/flex/mx"

                                    xmlns:s="library://ns.adobe.com/flex/spark"

                                creationComplete="init();">

                              <mx:states >

                                <mx:State name="si"/>

                                <mx:State name="re"/>

                              </mx:states>

                              

                              <fx:Script>

                                <![CDATA[

                                  import mx.controls.Alert; 

                                  import mx.core.Container;

                             

                                  private function init():void{

                                    checkChildren(this);

                                  }

                             

                                  private function checkChildren(objToCheck:Object):void{

                                            for each(var obj:Object in objToCheck.getChildren()){

                                      if(obj is Container){

                                        mx.controls.Alert.show("Container:" + obj.toString());

                                        checkChildren(obj);

                                      }else{

                                        mx.controls.Alert.show("Not container:" + obj.toString());

                                      }

                                            }

                                  }

                                  import spark.events.IndexChangeEvent;

                             

                                    public function myLabelFunc(item:Object):String {

                                         return item.firstName + " " + item.lastName;

                                    }

                             

                                    public function myLabelToItemFunc(value:String):Object {

                                         var tempObj:Object = new Object();

                                         var spaceChar:int = value.indexOf(' ');

                                         tempObj.firstName = value.substr(0, spaceChar);

                                         tempObj.lastName = value.substr(spaceChar+1, value.length);

                                         return tempObj;

                                        }

                             

                                    protected function myCB_changeHandler(event:IndexChangeEvent):void

                                        {

                             

                                             if(myCB.selectedIndex == spark.components.ComboBox.CUSTOM_SELECTED_ITEM)

                             

                                                 myCB.dataProvider.addItem(myCB.selectedItem);

                                        }

                             

                                    ]]>

                              </fx:Script>

                             

                             

                            <mx:VBox top="10" horizontalAlign="center" >

                            <s:ComboBox id="myCB"

                                        includeIn="si"

                             

                                        labelFunction="myLabelFunc"

                            labelToItemFunction="myLabelToItemFunc"

                            change="myCB_changeHandler(event);">

                                       <s:dataProvider>

                                       <mx:ArrayCollection>

                                        <fx:Object firstName="Abhinav" lastName="Somal"/>

                                        <fx:Object firstName="Adit" lastName="Kumar"/>

                                        </mx:ArrayCollection>

                                      </s:dataProvider> 

                                    </s:ComboBox>

                             

                             

                                    <s:TextInput id="t1"

                             

                                        includeIn="re"           

                                        />

                             

                                      <mx:LinkButton label="show text box"

                                            click="currentState = 're'" includeIn="si"/>

                                      <mx:LinkButton label="show combobox"

                                            click="currentState = 'si'"

                                            includeIn="re"/>   

                             

                             

                             

                                    <s:TextArea id="t2"

                                    text="The selected item is: {myCB.selectedItem.firstName + ' '

                                    + myCB.selectedItem.lastName};"/> 

                             

                            <mx:Button id="b1" label="SEND"  >

                            </mx:Button>

                              

                            </mx:VBox>

                             

                             

                              

                             

                            </mx:Application>