ArrayCollection Objects to String - Problems with "for each" loop - apache-flex

This is related to other question. But never mind it. I've fixed part of it.
I have a DataGrid, its data provider is a ArrayCollection, and i want it to parse all itens in it (Object Type) to a String.
For that I've done a "for each" loop, it manages to get the Object and its values, but if i have more that one object it only gets the last object, don't know why.
First i will show how these items are added to the ArrayCollection, that way you will understand the rest much easily.
In the Main Application i have the ArrayCollection:
<mx:ArrayCollection id="collection">
Then in other Component there is a Add Item Menu, and when you add a item:
private function fazerEncomenda():void
{
var novoitem:Object;
novoitem = new Object();
novoitem.id = "consumivel"+getProdInfo.lastResult.consumivel.id;
novoitem.tinteiroid = getProdInfo.lastResult.consumivel.id;
novoitem.label = getProdInfo.lastResult.consumivel.nome;
novoitem.ref = getProdInfo.lastResult.consumivel.refmarca;
novoitem.marca = getProdInfo.lastResult.consumivel.marca;
novoitem.genero = genero.text;
novoitem.quantidade = quantidade.text;
Application.application.collection.addItem(novoitem);
}
Then in another component the DataGrid as its dataProvider Binded to the ArrayCollection
<mx:DataGrid id="compras" x="0" y="0" width="556" dataProvider="{Application.application.collection}" editable="false">
<mx:columns>
<mx:DataGridColumn headerText="ID" dataField="tinteiroid" visible="false"/>
<mx:DataGridColumn headerText="Nome" dataField="label" width="120" />
<mx:DataGridColumn headerText="Ref" dataField="ref" width="100"/>
<mx:DataGridColumn headerText="Marca" dataField="marca" width="100"/>
<mx:DataGridColumn headerText="GĂ©nero" dataField="genero" width="155"/>
<mx:DataGridColumn headerText="Quantidade" dataField="quantidade" width="81"/>
</mx:columns>
</mx:DataGrid>
And when a Button is pressed the function to get all Objects and its values to an String.
And in this function its where it only gets the last item, in the ArrayCollection.
for each (novoitem in compras.dataProvider)
{
finish += "TinteiroID:"+novoitem.tinteiroid+"#TinteiroLABEL:"+novoitem.label+"#TinteiroREF:"+novoitem.ref+"#TinteiroMARCA:"+novoitem.marca+"#TinteiroGENERO:"+novoitem.genero+"#TinteiroQUANTIDADE:"+novoitem.quantidade+"#FIMPROD#";
trace(finish);
}
And of course the Vars used in the function:
private var finish:String;
private var novoitem:Object
As you see in the finish var i used += so it adds it self and the next object. Instead he adds null. And only one null event if there was 3 items before.
Don't know whats the problem with this loop.
Please Help. I'm loosing my mind here.
PS: Sorry for any bad English, its been 3 hours in this. And no progress.
EDIT: Missing Vars Declaration Added

