Below are some snippets.
Tracy
When working with Repeater, I advise creating a custom component that
you will repeat, and pass it the entire "currentItem", In the component,
implement a "setter" function to receive the currentItem data.
Now, in the component, you can code normally, binding to the data as you
wish, without the hard to read currentItem references. You also avoid
the binding warnings without the cast/conversion because the binding
source is a true XML object.
And, you can dispatch events normally. In the event handler, you can
reference the component via the event.target property, and thus get a
direct reference to the dataProvider item. This is easier to write and
read than having to use getRepeaterItem().
Here are some code snippets:
In the main app or component (note how "clean" and readable this is):
<mx:Application
<mx:VBox ...>
<mx:Repeater id="rp" dataProvider="{_xmlData}" ...>
<mycomp:MyRepeatedComponent xmlItem="{rp.currentItem}" .../>
</mx:Repeater
</mx:VBox>
And in the component, MyRepeatedComponent.mxml:
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox ...
<mx:Script><![CDATA[
[Bindable]private var _xmlItem:XML;
public function set xmlData(xml:XML):void
{
_xmlItem = xml;
//do any special, non-bound ui stuff you want
}//
]]></mx:Script>
<!-- Now declare the Item UI -->
<mx:Text id="lbDescription" text="[EMAIL PROTECTED]"
width="100%" height="100%" />
Goal: Display a list of items using a complex display for each item, and
have each of those items behave like a menu element and respond to a
click anywhere on the item by running a handler function.
One solution is to use a Repeater with a custom component
In the main app or component, declare the Repeater, and the click
handler function.
<mx:Application ...
<mx:Script><![CDATA[
import MyRepeaterItem;
...
private function onRPItemClick(oEvent:Event):void
{
var xmlItem:XML = XML(oEvent.target);
}//onRPItemClick
]]></mx:Script>
<mx:VBox ...>
<mx:Repeater id="rp" dataProvider="{_xmlData}" ...>
<!-- Note we pass in the entire currentItem, and define a click
handler -->
<MyRepeaterItem xmlItem="{rp.currentItem}"
itemClick="onRPItemClick(event)" .../>
</mx:Repeater
</mx:VBox>
</mx:Application>
And in the component, MyRepeaterItem.mxml:
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox mouseChildren="false" buttonMode="true" click="onClick(event)"
>
<!-- The metadata tag below allows us to define an itemClick handler
in mxml, as in the code above -->
<mx:Metadata>
[Event(name="itemClick", type="flash.events.Event")]
</mx:Metadata>
<mx:Script><![CDATA[
[Bindable]private var _xmlItem:XML;
/** Setter function */
public function set xmlItem(xml:XML):void
{
_xmlItem = xml;
//do any special, non-bound ui stuff you want
}//set xmlItem
/** Getter function */
public function get xmlItem():XML
{
return _xmlItem;
}//get xmlItem
/** Outer VBox Click handler function */
private function onClick():void
{
dispatchEvent(new Event("itemClick",false); //we do not need/want
this event to bubble
}//onClick
]]></mx:Script>
<!-- Now declare the Item UI -->
<mx:Text id="lbDescription" text="[EMAIL PROTECTED]"
width="100%" height="100%" />
</mx:HBox>
From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of Merrill, Jason
Sent: Tuesday, February 12, 2008 2:24 PM
To: flexcoders@yahoogroups.com
Subject: RE: [flexcoders] Databinding in component
Thanks Tracy, I'll try that route.
Jason Merrill
Bank of America
GT&O L&LD Solutions Design & Development
eTools & Multimedia
Bank of America Flash Platform Developer Community
From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of Tracy Spratt
Sent: Tuesday, February 12, 2008 2:18 PM
To: flexcoders@yahoogroups.com
Subject: RE: [flexcoders] Databinding in component
Yes, when repeater instantiates components, it creates a array of ids
for each specific id, so each mySlider has an id mySlider[n] where n is
the index of the item.
The cleanest way to deal with this is to create a custom component
containing all the components and repeat that component. Pass in a
reference to the entire currentItem into a typed setter function.
You will find that doing this simplifies repeater work immensely,
especially when you need to dispatch an event and access the
dataProvider item in the handler. You will not need getRepeaterItem().
Tracy
From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of Merrill, Jason
Sent: Tuesday, February 12, 2008 12:46 PM
To: flexcoders@yahoogroups.com
Subject: RE: [flexcoders] Databinding in component
In this test case below, why do I get a warning message for the mx:Label
that databinding may not be able to detect changes in the HSlider? I'm
just trying to create labels that always shows the value of the
respective slider. Since this is in a repeater, is it a conflict with
the way I assign id to the slider? What's the preferred way to do this?
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml";
layout="absolute" applicationComplete="init()">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var _dp:ArrayCollection = new ArrayCollection();
private function init():void
{
_dp.addItem(1)
_dp.addItem(2)
_dp.addItem(3)
}
]]>
</mx:Script>
<mx:Panel>
<mx:Repeater id="sliderRepeater" dataProvider="{_dp}" >
<mx:VBox>
<mx:HSlider id="mySlider"/>
<mx:Label text="{mySlider.value}"/>
</mx:VBox>
</mx:Repeater>
</mx:Panel>
</mx:Application>
Jason Merrill
Bank of America
GT&O L&LD Solutions Design & Development
eTools & Multimedia
Bank of America Flash Platform Developer Community
