1 2 Previous Next 42 Replies Latest reply on Jul 20, 2011 1:55 AM by G1Z

    Radio Button label issue

    G1Z Level 1

      Hi ,

       

      I am using a radio button group in my Vbox Container and generating the radio buttons for this group at run time based on some condition.

       

      I am able to get the list of all radio buttons at runtime but the issue here is though I set the label property for each of the radio button in this radio button group , but I am unable to see the label on my UI except the small circle for radio button. I tried tried in different ways of setting the labelPlacement property and changing the container for these radio button components etc etc  but in vein.

       

      If anybody came across similar situation or know something about this issue, please do let me know .

       

       

      Cheers,

      G1

        • 1. Re: Radio Button label issue
          Flex harUI Adobe Employee

          Use the debugger to verify the label got set and the radiobutton is sized

          correctly.

          • 2. Re: Radio Button label issue
            G1Z Level 1

            Hi FlexharUI,

             

            How do I know that this got resized properly or not using the debugger??? I mean which property I have to set for this component?

             

            Thanks for the reply.

             

             

            Cheers,

            G1

            • 3. Re: Radio Button label issue
              saisri2k2 Level 4

              Can you post the code of the radio group and the radio buttons?

              • 4. Re: Radio Button label issue
                G1Z Level 1

                Hi Sai,

                 

                here is the code for the task

                 

                Public var wrapperRadioGroup:RadioButtonGroup = new RadioButtonGroup();

                 

                for each(var item:ItemType in ArrayList)                            // this is the condition on which I generate the radio buttons at runtime.

                {

                        var newRadioButton:RadioButton = new RadioButton();
                        newRadioButton.group = this.wrapperRadioGroup;
                        newRadioButton.label = item.WrapperName + " (" + item.MemberAccountId.toString() + ")";
                        newRadioButton.id = item.WrapperShortCode;
                        newRadioButton.value = item;
                        newRadioButton.setStyle("paddingLeft",25);
                        myVBox.addChild(newRadioButton);

                 

                }

                 

                the issue here is it displays just the Radio button circle but not the Label , I have debugged the code and label gets added to the radio button but not displaying

                on the UI . No clue on why this is not happening.

                 

                 

                Cheers,

                G1

                • 5. Re: Radio Button label issue
                  EvyatarBH Level 3

                  1. Could it be that you should add to your VBox only wrapperRadioGroup instead of each button individually?

                   

                  2. As a shot in the dark I suggest adding after the loop (if first suggestion wasn't relevant) -

                  myVBox.validateNow()
                  • 6. Re: Radio Button label issue
                    G1Z Level 1

                    Hi,

                     

                    I tried with both of the options just now and still I can see the same issue. Atually the problem is not with the RadioButtonGroup or Radio Button label because even If I add textArea/label component to this VBox and try to add some hard coded text into that component, same issue is seen. Any Idea?

                     

                    Cheers,

                    G1

                    • 7. Re: Radio Button label issue
                      EvyatarBH Level 3

                      How about using Spark VGroup or BorderContainer?

                      (and probably use addElement instead of addChild...)

                      • 8. Re: Radio Button label issue
                        G1Z Level 1

                        well i am using Flex 3.5 SDK and for reasons I cant migrate it to Spark model, lemme give a try anyways with my sample porting Flex 4.5 project which is a copy version of the Flex 3.5 SDK

                        • 9. Re: Radio Button label issue
                          G1Z Level 1

                          Well I tried using the Spark 4.5 skinnable container/Vgroup/BorderContainer, stil the same issue.

                           

                          dont know whats causing this issue????

                          • 10. Re: Radio Button label issue
                            EvyatarBH Level 3

                            I created a tiny test application and it worked as expected.

                            I'll post my code and maybe you would find what is missing in your application -

                            <?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" width="955" height="600"
                                              creationComplete="application2_creationCompleteHandler(event)">
                                 <fx:Script>
                                      <![CDATA[
                                           import mx.events.FlexEvent;
                                           
                                           import spark.components.RadioButton;
                            
                                           protected function application2_creationCompleteHandler(event:FlexEvent):void
                                           {
                                                for each(var item:String in data.source){
                                                     var radioButton:RadioButton = new RadioButton();
                                                     radioButton.label = item;
                                                     target.addElement(radioButton);
                                                     
                                                }
                                           }
                            
                                      ]]>
                                 </fx:Script>
                                 
                                 <fx:Declarations>
                                      <s:ArrayList id="data">
                                           <fx:String>aaa</fx:String>
                                           <fx:String>bbb</fx:String>
                                           <fx:String>ccc</fx:String>
                                      </s:ArrayList>
                                 </fx:Declarations>
                                 <s:BorderContainer id="target" width="100%" height="100%">
                                      <s:layout>
                                           <s:VerticalLayout/>
                                      </s:layout>
                                 </s:BorderContainer>
                            </s:Application>
                            
                             
                            

                            Note that the for-each loop goes through the ArrayList's source property, because when debugging I saw that's where the data is.

                            In addition, note that both the application and the BorderContainer got dimensions (Width & Height)...

                            • 11. Re: Radio Button label issue
                              G1Z Level 1

                              Thanks a ton Evy, lemme try this and will post you back....cheers

                               

                              U Rock,

                              G1

                              • 12. Re: Radio Button label issue
                                G1Z Level 1

                                Well nyway of doing it in Flex 3.5 SDK????

                                • 13. Re: Radio Button label issue
                                  EvyatarBH Level 3

                                  It works also using Flex 3.5 with the following changes:

                                  1. "mx" replacing all "s" and "fx" prefixes.

                                  2. VBox instead of BorderContainer

                                  3. addChild instead of addElement

                                  4. I saw that there wasn't an mx ArrayList, so I used an ArrayCollection instead.

                                   

                                  However, the bottom line is that it worked the same...

                                   

                                  (Let me know if you want to see the exact code or the above list was good enough)

                                  • 14. Re: Radio Button label issue
                                    G1Z Level 1

                                    Thanks for the details info, may be let me post my code this time and it will give u an idea to figure out whats going on in...here is the code

                                     

                                     

                                     

                                    <?xml version="1.0" encoding="utf-8"?>
                                    <nm:DKModule xmlns:nm="Tools.core.*" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="898" height="402" xmlns:ns1="Tools.components.*"
                                        creationComplete="Init(event)">
                                        <mx:Style source="ToolsStyles.css"/>
                                        <mx:Canvas x="10" width="735" height="30" styleName="PageHeader" id="canvas2" y="5">
                                                <mx:Label x="10" text="Select the required wrapper" id="label1" fontWeight="normal" styleName="PageHeaderText" verticalCenter="0"/>
                                        </mx:Canvas>
                                        <mx:Button label="Next" click="onBtnNextClick()" styleName="styBtnGeneral" width="125" x="620" y="333" height="25" id="button1"/>
                                        <mx:Button label="Back" click="onBtnBackClick()" styleName="styBtnGeneral" width="125" x="460" y="348" height="25" id="button2" visible="false"/>
                                        <!--mx:Label x="375" y="43" text="ISA Accounts" color="#FFFFFF" fontWeight="bold"-->
                                        <!--mx:Label x="375" y="159" text="ISA Accounts" color="#FFFFFF" fontWeight="bold"-->
                                        <mx:VBox id="listWrappers" x="10" y="43" width="735" height="282" borderStyle="solid" cornerRadius="4" backgroundColor="#FFFFFF" paddingLeft="10" paddingTop="5">
                                            <mx:RadioButtonGroup id="WrapperRadioGroup"/>
                                        </mx:VBox>
                                       
                                        <mx:Script>
                                            <![CDATA[
                                                import mx.controls.ButtonLabelPlacement;
                                                import mx.containers.HBox;
                                                import mx.events.FlexEvent;
                                                import Tools.dal.dataObjects.dataProductCode;
                                                import Tools.Process.TNextStep;
                                                import Tools.Process.StepEvent;
                                                import mx.controls.Alert;
                                                import Tools.Process.TProcessStack;
                                                import Tools.Process.IProcessStackObject;
                                                import mx.controls.RadioButtonGroup;
                                                import mx.controls.RadioButton;
                                                import mx.controls.CheckBox;
                                                import mx.collections.ArrayCollection;
                                                import Tools.components.comListHeader;
                                                import Tools.DTO.DTOInvestorWrapper;
                                                import mx.core.Application;
                                                import Tools.dal.dataObjects.dataInvestorWrappers;
                                                public static const SELECTSINGLE:int = 0;
                                                public static const SELECTMULTIPLE:int =1;
                                                private var _Mode:int = SELECTSINGLE; // default
                                                private var _Wrappers : dataInvestorWrappers;
                                                private var _CheckBoxGroup:ArrayCollection = new ArrayCollection();
                                               
                                               
                                                protected function Init(pEvent:FlexEvent):void
                                                {
                                                    _Wrappers = Application.application._dataCollection.DataObjectGet("Investor Wrappers");
                                                    var WrapperSelectOption:int = Process.Stack.ItemGet("WrapperSectionOption") as int;
                                                    _Mode = WrapperSelectOption;  // TODO: At a later stage this must be driven my the workflow
                                                    PopulateWrapperList();
                                                }
                                               
                                                private function get CheckBoxSelectCount():int
                                                {
                                                    var cnt:int = 0;
                                                    for each (var item:CheckBox in _CheckBoxGroup)
                                                                {
                                                                    if (item.selected) cnt++;
                                                                }
                                                    return cnt;
                                                }
                                               
                                                private function ValidatePage():Boolean
                                                {
                                                    switch (_Mode)
                                                    {
                                                        case SELECTMULTIPLE :
                                                            if (CheckBoxSelectCount == 0)
                                                            {
                                                                Alert.show("You must select al least one wrapper to continue");
                                                                return false;
                                                            }
                                                        break;
                                                        case SELECTSINGLE :
                                                            if (WrapperRadioGroup.selectedValue == null)
                                                            {
                                                                Alert.show("You must select a wrapper to continue");
                                                                return false;
                                                               
                                                            }
                                                        break;
                                                    }
                                                    return true;
                                                }
                                                private function onBtnBackClick():void
                                                {
                                                    var ev:StepEvent = new StepEvent(StepEvent.STEPPREV);
                                                    dispatchEvent(ev);
                                                }
                                                private function onBtnNextClick():void
                                                {
                                                    if (ValidatePage())
                                                    {
                                                        // Get the selected wrappers
                                                        var o:Object = WrapperRadioGroup.selectedValue;
                                                        // Push this value onto the Process Stack
                                                        Process.Stack.ItemDelete("InvestorWrapper");
                                                        Process.Stack.StackItemAdd("InvestorWrapper",o as DTOInvestorWrapper);
                                                        var ev:StepEvent = new StepEvent(StepEvent.STEPNEXT);
                                                        dispatchEvent(ev);
                                                    }
                                                }
                                               
                                                       
                                                private function CreateWrapperCollection(heading:String,wrappers:ArrayCollection):void
                                                {
                                                        // Add in a header
                                                        var Header:comListHeader = new comListHeader();
                                                        Header.setStyle("paddingLeft",15);
                                                        listWrappers.addChild(Header);
                                                        Header.HeaderText=heading;
                                                    // Add in check boxes for each Account
                                                        for each(var item:DTOInvestorWrapper in wrappers)
                                                        {
                                                                if (_Mode == SELECTMULTIPLE)
                                                                {
                                                                    var newCheckBox:CheckBox = new CheckBox();
                                                                    newCheckBox.label = item.WrapperName + " (" + item.MemberAccountId.toString() + ")";
                                                                    newCheckBox.data = item;
                                                                    newCheckBox.id = item.WrapperShortCode;
                                                                    newCheckBox.setStyle("paddingLeft",25);
                                                                    listWrappers.addChild(newCheckBox);
                                                                    _CheckBoxGroup.addItem(newCheckBox);
                                                                }
                                                                else
                                                                {
                                                                    var newRadioButton:RadioButton = new RadioButton();
                                                                    newRadioButton.groupName="WrapperRadioGroup";
                                                                    newRadioButton.label = item.WrapperName + " (" + item.MemberAccountId.toString() + ")";
                                                                    newRadioButton.id = item.WrapperShortCode;
                                                                    newRadioButton.value = item;
                                                                    newRadioButton.setStyle("paddingLeft",25);
                                                                    listWrappers.addChild(newRadioButton);
                                                                }
                                                        }
                                                       
                                                }
                                               
                                                private function PopulateWrapperList():void
                                                {
                                                    listWrappers.removeAllChildren();
                                                    var productMappings:dataProductCode = Application.application._ApplicationProcess.Stack.ItemGet(dataProductCode.PRODUCTMAPPING) as dataProductCode;
                                                    // loop through data collection and insert the wrappers
                                                    var SIPPWrapperTypes: Array = productMappings.getAllProductIDByType("SIPP");
                                                    var GIAWrapperTypes: Array = productMappings.getAllProductIDByType("GIA");
                                                    var OFSWrapperTypes: Array = productMappings.getAllProductIDByType("OFS");
                                                    var ISAWrapperTypes: Array = productMappings.getAllProductIDByType("ISA");
                                                    
                                                    
                                                    // Process SIPPS
                                                    var sippWrappers:ArrayCollection = _Wrappers.WrapperPerTypes(SIPPWrapperTypes);
                                                    var isaWrappers:ArrayCollection = _Wrappers.WrapperPerTypes(ISAWrapperTypes);
                                                    var giaWrappers:ArrayCollection = _Wrappers.WrapperPerTypes(GIAWrapperTypes);
                                                    var ofsWrappers:ArrayCollection = _Wrappers.WrapperPerTypes(OFSWrapperTypes);
                                                   
                                                    if(sippWrappers.length > 0)
                                                    {
                                                        CreateWrapperCollection("SIPP Accounts",sippWrappers);
                                                    }
                                                    // Process ISA
                                                    if(isaWrappers.length > 0 )
                                                    {
                                                        CreateWrapperCollection("ISA Accounts",isaWrappers);
                                                    }
                                                    // Process GIA
                                                    if(giaWrappers.length > 0)
                                                    {
                                                        CreateWrapperCollection("General Investment Accounts",giaWrappers);
                                                    }
                                                    // Process OFS
                                                    if(ofsWrappers.length > 0)
                                                    {
                                                        CreateWrapperCollection("Offshore Bond Accounts",ofsWrappers);
                                                    }   
                                                                   
                                                }
                                               
                                               
                                            ]]>
                                        </mx:Script>
                                       
                                    </nm:DKModule>

                                     

                                     


                                    Please try to figure whats wrong with this...

                                     

                                    Cheers,

                                    G1

                                    • 15. Re: Radio Button label issue
                                      G1Z Level 1

                                      btw the DKModule mentioned above extends Flex Module....hope this helps

                                      • 16. Re: Radio Button label issue
                                        EvyatarBH Level 3

                                        I would check the following -

                                         

                                        1. Adobe's examples page of RadioButton at:

                                        http://livedocs.adobe.com/flex/3/html/help.html?content=controls_10.html

                                        It seems to me like you are not using the RadioButtonGroup correctly and you can remove the tag

                                         

                                        <mx:RadioButtonGroup id="WrapperRadioGroup"/>

                                         

                                        Because you are not really using it for anything...

                                         

                                        2. Try to add ".source" to the loop:

                                         

                                        for each(var item:DTOInvestorWrapper in wrappers.source)

                                         

                                         

                                        BTW

                                        Does it work properly when you test the CheckBox components flow (_Mode == SELECTMULTIPLE)?

                                         

                                        * EDIT *

                                        I just thought of another almost funny direction -

                                        Could it be that your labels' color is white, so you don't see them on the white background?

                                        (I don't know what you defined inside ToolsStyles.css...)

                                        • 17. Re: Radio Button label issue
                                          G1Z Level 1

                                          Hi,

                                           

                                          1) I am using the RadioButtonGroup to pass the selected RadioButton Value into the next screen( If u see my code).

                                           

                                          2) I tried adding the .source to the arraycollection but no luck with the issue.

                                           

                                          3) Not only for the Radio Button even If I add a textArea, Label etc components to this Vbox and If I try to harcode some text into these components, then also its not able to display that hardcoded text on UI. So I think issue is not with the components at all but something to do with the layout/Module/container/Styling.

                                           

                                          4) I tried chaging the color of the RadioButton Text to Black and then also same issue is seen.

                                           

                                          I am posting the RadioButton CSS for your information below

                                           

                                          ToolsStyles.css has this component style for RadioButton

                                           

                                          RadioButton {
                                             fillColors: #ffffff, #cccccc, #ffffff, #eeeeee;
                                             textSelectedColor: #666666;
                                             textRollOverColor: #666666;
                                             fontWeight: normal;
                                             color: #000000;
                                          }

                                           

                                          Please check and let me know EvyatarBH.

                                           

                                          Cheers,

                                          G1

                                          • 18. Re: Radio Button label issue
                                            EvyatarBH Level 3

                                            Are you sure that the ArrayCollection you pass as parameter is populated?

                                            When you debug, do you see the loop and the VBox's numChildren increases?

                                             

                                            Maybe you can add a screenshot of how your VBox looks eventually...

                                            • 19. Re: Radio Button label issue
                                              Sefi Ninio

                                              ignor this


                                              • 20. Re: Radio Button label issue
                                                G1Z Level 1

                                                Hi EvyatarBH,

                                                 

                                                Everything is poupulated including the label for the radiobutton but it does not get RENDERED ON THE UI.

                                                 

                                                 

                                                Cheers,

                                                G1

                                                • 21. Re: Radio Button label issue
                                                  G1Z Level 1

                                                  here is my screenshot and you can clearly see the radio button but not the label Button.png

                                                  • 22. Re: Radio Button label issue
                                                    G1Z Level 1

                                                    Hi Sefi,

                                                     

                                                    I have made the Vbox large enough to hold all of these radio buttons, but

                                                    still the same issue ya

                                                    • 23. Re: Radio Button label issue
                                                      EvyatarBH Level 3

                                                      I'm not sure it's related, but I just realized you call -

                                                       listWrappers.removeAllChildren();

                                                      which probably deletes your RadioButtonGroup (as it is a child component of your VBox)...

                                                      • 24. Re: Radio Button label issue
                                                        G1Z Level 1

                                                        thanks for that, lemme quickly check and see if that works.

                                                        • 25. Re: Radio Button label issue
                                                          G1Z Level 1

                                                          no luck still the same UI, I am now wondering how RadioGroup worked before this edit???

                                                          • 26. Re: Radio Button label issue
                                                            EvyatarBH Level 3

                                                            I asked you somewhere along the way and you didn't answer -

                                                            Does it work properly when you test the CheckBox components flow (_Mode == SELECTMULTIPLE)?

                                                            • 27. Re: Radio Button label issue
                                                              G1Z Level 1

                                                              Even with the check box components its just adding the check boxes and

                                                              leaving the labels in dark..........