-
1. Re: Radio Button label issue
Flex harUIJul 15, 2011 8:25 AM (in response to G1Z)
Use the debugger to verify the label got set and the radiobutton is sized
correctly.
-
2. Re: Radio Button label issue
G1Z Jul 15, 2011 8:31 AM (in response to Flex harUI)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 Jul 15, 2011 9:56 AM (in response to G1Z)Can you post the code of the radio group and the radio buttons?
-
4. Re: Radio Button label issue
G1Z Jul 18, 2011 1:24 AM (in response to saisri2k2)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 Jul 18, 2011 3:37 AM (in response to G1Z)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 Jul 18, 2011 4:24 AM (in response to EvyatarBH)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 Jul 18, 2011 4:29 AM (in response to G1Z)How about using Spark VGroup or BorderContainer?
(and probably use addElement instead of addChild...)
-
8. Re: Radio Button label issue
G1Z Jul 18, 2011 4:38 AM (in response to EvyatarBH)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 Jul 18, 2011 5:41 AM (in response to G1Z)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 Jul 18, 2011 7:22 AM (in response to G1Z)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 Jul 18, 2011 7:49 AM (in response to EvyatarBH)Thanks a ton Evy, lemme try this and will post you back....cheers
U Rock,
G1
-
12. Re: Radio Button label issue
G1Z Jul 18, 2011 8:43 AM (in response to G1Z)Well nyway of doing it in Flex 3.5 SDK????
-
13. Re: Radio Button label issue
EvyatarBH Jul 18, 2011 9:01 AM (in response to G1Z)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 Jul 18, 2011 9:24 AM (in response to EvyatarBH)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 Jul 18, 2011 9:25 AM (in response to G1Z)btw the DKModule mentioned above extends Flex Module....hope this helps
-
16. Re: Radio Button label issue
EvyatarBH Jul 18, 2011 11:33 PM (in response to G1Z)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 Jul 19, 2011 2:09 AM (in response to EvyatarBH)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 Jul 19, 2011 5:13 AM (in response to G1Z)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...
-
-
20. Re: Radio Button label issue
G1Z Jul 19, 2011 5:57 AM (in response to EvyatarBH)Hi EvyatarBH,
Everything is poupulated including the label for the radiobutton but it does not get RENDERED ON THE UI.
Cheers,
G1
-
-
22. Re: Radio Button label issue
G1Z Jul 19, 2011 6:02 AM (in response to Sefi Ninio)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 Jul 19, 2011 6:12 AM (in response to G1Z)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 Jul 19, 2011 6:16 AM (in response to EvyatarBH)thanks for that, lemme quickly check and see if that works.
-
25. Re: Radio Button label issue
G1Z Jul 19, 2011 6:20 AM (in response to G1Z)no luck still the same UI, I am now wondering how RadioGroup worked before this edit???
-
26. Re: Radio Button label issue
EvyatarBH Jul 19, 2011 6:58 AM (in response to G1Z)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 Jul 19, 2011 7:06 AM (in response to EvyatarBH)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 Jul 19, 2011 7:11 AM (in response to G1Z)Try setting width (or percentWidth) for the RadioButton and CheckBox components
-
29. Re: Radio Button label issue
G1Z Jul 19, 2011 7:24 AM (in response to EvyatarBH)lemme give it a try.
-
30. Re: Radio Button label issue
G1Z Jul 19, 2011 7:26 AM (in response to EvyatarBH)no luck just tried it ya
-
31. Re: Radio Button label issue
G1Z Jul 19, 2011 7:41 AM (in response to G1Z)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 Jul 19, 2011 7:45 AM (in response to G1Z)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 Jul 19, 2011 7:48 AM (in response to EvyatarBH)YEAH THATS TRUE EVY
-
34. Re: Radio Button label issue
G1Z Jul 19, 2011 7:50 AM (in response to G1Z)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 Jul 19, 2011 1:25 PM (in response to G1Z)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 Jul 19, 2011 1:34 PM (in response to EvyatarBH)Thats not possible because creationcomplete method is called on the parent
container only
-
37. Re: Radio Button label issue
Flex harUIJul 19, 2011 3:08 PM (in response to G1Z)
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 Jul 19, 2011 11:07 PM (in response to Flex harUI)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 harUIJul 19, 2011 11:10 PM (in response to EvyatarBH)
We need the 20-line failing test case from the person with the problem.
Otherwise we are just speculating.