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..........

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

                                                                Try setting width (or percentWidth) for the RadioButton and CheckBox components

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

                                                                  lemme give it a try.

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

                                                                    no luck just tried it ya

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

                                                                      Evy,

                                                                       

                                                                      Perhaps you could give a try by creating a UI for this functionality and check with the 3.5 SDK to make sure things on my side r ok.

                                                                       

                                                                      Cheers,

                                                                      G1

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

                                                                        What happens if you have two ACs populated with several items?

                                                                         

                                                                        Does it appear as follows? -

                                                                         

                                                                        Header #1

                                                                        RadioButton Without a label)

                                                                        RadioButton Without a label)

                                                                        RadioButton Without a label)

                                                                        Header #2

                                                                        RadioButton Without a label)

                                                                        RadioButton Without a label)

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

                                                                          YEAH THATS TRUE EVY

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

                                                                            strange thing is that on my next screen I am passing the value selected from the radiogroup by adding the label to a stack as mentioned in the code which works fine( I mean the label shows up in the next screen which is being added to the stack from the present screen where we have the issue).

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

                                                                              What if you call the addChild method as follows -

                                                                              callLater(listWrappers.addChild,[newRadioButton])
                                                                              

                                                                               

                                                                              I'm thinking maybe the components are being added before they are completely ready...

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

                                                                                Thats not possible because creationcomplete method is called on the parent

                                                                                container only

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

                                                                                  It is time to post a 20-line test case.  Otherwise, we'll spend a lot of

                                                                                  time speculating.

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

                                                                                    I already created something like that for him above -

                                                                                    http://forums.adobe.com/message/3805252#3805252

                                                                                     

                                                                                    Here's also a more sophisticated 3.5 SDK version showing this is not a Flex bug (as it works fine) -

                                                                                     

                                                                                     

                                                                                    <?xml version="1.0" encoding="utf-8"?>
                                                                                    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="955" height="600"
                                                                                                        creationComplete="app_creationCompleteHandler(event)">
                                                                                         
                                                                                         <mx:Script>
                                                                                              <![CDATA[
                                                                                                   import mx.controls.Label;
                                                                                                   import mx.controls.RadioButton;
                                                                                                   import mx.events.FlexEvent;
                                                                                              
                                                                                                   protected function app_creationCompleteHandler(event:FlexEvent):void
                                                                                                   {
                                                                                                        target.removeAllChildren();
                                                                                                        
                                                                                                        var header:Label = new Label();
                                                                                                        header.text = "Header #1";
                                                                                                        header.setStyle("fontWeight","bold");
                                                                                                        target.addChild(header);
                                                                                                        
                                                                                                        for each(var item:String in data.source){
                                                                                                             var radioButton:RadioButton = new RadioButton();
                                                                                                             radioButton.groupName = "testGroup";
                                                                                                             radioButton.label = item;
                                                                                                             radioButton.id = item;
                                                                                                             radioButton.value = item;
                                                                                                             radioButton.setStyle("paddingLeft",25);
                                                                                                             target.addChild(radioButton);
                                                                                                        }
                                                                                                   }
                                                                                              
                                                                                              ]]>
                                                                                         </mx:Script>
                                                                                         
                                                                                         <mx:ArrayCollection id="data">
                                                                                              <mx:String>aaa</mx:String>
                                                                                              <mx:String>bbb</mx:String>
                                                                                              <mx:String>ccc</mx:String>
                                                                                         </mx:ArrayCollection>
                                                                                         
                                                                                         <mx:VBox id="target" width="100%" height="100%">
                                                                                              
                                                                                         </mx:VBox>
                                                                                    </mx:Application>
                                                                                    
                                                                                     
                                                                                    

                                                                                     

                                                                                     

                                                                                    I included the same properties population and it works fine...

                                                                                     

                                                                                    G1Z - Please try my suggestion.

                                                                                    The creationComplete is being called for the module and then you add components to it dynamically.

                                                                                    I said maybe those components are being added before they are ready (even if it doesn't make much sense).

                                                                                    (BTW - I don't see any reason to populate the RadioButton's value attribute)

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

                                                                                      We need the 20-line failing test case from the person with the problem.

                                                                                      Otherwise we are just speculating.

                                                                                      1 2 Previous Next