LeichtgewichtLeichtgewicht

2011/03/24 – 04:14

AS3 binding without flex [nanosome]

I like flex binding. Its one of the few things that I am really wishing to have for Non-Flex projects. Well, wishing time is over. nanosome notify, my new project, contains a quite viable ActionScript3-only binding mechanism!

Usage

Its main and most important goal was to make it easy to use. Now all you have to do to bind two anonymous properties is:

    import nanosome.notify.bind.*;

    // textFieldA & textFieldB are regular
    // TextField instances on the stage
    bind( textFieldA, "text", textFieldB, "text" );

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)Download Sources

Done! Easy, ain’t it? The best part: It works out of the box bidirectional (you can enter text in both fields) which can be switched of with a false at the end.

    import nanosome.notify.bind.*;

    bind( textFieldA, "text", textFieldB, "text", false );

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)Download Sources

Types

Naturally binding a String to a String works without a problem. But how about String and Object or custom classes? By default, simple types (like String, Number, Boolean) receive auto transformations. Any higher classes have to match in order to be bound properly.

Flex, and faster

TextField.text is not [Bindable] which means it doesn’t implement a standard way of telling the world that its property changed. For the former example to work the Nanosome system checks the property on every EnterFrame. That is not particularly fast but is a lot slower than having a proper event for a property. Flex’s own [Bindable] does it faster. You can add that later if you recognize the binding to be too slow. Of course there are two other ways that even exceed the speed of Flex. Observable of nanosome-notify should be more than a notch (2x) faster and works completely without Flex. The other way would be using Fields.

Fields

Talking about the whole power of fields requires another blog post, in short: Fields are Observables(design pattern) that have just one property. This is important to know since the nanosome binding relies heavily on them. Most notably it uses the nice method watch to deep-listen to properties.

import nanosome.notify.bind.*;
import nanosome.notify.field.IField;

var watchField: IField = watch( textFieldA, "text" );
watchField.listen(
   function( field: IField, oldValue: *, newValue: * ): void {
      textFieldB.text = newValue;
   }
);

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)Download Sources

In this example I “watched” for changes of the property text of textFieldA and I got a IField that will send a event on this value to which I can listen to by implementing a Interface or (as shown in the example) just write a little function.

Well and here is the interesting bit: bind is implemented using bindFields.

import nanosome.notify.bind.*;

bind( textFieldA, "text", textFieldB, "text" );
// can be written like.
bindFields( watch( textFieldA, "text" ), watch( textFieldB, "text" ) );

This means that you can have even faster binding between two IField instances if you implement(or use) just straight fields (no need to peep watch).

Okay, so much for now: How do you like it?

Tags: , , , , ,

Comments

  1. gueNo Gravatar

    Nice overview.
    Thanks for your work.
    You’ll get a nice piece of chocolate once you visit Austria.

  2. John R. NyquistNo Gravatar

    This looks great! I look forward to trying it.

Leave a Reply

Site informations

Martin Heidegger – Web Developerskype:mastakanedaxing:martin.heideggertwitter:leichtgewicht