An easier way to do all this (admittedly not with the labels you specified) is to just use ActionScript's built in ObjectUtil.toString method.
You would write something like this:
import mx.utils.ObjectUtil;
public function dumpObj():void {
myTextField.text = ObjectUtil.toString(obj);
}
This should pretty much print out every property of every multiple / nested object you have.
HOWEVER - you should make a fundamental change to your component if you want it to be reusable. You need a getter/setter for your collection. In the component, add this code:
[Bindable]
private var _myCollection:ArrayCollection;
public function set myCollection (data:ArrayCollection) : void {
_myCollection = data;
}
public function get myCollection () : ArrayCollection {
return _myCollection;
}
There are several other ways to do this - look it up if you need something different.
In your datagrid, use the private ArrayCollection variable like this:
<mx:DataGrid id="compras" x="0" y="0" width="556" dataProvider="{_myCollection}" editable="false">
<mx:columns>
<mx:DataGridColumn headerText="ID" dataField="tinteiroid" visible="false"/>
...
In the main application, you can populate your component like this:
<kgtm:myComponent x="0" y="20" myCollection="{queryDataAC}"
And you name your ArrayCollection like this:
<mx:ArrayCollection id="queryDataAC">
in your top level Application code, you define the kgtm namespace, so you can use your custom component, like so:
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:kgtm="com.kgtm.*"
Then put your component in the folder corresponding to this namespace definition.
This all leads to the final object print utility - which you define on the component, as it is the only thing that should know about how to print out it's data.
Define a public function, and get it to print out the private ArrayCollection data, using ObjectUtil or your own method.
public var getLastQueryOutput () : String {
private var output:String = "";
private var len:int = _myCollection.length;
for (var i:int = 0; i <len; i++) {
output = output +
"TinteiroID:"+_myCollection[i].tinteiroid+
"#TinteiroLABEL:"+_myCollection[i].label+
"#TinteiroREF:"+_myCollection[i].ref+
"#TinteiroMARCA:"+_myCollection[i].marca+
"#TinteiroGENERO:"+_myCollection[i].genero+
"#TinteiroQUANTIDADE:"+_myCollection[i].quantidade+
"#FIMPROD#";
}
trace(output);
}
Hopefully this will help. If you name the object correctly as you are putting it into the ArrayCollection, you can again just use ObjectUtil as I stated at the top.
Casp - Check out more of my (and my colleagues) blog entries here

Have you tried ".source" property of your array collection? I'm not sure if for-each loops work on ArrayCollection objects.
e.g.,
for each(novoitem in compras.dataProvider.source) { ... }

have you tried to just use a regular for loop
for (var i:int = 0; i < compras.dataProvider.length; i++) {
novoitem= compras.dataProvider[i];
trace(novoitem); // will output to the console during debugging.
...
}
in any case you shouldn't be looping on the dataProvider you sould be looping on the Application.application.collection

Guys i really want to thank you.
Thanks to your effort Glenn and AndrewB i did it. Once again thanks.
Now i will post the code so that someone with a similar problem can get some help.
Here goes the code to get the Objects and the Itens for each object inside a ArrayCollection.
[Bindable]
private var finish:String = "";
private var novoitem:Object
for (var i:int = 0; i <Application.application.collection.length; i++)
{
novoitem = compras.dataProvider[i];
finish = finish + "TinteiroID:"+novoitem.tinteiroid+"#TinteiroLABEL:"+novoitem.label+"#TinteiroREF:"+novoitem.ref+"#TinteiroMARCA:"+novoitem.marca+"#TinteiroGENERO:"+novoitem.genero+"#TinteiroQUANTIDADE:"+novoitem.quantidade+"#FIMPROD#";
trace(finish);
}
Thanks once again. I wanted to place both your awnsers as correct, but they aren't completely. So I've combined both to this code. And here it is.
I will be signing this answer as correct, but the credit its all yours. I wouldn't have it done if it weren't with you help.
EDIT
This is the code I've used however take a look at the code that "CaspNZ" as posted. Its probably a better and lighter approach in performance.

Related

Using a ComboBox as ItemEditor in Flex 4

