Radio Button label issue

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

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

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

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

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

dont know whats causing this issue????

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

U Rock,

G1

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

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

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

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

Hi EvyatarBH,

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

Cheers,

G1

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

Hi Sefi,

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

still the same issue ya

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

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

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

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

lemme give it a try.

no luck just tried it ya

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

YEAH THATS TRUE EVY

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

Thats not possible because creationcomplete method is called on the parent

container only