8 Replies Latest reply on Jan 20, 2011 1:39 AM by _spoboyle

    Referencing a radiobutton in a component group

    eneiner

      I am new to exporting and working with Catalyst to Flex project files. I have imported a Catalyst project into Flash Builder and I am having trouble.

       

      This is my issue:

      I have a component that contains a group that I need to reference so I can add code to get the current selected value for the group. How can I reference this group? In Catalyst the group name is "radioGroup". I don't see a reference like this in my Flash Builder project.

       

      for example, this is what the structure of the component looks like:

      <group>

           ...

           <radiobutton id="radiobutton2" />

           <radiobutton />

           ...

      </group>

       

      Since I have an ID for the first element I figured I would be able to get the parent group by referencing "radiobutton2". I am just not sure how to reference radiobutton2 with AS3 in Flash Builder/Flex.

       

      Does anyone know how could reference "radiobutton2" so i can get the group like this: radiobutton2.group   ???

       

      Thanks,

       

      -Eric

        • 1. Re: Referencing a radiobutton in a component group
          Flex harUI Adobe Employee

          radiobutton2 is a variable in that mxml document.

          • 2. Re: Referencing a radiobutton in a component group
            eneiner Level 1

            Is there a way to reference radiobutton2 from actionscript - like in a code block in the main.mxml file?

             

            I really need to get to the radio group so I can get the selected item so I can save it to a file.

             

            Here is a code snippit of what I need to do:

             

             

            ...

            private function addVote():void{

            var fileName:String = "VoterData.txt";

            var dataString:String;

            var newFile:File = File.desktopDirectory.resolvePath(fileName);

            var fileStream:FileStream = new FileStream();

            var now:Date = new Date();

            var df:DateFormatter = new DateFormatter();

             

            df.formatString = "MM-DD-YYYY JJ:NN:SS" +  rb1.groupName.toString();

            fileStream.open(newFile, FileMode.APPEND);

            dataString = radiogroup2.selectedValue.toString();   //<<-----This is what I need to do. How do I access that variable from the main.mxml?

            dataString = dataString + "," + df.format(now.toString());

            ...

            • 3. Re: Referencing a radiobutton in a component group
              _spoboyle Level 4

              here a simple example that should show how

               

              <?xml version="1.0" encoding="utf-8"?>
              <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                             xmlns:s="library://ns.adobe.com/flex/spark"
                             xmlns:mx="library://ns.adobe.com/flex/mx"
                             minWidth="955" minHeight="600">
                 
                  <fx:Script>
                      <![CDATA[
                          private function radioChanged():void
                          {
                              label1.text = radioButton1.value.toString();
                              label2.text = radioButton2.value.toString();
                              label3.text = radioButtonGroup.selectedValue.toString();
                          }
                      ]]>
                  </fx:Script>
                 
                  <fx:Declarations>
                      <s:RadioButtonGroup id="radioButtonGroup" change="radioChanged()"/>
                  </fx:Declarations>

               

                  <s:layout>
                      <s:VerticalLayout/>
                  </s:layout>
                 
                  <s:Label id="label1"/>
                  <s:Label id="label2"/>
                  <s:Label id="label3"/>
                  <s:Group>
                      <s:layout>
                          <s:VerticalLayout/>
                      </s:layout>
                      <s:RadioButton id="radioButton1" group="{radioButtonGroup}" value="one"/>
                      <s:RadioButton id="radioButton2" group="{radioButtonGroup}" value="two"/>
                  </s:Group>
                 
              </s:Application>

              1 person found this helpful
              • 4. Re: Referencing a radiobutton in a component group
                eneiner Level 1

                Thanks. I see that I works in the same file. The issue I have is referencing a variable in another mxml file.

                 

                Here is the file:

                ScrollingContent11.mxml

                 

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

                <s:Group xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fx="http://ns.adobe.com/mxml/2009">

                <s:RadioButton id="radiobutton2" label="Autumn Fest" skinClass="components.PlantSelect_radioButton" x="0" y="0"/>

                <s:RadioButton label="Black Sprite" skinClass="components.PlantSelect_radioButton" x="0" y="43"/>

                </s:Group>

                 

                 

                 

                How would I get access radiobutton2 from the main.mxml file? Do I need a an event dispatcher and listener?

                 

                This is how it is getting used:

                 

                ScrollPanel1.mxml

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

                <s:Skin xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:components="components.*">

                <fx:Metadata>[HostComponent("spark.components.SkinnableContainer")]</fx:Metadata>

                <s:states>

                <s:State name="normal"/>

                <s:State name="disabled"/>

                </s:states>

                <components:ScrollingContent11 clipAndEnableScrolling="true" height="943" height.normal="435" id="contentGroup" width="576" x="0" y="2"/>

                <s:VScrollBar includeIn="normal" skinClass="components.VotingVerticalScrollbar1" fixedThumbSize="true" x="577" y="0" viewport="{contentGroup}"/>

                </s:Skin>

                 

                Can I just reference contentGroup?

                • 5. Re: Referencing a radiobutton in a component group
                  _spoboyle Level 4

                  Main.mxml

                  <?xml version="1.0" encoding="utf-8"?>
                  <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                                 xmlns:s="library://ns.adobe.com/flex/spark"
                                 xmlns:mx="library://ns.adobe.com/flex/mx"
                                 minWidth="955" minHeight="600" xmlns:local="*">
                     
                      <fx:Script>
                          <![CDATA[
                              public function getValues():void
                              {
                                  label1.text = myGroup.radioButton1.value.toString();
                                  label2.text = myGroup.radioButton2.value.toString();
                                  if (myGroup.radioButtonGroup.selectedValue != null)
                                  {
                                      label3.text = myGroup.radioButtonGroup.selectedValue.toString();
                                  }
                                  else
                                  {
                                      label3.text = "nothing selected";
                                  }
                              }
                          ]]>
                      </fx:Script>
                     
                      <s:layout>
                          <s:VerticalLayout/>
                      </s:layout>
                     
                      <s:Label id="label1"/>
                      <s:Label id="label2"/>
                      <s:Label id="label3"/>
                      <local:MyGroup id="myGroup"/>
                      <s:Button label="click me" click="getValues()"/>
                     
                  </s:Application>

                   

                  MyGroup.mxml

                  <?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">
                      <fx:Declarations>
                          <!-- Place non-visual elements (e.g., services, value objects) here -->
                      </fx:Declarations>
                     
                      <fx:Declarations>
                          <s:RadioButtonGroup id="radioButtonGroup"/>
                      </fx:Declarations>
                     
                     
                     
                      <s:layout>
                          <s:VerticalLayout/>
                      </s:layout>
                      <s:RadioButton id="radioButton1" group="{radioButtonGroup}" value="one"/>
                      <s:RadioButton id="radioButton2" group="{radioButtonGroup}" value="two"/>
                  </s:Group>

                  • 6. Re: Referencing a radiobutton in a component group
                    eneiner Level 1

                    What you have works for my test project. I just need some help implementing this into a project a coworker of mine imported from Catalyst.

                     

                    This is what is happening:

                     

                    When I use this <local:MyGroup id="myGroup"/> I am creating a new instance of the group instead of referencing the instance that is already created in my project.

                     

                    The whole project is too big to add here but here are some code snippits:

                     

                     

                     

                    Main.mxml
                    ...
                    "

                    xmlns:d="

                    http://ns.adobe.com/fxg/2008/dt"

                    xmlns:fc="

                    http://ns.adobe.com/flashcatalyst/2009"

                    xmlns:components="

                    components.*"

                    xmlns:ATE="

                    http://ns.adobe.com/ate/2009"

                    xmlns:ai="

                    http://ns.adobe.com/ai/2009"

                    xmlns:flm="

                    http://ns.adobe.com/flame/2008"

                    xmlns:lib="

                    assets.graphics.*"

                    xmlns:fclib="

                    com.adobe.flashcatalyst.components.*"

                    xmlns:mx="

                    "

                    xmlns:local="

                    components.*"

                    ...

                     

                    protected function submit_vote_clickHandler(event:MouseEvent):void

                    {

                     

                    var fileName:String = "VoterData.txt";

                     

                    var dataString:String;

                     

                    var newFile:File = File.desktopDirectory.resolvePath(fileName);

                     

                    var fileStream:FileStream = new FileStream();

                     

                    var now:Date = new Date();

                     

                    var df:DateFormatter = new DateFormatter();

                    df.formatString =

                    "MM-DD-YYYY JJ:NN:SS";

                    fileStream.open(newFile, FileMode.APPEND);

                    dataString = scrollPanel1.voterContentGroup.voterButtonGroup.toString();  //this is referencing the new instance instead of the one created.

                    dataString = dataString +

                    "," + df.format(now.toString());

                    dataString = dataString +

                    "\r\n";

                    fileStream.writeMultiByte(dataString,

                    "ISO-8859-1");

                    fileStream.close();

                    currentState =

                    'Page1';

                    }

                    ...

                    <local:ScrollPanel1

                    id="scrollPanel1"/>
                    ...

                     

                    <fx:DesignLayer d:userLabel="voting list">

                     

                    <s:SkinnableContainer id="skinnablecontainer1" includeIn="Vote" skinClass="components.ScrollPanel1" x="660" y="329">

                     

                    </s:SkinnableContainer>

                     

                    <fx:DesignLayer d:userLabel="shadow frames for data list">

                     

                    <s:Rect blendMode="multiply" height="18" id="rect1" includeIn="Vote" width="691" x="565" y="313">

                     

                    <s:filters>

                     

                    <s:DropShadowFilter alpha="1" angle="90" blurX="22" blurY="22" color="0x000000" distance="16" hideObject="false" inner="false" knockout="false" quality="2" strength="1"/>

                     

                    </s:filters>

                     

                    <s:fill>

                     

                    <s:SolidColor color="#FFFFFF"/>

                     

                    </s:fill>

                     

                    </s:Rect>

                     

                    <s:Rect blendMode="multiply" height="18" id="rect2" includeIn="Vote" width="691" x="565" y="766">

                     

                    <s:filters>

                     

                    <s:DropShadowFilter alpha="1" angle="270" blurX="22" blurY="22" color="0x000000" distance="16" hideObject="false" inner="false" knockout="false" quality="2" strength="1"/>

                     

                    </s:filters>

                     

                    <s:fill>

                     

                    <s:SolidColor color="#FFFFFF"/>

                     

                    </s:fill>

                     

                    </s:Rect>

                     

                    </fx:DesignLayer>

                     

                    </fx:DesignLayer>
                    ...
                    ScrollingContent11.mxml

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

                    <s:Group

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

                    xmlns:fx="

                    <fx:Declarations>

                     

                    <s:RadioButtonGroup id="voterButtonGroup"/>

                     

                    </fx:Declarations>

                     

                     

                    <s:RadioButton id="rb1" group="{voterButtonGroup}" label="Autumn Fest" skinClass="components.PlantSelect_radioButton" x="0" y="0"/>

                     

                    <s:RadioButton id="rb2" group="{voterButtonGroup}" label="Black Sprite" skinClass="components.PlantSelect_radioButton" x="0" y="43"/>

                     

                    <s:RadioButton id="rb3" group="{voterButtonGroup}" label="Bloom-A-Thon" skinClass="components.PlantSelect_radioButton" x="1" y="86"/>

                     

                    <s:RadioButton id="rb4" group="{voterButtonGroup}" label="Bombshell" skinClass="components.PlantSelect_radioButton" x="0" y="129"/>

                     

                    <s:RadioButton id="rb5" group="{voterButtonGroup}" label="Bountiful Blue" skinClass="components.PlantSelect_radioButton" x="0" y="173"/>

                     

                    <s:RadioButton id="rb6" group="{voterButtonGroup}" label="Caribbean Coral" skinClass="components.PlantSelect_radioButton" x="0" y="216"/>

                     

                    <s:RadioButton id="rb7" group="{voterButtonGroup}" label="Chili" skinClass="components.PlantSelect_radioButton" x="0" y="260"/>

                     

                    <s:RadioButton id="rb8" group="{voterButtonGroup}" label="Choco-Pink/Red" skinClass="components.PlantSelect_radioButton" x="0" y="303"/>

                     

                    <s:RadioButton id="rb9" group="{voterButtonGroup}" label="Delta Jazz" skinClass="components.PlantSelect_radioButton" x="0" y="347"/>

                     

                    <s:RadioButton id="rb10" group="{voterButtonGroup}" label="Double Rose" skinClass="components.PlantSelect_radioButton" x="0" y="390"/>

                     

                    <s:RadioButton id="rb11" group="{voterButtonGroup}" label="Emerald Pointe" skinClass="components.PlantSelect_radioButton" x="0" y="434"/>

                     

                    <s:RadioButton id="rb12" group="{voterButtonGroup}" label="Fantastic" skinClass="components.PlantSelect_radioButton" x="0" y="477"/>

                     

                    <s:RadioButton id="rb13" group="{voterButtonGroup}" label="Flutterby" skinClass="components.PlantSelect_radioButton" x="0" y="521"/>

                     

                    <s:RadioButton id="rb14" group="{voterButtonGroup}" label="Gold Collection Winter's Bliss" skinClass="components.PlantSelect_radioButton" x="0" y="564"/>

                     

                    <s:RadioButton id="rb15" group="{voterButtonGroup}" label="Golden Girl" skinClass="components.PlantSelect_radioButton" x="0" y="610"/>

                     

                    <s:RadioButton id="rb16" group="{voterButtonGroup}" label="Icy Drift" skinClass="components.PlantSelect_radioButton" x="0" y="652"/>

                     

                    <s:RadioButton id="rb17" group="{voterButtonGroup}" label="Little Annie" skinClass="components.PlantSelect_radioButton" x="0" y="695"/>

                     

                    <s:RadioButton id="rb18" group="{voterButtonGroup}" label="Little Lime" skinClass="components.PlantSelect_radioButton" x="0" y="738"/>

                     

                    <s:RadioButton id="rb19" group="{voterButtonGroup}" label="Little Pink" skinClass="components.PlantSelect_radioButton" x="0" y="782"/>

                     

                    <s:RadioButton id="rb20" group="{voterButtonGroup}" label="Marmalade" skinClass="components.PlantSelect_radioButton" x="0" y="825"/>

                     

                    <s:RadioButton id="rb21" group="{voterButtonGroup}" label="Milwaukee's Calatrava" skinClass="components.PlantSelect_radioButton" x="0" y="868"/>

                     

                    <s:RadioButton id="rb22" group="{voterButtonGroup}" label="Misaka Itoh" skinClass="components.PlantSelect_radioButton" x="0" y="912"/>

                     

                    <s:RadioButton id="rb23" group="{voterButtonGroup}" label="Moxie" skinClass="components.PlantSelect_radioButton" x="356" y="0"/>

                     

                    <s:RadioButton id="rb24" group="{voterButtonGroup}" label="Mystical Flame" skinClass="components.PlantSelect_radioButton" x="356" y="43"/>

                     

                    <s:RadioButton id="rb25" group="{voterButtonGroup}" label="Native Blue" skinClass="components.PlantSelect_radioButton" x="356" y="86"/>

                     

                    <s:RadioButton id="rb26" group="{voterButtonGroup}" label="Obsession" skinClass="components.PlantSelect_radioButton" x="357" y="131"/>

                     

                    <s:RadioButton id="rb27" group="{voterButtonGroup}" label="Olivia" skinClass="components.PlantSelect_radioButton" x="357" y="174"/>

                     

                    <s:RadioButton id="rb28" group="{voterButtonGroup}" label="Orange Rocket" skinClass="components.PlantSelect_radioButton" x="356" y="217"/>

                     

                    <s:RadioButton id="rb29" group="{voterButtonGroup}" label="Pineapple Mango" skinClass="components.PlantSelect_radioButton" x="356" y="261"/>

                     

                    <s:RadioButton id="rb30" group="{voterButtonGroup}" label="Pinwheel Gardenia" skinClass="components.PlantSelect_radioButton" x="356" y="304"/>

                     

                    <s:RadioButton id="rb31" group="{voterButtonGroup}" label="Rainbow Sensation" skinClass="components.PlantSelect_radioButton" x="356" y="348"/>

                     

                    <s:RadioButton id="rb32" group="{voterButtonGroup}" label="Raspberry Truffle" skinClass="components.PlantSelect_radioButton" x="356" y="391"/>

                     

                    <s:RadioButton id="rb33" group="{voterButtonGroup}" label="Red Rooster" skinClass="components.PlantSelect_radioButton" x="356" y="434"/>

                     

                    <s:RadioButton id="rb34" group="{voterButtonGroup}" label="Ruby Falls" skinClass="components.PlantSelect_radioButton" x="356" y="478"/>

                     

                    <s:RadioButton id="rb35" group="{voterButtonGroup}" label="Scarlet Beauty" skinClass="components.PlantSelect_radioButton" x="356" y="522"/>

                     

                    <s:RadioButton id="rb36" group="{voterButtonGroup}" label="Scarlet Storm" skinClass="components.PlantSelect_radioButton" x="356" y="565"/>

                     

                    <s:RadioButton id="rb37" group="{voterButtonGroup}" label="Solar Cascade" skinClass="components.PlantSelect_radioButton" x="356" y="652"/>

                     

                    <s:RadioButton id="rb38" group="{voterButtonGroup}" label="Solar Flair" skinClass="components.PlantSelect_radioButton" x="356" y="696"/>

                     

                    <s:RadioButton id="rb39" group="{voterButtonGroup}" label="Stainless Steele" skinClass="components.PlantSelect_radioButton" x="356" y="738"/>

                     

                    <s:RadioButton id="rb40" group="{voterButtonGroup}" label="Takara Itoh" skinClass="components.PlantSelect_radioButton" x="356" y="782"/>

                     

                    <s:RadioButton id="rb41" group="{voterButtonGroup}" label="Summer Skies" skinClass="components.PlantSelect_radioButton" x="356" y="827"/>

                     

                    <s:RadioButton id="rb42" group="{voterButtonGroup}" label="Sugar Plum" skinClass="components.PlantSelect_radioButton" x="356" y="870"/>

                     

                    <s:RadioButton id="rb43" group="{voterButtonGroup}" label="White Water" skinClass="components.PlantSelect_radioButton" x="356" y="913"/>

                     

                    <s:RadioButton id="rb44" group="{voterButtonGroup}" label="Silver Gem" skinClass="components.PlantSelect_radioButton" x="356" y="608"/>

                    </s:Group>

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

                    <s:Skin

                    xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:components="components.*">

                     

                    <fx:Metadata>[HostComponent("spark.components.SkinnableContainer")]</fx:Metadata>

                     

                    <s:states>

                     

                    <s:State name="normal"/>

                     

                    <s:State name="disabled"/>

                     

                    </s:states>

                     

                    <components:ScrollingContent11 clipAndEnableScrolling="true" height="943" height.normal="435" id="voterContentGroup" width="576" x="0" y="2"/>

                     

                    <s:VScrollBar includeIn="normal" skinClass="components.VotingVerticalScrollbar1" fixedThumbSize="true" x="577" y="0" viewport="{voterContentGroup}"/>

                    </s:Skin>

                    • 7. Re: Referencing a radiobutton in a component group
                      eneiner Level 1

                      A lot of the code that was generated from Catalyst was not named properly which I think might be a big part of the problem. After I editted the ScrollingContent11.mxml file by addeing the group to the each GroupItem I was able to access the data as expected, but only on the new instance:

                       

                      <components:ScrollPanel1 id="scrollPanel1"/>

                       

                      I need to get the selectedValue from the instance that Catalyst created. The code above are the only references to ScrollPanel1 that I could see.

                       

                      Is there an easy way I could get the name of the original ScrollPanel1 instance from the debugger instead of creating the new instance of the ScrollPanel1.mxml?

                      • 8. Re: Referencing a radiobutton in a component group
                        _spoboyle Level 4

                        Sorry I am not familiar with catalyst and so would need to see the whole project to see what it's doing.