I have a simple DataGrid with data. Of one of the columns, I want to use a ComboBox to edit the field, instead of the standard edit box.
How do I do that? I have tried all kind of things I found on the internet, but they all fail in simply updating the value. I'd say it shouldn't be too hard to do this.
I'm actually in the process of doing this myself, and with the spark:DataGrid it actually gets a bit easier than halo - but both follow the same setup / architecture.
Start with:
spark.components.gridClasses.ComboBoxGridItemEditor;
Depending on the nature of your data setup and/or how prolific this kind of editing will be for your application, you can write it inline as most documentation will suggest within a <fx:component>, or simply subclass this (although behind the scenes these are the same thing - the later being much easier to reuse). The data for the combo in my scenario is a sub selection of a bigger parent object, so I chose to make it easier on myself and add an additional property dataField to mimic other renderer / editors - in what actually shows in just the cell itself (when not in editing mode).
A basic setup looks something more or less like this (at least mine does):
public class AccountComboEditor extends ComboBoxGridItemEditor
{
private _dataField:String;
public function AccountComboEditor()
{
super();
//note - typically you wouldn't do "logic" in the view but it's simplified as an example
addEventListener(FlexEvent.CREATION_COMPLETE, onCreationComplete);
}
public function get dataField():String { return _dataField; }
public function set dataField(value:String):void
{
if (_dataField !=value) //dosomeadditionalvalidation();
_dataField = value;
}
override public function prepare():void
{
super.prepare();
if (data && dataField && comboBox) comboBox.labelField = data[dataField];
}
protected function onCreationComplete(event:FlexEvent):void
{
//now setup the dataProvider to your combo box -
//as a simple example mine comse out of a model
dataProvider = model.getCollection();
//this isn't done yet though - now you need a listener on the combo to know
//what item was selected, and then get that data_item (label) back onto this
//editor so it has something to show when the combo itself isn't in
//editor mode
}
}
So the real take away is to setup the labelField of the combobox, either internally in the subclass or externally if you need to expose it as an additional property.
The next part is to use this as part of the mx.core.ClassFactory for the actual data grid. A simple view would look like something similar:
<s:DataGrid>
<fx:Script>
private function getMyEditor(dataField:String):ClassFactory
{
var cf:ClassFactory = new ClassFactory(AccountComboEditor);
cf.properties = {dataField : dataField };
return cf;
}
</fx:Script>
<s:columns>
<mx:ArrayList>
<s:GridColumn itemEditor="{getMyEditor('some_data_property')}" />
</mx:ArrayList>
</s:columns>
</s:DataGrid>
This Creating item renderers... doc will give you more info.
I figured it out. I just wanted a simple drop down box, instead of a text-editing field.
The following code does want I want:
<mx:DataGridColumn dataField="type" headerText="Type" editorDataField="value">
<mx:itemEditor>
<fx:Component>
<mx:ComboBox>
<mx:dataProvider>
<fx:String>Gauge</fx:String>
<fx:String>Graph</fx:String>
<fx:String>Indicator</fx:String>
</mx:dataProvider>
</mx:ComboBox>
</fx:Component>
</mx:itemEditor>
</mx:DataGridColumn>

Is it possible to specify individual fonts in Flex DropDownList?

