How can I add an item to a Flex 4 <s:List> component that has an item renderer? Here is the code sample of the list that I would like to append data onto:
<s:List contentBackgroundAlpha="0" borderVisible="false" id="reviews"
itemRenderer="renderers.ReviewRenderer" dataProvider="{data}"
top="10" minHeight="1">
<s:layout>
<s:VerticalLayout useVirtualLayout="false" requestedMinRowCount="1" gap="35"/>
</s:layout>
</s:List>
The data variable that the <s:List> is bound to will have the exact same properties as the object that I would like to append on the list.
Please let me know if I can provide any more details.
Thank you for your time.
How can I add an item to a Flex 4 component that has an item
renderer?
You wouldn't. You would add an item to the List's dataProvider. Then the list decides how to display the elements in the dataProvider based on other factors, such as the layout and the itemRenderer. For visual purposes, one way to view the list is as a collection of itemRenderers. There is one itemRenderer for each displayed item in the list.
In most cases there will be fewer items displayed in the list than there are items in the dataProvider. itemRenderers are re-used as the list is scrolled through, and the data property on the itemRenderer instance is modified.
So, if you want to know how to add an item to a List's dataProvider, it depends on the dataProvider type. Assuming an ArrayCollection, you should do something like this:
this.data.addItem(myNewItem);
Related
I have a Flex HorizontalList like so:
<mx:HorizontalList id="myList" width="1462" height="878" columnCount="3" rowHeight="475" columnWidth="350" dataProvider="{floorPlans}" itemRenderer="FloorplanItems">
</mx:HorizontalList>
I am trying to set 3 columns per a row, I thought columnCount would do it, but either its not working and or is not doing what I thought it would be doing.
How can I set 3 columns per a row?
mx:HorizontalList is meant to list items in one row. The columnCount property is used to define the number of columns appearing without a need to scroll.
I suggest that you use Spark List "s:List" instead and define tile layout inside it in addition to specifying item renderer width that fits your needs.
<s:List id="addressesList" width="100%" height="100%" itemRenderer="FloorplanItems">
<s:layout>
<s:TileLayout id="tileLayout" horizontalAlign="justify" columnAlign="justifyUsingWidth"/>
</s:layout>
</s:List>
Hope this helps,
goodluck.
I have a situation where I want to use databinding from an ArrayCollection to populate text fields in a Flex view.
The ArrayCollection is populated from an SQL Result object. I store the ArrayColelction in my model class using getters and setters like this:
private var _monthlyData:ArrayCollection;
public function set monthlyData(value:ArrayCollection):void{
_monthlyData = value;
}
[Bindable]
public function get monthlyData():ArrayCollection{
return _monthlyData;
}
I use the monthlyData as a dataprovider for a list etc which works fine. I also need to use properties at certain indexs in this collection as text field strings.
When the text field text properties are set I don’t neccesarily have the monthlyData arrayCollection populated yet.
The text fields are set in another outside class with has a singleton reference to this model so I set the fields like so at the moment:
textField.text = _model.monthlyData.getItemAt(3).Month;
I want to setup binding to the array collection instead of just using this assignment method so that when that item in the array is refreshed or the entire arrayCollection is populated or updated , it will update the textField text.
I’m having trouble getting the binding to work.
I’m using bindageTools at the moment but have been also using the built in as3 BindingUtils to little effect.
I can do the following which sets the initial text property correctly, but it wont update when the ArrayCollection changes:
Bind.fromProperty(_model.monthlyData.getItemAt(3),"Month").toProperty(textField, "text");
So if someone could please point me in the right direction as to which way is best to get the binding going in pure AS3 no MXML, I’d really appreciate it.
Cheers
Marco
From the code you provide, I can see that monthlyData is bindable, which is fine. I'll assume that _model is bindable too.
However the getItemAt() method is not bindable (it will not dispatch propertychange events when items change positions in the collection), hence the text property of the text field will not be updated.
What you can do is something like this:
[Bindable]
public var selectedDate3:MyDate;
<s:TextInput id="myTextInput" text="{selectedDate3.month}" />
or the AS equivalent (why you want to make things hard on yourself is beyond me though)
BindingUtils.bindProperty(myTextInput, "text", selectedDate3, "month");
and then programmatically update selectedDate3:
_model.monthlyData.addEventListener(CollectionEvent.COLLECTION_CHANGE, updateSelected);
private function updateSelected(event:CollectionEvent):void {
selectedDate3 = _model.monthlyData.getItemAt(3);
}
Note that the month property of MyDate must also be bindable.
You mention that these fields are in a VGroup. I'm guessing you want to display a top 3 or something. This is still a list. It would be much easier and cleaner to do this with a List or DataGroup and simply filter the ArrayCollection to only display the first 3 items (or whatever rule for the items to be displayed), or configure the DataGroup to display only three items (it has no scrollbar anyway).
Our app contacts the server, and get a json based array, each item has:
First_Name
Last_Name
Image_Url
So, how to use the item renderer so that we can use custom data template to view name and image?
Also, can we have access to the json item being rendered from inside the renderer code?
Any examples would be highly appreciated.
http://help.adobe.com/en_US/flex/using/WS77c1dbb1bd80d3836ecbb5ec129ec77b1e1-8000.html
just above the 'Controlling the background display of an item renderer' section, there is a custom itemrenderer example, you can use it.
Find below link to add custom item renderer
http://www.adobe.com/devnet/flex/videotraining/exercises/ex4_03.html
I'm new to flex/flash builder, i need to read in data from a text document, then slice it into pieces i set out in my custom class.
all of this so far worked
var theCustomer:Customer=new Customer(name,address,phoneNo,comment,custNo);
custArray.addItem(theCustomer);
So now what i want to do is display only the name from each entry of the array into a combobox - and then on close it will display all the details into a list box
If i just bind the custArray to the combobox it displays name:address:phoneNo:comment:custNo as i set it out, but like i said i want only the name so how do i separate the name from each Customer entry in the array ??
Any help you be awesome and thanks in advance !!!
If I'm understanding your question correctly, I think you want to set the labelField property on the combobox. This specifies the field in the source data objects to use in the label.
<s:ComboBox dataProvider="{custArray}" labelField="name"/>
The ComboBox has several ways to specify what it should use as the "label" for each item in the dataProvider:
By default, if the elements in the dataProvider has a property named label, and that property contains a String it will display that value.
ComboBox has a labelField property that you can use to tell it where to find the "label" for each item. In your case, you could set the labelField to "name"
ComboBox has a labelFunction property that allows you to use a function (that you write) to specify what text should be displayed for each item.
I suggest using the the labelField, as that seems the most straight forward in this case:
<s:ComboBox dataProvider="{custArray}" labelField="name" />
I work with AIR.
I have to window, one with list ( a glossary) and another with datagrid and editable cells.
The goal is to drag item on list and drop it on cursor position on itemEditor (datagrid).
I don't know how to do that.
This below the code I use to do the same action not in the datagrid but on a textarea what is on the same datagrid window.
// On 1st window (glossary)
<s:List dataProvider="{DP_GlossList2}" id="list2"
labelField="glNom"
dragEnabled="true"
dropEnabled="true"
dragMoveEnabled="true"
click="list2_clickHandler(event)"
height="60%" width="100%"/>
// on second window : textarea and datagrid
// drag drop
protected function retTTAfaire_dragDropHandler(event:DragEvent):void
{
retTTAfaire.text = retTTAfaire.text.substring(0,retTTAfaire.selectionAnchorPosition)+ " "+event.dragSource.dataForFormat("itemsByIndex")[0].glNom+
" "+retTTAfaire.text.substring(retTTAfaire.selectionAnchorPosition+1);
}
protected function retTTAfaire_dragEnterHandler(event:DragEvent):void
{
DragManager.acceptDragDrop(spark.components.TextArea(event.target));
}
Please, help me.
Thanks
I don't have an exact answer, but one area to investigate is using the getObjectsUnderPoint() method (from DisplayObjectContainer). Using a point - from the local coordinate system from the Drag/Mouse event. This will get you looking at the "right" branch of the display tree.
I think your hard part to figure out is knowing exactly which element you want to interact with - in this case the item editor. When iterating your suspect list, you'll want to compare it against an interface that the ItemEditor (IGridItemRenderer) is known to have but not other objects.
Also depending on what reference the mouseX/mouseY coordinates lie in, you'll most likely need to convert it to the same coordinate system that the item editor is in - in this case Editors are handled by the PopupManager (or the SystemManager) - or should be if the Flex SDK team followed the same paradigm with spark as they did with halo - but I haven't verified this.
I can't tell from the wording of your question, but if you are trying to allow items to be placed after the item editor is opened - this will get very difficult because of focus management.