How to attach symbols from an .swf file in the Actionscript part of the Flex3 file?
I've prepared a simple test case demonstrating my problem. Everything works (there are icons at the 4 buttons, there is a red circle) - except the getDefinitionByName() part.
My target is to attach a symbol from library "dynamically" - i.e. depending at the value of the suit variable at the runtime.
Symbols.as:
package {
public class Symbols {
[Embed('../assets/symbols.swf', symbol='spades')]
public static const SPADES:Class;
[Embed('../assets/symbols.swf', symbol='clubs')]
public static const CLUBS:Class;
[Embed('../assets/symbols.swf', symbol='diamonds')]
public static const DIAMONDS:Class;
[Embed('../assets/symbols.swf', symbol='hearts')]
public static const HEARTS:Class;
}
}
TestCase.mxml:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
creationComplete="onCreationComplete();">
<mx:Script>
<![CDATA[
private function onCreationComplete():void
{
var sprite:Sprite = new Sprite();
var g:Graphics = sprite.graphics;
g.lineStyle(1, 0xFF0000);
g.beginFill(0xFF0000);
g.drawCircle(100, 100, 20);
g.endFill();
spriteHolder.addChild(sprite);
// XXX stuff below not working, can it be fixed?
var suit:String = "SPADES";
var mc:MovieClip = new (getDefinitionByName("Symbols.SPADES") as Class);
spriteHolder.addChild(mc);
}
]]>
</mx:Script>
<mx:VBox width="100%">
<mx:Button label="1" icon="{Symbols.SPADES}" />
<mx:Button label="2" icon="{Symbols.CLUBS}" />
<mx:Button label="3" icon="{Symbols.DIAMONDS}" />
<mx:Button label="4" icon="{Symbols.HEARTS}" />
<mx:UIComponent id="spriteHolder" width="200" height="200"/>
</mx:VBox>
</mx:Application>
just go with Symbols[suit]. object[expression] is equivalent to object.ident if String(expression) evaluates to "ident".
Related
How to chnage progress bar color to green in the following code
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
width="100"
height="100"
creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import flash.net.NetStream;
private var myMic:Microphone;
private var nc:NetConnection;
private function init():void {
initMic("0x19D319");
myMic = Microphone.getMicrophone();
myMic.setSilenceLevel(0);
myMic.rate = 44;
myMic.gain = 100;
//myMic.setUseEchoSuppression(true);
Security.showSettings(SecurityPanel.MICROPHONE);
micLevel.visible = true;
myMic.setLoopBack(true);
addEventListener(Event.ENTER_FRAME, showMicLevel);
if (myMic != null)
{
micLevel.setProgress(myMic.activityLevel, 100);
}
}
private function showMicLevel(event:Event):void{
micLevel.setStyle("barColor", 0xf4b60f);
switch (recordingState){
case "idle" :
micLevel.setProgress(myMic.activityLevel, 100);
break;
case "idle" :
Alert.show("2");
micLevel.setProgress(myMic.activityLevel, 100);
break;
case "playing" :
micLevel.setProgress(ns.time, myDuration);
break;
}
}
private function initMic(myColor:String):void{
micLevel.setStyle("barColor", myColor);
}
]]>
</mx:Script>
<mx:ProgressBar x="0" y="36" mode="manual" id="micLevel" label="" labelPlacement="bottom" width="100" fontSize="10" fontWeight="normal"/>
</mx:Application>
You have the following properties to control the appearance of the progress bar
barColor="undefined"
barSkin="ProgressBarSkin"
borderColor="0xAAB3B3"
color="0x0B333C"
disabledColor="0xAAB3B3"
For more detailed information, refer to the documentation.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:ProgressBar indeterminate="true" width="100%"
label="Ankur Sharma" bottom="10" barColor="#FF0000" trackHeight="15"/>
<mx:ProgressBar indeterminate="true" width="100%" fontWeight="normal"
trackHeight="20" barColor="#333333" verticalGap="0" label="caseable.com"/>
</mx:Application>
hi, Check this progress bar work, may be u'd be luking for this
Ankur
barColor style property must be set to container that contains ProgressBar.
From docs:
This style has no effect on other
components, but can be set on a
container to control the appearance of
all progress bars found within.
I'm trying to implement a binding between some custom-built models and just beginning to dabble with the whole mx.binding.* collection. I tried this simple, stripped down example, but can't get the binding working correctly. Can somebody tell me where I'm going wrong?
// Model
package
{
import flash.events.EventDispatcher;
public class Model extends EventDispatcher
{
private var m_count:uint = 0;
[Bindable]
public function get Count():uint
{
return this.m_count;
}
public function set Count(c:uint):void
{
this.m_count = c;
}
}
}
And this is what the application MXML looks like
// MXML
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:core="*" creationComplete="this.init();">
<mx:Script>
<![CDATA[
import flash.events.Event;
import flash.utils.describeType;
import mx.binding.utils.ChangeWatcher;
[Bindable]
public var model:Model;
public function init():void
{
var _this:Object = this;
this.addEventListener(Event.ENTER_FRAME, function(e:Event):void {
_this.model.Count++;
});
this.model = new Model();
trace(ChangeWatcher.canWatch(this.model, "Count")); // This always returns false for some reason
trace(describeType(this.model));
}
public function UpdateText(s:String):void
{
trace(s);
}
]]>
</mx:Script>
<mx:Text text="{this.model.Count}" creationComplete="trace(this);" />
</mx:WindowedApplication>
Update: I tried an even more bare-bones version as shown below.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="this.m_init();">
<mx:Script>
<![CDATA[
import mx.binding.utils.ChangeWatcher;
[Bindable] public var m:Object = new Object();
public function m_init():void
{
trace(ChangeWatcher.canWatch(this, "m"));
}
]]>
</mx:Script>
<mx:Text text="{this.m}" />
</mx:Application>
Still. Doesn't. Work. ChangeWatcher.canWatch still returns false, although the textfield does display [object Object].
public function init():void
{
this.addEventListener(Event.ENTER_FRAME, increment);
this.model = new Model();
}
public function increment(e:Event):void
{
if(this.model)
this.model.Count++;
}
<mx:Text text="{model.Count}" creationComplete="trace(this);" /-->
i can give u one example of changeWatcher, that may be some help, right now i m working with this, it's helpful,
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init();">
<mx:Style source="../assets/css/scaleCSS.css"/>
<mx:Script>
<![CDATA[
import mx.binding.utils.ChangeWatcher;
import mx.controls.Text;
private var text:Text;
[Bindable]private var ti1mc:int=50;
private function init():void
{
ChangeWatcher.watch(ti1,'text',updateTextti);
ChangeWatcher.watch(ti2,'text',updateTextti);
ChangeWatcher.watch(ti3,'text',updateTextti);
ChangeWatcher.watch(ti4,'text',updateTextti);
ChangeWatcher.watch(ti5,'text',updateTextti);
}
private function updateTextti(event:Event):void
{
var str:String;
str=event.currentTarget.id.slice(2,3);
// trace("str : "+str);
// trace(Canvas(textbox.getChildAt(int(TextInput(event.currentTarget).id.slice(2,3))-1)).id);
Text(Canvas(textbox.getChildAt(int(TextInput(event.currentTarget).id.slice(2,3))-1)).getChildAt(0)).text=event.currentTarget.text;
// trace(Text(Canvas(textbox.getChildAt(int(TextInput(event.currentTarget).id.slice(2,3))-1)).getChildAt(0)).id);
// trace(event.currentTarget.id.slice(2,3));
if(Canvas(textbox.getChildAt(int(TextInput(event.currentTarget).id.slice(2,3))-1)).width>=textbox.width)
event.currentTarget.maxChars=event.currentTarget.length;
else
event.currentTarget.maxChars=50;
}
]]>
</mx:Script>
<mx:Canvas width="80%" height="80%" horizontalCenter="0" verticalCenter="0" borderStyle="solid">
<mx:VBox id="textbox" height="300" width="200" borderStyle="solid" top="50" left="100" horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Canvas id="textcan1" borderStyle="solid" borderColor="#FF0000">
<mx:Text id="text1" fontFamily="Arbeka" styleName="text" rotation="20"/>
</mx:Canvas>
<mx:Canvas id="textcan2" borderStyle="solid" borderColor="#FFFF00">
<mx:Text id="text2" fontFamily="Arbeka" styleName="text" rotation="20"/>
</mx:Canvas>
<mx:Canvas id="textcan3" borderStyle="solid" borderColor="#00FF00">
<mx:Text id="text3" fontFamily="Arbeka" styleName="text" rotation="20"/>
</mx:Canvas>
<mx:Canvas id="textcan4" borderStyle="solid" borderColor="#0000FF">
<mx:Text id="text4" fontFamily="Arbeka" styleName="text" rotation="20"/>
</mx:Canvas>
<mx:Canvas id="textcan5" borderStyle="solid" borderColor="#00FFFF">
<mx:Text id="text5" fontFamily="Arbeka" styleName="text" rotation="20"/>
</mx:Canvas>
</mx:VBox>
<mx:VBox id="textinputbox" height="300" width="200" top="50" right="100" borderStyle="solid" verticalGap="0">
<mx:TextInput id="ti1" width="100%" maxChars="50"/>
<mx:TextInput id="ti2" width="100%" maxChars="50"/>
<mx:TextInput id="ti3" width="100%" maxChars="50"/>
<mx:TextInput id="ti4" width="100%" maxChars="50"/>
<mx:TextInput id="ti5" width="100%" maxChars="50"/>
</mx:VBox>
</mx:Canvas>
</mx:Application>
here ti1(textinput) text property is being watched, if there is a change in to the property, then the handler function(updatetextti) will be called
hope this helps
I removed all files inside the obj folder under the project and the problem seems to have gone away. It might have been that FlashDevelop was using older compiled binaries out of this folder, which made the output go out of sync with the source code.
Evidence to support this lies in two things. Changing the SDK did not affect the output on my own computer, which ruled out any SDK-specific issues. So I created a new project in another IDE on the same computer and copy-pasted the code into that one. This time it worked. That's when I thought it might be the cache and went in and deleted it.
In hindsight, I should have renamed it, and later tried to compile with the old cache in place again. That would have been conclusive.
Hi I am working on a search tool for my website in Flex. I want it to work exactly like the "Spotlight" tool on MAC desktop. "http://www.recipester.org/images/6/66/How_to_Use_Spotlight_to_Search_on_Mac_OS_X_42.png" The link is to an image of spotlight.
I want to create almost the same thing in FLEX.
What I currently have is a "Autocomplete" box, and I get all the data I want in it. Code for the autocomplete is below:
<auto:AutoComplete borderStyle="none" id="txt_friends_search"
textAlign="left" prompt="Search Friends" dataProvider="{all_friends_list}"
allowEditingNewValues="true" allowMultipleSelection="true" allowNewValues="true"
backspaceAction="remove" labelField="label"
autoSelectEnabled="false" matchType="anyPart"
height="23" right="400" top="1" dropDownItemRenderer="{new ClassFactory(weather.index_cloud_global_search_item_renderer)}" />
And my ItemRenderer looks like :
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox
xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%" height="100%"
verticalGap="0" horizontalGap="0"
creationComplete="init()"
verticalScrollPolicy="off" horizontalScrollPolicy="off"
verticalAlign="middle">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.collections.ArrayCollection;
import com.hillelcoren.utils.StringUtils;
import mx.utils.StringUtil;
import mx.events.FlexEvent;
import mx.controls.List;
public function init():void
{
}
]]>
</mx:Script>
<mx:HBox width="100%" verticalGap="0" horizontalGap="0">
<mx:HBox borderThickness="1" width="75" borderStyle="solid" horizontalAlign="left" horizontalScrollPolicy="off">
<mx:Label id="type" text="{data.type}" fontSize="12"/>
</mx:HBox>
<mx:HBox borderThickness="1" width="75" borderStyle="solid" horizontalAlign="left" horizontalScrollPolicy="off">
<!--mx:Label id="nameLabel" text="{data.label}" fontSize="12"/-->
<mx:List id="names" dataProvider="{all}"
</mx:HBox>
</mx:HBox>
<!--mx:Box id="colorBox" borderStyle="solid" width="50" height="25"/-->
<mx:Spacer width="15"/>
This shows the type and label of everything, example:
Friends ABC
Friends XYZ
Messages This is the message
Messages example for messages
Files filename1
Files filename123
I believe you get my point there.
But what I want to create is something like:
Friends ABC
XYZ
Messages This is the message
example for messages
Files filename1
filename123
MoreFiles
Can someone plz help me in this.
I actually have no idea how to move forward in this.
Let me know if you want more clarification on anything.
Regards
Zeeshan
Since you're offering a bounty, I'll submit a different answer (as the previous one is technically valid).
Step #1: Download the Adobe Autocomplete Component integrate the class into your project.
Step #2: Create a new component that is derived from AutoComplete (I called mine SpotlightField.mxml)
<?xml version="1.0" encoding="utf-8"?>
<AutoComplete
xmlns="com.adobe.flex.extras.controls.*"
xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="init()"
labelField="value"
itemRenderer="SpotlightFieldRenderer">
<mx:Script>
<![CDATA[
private function init() : void
{
this.filterFunction = substringFilterFunction;
}
private function substringFilterFunction(element:*, text:String):Boolean
{
var label:String = this.itemToLabel(element);
return(label.toLowerCase().indexOf(text.toLowerCase())!=-1);
}
]]>
</mx:Script>
</AutoComplete>
Step #3: Create the ItemRenderer you want to apply to this new component (I called mine SpotlightFieldRenderer.mxml). Note that the code is the same as the previous example, but I'll post it again for completeness.
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
]]>
</mx:Script>
<mx:HBox width="100%">
<mx:Label width="100" text="{data.type}" />
<mx:Label text="{data.value}" />
</mx:HBox>
</mx:Canvas>
Step #4: Update the AutoComplete.as class as follows:
/**
* #private
* Updates the dataProvider used for showing suggestions
*/
private function updateDataProvider():void
{
dataProvider = tempCollection;
collection.filterFunction = templateFilterFunction;
collection.refresh();
sort_and_filter(collection);
//In case there are no suggestions, check there is something in the localHistory
if(collection.length==0 && keepLocalHistory)
{
var so:SharedObject = SharedObject.getLocal("AutoCompleteData");
usingLocalHistory = true;
dataProvider = so.data.suggestions;
usingLocalHistory = false;
collection.filterFunction = templateFilterFunction;
collection.refresh();
}
}
private function sort_and_filter(source:Object):Object
{
if (source && source.length > 1) {
trace (source.length);
source.sortOn('type', Array.CASEINSENSITIVE);
var last:String = "";
for each(var entry:Object in source) {
var current:String = entry.type;
if (current != last)
last = current
else
entry.type = "";
last = entry.type;
}
}
return source;
}
You'll notice that the sort_and_filter function is defined, and called on the collection within updateDataProvider. The app now looks like this:
That's it. The sample application now looks like this:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">
<mx:Script>
<![CDATA[
[Bindable]
private var items:Array = [
{ type:'friends', value:'abc' },
{ type:'friends', value:'xyz' },
{ type:'messages', value:'this is the message' },
{ type:'messages', value:'example for messages' },
{ type:'files', value:'filename1' },
{ type:'files', value:'filename123' },
];
]]>
</mx:Script>
<local:SpotlightField dataProvider="{items}" width="400" />
</mx:Application>
Let me know if you have any further questions. There is still a bit of work to do depending on how you want to display the results, but this should get you 95% of the way there ;)
You may want to try something like this. This is just a sample I whipped up, but the basics are there for you to apply to your solution. What this is doing is creating a custom item render (as you've already done), but the container that it's rendering, it adjusts the data set slightly within set dataProvider so that it sorts and filters.
Obviously, you can expand upon this even further to add common icons, formatted text ... etc. The renderer has an explicit width set for the first "column" text. This is to better align results, but should probably be done while the list is being built (based on the string lengths of the values in the result set). Cheers ;)
Application.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">
<mx:Script>
<![CDATA[
[Bindable]
private var items:Array = [
{ type:'friends', value:'abc' },
{ type:'friends', value:'xyz' },
{ type:'messages', value:'this is the message' },
{ type:'messages', value:'example for messages' },
{ type:'files', value:'filename1' },
{ type:'files', value:'filename123' },
];
]]>
</mx:Script>
<local:SpotlightComboBox
dataProvider="{items}"
width="400" />
</mx:Application>
SpotlightComboBox.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:ComboBox
xmlns:mx="http://www.adobe.com/2006/mxml"
itemRenderer="SpotlightComboBoxItemRenderer">
<mx:Script>
<![CDATA[
override public function set dataProvider(value:Object):void
{
super.dataProvider = sort_and_filter(value as Array);
}
private function sort_and_filter(source:Array):Array
{
if (source && source.length > 1) {
source.sortOn('type', Array.CASEINSENSITIVE);
var last:String = "";
for each(var entry:Object in source) {
var current:String = entry.type;
if (current != last)
last = current
else
entry.type = "";
last = entry.type;
}
}
return source;
}
]]>
</mx:Script>
</mx:ComboBox>
SpotlightComboBoxItemRenderer.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
]]>
</mx:Script>
<mx:HBox width="100%">
<mx:Label width="100" text="{data.type}" />
<mx:Label text="{data.value}" />
</mx:HBox>
</mx:Canvas>
i need your help about below purposes.
problem-1:In php we can easily move one page to another and easily use different type of function from those pages.In flex3 how i can use different type of .mxml pages like php. Please guide me with tutorials.It will really helpful for me.
problem-2: In same page some content dynamically updated its resource by done one task.How can i do that please guide me.
Rather than treating your Flex application as a series of pages, you may want to consider an all-in-one SWF instead. This greatly reduces navigation time, at the cost of a longer initial download. You can switch among different views using tab pages or view stacks. As far as keeping your functions for each page separate, you can do this by implementing each logical "page" as a separate MXML component. Your top-level application MXML would look something like this:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:my="com.mycompany.myapp"
>
<mx:ViewStack id="pageViewStack" width="100%" height="100%">
<my:MyComponent1 width="100%" height="100%"/>
<my:MyComponent2 width="100%" height="100%"/>
</mx:ViewStack>
</mx:Application>
For your second problem I have 2 files
imageResize.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" viewSourceURL="srcview/index.html">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
private var _imageHolderWidth:Number = 500;
private var _imageHolderHeight:Number = 500;
[Bindable]
private var imageArrayCollection:ArrayCollection = new ArrayCollection();
private function changeSize():void{
this.imageHolder.width = this._imageHolderWidth *(this.widthSlider.value * 0.01);
this.imageHolder.height = this.imageHolder.width;
}
private function addToTileList():void{
var bitmapData : BitmapData = new BitmapData(this.imageHolder.width, this.imageHolder.height );
var m : Matrix = new Matrix();
bitmapData.draw( this.imageHolder, m );
this.imageArrayCollection.addItem({bitmapData: bitmapData, width: this.imageHolder.width, height: this.imageHolder.height});
}
]]>
</mx:Script>
<mx:Image id="imageHolder" source="#Embed('fx.png')" />
<mx:HSlider id="widthSlider" width="400" y="520" maximum="100" value="100" minimum="1" labels="[1%, 50%, 100%]" snapInterval="1" change="{changeSize();}" liveDragging="true" />
<mx:Button label="add to tile" click="{this.addToTileList();}"/>
<mx:TileList x="520" dataProvider="{this.imageArrayCollection}" itemRenderer="TileListRenderer" />
</mx:Application>
second file TileListRenderer.mxml:
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100" height="140">
<mx:Script>
<![CDATA[
import mx.utils.ObjectUtil;
override public function set data(value:Object):void
{
super.data = value;
}
]]>
</mx:Script>
<mx:VBox horizontalAlign="center">
<mx:Image id="thumbHolder" source="{new Bitmap(data.bitmapData)}" maxWidth="100" maxHeight="100" />
<mx:Label text="{data.width}x{data.height}" />
</mx:VBox>
</mx:Canvas>
Because it is easier to see it with working source (right mouse button to see the source):
blog.arnomanders.nl/upload/imageResize/imageResize.html
I have the following repeater code:
<mx:Repeater id="chapterRepeater" dataProvider="{Library.Book.Chapter}">
<mx:FormItem label="Chapter" direction="horizontal">
<mx:TextInput width="100" text="{ chapterRepeater.currentItem.#Name}"
change="event.currentTarget.getRepeaterItem().#Name = event.target.text"/>
<mx:NumericStepper maximum="2000" minimum="0" value="{chapterRepeater.currentItem.#Value}"
change="event.currentTarget.getRepeaterItem().#Value = event.target.value"/>
<mx:Button label="x" width="20" click="delete event.currentTarget.getRepeaterItem()"/>
</mx:FormItem>
</mx:Repeater>
Acting on the following XML
<Library Name="TestLibrary1">
<Book Name="TestBook1">
<Chapter Name="TestChapter1" Words="530"/>
<Chapter Name="TestChapter2" Words="490"/>
<Chapter Name="TestChapter3" Words="1030"/>
</Book>
</Library>
This allows the user to edit the names and values of the Chapter objects. However, the "delete" operation doesn't work for some reason?
Can anyone advise me as to how to reference items within a repeater in order to delete them?
Hmmm... this one has taken me a while to at least get to some sort of solution for it. In your click event (and subsequently the change events on the text area and numericStepper) you access currentTarget. CurrentTarget will actually return a reference to the button itself. As it is a button and not a repeater getRepeaterItem() would not return anything. I'm actually surprised that calling getRepeatItem() hasn't caused an error to be thrown. Needless to say that i don't think they were updating the xml.
My solution externalises the FormItem into it's own component (as that way, when click is fired i can bubble the event from the FormItem. That way i always know what formItem the event has come from) and then removes the item via an xmlListCollection.
So i have a separate component called ChapterFormItem.mxml which contains
<?xml version="1.0" encoding="utf-8"?>
<mx:FormItem xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
private var _chapterData : XML;
[Bindable]
public function get chapterData() : XML
{
return _chapterData;
}
public function set chapterData(value : XML) : void
{
_chapterData = value;
}
private function clickHandler(event : MouseEvent) : void
{
dispatchEvent(new Event("deleteChapter"));
}
private function textInputChangeHandler(event : Event) : void
{
chapterData.#Name = textInput.text;
}
private function numericStepperChangeHandler(event : Event) : void
{
chapterData.#Value = numericStepper.value;
}
]]>
</mx:Script>
<mx:Metadata>
[Event(name="deleteChapter", type="flash.events.Event")]
</mx:Metadata>
<mx:TextInput id="textInput" width="100" text="{chapterData.#Name}" change="textInputChangeHandler(event)"/>
<mx:NumericStepper id="numericStepper" maximum="2000" minimum="0" value="{chapterData.#Value}" change="numericStepperChangeHandler(event)"/>
<mx:Button label="x" width="20" click="clickHandler(event)"/>
</mx:FormItem>
and in the main application xml (for this example) i have
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:local="*">
<mx:Script>
<![CDATA[
import mx.collections.XMLListCollection;
import mx.collections.ArrayCollection;
[Bindable]
private var xml:XML = <Library Name="TestLibrary1">
<Book Name="TestBook1">
<Chapter Name="TestChapter1" Words="530"/>
<Chapter Name="TestChapter2" Words="490"/>
<Chapter Name="TestChapter3" Words="1030"/>
</Book>
</Library>;
private function itemDeleteHandler(event : Event) : void
{
var chapterItem : ChapterFormItem = event.currentTarget as ChapterFormItem;
var chapterData : XML = chapterItem.chapterData;
var xmlListCollection : XMLListCollection = new XMLListCollection(xml.Book.Chapter);
var chapterDataIndex : int = xmlListCollection.getItemIndex(chapterData);
xmlListCollection.removeItemAt(chapterDataIndex);
}
]]>
</mx:Script>
<mx:Form width="100%" height="100%">
<mx:Repeater id="chapterRepeater" dataProvider="{xml.Book.Chapter}">
<local:ChapterFormItem label="Chapter"
direction="horizontal"
chapterData="{chapterRepeater.currentItem}"
deleteChapter="itemDeleteHandler(event)" />
</mx:Repeater>
</mx:Form>
</mx:Application>