I have just implemented a dropdownlist of checkboxes taken from this ComboCheck example but made it extend DropDownList instead of ComboBox to provide better functionality that I required. I am attempting to create a DropDownList where some items are bold and non-checkboxes (or can be checkboxes) and others are not.
I have not been able to find anything online about doing this yet and have been trying to figure it out. I am currently using an ArrayCollection as a dataProvider but I think this could possibly be my issue and I should be trying to setup the labels in flex not AS3.
Does anyone know if this is possible? And if so do they have any links that could possibly help point me in the right direction?
Thanks.
EDIT: Code added for the itemRenderer, this worked I just need to specify each item that I want to be bold, though is there a better way to do this in the flex code as opposed to checking for a matching string in the renderer?
public class ComboCheckItemRenderer extends ItemRenderer{
public var item:CheckBox;
public function ComboCheckItemRenderer(){
super();
item = new CheckBox();
item.x = 5;
addElement(item);
item.addEventListener(MouseEvent.CLICK, onClick);
}
private var _data:Object;
[Bindable]override public function set data (value:Object):void {
if (value!=null) {
_data = value;
item.label = value.label;
if(item.label == "item1"){
item.setStyle("color","0x00ff00");
item.setStyle("fontWeight","bold");
}
item.selected = value.selected;
}
}
Edit 2: What I am ultimately trying to do is create a dropdown of checkboxes with data that I obtain from blazeDS that basically has a bunch of group titles and their corresponding sub-elements. I am trying to have the dropdown make the groups be in bold and to the left, and their sub-elements normal font and offset to the right. I also need to know when they are clicked whether it was a group header or sub-element, so that I can add them to an object that I will be sending back to my service to perform a sql query on.
ie.
[ ]**GROUP**
[ ] element
[ ] element
[ ]**GROUP**
[ ] element
What does your data look like? Why aren't you using MXML for this? Why are you overriding set data() as opposed to hooking the dataChange event? You are writing way more code than you need to here.
Lets look at it in a more "Flexy" way. Notice how I am using data binding for everything and conditionally setting the fontWeight based on the data that comes in. Anything more complicated should bust out to a function in the Script tag.
<?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"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="true">
<fx:Script>
<![CDATA[
protected function onClick(event:MouseEvent):void {
}
]]>
</fx:Script>
<s:CheckBox x="5" click="onClick(event)"
label="{data.label}" selected="#{data.selected}"
fontWeight="{data.label == 'item1' ? 'bold' : 'normal'}"/>
</s:ItemRenderer>
In light of your question you added in your edit, I would ask: What criteria are you using? You can put any function in your binding expression, so at a very minimum, you might do something like this:
<fx:Script>
<![CDATA[
private var itemsToBold:Array = ["label1", "label2"];
private function getFontWeight(label):String {
if(itemsToBold.indexOf(label) > 0)
return "bold";
return "normal";
}
]]>
</fx:Script>
<s:CheckBox fontWeight="{getFontWeight(data.label)}"/>

How to programatically select an item in a Flex List after dataProvider is updated?

As I am somewhat new to Flex I may be missing something fundamental here. I have a Spark List container whose dataProvider is bound to a result set coming back from a RemoteObject call. Pretty standard stuff.
<s:List id="list" dataProvider="{model.stuff}" width="100%" height="100%"
selectedIndex="#{selectedSlider.value}"
itemRenderer="{stuffRenderer}">
</s:List>
The selectedIndex is associated with an HSlider, but that is not the problem. My issue is that I would like to automatically select a certain "preferred" element from the list (only initially...to guide the user).
I tried to do that in a creationComplete event but my data hadn't shown up yet...setting selectedIndex didn't work...it was too early.
What's the right way to do this?
private function findAllUsers_resultHandler(e:ResultEvent):void
{
list.dataProvider = new ArrayCollection(e.result as Array);
if(firstTry)
{
list.selectedIndex = 0;
firstTry = false;
}
}
spark.components.List has spark.components.SkinnableDataContainer in its class hierarchy which dispatches a dataProviderChanged event whenever the dataProvider changes. Unfortunatly there is no [Event] metadata in SkinnableDataContainer that allows using this event in MXML. So, you'll need to create your own custom component that extends List.
package
{
import spark.components.List;
[Event(name="dataProviderChanged", type="flash.events.Event")]
public class MyList extends List
{
public function MyList()
{
super();
}
}
}
By using your custom component you can add an event listener for dataProviderChanged and update your selectedIndex accordingly.
<ns1:MyList id="list" dataProvider="{model.stuff}" width="100%" height="100%"
dataProviderChanged="selectedIndex = selectedSlider.value"
selectedIndex="#{selectedSlider.value}"
itemRenderer="{stuffRenderer}">
</ns1:MyList>
BTW: This works with other List-based components (like DropDownList) too.
I believe it should work if you just set the initial value of the slider to the index you want to be selected at the beginning.
Something like this:
<s:List dataProvider="{yourData}" selectedIndex="{hSlider.value}" /> <s:HSlider id="hSlider" minimum="0" maximum="{yourData.length - 1}" stepSize="1" value="theIndexYouWantAsInitial" liveDragging="true" />
That should work.
HTH
FTQuest

Flex 4 . Passing data from Main App to custom component

I havent found quite what I want elsewhere or at least am not accomplished enough to adapt
I'm trying to create a project that shows radio stations with logo, listen button etc
The datasource is an xml file with child tags like 'name','image' and 'listen' for each parent, 'station'.
I access this data via the main application with creationComplete="radioService.send()"
I can then use it on the main app via dataProvider="{radioService.lastResult.stations.station}
However, I want to use the results to populate variables in the custom component in both the components themselves
hard coded examples
mx:Image source="Images/BBC5.gif" id="bbc5Logo" "/>
mx:LinkButton id="bbc5Listen" click="bbc5Listen_clickHandler(event)" />
and in the clickhandler
protected function bbc5Listen_clickHandler(event:MouseEvent):void
{
var url:String = "http://www.bbc.co.uk/iplayer/console/bbc_radio_five_live";
var request:URLRequest = new URLRequest(url);
}
Any help, much appreciated
I done something similar before though I am not sure of what look and feel you wish your app to have but it would be possible to create a Datagrid and bind the datasource to that grid.
Then you can add fields to the datasource like ( img field and use the link in the XML by setting the xpath towards that field) , it would also be possible to create a button and place that in the row of the datagrid for listen.
Obviously this is a slightly different implementation but the same principle applys if you have created a custom component then make sure it makes use of DataSource and DataSource fields which will aquire the data from the right part of the XML. Then it would be possible to map that DataSource field to a String for example.
Hope this helps
You can actually use Custom Events, where you can pass values from your main app to your custom component.
http://www.anujgakhar.com/2009/03/04/flex-passing-data-with-custom-events/
Another approach could be to create Value Objects from your XML and bind your components to these objects, this way you would decouple your components from the XML , which can be handy if at some point in the future, you don't want to use XML, but JSON for instance.
Each Value Object would have the properties defined in your question , i.e , imageSource , id , url etc... and each component would be bound to one Value Object
Edit
Have a look at this video training, it covers data retrieval from an XML , ArrayCollections of ValueObjets etc...
http://www.adobe.com/devnet/flex/videotraining.html
there are two ways to accomplish this:
you should wrap your data structure
from xml source to a [Bindable] actionscript
object (not mandatory, but you can
handle it easier), and bind the array of these data instances (let's say RadioChannel.class) as the dataProvider of your grid. Inside your itemRenderer implementation you can access the current row's RadioChannel instance via the data getter/setter:
RadioChannel.as:
[Bindable]
public class RadioChannel {
private var _name: String;
private var _imageUrl: String;
private var _listenUrl: String;
public function RadioChannel()
{
}
public function get name():String {return _name;}
public function set name(value:String):void {_name = value;}
public function get imageUrl():String {return _imageUrl;}
public function set imageUrl(value:String):void {_imageUrl = value;}
public function get listenUrl():String {return _listenUrl;}
public function set listenUrl(value:String):void {_listenUrl = value;}
public function toString():String
{
return 'RadioChannel ' + name + ' - image: ' + imageUrl +
' | listen at ' + listenUrl;
}
}
RadioList.mxml:
<?xml version="1.0" encoding="utf-8"?>
<mx:DataGrid xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx" dataProvider="{radioChannels}">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
private var _radioChannels:ArrayCollection = new ArrayCollection();
[Bindable]
private function get radioChannels():ArrayCollection {return _radioChannels;}
private function set radioChannels(value:ArrayCollection):void {_radioChannels = value;}
]]>
</fx:Script>
<mx:columns>
<mx:DataGridColumn>
<mx:itemRenderer>
<fx:Component>
<mx:Image source="{data.imageUrl}">
<fx:Script>
<![CDATA[
public override function set data(value:Object):void
{
super.data = value;
trace('current instance: ' + RadioChannel(data).toString());
}
]]>
</fx:Script>
</mx:Image>
</fx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn dataField="name" />
<mx:DataGridColumn>
<mx:itemRenderer>
<fx:Component>
<mx:HBox>
<fx:Script>
<![CDATA[
protected function onLinkClicked(event:MouseEvent):void
{
var currentChannel:RadioChannel = RadioChannel(data);
if (data)
{
var request:URLRequest = new URLRequest(currentChannel.listenUrl);
[...]
}
}
]]>
</fx:Script>
<mx:Button click="onLinkClicked(event)" label="Listen" />
</mx:HBox>
</fx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
The other way is to build up custom
events that deal with an extra
parameter: the url of the channel.
These custom events should cascade back to the list component, where they should be handled.
Since for the second solution you would still need the first's binding as well, i'd choose the first one, and handle the click event locally.
hope this helped.
I think this may be useful, to pass the value from mainApp to custom component you can follow this method.Since you have the value in mainApp,in the custom component you can access the value by using parentDocument object.parentDocument.rootAppVar

