I have a flex datagrid with cart items populated from a service. Each row has edit/delete buttons provided by a custom ItemRenderer. When I click each button I send an event from the itemrenderer which calls a service in order to edit/delete the selected item.
How can I get the id of the product form the dataprovider inside the Itemerenderer in order to send it with my custom event?
Thanks in advance
Use the DATA property of the itemRenderer.
The Flex help has a very illustrative example. If your dataProvider is:
<mx:ArrayList>
<fx:Object firstName="Bill" lastName="Smith" companyID="11233"/>
<fx:Object firstName="Dave" lastName="Jones" companyID="13455"/>
<fx:Object firstName="Mary" lastName="Davis" companyID="11543"/>
<fx:Object firstName="Debbie" lastName="Cooper" companyID="14266"/>
</mx:ArrayList>
you can access the data item as follows:
<?xml version="1.0" encoding="utf-8"?>
<!-- containers\spark\myComponents\MySimpleItemRenderer.mxml -->
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark">
<s:HGroup verticalCenter="0" left="2" right="2" top="2" bottom="2">
<s:Label text="{data.lastName}, {data.firstName}"/>
<s:Label text="{data.companyID}"/>
</s:HGroup>
</s:ItemRenderer>
Related
Is there any way to create a parent view with sub view system in flex? For example I need to create an application that computes insurance rates for different products. All products need to have the same inputs for gender, age, and nicotine usage. What I'd like to do is have a 'parent view' (which wouldn't actually be displayed) that has all these basic fields layed out, then create sub views that automatically displays the components and layout of the parent view, which would cut back on duplicating code. the sub views would have additional components unique to the product (some would also need to take in number of children, etc.) and compute the rates in different ways.
Edit: let's say I have 2 different products. ProdA and ProdB
This is the view for ProdA
<?xml version="1.0" encoding="utf-8"?>
<components:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" xmlns:components="spark.components.*" title="ProdA"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import ASClasses.LL;
public function makeLL(age:String, gen:String, nic:String):void{
var intAge:int=int(age);
var newLL:LL=new LL(intAge, gen, nic);
dest.text=String(newLL.computeRate());
}
]]>
</fx:Script>
<s:VGroup width="100%" height="100%" verticalAlign="middle" horizontalAlign="center">
<s:Label text="Age:"/>
<s:TextInput id="age" restrict="0-9" maxChars="2"/>
<s:ComboBox id="GenderBox" width="140" prompt="Gender" >
<s:dataProvider>
<mx:ArrayList>
<fx:String>Male</fx:String>
<fx:String>Female</fx:String>
</mx:ArrayList>
</s:dataProvider>
</s:ComboBox>
<s:Label text="The selected gender is: {GenderBox.selectedItem}"/>
<s:ComboBox id="NicotineBox" width="140" prompt="Nicotine Usage">
<s:dataProvider>
<mx:ArrayList>
<fx:String>Smoker</fx:String>
<fx:String>Non-Smoker</fx:String>
</mx:ArrayList>
</s:dataProvider>
</s:ComboBox>
<s:Label text="The selected Nicotine is: {NicotineBox.selectedItem}"/>
<s:Button label="Get Rate" click="makeLL(age.text, GenderBox.selectedItem, NicotineBox.selectedItem)" />
<s:TextInput id="dest" />
<s:Button label="Back" click="navigator.popView()" styleName="back" />
</s:VGroup>
This is the view for ProdB
<?xml version="1.0" encoding="utf-8"?>
<components:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" xmlns:components="spark.components.*" title="ProdB"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import ASClasses.OP;
public function makePerson(age:String, gen:String, nic:String):void{
var intAge:int=int(age);
var newOP:OP=new OP(intAge, gen, nic);
dest.text=String(newOP.computeRate());
}
]]>
</fx:Script>
<s:VGroup width="100%" height="100%" verticalAlign="middle" horizontalAlign="center" >
<s:Label text="Age:"/>
<s:TextInput id="age" restrict="0-9" maxChars="2"/>
<s:ComboBox id="GenderBox" width="140" prompt="Gender">
<s:dataProvider>
<mx:ArrayList>
<fx:String>Male</fx:String>
<fx:String>Female</fx:String>
</mx:ArrayList>
</s:dataProvider>
</s:ComboBox>
<s:Label text="The selected gender is: {GenderBox.selectedItem}"/>
<s:ComboBox id="NicotineBox" width="140" prompt="Nicotine Usage">
<s:dataProvider>
<mx:ArrayList>
<fx:String>Smoker</fx:String>
<fx:String>Non-Smoker</fx:String>
</mx:ArrayList>
</s:dataProvider>
</s:ComboBox>
<s:Label text="The selected Nicotine is: {NicotineBox.selectedItem}"/>
<s:Button label="Get Rate" click="makePerson(age.text, GenderBox.selectedItem, NicotineBox.selectedItem)" />
<s:TextInput id="dest" />
<s:Button label="Back" click="navigator.popView()" styleName="back" />
</s:VGroup>
Almost all the code is the same except for a few differences. I'd like to have one view (Product) that contains all the duplicated code, then have ProdA and ProdB extend this product. So that everything in the Product view shows up in both ProdA and ProdB
Use dependency injection (expose public properties that you can then bind to within the View), which frees you from having to define the whole thing inline as shown above. it would look something like this
[Bindable]
public var dataProvider:ArrayList
//..other public vars
<s:ComboBox id="combo" width="140" prompt="{promptPublicVar}" >
<s:dataProvider>{dataProviderPublicVar}</s:dataProvider>
<s:change>publicVarContainingSelection=combo.selectedItem</s:change>
</s:ComboBox>
<s:Label text="{label}: {publicVarContainingSelection}"/>
And you'd use it something like
<myNS:MyView>
<myNS:prompt>Gender</myNS:prompt>
<myNS:dataProvider><mx:ArrayList>...</mx:ArrayList></myNS:dataProvider>
<myNS:label>The selected Gender is: </myNS:label>
</myNS:MyView>
===========not going to write any more code to try to guess what you want, so============
here are some patterns you might find useful:
Presentation Model
Abstract Classes
Template Components
Note that the third link also mentions Code behind, which can be used as a type of abstract class.
Also, you might want to consider composition over inheritance. For example, your view shouldn't know or care how to calculate rate information, but could have a rate calculator data component passed to it. Which it most emphatically should not be creating for itself--this is one of the reasons you're having such a hard time arriving at a reusable design.
I am learning Adobe Air and want to get the current selected item in the spinner list I have created, however every time I use selectedItem I keep getting the same value over and over, no matter what option I select. I am trying to make an application for the Playbook and this this my SpinnerList code:
<s:SpinnerListContainer x="10" y="279" width="325" height="266">
<s:SpinnerList width="69" height="100%" enabled="true" labelField="data" selectedIndex="1" id="From">
<s:ArrayList>
<fx:Object data="Time"></fx:Object>
<fx:Object data="KM"></fx:Object>
<fx:Object data="Miles"></fx:Object>
</s:ArrayList>
</s:SpinnerList>
</s:SpinnerListContainer>
No matter what, 'KM' is always shows as the selected item when it is not. This is what I have in the script tags:
var selected = From.selectedItem;
How can I fix this?
Thank you
Using 4.6 SDK this works for me:
<?xml version="1.0" encoding="utf-8"?>
<s:View title="HomeView"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script>
<![CDATA[
import spark.events.IndexChangeEvent;
protected function From_changeHandler(event : IndexChangeEvent) : void
{
somewhereToDisplaySelected.text = From.selectedItem.data;
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:SpinnerListContainer height="266"
width="325"
x="10"
y="279">
<s:SpinnerList change="From_changeHandler(event)"
enabled="true"
height="100%"
id="From"
labelField="data"
selectedIndex="1"
width="69">
<s:ArrayList>
<fx:Object data="Time">
</fx:Object>
<fx:Object data="KM">
</fx:Object>
<fx:Object data="Miles">
</fx:Object>
</s:ArrayList>
</s:SpinnerList>
</s:SpinnerListContainer>
<s:TextInput id="somewhereToDisplaySelected"/>
</s:View>
The checkboxes are updated correctly when I select one or more datagrid rows but when I select a checkbox for the first time the checkbox does not refresh until the pointer moves out of the datagrid row. How can I fix this?
<?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">
<s:DataGrid id="dg" x="344" y="48" selectionMode="multipleRows" requestedRowCount="4">
<s:columns>
<s:ArrayList>
<s:GridColumn>
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import spark.components.DataGrid;
override public function prepare(hasBeenRecycled:Boolean):void
{
cb.selected = grid.selectionContainsIndex(rowIndex);
}
]]>
</fx:Script>
<s:CheckBox id="cb" label="" horizontalCenter="0"/>
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
<s:GridColumn dataField="dataField1" headerText="Column 1"></s:GridColumn>
<s:GridColumn dataField="dataField2" headerText="Column 2"></s:GridColumn>
<s:GridColumn dataField="dataField3" headerText="Column 3"></s:GridColumn>
</s:ArrayList>
</s:columns>
<s:typicalItem>
<fx:Object dataField1="Sample Data" dataField2="Sample Data" dataField3="Sample Data"></fx:Object>
</s:typicalItem>
<s:ArrayList>
<fx:Object dataField1="data1" dataField2="data1" dataField3="data1"></fx:Object>
<fx:Object dataField1="data2" dataField2="data2" dataField3="data2"></fx:Object>
<fx:Object dataField1="data3" dataField2="data3" dataField3="data3"></fx:Object>
<fx:Object dataField1="data4" dataField2="data4" dataField3="data4"></fx:Object>
</s:ArrayList>
</s:DataGrid>
</s:Application>
Change this:
<s:CheckBox id="cb" label="" horizontalCenter="0"/>
To:
<s:CheckBox id="cb" label="" horizontalCenter="0" enabled="false"/>
I just recommend you to use enabled property.
I think the dispatched "click event" from both checkbox and gridColumn, then returned function prevented each other.
If enabled property set false, your click event dispathed on only gridColumn then using cb.selected=grid.selectionContainsIndex(rowIndex); correctly occupy if you want to show checkbox enabled, you can use CSS or skinclass
The easiest way is to just use the renders selected state as suggested by RIAStar. However if you are using global skinning doing the custom drawing does not work, use either a skinnable container or as I have just put the checkbox in there but dont make it respond to mouse commands. For the multi selection, as long as your grid is setup to multiple rows or columns you can simply capture the mouse events and force the ctrl key which makes them handle multi select.
<s:GridItemRenderer
mouseDown="mouseDownHandler(event)"
mouseUp="mouseUpHandler(event)"
buttonMode="true"
mouseChildren="false"
useHandCursor="true"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
>
<s:states>
<s:State name="normal"/>
<s:State name="selected"/>
</s:states>
<fx:Script>
<![CDATA[
protected function mouseUpHandler(event:MouseEvent):void {
event.ctrlKey = true;
}
protected function mouseDownHandler(event:MouseEvent):void {
event.ctrlKey = true;
}
]]>
</fx:Script>
<s:CheckBox
id="check"
selected.normal="false"
selected.selected="true"
horizontalCenter="0"
verticalCenter="0"
/>
</s:GridItemRenderer>
I ended up simply doing this:
<s:GridColumn dataField="myBoolean" headerText="Returned" width="55">
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer>
<s:CheckBox id="cb1" selected="{data.myBoolean}" change="{data.myBoolean=cb1.selected}"/>
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
You can just fake the CheckBox by drawing a CheckBox shape in the ItemRenderer and use the states to show the tick.
<s:GridItemRenderer>
<s:states>
<s:State name="normal" />
<s:State name="hovered" />
<s:State name="selected" />
</s:states>
<!-- checkbox graphics -->
<s:Group width="16" height="16" horizontalCenter="0" verticalCenter="0">
<s:Rect left="0" right="0" top="0" bottom="0">
<s:fill>
<s:SolidColor color="0xffffff" />
</s:fill>
<s:stroke>
<s:SolidColorStroke color="0xa9aeb2" />
</s:stroke>
</s:Rect>
<!-- tick, only shown when selected -->
<s:Rect includeIn="selected" width="8" height="8" horizontalCenter="0" verticalCenter="0">
<s:fill>
<s:SolidColor color="0x90b40c" />
</s:fill>
</s:Rect>
</s:Group>
</s:GridItemRenderer>
This is a simplified graphic for a checkbox, but you can go grab the code from the spark CheckBoxSkin and copy/paste it in the itemrenderer. Just might have to change some state names.
This will not deselect a single row though when you hit the CheckBox of an already selected row, unless you hold the CTRL key down. That's the default behavior of the DataGrid component. I'm afraid you'll have to create your own subclass of DataGrid if you want to prevent that behavior.
Another important thing to know: setting the selected property on the itemrenderers doesn't change the selectIndices of the DataGrid. Hence on the next commitProperties() cycle the value you set in the renderer will be overridden by the DataGrid.
Old answer: (before edit)
The ItemRenderer class (and thus the GridItemRenderer class too) has a selected property.
So you could bind the checkboxes selected property to the itemrenders, like so:
<s:CheckBox selected="{selected}" horizontalCenter="0" />
You'd have to create a separate ItemRenderer class for that to work though instead of an inline one.
If you absolutely want to go the inline way you can always override the selected setter.
<s:GridItemRenderer>
<fx:Script>
<![CDATA[
override public function set selected(value:Boolean):void {
super.selected = cb.selected = value;
}
]]>
</fx:Script>
<s:CheckBox id="cb" horizontalCenter="0"/>
</s:GridItemRenderer>
How can we navigate within an itemRenderer?
For example, in Views we use the View.navigator (ViewNavigator) to push and pop views, there is no such feature in ItemRenderer.
Navigation within a View (Easy)
<s:View>
<s:HGroup >
<s:Button label="Questionnaire" click="navigator.pushView(view.QuestionnaireCategory1View)"/>
</s:HGroup>
Navigation within a Item Renderer (Impossible?)
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
autoDrawBackground="true" height="56">
<s:HGroup>
<s:Button text="Button" click="?????????"/>
</s:HGroup>
</s:ItemRenderer>
You want to use bubbling events to catch when the user interacts with an item renderer.
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<s:HGroup>
<s:Button text="Button" click="dispatchEvent(new Event('buttonClicked', true));"/>
</s:HGroup>
</s:ItemRenderer>
Then when do this with whatever is using your item renderer:
<DataGroup id="group" itemRenderer="YourItemRenderer" dataProvider="{someData}" creationComplete="group.addEventListener('buttonClick', someHandlerFunction);" />
And then within your handler function, do whatever action you wanted to do. In this case, I'm adding the event listener on creation complete of the DataGroup, but you can add it to the creation complete event of the main container. This way you keep your item renderer decoupled and reusable, as well as using proper software practices (data in, events out).
In when you create your itemRenderer
<comp:MyItemRenderer navigator="{navigator}"/>
In your itemRenderer (here call MyItemRenderer)
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
autoDrawBackground="true" height="56">
<fx:Script>
<![CDATA[
import spark.components.ViewNavigator;
private var _navigator:ViewNavigator;
public function set navigator(value:ViewNavigator):void
{
_navigator = value;
}
]]>
</fx:Script>
<s:HGroup>
<s:Button label="Button" click="{_navigator.pushView(view.QuestionnaireCategory1View)}"/>
</s:HGroup>
I have a TextInput inside a spark Item Renderer. I need to undo some behavior in a library I'm using by stopPropagation of the mouseDown and mouseUp event for the TextInput. However, I would like the TextInput itself to handle such events normally - otherwise the caret to cursor transitions don't seem to be properly handled. I'm ashamed to admit, I'm not sure how to do this - seems simple but I have been stuck on it for some time.
thank you!
Edit: ok, here's some code to explain what's going on (although it's completely unrelated from what I'm doing, so it's not an exact depiction of my specific situation). As I mentioned above I need to be able to stop the propagation of mouseDown and mouseUp from the TextInput to a component up the food chain - event.stopPropagation() in mouseDown and mouseUp for the TextInput does the trick. However, it messes up the caret / cursor handling for the TextInput itself. Try the code below with or without the event.stopPropagation() and you should see what I mean.
Main
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/19/using-a-custom-item-renderer-function-with-the-fxlist-control-in-flex-gumbo/ -->
<s:Application name="Spark_List_itemRendererFunction_test"
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.core.ClassFactory;
import spark.skins.spark.DefaultItemRenderer;
private function list_itemRendererFunc(item:Object):ClassFactory {
var cla:Class = DefaultItemRenderer;
switch (item.type) {
case "employee":
case "manager":
cla = EmployeeItemRenderer;
break;
default:
break;
}
return new ClassFactory(cla);
}
]]>
</fx:Script>
<s:List id="list"
labelField="name"
itemRendererFunction="list_itemRendererFunc"
horizontalCenter="0" verticalCenter="0">
<s:dataProvider>
<s:ArrayList>
<fx:Object name="Employee 1" type="employee" />
<fx:Object name="Employee 2" type="employee" />
<fx:Object name="Employee 3" type="employee" />
<fx:Object name="Employee 4" type="employee" />
<fx:Object name="Manager 1" type="manager" />
<fx:Object name="Manager 2" type="manager" />
<fx:Object name="Employee 5" type="employee" />
<fx:Object name="Manager 3" type="manager" />
<fx:Object name="Consultant 1" type="consultant" />
</s:ArrayList>
</s:dataProvider>
</s:List>
</s:Application>
and EmployeeItemRenderer.mxml
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/19/using-a-custom-item-renderer-function-with-the-fxlist-control-in-flex-gumbo/ -->
<s:ItemRenderer name="EmployeeItemRenderer"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="true">
<fx:Script>
<![CDATA[
protected function TI_mouseDownHandler(event:MouseEvent):void
{
event.stopPropagation();
}
protected function TI_mouseUpHandler(event:MouseEvent):void
{
event.stopPropagation();
}
]]>
</fx:Script>
<s:HGroup>
<s:Label id="labelDisplay" left="4" right="4" top="4" bottom="4" />
<s:TextInput id="TI" mouseDown="TI_mouseDownHandler(event)" mouseUp="TI_mouseUpHandler(event)"/>
</s:HGroup>
</s:ItemRenderer>
Can you post what you've tried so far?
I think all you would need to do is register listeners for the mouseDown, mouseUp, and click events and then use http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/events/Event.html#stopPropagation() to stop the events from bubbling further from the currentTarget out to the parents, stopImmediatePropagation would stop the event from triggering listeners on the current object.
Shaun
PS I'll edit if you post some code and I can clarify.
OK, Sounds like this is only an issue for Flex 4.01 (thank you JAX). In such case I got what I wanted by stopping propagation on the mousedown event but not on the mouseUp. This is a very specific case that applies to my code, so I'm not sure if it'll be really useful for anyone else. I guess the interesting lesson for me, here, is that mouseUp is the event that is related to caret / system cursor management.