Dynamically adding radiobuttongroup - apache-flex

I'm trying to make a quiz in flex and am loading data from an xml file. For each question I want to create a radiobuttongroup so I can associate radio buttons to it. How can I accomplish that with actionscript? I can see that addChild method works for DisplayObjects and I presume that radiobuttongroup is not one because I'm receiving errors. How can I dynamically add radiobuttongroup with actionscript in flex application? Thanks.

If you add radio buttons to a FormItem, they are automatically grouped together. So, assuming your quiz uses a Flex Form for layout, you simply generate a FormItem for each question, add a button for each option to the FormItem, then add that FormItem to your main Form.
private function generateQuestions(questions:XML):void
{
var form:Form = new Form();
this.addChild(form);
for each (var question:XML in questions.question)
{
var questionItem:FormItem = new FormItem();
form.addChild(questionItem);
questionItem.label = question.#text;
for each (var option:XML in question.option)
{
var optionButton:RadioButton = new RadioButton();
optionButton.label = option.#text;
questionItem.addChild(optionButton);
}
}

You create the radio buttons, add them to the display, create a group for them and declare the radio buttons to belong to the same group (RadioButton.group = group1). The RadioButtonGroup is indeed not a display object but just tells the radio buttons belonging to that group that they should acts as one element.
http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/fl/controls/RadioButtonGroup.html
http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/fl/controls/RadioButton.html

Related

Remove button Find and Clear in GridControl

like I can eliminate the botton (Find and Clean) of a GridControl, and alone to leave TextEdit.
regards
Alex
You can use the approach demonstrated in How to customize the Find Panel layout? example:
Create the GridControl/GridView descendant components
Override the GridView.CreateFindPanel method to provide your
own customized FindControl instance into the view.
Yes it is possible. you will need to access the FindControl and then access the layoutControl and its Control Items. Use the Code below in form_load etc:
// Get the Find Control on Grid : gcMain
FindControl _FindControl = gcMain.Controls.Find("FindControl", true)[0] as FindControl;
//Get the Layout Control
LayoutControl lc = (_FindControl.ClearButton.Parent as LayoutControl);
//Allow Control Hiding
lc.Root.AllowHide = true;
//Hide Find Button
(lc.Root.Items[2] as LayoutControlItem).ContentVisible = false;
//Hide Clear Button
(lc.Root.Items[3] as LayoutControlItem).ContentVisible = false;

How do i know that which button is clicked in flex?

for (iss = 0; iss < listOfProductIds2.length; iss++)
{
// Alert.show(listOfProductIds2[iss]);
var productMain:VBox=new VBox();
var p1:HBox=new HBox();
var l1:Label=new Label();
var b1:Button=new Button();
var spacer:Spacer=new Spacer();
spacer.width=300;
b1.label="Remove";
b1.setConstraintValue("id","");
b1.addEventListener(MouseEvent.CLICK,removeProduct);
l1.text="Product "+iss;
p1.setActualSize(500,500);
p1.addChild(l1);
p1.addChild(spacer);
p1.addChild(b1);
productMain.addChild(p1);
}
function removeProduct(event:MouseEvent):void
{
// How do i know which button is clicked
}
Use event.currentTarget (instead of event.target) because event.target might be the Label component or some styling component within the button, but currentTarget is assured to be the object with which the listener was registered.
To get a handle to the button that was clicked you can just cast the currentTarget to a button.
function removeProduct(event:MouseEvent):void
{
var b1:Button = Button(event.currentTarget);
}
The method setConstraintValue is for setting layout constraints, not setting id. The id property is used by mxml for creating variable names for objects. You can get/set id as you would get/set any other property (say width) - but neither have I seen anyone doing that nor do I see any need to do that in the first place.
event.target should point to the Button you clicked on, shouldn't it ? However you should probably give ids to the buttons to be able to differenciate them (since you create them dynamically.)
Look at event.target.
If ids are assigned dynamically as in the example given b1.id = "button_" + listOfProductIds2[iss]
Then the function that processes the click event would look at the currenttarget, and what I usually do is do a string replace on the part of the id that you know is not dynamic like "button_" with "", which leaves you with the name of the product.

Adobe Flex 3 List Control Selection and Change Event Problem

I created a list control at runtime as following:
var myList:List = new List();
ListArea.addChild(myList);
myList.percentHeight = myList.percentWidth = 100;
myList.itemRenderer = new ClassFactory (components.renderers.myRenderer);
myList.dataProvider = myDataArray;
myList.addEventListener(EVENT.CHANGE, historyBarClickHandler);
//Where myDataArray is an ArrayCollection consisting of my Custom ValueObjects.
When i execute the code it displays my list with custom item renderer, which is fine.
But when bring my mouse over it, it doesn't give any colour highlight which means it is not selecting.
Secondly, when i click on any of the list item, it doesn't dispatch any change event.
I tried a lot but couldn't understand it.
Please Guide
Thanks
Your itemRenderer may be causing another issue, but you're not listening for the correct event. It should be:
myList.addEventListener(ListEvent.CHANGE, historyBarClickHandler);

Is there a way to have all radion buttons be unchecked

I have a QGroupBox with a couple of QRadioButtons inside of it and in certain cases I want all radio buttons to be unchecked. Seems that this is not possible when a selection has been made. Do you know of a way I could do this or should I add a hidden radiobutton and check that onen to get the desired result.
You can achieve this effect by temporarily turning off auto exclusivity for all your radio buttons, unchecking them, and then turning them back on:
QRadioButton* rbutton1 = new QRadioButton("Option 1", parent);
// ... other code ...
rbutton1->setAutoExclusive(false);
rbutton1->setChecked(false);
rbutton1->setAutoExclusive(true);
You might want to look at using QButtonGroup to keep things tidier, it'll let you turn exclusivity on and off for an entire group of buttons instead of iterating through them yourself:
// where rbuttons are QRadioButtons with appropriate parent widgets
// (QButtonGroup doesn't draw or layout anything, it's just a container class)
QButtonGroup* group = new QButtonGroup(parent);
group->addButton(rbutton1);
group->addButton(rbutton2);
group->addButton(rbutton3);
// ... other code ...
QAbstractButton* checked = group->checkedButton();
if (checked)
{
group->setExclusive(false);
checked->setChecked(false);
group->setExclusive(true);
}
However, as the other answers have stated, you might want to consider using checkboxes instead, since radio buttons aren't really meant for this sort of thing.
If you're using QGroupBox to group buttons, you can't use the setExclusive(false) function to uncheck the checked RadioButton. You can read about it in QRadioButton section of QT docs. So if you want to reset your buttons, you can try something like this:
QButtonGroup *buttonGroup = new QButtonGroup;
QRadioButton *radioButton1 = new QRadioButton("button1");
QRadioButton *radioButton2 = new QRadioButton("button2");
QRadioButton *radioButton3 = new QRadioButton("button3");
buttonGroup->addButton(radioButton1);
buttonGroup->addButton(radioButton2);
buttonGroup->addButton(radioButton3);
if(buttonGroup->checkedButton() != 0)
{
// Disable the exclusive property of the Button Group
buttonGroup->setExclusive(false);
// Get the checked button and uncheck it
buttonGroup->checkedButton()->setChecked(false);
// Enable the exclusive property of the Button Group
buttonGroup->setExclusive(true);
}
You can disable the exclusive property of the ButtonGroup to reset all the buttons associated with the ButtonGroup, then you can enable the Exclusive property so that multiple button checks won't be possible.

How to retrieve the pre edited value of the cell of a datagrid to an itemeditor in a flex

I wrote a custom item editor for a datagrid in flex. My question is how to retrieve the pre-edited value of the datagrid cell after the item editor initializes and also in the custom item editors code.
I don't think it is possible to get the old value once you are in the item editor. I would do this manually by listening to the "itemEditBeginning" event and keeping a variable with the value of the cell. You can then reference that value through the "parent", "parentDocument" or "outerDocument" properties in the item editor, depending on whether you are using an inline item editor or a separate class.
In the "itemEditEnd" event you can access the old value as:
var oldValue:String = event.currentTarget.dataProvider[event.rowIndex].VALUE_FIELD;
and the new value as:
var txtControl:mx.controls.TextInput = event.currentTarget.itemEditorInstance as mx.controls.TextInput;
var newValue:String = txtControl.text;
If you are using a custom itemRenderer you need to change "mx.controls.TextInput" for your custom itemRenderer.

Resources