Flex Datagrid within repeater - Data bind warning

In my Flex app I am using a repeater to show a report on my database data. On this report the user can "drill-down" on the data to show more detail. In order to make this easier on the eye I have a header label and then a datagrid within the repeater.
Whilst this works perfectly, because the dataprovider for the datagrid comes from an array in the repeaters dataprovider, it is causing the following warning:
Data binding will not be able to detect assignments to "report"
The warning is for this line:
<mx:DataGrid id="dgReport" dataProvider="{rptReport.currentItem.report}" rowCount="{rptReport.currentItem.report.length}">
Below is my code, if anyone has any suggestions for how I can get rid of the warning/do this properly they will be most welcome!
<mx:Script>
<![CDATA[
[Bindable] private var reportProvider;
private function report_Handler(event:ResultEvent):void {
// Temp variables
var currentHeader:String = "";
var previousHeader:String = "";
// Retrieve PHP array
var reportPHP:Array = ArrayUtil.toArray(event.result);
// Create Flex array
var reportFlex:Array = [];
var reportFlex_dataGrid:Array = [];
// Loop through PHP array
for(var i:int = 0; i < reportPHP.length; i++) {
// Retrieve current header
currentHeader = reportPHP[i].header;
// Clear array
if (currentHeader != previousHeader) {
reportFlex_dataGrid = [];
}
reportFlex_dataGrid.push({column1:reportPHP[i].column1, column2:reportPHP[i].column2, column3:reportPHP[i].column3});
}
// Add to repeater array
if (currentHeader != previousHeader) {
// Add to array
reportFlex.push({header:reportPHP[i].header, report:reportFlex_dataGrid});
}
// Store previous headers
previousHeader = reportPHP[i].header;
// Add to combobox data provider
reportProvider = new ArrayCollection(reportFlex);
}
]]>
</mx:Script>
<mx:Repeater id="rptReport" dataProvider="{reportProvider}">
<mx:VBox>
<mx:Spacer height="5"/>
<mx:Label id="lblHeader" text="{rptReport.currentItem.header}"/>
<mx:DataGrid id="dgReport" dataProvider="{rptReport.currentItem.report}" rowCount="{rptReport.currentItem.report.length}">
<mx:columns>
<mx:DataGridColumn headerText="Column1" dataField="column1"/>
<mx:DataGridColumn headerText="Column2" dataField="column2"/>
<mx:DataGridColumn headerText="Column3" dataField="column3"/>
</mx:columns>
</mx:DataGrid>
</mx:VBox>
</mx:Repeater>
Data binding will not be able to detect assignments to "report"
Your dataProvider is rptReport.currentItem.report. Of this, rptReport, being an mxml element, is Bindable. The currentItem property of the Repeater component is also declared to be Bindable. The report property of the current item is not bindable - current item itself is just an object. Through this warning Flex is saying that if you alter the report of an already assigned object to something else, it won't be automatically reflected in the data grid.
In most cases you can safely ignore this type of warnings.
When you say x="{a.b.c.d}" in mxml, the guarantee is that flex will detect changes made to any of the four items in the chain (a, b, c and d) and update the value of x. In other words, x will change when a or a.b or b.c or c.d is changed. For this to work, Flex expects that all those four are declared bindable. If it finds any of these items to be not bindable, it will throw a warning. A property is bindable if it was declared using mxml or if it was declared with the [Bindable] metadata tag in ActionScript.
In most cases, one would be interested only in the changes to a or a.b. In your example, changes happen only when HTTPService is resend, in which case the dataProvider itself will change.
Dude, a little off-topic, but having a grid in a repeater sounds really busy. If you want to have a drill-down, pop it up or put it in a pane that's only visible in that mode.
Visually, the repeater is a pattern which the user can internalize. A grid inside that pattern is a lot harder to deal with. Scrolling the grid vs. scrolling the repeater will likely be frustrating, let alone Tab navigation.
Logistically, you are creating a lot of in-memory UI. I would worry about performance.
Consider using a List with a custom Item renderer instead of a repeater. I still would not put a grid in there, but it's worth the effort.
Cheers

Resources