PDA

View Full Version : ArrayCollection and Bindable


Mortimer Jazz
08-24-2006, 02:52 PM
Just a thought.
If I wanted to create a bindable ArrayCollection I would normally do it inside script tags. For example:

<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var myAC:ArrayCollection = new ArrayCollection([{name: 'Pen', price: '10'}]);

//button calls this method
private function addToArrayCollection():void{
trace("ARRAY: " + myAC);
myAC.addItem({name:"Ruler", price:"20"});
}
]]>
</mx:Script>
<mx:DataGrid id="myGrid" dataProvider="{myAC}" />
...but what if I declare an array collection using MXML tags. How do I (can I) make it bindable? If I replace myAC with the following, the datagrid doesn't update but the object does get added to the ArrayCollection:


<mx:Script>
<![CDATA[
//button calls this method
private function addToArrayCollection():void{
trace("ARRAY: " + myAC);
myAC.addItem({name:"Ruler", price:"20"});
}
]]>
</mx:Script>

<mx:ArrayCollection id="myAC">
<mx:Object>
<mx:Name>Pen</mx:Name>
<mx:Price>10</mx:Price>
</mx:Object>
</mx:ArrayCollection>

<mx:DataGrid id="myGrid" dataProvider="{myAC}" />

hangalot
08-24-2006, 04:29 PM
hey mate

visiting paul this weekend in NY :)

anyway, have ya checked out the enableAutoUpdate method?

Mortimer Jazz
08-25-2006, 06:46 AM
hey mate
visiting paul this weekend in NY :)
anyway, have ya checked out the enableAutoUpdate method?

Excellent, tell him I say Hi, and I hope you both have a great time :)

Ah, no I haven't - I will do so. Cheers.
Give us a shout when you're back in the UK - should pop down to Bristol/Bath, wicked place.

Mortimer Jazz
08-25-2006, 07:11 AM
Ah, there's a separate binding tag
<mx:Binding source="myAC" destination="myGrid.dataProvider" />

hangalot
08-25-2006, 11:39 AM
yes. the binding tag is a one way binding.so to have it update 2 ways just create 2 of 'em.

yeah i think i am speaking in london next month, tink asked me too so i suppose i am :)

Mortimer Jazz
08-25-2006, 12:01 PM
Speaking of which, do you have any tips for setting up a first Flex project which is likely to be quite sizable? -

I've not used Cairngorm or Arp before (not sure how beneficial it would be to use an architectural framework until I've actually got a little more Flex experience under my belt - worried it could be counter productive for me at this stage)

My instinct is to totally separate AS from mxml, so I have been looking for examples and just stumbled across an interesting article here (http://www.zeuslabs.us/archives/87/separating-layout-from-style-and-functionality/).

I wondered if you had any tips for a Flex2 project?

hangalot
08-25-2006, 01:02 PM
your instinct is not incorrect but the approach of taking all as out of mxml is extreme. you should still have code in each mxml componentm but the code should be realted to that component.

let me expand a bit more on this.
we advise our clients and the teams we work with to use mxml as the presentation tier, so inregards to the MVC pattern the only bit that should be mxml is the View part of it. all tasks related to this view would then be inside the mxml component.

i give you an example (its flex 1.5, but that makes no difference- just what i had at hand)


<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.macromedia.com/2003/mxml"
height="340"
showEffect="__show"
hideEffect="__hide"
>
<mx:Script>
<![CDATA[
import com.someClient.someApp.model.contentItems.IconCont entItem;


[Bindable]
private var __model:IconContentItem;
[Bindable]
private var __tileWidth:Number;
[Bindable]
private var __tileHeight:Number;

[Bindable]
public function set model(model:IconContentItem):Void
{
if (__model != model)
{
__model = model;
setTileSize();
}

}
public function get model():Object
{
return __model;
}
private function setTileSize():Void{
if (__model.icons.length < 2){
__tileWidth = 280;
}else{
__tileWidth = 600;
}
__tileHeight = (((__model.icons.length) + (__model.icons.length)%2)/2)*170;

}

]]>
</mx:Script>
<mx:Tile width="{__tileWidth}"
height="{__tileHeight}"
verticalGap="5"
horizontalGap="20"
hScrollPolicy="off"
vScrollPolicy="off">
<mx:Repeater id="rpt"
dataProvider="{__model.icons}"
>

<c:IconPod
iconText="{rpt.currentItem.text}"
thumbnailSource="{rpt.currentItem.thumbnailSource}"
action="{rpt.currentItem.action}"
buttons="{rpt.currentItem.buttons}"
links="{rpt.currentItem.links}"
height="100%"
/>
</mx:Repeater>
</mx:Tile>
<mx:Effect>
<mx:Move name="__show" xFrom="650" xTo="0" duration="500" suspendBackgroundProcessing="true" />
<mx:Move name="__hide" xFrom="0" xTo="-650" duration="500" suspendBackgroundProcessing="true"/>
</mx:Effect>
</mx:HBox>


notice how this view has no code in it that is not related to the view layer, this binding models to ui and ui presentation

this i consider good practice. i can say much much more on the topic, but i think this is a conversation not a forum post.

as to frameworks, i would say teaching yourself to architect properly will allow you to use frameworks properly, and there is no nirvana in frameworks.

we have our qualms about both arp and cairmgorn, and we have stolen many things from them both as well. as our apps tend to become big monoliths we tend to architect on a project by project basis, whilst keeping certain core concepts.

i know that sounds vague, but this is a huge topic. i would honestly recomend not to start using any frameworks (ok someone shoot me now)

btw i will be speaking about databinding and the flex framework next month.

Mortimer Jazz
08-29-2006, 05:23 PM
Cheers, that's most helpful.
Yeah, I guess the mxml is getting compiled in to a single class anyway, so it's what would be done in Flash :]


Can I just ask one more quick question, regarding binding...
Looking through the Adobe examples I've seen a couple of instances where they've created a simple component with a public property (made bindable), and hardcoded a value somewhere else. For example, 'gripTip' here:

<productsView:Grip id="filterGrip" gripIcon="@Embed('/assets/icon_magnifier.png')"
gripTip="Show filter panel" click="currentState = 'showFilter'"/>


//INSIDE THE COMPONENT----------------------------------------

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="17" height="100%"
paddingTop="10" horizontalAlign="center">
<mx:Script>
<![CDATA[
[Bindable]
public var gripTip:String;

[Bindable]
public var gripIcon:Class;
]]>
</mx:Script>

<mx:Image source="{gripIcon}" />
<mx:Image source="@Embed('/assets/grip.png')" toolTip="{gripTip}" />
</mx:VBox>


Ignoring the lack of getter/setter, some of these values are unlikely to ever change, so is there really any need to make those properties bindable? When I remove the meta tag and test (locally) it all still works, so I'm wondering whether there is another reason for making it bindable?

hangalot
08-29-2006, 07:01 PM
well if it ain't going to change then there is no point in binding it. that said however, unless its declared as a const you can always change it programatically, which would illustrate binding.

the adobe examples are at times to simplified IMO, but thats par for the course i assume.
if you need some flex 2 examples i can scratch around, but it will take a few days while i get them to work in isolation (anyway have to do this for my talk)

Mortimer Jazz
08-30-2006, 07:49 AM
K. Yeah I've seen that kind of thing in quite a few examples, and, if it wasn't there to indicate that the value might change, I wanted to make sure in wasn't there to catch some other caveat like delayed instantiation of values.

The example I gave was from the Flex Store. Shouldn't really have required over-simplification in that case.
Cheers for clearing that up:]

Examples - that would be great as I'm not going to be able to make it up to London for the next MMUG.