Working in Flex 3, I have a series of components being rendered on a canvas, each of which should represent a single potential selection, ideally in a RadioButtonGroup. So in my parent canvas I am defining the RadioButtonGroup, and each component provides a single RadioButton. However, this doesn't seem to work.
Suppose there is a component called aComponent defined as such:
<mx:Canvas ...>
...
<mx:RadioButton id="someButton" groupName="myRadioButtonGroup" ... />
</mx:Canvas>
The outer canvas:
<mx:Canvas id="outerCanvas" ...>
...
<mx:Script>
public function doesSomething():void
{
var myComponent:aComponent = new aComponent();
outerCanvas.addChild(myComponent);
}
</mx:Script>
...
<mx:RadioButtonGroup id="myRadioButtonGroup" />
</mx:Canvas>
So my guess was that at this point if, say, four of these components were added, the radio buttons would behave in mutually exclusive fashion and I'd be able to access myRadioButtonGroup.selectedValue to get the current selection. However, it doesn't seem to work that way.
Is what I'm trying to do even possible, or have I maybe just missed something?
Thanks!
Edit - got to the bottom of it:
The radiobuttongroup isn't available to the component. It's parent has 'myRadioButtonGroup', but not the component.. Pass the 'myRadioButtonGroup' to the constructor and use it..
outerCanvas function:
var myComponent:aComponent = new aComponent(myRadioButtonGroup);
aComponent definition:
private var radioGroup:RadioButtonGroup;
function aComponent(radioGroup:RadioButtonGroup):void {
this.radioGroup = radioGroup;
}
</mx:Script>
<mx:RadioButton id="someButton" groupName="radioGroup" ... />
untested, but hopefully gives you the idea
Related
I coded the following in Flex 4/AS3 and it doesn't worked as expected.
So, I would like to know if there is something wrong with my code... I'll explain it:
TileTest.mxml
<s:Application minWidth="955" minHeight="600" creationComplete="createButtons()"
<fx:Script>
<![CDATA[
import Object.TestButton;
import mx.collections.ArrayList;
private var _names:Array = ["one", "two", "three"];
public function createButtons():void
{
var buttons:ArrayList = new ArrayList();
for(var a:int = 0; a < _names.length; a++)
{
var testButton:TestButton = new TestButton();
testButton.customName = _names[a];
buttons.addItem(testButton);
}
myList.dataProvider = buttons;
}
]]>
</fx:Script>
<s:VGroup gap="12" width="100%">
<s:Label text="Options" fontSize="18" fontWeight="bold" color="#333333" />
<s:List width="100%" height="100%" id="myList" itemRenderer="Object.TestButton" borderVisible="false">
<s:layout>
<s:TileLayout orientation="rows" columnWidth="290" rowHeight="90" columnAlign="left" horizontalGap="0" verticalGap="0" />
</s:layout>
</s:List>
</s:VGroup>
</s:Application>
This is my Application. Here, I have a List called myList, where I load some TestButtons. I set a name for each button inside the loop.
TestButton
<s:Group width="300" height="90" click="{ Alert.show(_name); }"
<fx:Script>
<![CDATA[
import mx.controls.Alert;
private var _name:String = "just a test...";
public function set customName(newName:String):void
{
_name = newName;
Alert.show(_name);
this.addEventListener(MouseEvent.MOUSE_OVER, function():void{ Alert.show(_name); });
}
]]>
</fx:Script>
<s:BorderContainer accentColor="#000000" width="100%" height="100%" />
</s:Group>
As you can see, I have three Alerts in this component... I did so we can understand the problem.
The first Alert occurs when I set the customName, which occurs in the Application, as already shown.
The second one should occur on Mouse_Over, as the event listener been added to the Group element.
And the third Alert should occur on Click in the Group element.
Now, if I run the resulting swf, I see all the three buttons in the screen and three Alerts, one for each set customName by the Application and it alerts the right name.
If I put the mouse over any button, it doesn't alert any message.
If I click any button, it alerts the default message set to the _name property, which is "just a test..."
I can't understand what is the problem, as I was expecting it to always alert the name set by the Application to each button. Also, I don't want to change the components... what I'm saying is that I would like to have a List and TestButtons with a private String inside.
If the problem is in these specific implementation, so I'll have no other way than change it...
Thank you all!
The problem is that you have a list of TestButtons in your data provider, instead of just plain data. Those buttons get created, and that is why you see the correct Alert messages.
So, then Flex sees a list with three items and therefore it creates three additional TestButtons to render the data in your list. But those TestButtons are completely new ones, with default values for its properties.
To fix this, it would be better if you had data only in your data provider ArrayList, and you would access it through the data property of your item renderer.
How do I determine whether a value set comes from user interaction with the input component, or from binding?
Example:
<s:NumericStepper xmlns=...
value="{SomeDataManager.foo}">
<fx:Script>
override public function set value(newValue:Number):void {
if (setByUser) {
super.value = newValue;
} else {
// ...
}
}
</fx:Script>
</s:NumericStepper>
Using Flex 4.1 if that matters.
listen for the change event. It will solve your problem.
<s:HGroup>
<s:NumericStepper change="trace('ns change')" value="{ns2.value}" minimum="{ns2.minimum}" maximum="{ns2.maximum}"/>
<s:NumericStepper minimum="0" maximum="1000" id="ns2" />
</s:HGroup>
The change event gets fired when an input component's value is changed by user interaction. If some part of your code is changing that component's value, the change event will not get fired.
"Flexicious" a third party component library built for handling very larg data set in DataGrid for flex, The issue is, i am not able to change the search functionality dynamically in a data Grid.
<flxs:FlexDataGridColumn id="multiselect" dataField="Name" headerText="Name"
filterControl="NumericTextInput" headerAlign="center">
<flxs:headerRenderer>
<fx:Component>
<controls:ComboBox change="changeSel(event)" width="10" height="41" dataProvider="outerDocument.searchArray}">
<fx:Script>
<![CDATA[
import com.flexicious.controls.ComboBox;
import mx.controls.Alert;
public function changeSel(event:Event):void{
var cbox:ComboBox = event.currentTarget as ComboBox;
if(cbox.selectedItem=="Less Than"){
outerDocument.multiselect.filterOperation="LessThanEquals";
//Alert.show(""+outerDocument.multiselect.filterOperation);
}else if(cbox.selectedItem=="Greator Than"){
outerDocument.multiselect.filterOperation="GreaterThanEquals";
//Alert.show(""+outerDocument.multiselect.filterOperation);
}else if(cbox.selectedItem=="Equal To"){
outerDocument.multiselect.filterOperation="Equals";
//Alert.show(""+outerDocument.multiselect.filterOperation);
}else if(cbox.selectedItem=="Begins With"){
outerDocument.multiselect.filterOperation="BeginsWith";
//Alert.show(""+outerDocument.multiselect.filterOperation);
}
}
]]>
</fx:Script>
</controls:ComboBox>
</fx:Component>
</flxs:headerRenderer>
</flxs:FlexDataGridColumn>
Now when i select any option from the rendered combobox i am not able to change filteroption, however when i alter the filteroperation it dose show me the changed operatioin but in functionality it doesn't change.
You should call grid.rebuildFilter() after changing the filterOperation
I'm using the Spark DataGrid for the first time and finding it generally very usable. There's something I'd like to do with the contents of my grid now that I've drawn it though and I'm a bit stuck as how to proceed.
I'd like to make a function that runs through each cell of a certain column in the DataGrid, that checks each value against an Array of predefined values; if it finds a match, it should then highlight the cell as conflicting, by changing its colour.
I know you can access a particular cell's item renderer, by using the getItemRendererAt() function, and passing the column and row indices. But I can't see how I would, for example, loop through the values in each column.
I may well be going about this all wrong, in which case feel free to push me onto the right path. Equally if it's possible to do what I'm trying to do, I'd love to hear how.
Thanks!
Actually, you should create your own <s:GridItemRenderer /> and use it as an itemRenderer of your dataGrid.
This way, you will be able to change the color of the cell depending on the data property of the <s:GridItemRenderer />.
Here is an example of how you could do it:
<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx = "http://ns.adobe.com/mxml/2009"
xmlns:s = "library://ns.adobe.com/flex/spark"
xmlns:mx = "library://ns.adobe.com/flex/mx" >
<fx:Script>
<![CDATA[
private function isValid(value:uint):Boolean
{
//whatever;
return true;
}
]]>
</fx:Script>
<s:BorderContainer width="100%" height="100%">
<s:borderStroke>
<s:SolidColorStroke color="{isValid(data)?#00FF00:#FF0000}" />
</s:borderStroke>
<s:UITextField label="{data}" />
</s:BorderContainer>
</s:GridItemRenderer>
Using the example above, also Override the "set data" to change the color everytime you change the data, and not only on the grid creation
<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx = "http://ns.adobe.com/mxml/2009"
xmlns:s = "library://ns.adobe.com/flex/spark"
xmlns:mx = "library://ns.adobe.com/flex/mx" >
<fx:Script>
<![CDATA[
import mx.controls.ColorPicker;
import mx.events.FlexEvent;
import mx.utils.ColorUtil;
override public function set data(value:Object):void{
super.data = value;
if(data.different == 1){
solidColor.color = 255;
}
}
]]>
</fx:Script>
<s:BorderContainer width="100%" height="100%">
<s:borderStroke>
<s:SolidColorStroke id="solidColor" />
</s:borderStroke>
<s:UITextFieldGridItemRenderer label="{data.name}" />
</s:BorderContainer>
</s:GridItemRenderer>
Then the next steps are easy, clone your dataProvider from the datagrid and then compare both, and if the item is changed, just set "1" to ,for example, the flag "different" in the example above and then the itemRenderer will call itself and change de color automatically
I have an an array of objects that I use as the datasource for my repeater.
<mx:Repeater id="categoryRepeater" dataProvider="{this.allCategories}">
<mx:HBox>
<mx:Spacer width="20"/>
<mx:CheckBox id="categoryCheckBox" label="{categoryRepeater.currentItem.question}"/>
</mx:HBox>
</mx:Repeater>
I would like to be able to tell which of the checkboxes in the list have been checked, but I'm not sure how to do it. I know I can add a function when it's clicked, but I don't know how to tell which checkbox called the function.
Use the currentIndex property.
I realize that this is a very old post, but I had run into the same issue and the currentIndex was not a sufficient answer for me. What I found to work better was to create a function on click:
<mx:Repeater id="rp" dataProvider="{dp}">
<s:CheckBox height="100%" width="100%" label="{String(rp.currentItem)}"
click="showAlert(event);"/>
</mx:Repeater>
and the showAlert function looks something like this:
private function showAlert(evt:MouseEvent):void {
var curBox:CheckBox = evt.currentTarget as CheckBox;
var str:String = curBox.content.toString();
if(curBox.selected)
Alert.show(str + " clicked");
}
This way you can deal with the event as a CheckBox inside of your ActionScript code and find values such as whether or not it has been selected etc.