Wednesday, February 18, 2009

AS3 Binding without the Flex Framework

This example relies on the Flight Framework (included in the source) developed by my good friends Tyler, Rob, and Jacob. You can expect to see more on flight here in the future.

You can read more details about this custom binding here: http://www.xtyler.com/code/177

View demo
Download source


package {
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.events.TimerEvent;
import flash.text.TextField;
import flash.text.TextFormat;
import flash.utils.Timer;

import flight.binding.Binding;
import flight.events.PropertyEvent;

[SWF(backgroundColor="#ffffff")]
public class BindingTest extends Sprite
{
private var sourceBinding:Binding;

public var sourceText:TextField = new TextField();
public var targetText:TextField = new TextField();

private var isTargetTextBound:Boolean = false;

//as3 binding requires a getter/setter for the property you want to bind to
private var _source:Number = 0;
public function get source():Number
{
return _source;
}

public function set source(value:Number):void
{
var oldValue:Number = _source;
_source = value;
//you need to dispatch an event to indicate the binding source has changed
PropertyEvent.dispatchChange(this, "source", oldValue, _source);
}

public function BindingTest()
{
//set up text for visual display
var textFormat:TextFormat = new TextFormat("Arial", 20, 0x000000);
sourceText.defaultTextFormat = textFormat;
targetText.defaultTextFormat = textFormat;

addChild(sourceText);
targetText.y = 40;
addChild(targetText);

//setup source of binding
sourceBinding = new Binding(this, "source");
//bind to the first text's "text" property
sourceBinding.bind(sourceText, "text");

//update with timer
var timer:Timer = new Timer(100);
timer.addEventListener(TimerEvent.TIMER, timer_timerHandler);
timer.start();

stage.addEventListener(MouseEvent.CLICK, stage_clickHandler);
}

private function timer_timerHandler(event:TimerEvent):void
{
//increment the source
source++;
}

private function stage_clickHandler(event:MouseEvent):void
{
//bind or unbind to second textField on mouse click
if(isTargetTextBound)
{
sourceBinding.unbind(targetText, "text");
}
else
{
sourceBinding.bind(targetText, "text");
}

isTargetTextBound = !isTargetTextBound;
}
}
}

4 comments:

  1. This is great! I encourage you to check out bumpslide, David Knape's AS3 framework which includes a bindable model for pure AS3 projects.

    http://bumpslide.com/

    ReplyDelete
  2. The following article describes how you can use the Flex Framework via ActionScript without the usage of MXML (or to be honest with only one little initial line of MXML).

    ReplyDelete
  3. @Garten -> I think you you have a little error in this article, as it seems to be only unpaid ad, isn'it?

    More important: The uploaded source file for
    AS3 Binding without the Flex Framework points erraneously to the source of "Ribbons.zip" instead of the MVC-sources..

    Anyway I built with the video myself .. thank you for sharing, ALEX

    ReplyDelete
  4. John Lindquist3:03 PM

    Thanks for pointing out the bad link Alex. It should be fixed now.

    ReplyDelete