Monday I wrote about how I would use the observer pattern to alter the functionality of getters/setters and respond to changes without using Flash's events. Tyler and I brainstormed more about the solution and as I knew would happen we came up with a better implementation.

Changes

One thing I didn't like about my initial go at it, is that you had to create a class with three methods, and usually you only used one of them. So methods were being called that didn't need to be for the sake of it. We decided to add functions on an as-needed basis. I named the different types checks, hooks, and observers.

• Check, a method which checks the validity of the data being added. If the check determines the data is invalid it returns a boolean of false. Otherwise it returns true.
• Hook, a method which can modify the data of a setter before it gets set. This can allow formatting or other customization.
• Observer, a method which is notified when a property has been changed. Flex uses the PropertyChange event currently.

Something Tyler didn't like was the requirement of an interface. He wanted to be able to add the observing functionality from outside an object with a static utility class. Binding would then know if objects used the observer system with additional info in the bindable metadata [Bindable(observable)]. So I created a static utility class called Observe which would allow the logic to be handled separately. Our data-binding relies on the metadata to indicate if a given property uses Observe.

API

The Observe interface ended up looking like this:

observerHost is the object the observer method belongs to. Using this allows a reference to be made to the method so that we can be completely weak-referenced and memory friendly. If the observer does not belong to an IEventDispatcher you must hold that method in a variable and pass in null to observerHost. Each check, hook, and observer can have 0-4 parameters looking like:

Checks should return a boolean, hooks should return a value, observers don't need to return anything.

Additional functionality

By passing in "*" as the property name to any of the methods, your check, hook, or observer will be called when any property is changed on the provided object.

If you pass in a class as the target to Observe.addCheck|Hook|Observer then whenever the given property is changed for any instance of that class or a subclass thereof you will be notified.

For example, if you call

then myMethod will be called every time any property is changed anywhere (properties that use the system that is). You can respond to any property change in the entire system that uses the property observer system I've created here.

Modified Flex SDK

I want to use this new observing system everywhere, but I don't want to have to write out all the setters for it. That would take a lot of time, now and later as I write more code. So I checked out the flex4_beta2 tag from Adobe's open source subversion repository and modified a couple of things. Now when I add [Bindable] to a property it will be observable as well as work with Flex binding. I also added the Flight binding classes so they'll be available in all my Flex projects.

I know some of you will be interested in playing with the SDK and seeing what I changed, so I'm providing a download of the modified SDK as well as the changelog. I do not plan on releasing a new modified SDK with every new Flex SDK release. I may do some for major releases, but most likely I'll just do it for my own use unless there gains some interest. Reflex might have it's own SDK down the road too.

So go ahead, download the SDK, create a new ActionScript Project called Test that uses it, and make the following your application class

You'll see how hooks can work and how binding works! I haven't tested the speed, but guaranteed this is way faster and better memory than creating a new PropertyChangeEvent object each time a property is changed. And I still have room for optimization I've been thinking about. I know the API will change for the setter code.

Dilemma, need your opinion

So I have a dilemma and need your feedback. Checks and Hooks could be really cool, allowing you to change stuff at run-time, inserting code into the setter as it were. However, this could also cause headache, security issues, difficult to diagnose bugs, and other potential issues. With great power comes great responsibility and jazz like that.

Is it worth it? Should I remove the checks and hooks altogether and just leave observers? What are the costs, and do they out-weigh the benefits? Please comment and let me know your thoughts.

Downloads

• Observer Flex SDK
• Diff File

I've been trying to figure out the best way to include a styling framework with Reflex as needed, without requiring APIs and including extra classes in the core. Pay-as-you-go. The solution that I finally came up with turns out to be great for not only styling, but effects/transitions and data-binding too. I'll start with data-binding to try and describe the benefit.

Flex Data-binding

In Flex we have data-binding. Data-binding is cool. Allows us to do stuff a lot easier. We use it in almost everything we write in Flex.

Unfortunately, data-binding is based on the event dispatching system in Flex. What this means in practice is that every time a value is changed in Flex, a new one-use object is created and then garbage-collected shortly afterwards (the PropertyChangeEvent object). Others have complained about the event system and even offered alternatives. Partly for API, partly for performance.

Another side-effect of Flex data-binding is that it ties objects into memory. The garbage collector is unable to clean up objects that are bound because of the references to them.

Weak-reference Data-Binding

We improved with Tyler's weak-reference data-binding included in the Flight framework. However, it is still dependent on the event system of Flex. And object creation and destruction (in the amount that happens whenever a property is changed) can be expensive.

Property Observers

The observer pattern is very common. Being a pattern it doesn't define exact implementation, and Flash events in essence follow the observer patten. But wanting 1) better performance with property changes and binding and 2) greater flexibility to extend the functionality of a component without overriding it and 3) better code-reuse in setters, I created a light property observer system to replace event dispatching for property changes. (whew, that was a long sentence.) I also modified Tyler's binding (actually a refactor of it I did the other week) to use this property observer system and fall back on events as a last resort.

Note: this isn't meant to replace the event system, only substitute for property change events.

The system works with two interfaces, IPropertyObservable and IPropertyObserver.

PropertyObserverable

IPropertyObservable is the object with the properties. The interface requires two methods:

• addPropertyObserver(observer:IPropertyObserver):void
• removePropertyObserver(observer:IPropertyObserver):void

Whenever a property is set, all the observers are notified and can do several things.

IPropertyObserver

IPropertyObserver responds to property changes by implementing these 3 methods:

• allowPropertyChange(target:Object, name:String, currentValue:*, newValue:*):Boolean
• propertyChanging(target:Object, name:String, currentValue:*, newValue:*):*
• propertyChange(target:Object, name:String, oldValue:*, newValue:*):void

These methods allow an observer to respectively:

• stop the property change from happening
• alter the value the property will be changed to
• respond to a change

How about some code

Since the functionality of the observables will all be the same, I've implemented it into a class that can either be extended or used under-the-hood just like EventDispatcher. PropertyObservable is listed, undocumented, unpackaged, here for your viewing pleasure:

IPropertyObservers are custom and depend on what functionality the provide.

Great! another way to do the same thing

You might think this is the same thing except different, but this actually allows some pretty cool code-reuse and other features that event dispatching does not. First, let me show a traditional setter for binding, then a setter that uses the observable system:

We can also add additional setter logic without overriding the setter, or remove setter logic that was previously added. A few examples of cool stuff you could do with this is:

• Make a draggable component snap into place on a grid system.
• Prevent x/y from changing, locking a component in place, when certain conditions are met.
• Use wildcard setters and turn String values of width and height into pixel values (e.g. 2cm, 1in).
• Create transitions, so when x/y is set, instead of setting immediately a tweening engine can update the property over time (e.g. shape.x = 100; shape.y = 200; could tween from the current location to the new one over 1 second)
• Create a styling framework that keeps track of whether styling set a property or something else did. If something else did, don't override the value with the one from the stylesheet.

And one of my favorite parts: one instance of an observer can be used for every component. I don't need to create a new observer instance for each component. No more objects created each time a property is changed, and not even for each observable. This would be a case in which singletons are a great help.

We'll see whether this ends up in the Reflex code-base or if it is move into the Flight framework library were the data-binding resides. It will probably make most sense to become part of Flight. But I'm quite happy with the general model, and I know Tyler and others will have great ideas on how it can be improved (size, performance, or features).

Short background: I was looking into creating a Flash drawing app that consisted only of the canvas portion, with the rest of the UI in HTML. This is for many reasons including the size of Flex, the native OS components in the browser, speed, and hey, it forces separation of core app logic from the presentation logic, right? ;)

So I wanted a way to display thumbnails of the pages of my drawing. This was all proof of concept and I only have one page and one thumbnail. To do so, I used the URI Data scheme to set the data of a HTML <IMG> element. The only modern browser (if you can call it that) which this doesn't work with is IE6, an acceptable loss for proof-of-concept. Here is how it works in my proof of concept:

See the Studio proof of concept

First, I take a resized bitmap snapshot of my canvas anytime something on it changes, in this example, when it scrolls (I may post about the scrolling in another post, also cool geek stuff). This is done using the BitmapData.copy() method. Actually, I'm using my ImageUtils class which ensures it looks good when resized (more about that in another post). Then I turn the BitmapData object into a PNG with AS3CoreLib's PNGEncoder. I now have the bytes for a PNG, so how do I get it to HTML without sending it to the server first? Well, I'll tell you!!

I take the ByteArray that the PNG encoder class gives me and I encode it with Base64Encoder, prepend "data:image/png;base64," to it, then send it out to javascript using ExternalInterface to call a JS function already on the page. That function receives the base 64 encoded string and sets it to the "src" property of the little thumb image down at the bottom of the page. You can see every time you scroll it updates. No biggie right, but if you right-click on it you'll see that it is just an HTML image, right-click on the canvas and see that it is a Flash movie. No server round-trips, 100% Flash/Javascript realtime interaction. Tada!

I did a bit more playing around with it, giving the bitmap rounded corners in Flash before sending it to the browser, tried shadows too, but decided they didn't look great in this interface, so left them out.

Really fun stuff. I hope this is inspiring, even if it isn't useful in your situation. Next time I'll talk about how the native browser scrollbar is scrolling the Flash content, though you may be able to guess easy enough.

My solution, RestServer, is a JSON REST server, so far. It should be trivial to add support for XML or other formats, but there would have to be assumptions on what your object would look like in XML (XML-RPC style, your own custom XML format, etc). First we'll look at the classes that you write to handle the requests, then we'll look at how to tie it together in your index.php file.

REST Controllers

The RestServer class assumes you are using URL rewriting and looks at the URL from the request to map to the necessary actions. The map that gets a request from URL to class method is all in the doc-comments of the classes. Here is an example of a class that would handle some user actions:

Let's walk through the above TestController class to talk about the features demonstrated. First we'll look at the test method. You'll notice there is a new kind of doc-comment tag in the docblock. @url maps a URL to the method below it and is in the form:

@url <REQUEST_METHOD> <URL>

In this particular example, when someone does a GET on http://www.example.com/ (assuming example.com is where our service is located) it will print out:

"Hello World"

which is a valid representation of a string in JSON.

Moving on to the next method, login, we see the @url maps any POSTs to http://www.example.com/login to the login method. Getting data from a regular web-type POST is the same as any PHP application, allowing you to use your own validation or other framework in conjunction with this REST server. Sessions can also be kept if desired. Though keeping sessions isn't true REST style, often all we want a REST server for is to serve up data to our ajax application, and it can be easier to just use sessions than something more RESTful.

Next we have our getUser method (you'll notice that it doesn't really matter what I name my methods because our @url directives define what URLs map to the method). You can see a couple of things here. First, we have multiple @url mappings for this method. And second, there is an odd "/:id" in that first URL mapping. The RestServer treats any ":keyword" placeholders as wildcards in the URL and will take that section of the URL and pass it into the parameter with the same name in the method. In this example, when hitting http://www.example.com/users/1234, $id will equal 1234. When hitting http://www.example.com/users/current, $id will equal null. It doesn't matter what order your parameters are in, so long as they have the same name as the placeholder (:id and $id, :username and $username). You'll also want to be sure to make your parameters optional ($id = null) when you have several URL mappings that don't all require a parameter. Otherwise you'll have an error thrown telling you that you didn't pass in a required parameter.

One last thing to note in getUser is that this method simply returns a User object. This gets serialized into JSON (or potentially XML) and printed out for consumption by the application.

Finally we get to saveUser. You see here we have multiple URL mappings again. This time they also have different HTTP methods (POST and PUT) for creating and updating a user. The new thing here is the $data variable. This is a special keyword parameter that will contain the value of whatever was POSTed or PUT to the server. This is different than your regular web POST in that it doesn't need to only be name-value pairs, but can be as robust as JSON, sending complex objects. For example, the body of a regular web POST, let's say the login request, might look like this:

username=bob&password=supersecretpassw0rd

but POSTing a new user object for our saveUser method could look like this:

{ "username": "bob", "password": "supersecretpassword", "firstName": "Bob", "lastName": "Smith" }

So you're able to allow POSTing JSON in addition to regular web style POSTs.

I call these classes that handle the requests Controllers. And they can be completely self-contained with their URL mappings, database configs, etc. so that you could drop them into other RestServer services without any hassle.

REST index.php

In order to get the whole server kicked off, you'll want to create an index.php file, have your URL rewriting direct requests to it (another topic which you can learn about elsewhere), and create the RestServer and add controller classes to it for handling. RestServer will cache the URL mappings between requests using APC or a file to speed up requests. You won't have to load every controller file on every request if you use autoload and this cache, only the one needed for the request. The cache only runs in production mode. Here is an example index.php file:

That's it. You can add as many classes as you like. If there are conflicts, classes added later will overwrite duplicate URL mappings that were added earlier. And the second parameter in addClass can be a base URL which will be prepended to URL mappings in the given class, allowing you to be more modular.

You can view the RestServer class, copy it and use it for your own purposes. It is under the MIT license. Features to be added include XML support and HTTP Authentication support. If you make this class better please share your updates with everyone by leaving a comment. I will try and keep this class updated with new features as they are shared. I hope you enjoy!

I changed the title of this post to remove the AMF portion but was asked to cover it, so I will quickly talk about the AMF support. RestServer supports the AMF format in addition to the JSON format. This is a binary format used by Adobe Flash in their remoting services, but because their remoting services are not RESTful, you can't use classes such as RemoteObject with REST.

In order to use the AMF format with this service, you'll need to have the Zend Framework in your classpath so that the classes to serialize and deserialize AMF are present (e.g. Zend/Amf/Parse/Amf3/Serializer.php). Then you're ready so server up AMF. The way you consume AMF in Flash is using URLLoader or URLStream to load the data and ByteArray to convert it into an object. To tell the server you want AMF rather than JSON your URLRequest object will need to add an Accept header of "application/x-amf". Below I will show you how this could be done.

You can even make your PHP objects cast into their actionscript equivalents using the $_explicitType property or getASClassName method in PHP as defined in the documentation and by using registerAlias in Flash.

Good luck and let me know if you end up using it!

Update: I am including an example .htaccess file for anyone who might need it. It will only rewrite requests to files that don't exist, so you can have images, css, or other PHP files in your webroot and they will still work. Anything that would give a 404 will redirect to your index.php file.

DirectoryIndex index.php
<IfModule mod_rewrite.c>
	RewriteEngine On
	RewriteRule ^$ index.php [QSA,L]
	RewriteCond %{REQUEST_FILENAME} !-f
	RewriteCond %{REQUEST_FILENAME} !-d
	RewriteRule ^(.*)$ index.php [QSA,L]
</IfModule>

The API I decided to go with for this pattern uses method chaining. This is one of those things where people love it or they despise it. I'm sorry if you are one of the latter. Method chaining is where an object returns a reference to itself as the result of its methods. This allows you to call many methods on the object in one line. jQuery uses this and it is used a lot in the Zend Framework. As example you might have a drawing API helper that does this:

This would draw a red box with a darker red border around it, all in one line. If the above code gives you tingles in your stomach, you'll like response. If it upsets you, you can still use response with one method per line of code.

You can see in the interface IResponse that it has method chaining and supports a bindable progress property as well. The Response implementation has a few more methods that are useful when first creating a response. It allows events to trigger the complete cycle (which runs through the result handlers and calls them) or the error cycle. It also will create a flash.net.Responder object that can be used in NetConnection calls or other situations that take a native responder object. There are also some more advanced uses of Response which we might talk about another time. But let's see it in action!

I've posted my library of code I reuse on Google Code under the MIT license. Here you'll find a class called ImageLibrary. Here is how it works.

In this example, we have a result handler that sets the BitmapData object to the bitmap object. We could have created and added the bitmap to the Sprite in the handler, but I wanted to show how you can pass extra parameters to the handlers in the handle(resultHandler:Function, ...rest) method. Another thing to note, is that if we were to add the same image to our MySprite class again, addDataToBitmap would be called instantly because ImageLibrary caches the results of previous calls so that the player won't have to load them from the server again. This results in virtualized lists having the images instantaneously showing up after the first load.

The RemoteProxy class is a Flash remoting service which is extremely small. It uses Response.

In this example we pass the Response object along so that whoever is calling loadContacts can know when the result is ready or if there was an error.

Here is a list of some of the classes I've made which use Response:

• jac.image.ImageLoader
• jac.net.RemoteProxy
• jac.net.RemoteService
• jac.db.Database
• jac.filesystem.AsyncFile

This is just a little taste of using the Response Pattern. I have found it much nicer to use when you are waiting for the results of a particular call. Event listeners are still useful for user input and for socket-based libraries such as XMPP or FMS, but I like Response for most other async operations.

I searched for a solution and found on voq.com a promising library with some algorithms that worked quite nicely and a demo. The quality was nice, but the speed was slow. It also fiddled with the color a little bit. If I put the "easyScaling" parameter down from .5 to .25 I ended up with a nicer thumbnail but was slower to make and had more color disfiguration. You could tell what the original piece was better though.

After some more searching I found that Brooks Andrus played with some algorithms using Pixel Bender. The conclusion to that was he found he could do the same thing with the "smoothing" option in the BitmapData.draw() method. And this still leaves me with yucky thumbnails at small sizes.

I began thinking I would need to take the algorithms from the first source and port them into pixel bender like Brooks did for his ThumbGenie application.

I thought I'd try one more option first. I had played around in my mind with the idea of resizing a bitmap in half, then in half again, until I reached my destination size, since resizing by half still had good results. After discussing it with Tyler I tried it out and ended up with some great results. That last resize to get to the final thumbnail size wasn't half because in an imperfect world your thumbnails aren't always a power of two times smaller than your original. So I had an odd-man-out scale at the end I was applying. Tyler suggested I put that odd-man-out scale at the first instead. So instead of:

1000x750 * .5 resize * .5 resize * .5 resize * .8 = 100x75

It worked like this:

1000x750 * .8 resize * .5 resize * .5 resize * .5 = 100x75

Doing it that way landed me with even better results! It seems that Flash does it's best work when resizing by exactly 1/2.

The above image shows my test results as follows taking a snapshot of my homepage in an HTMLLoader in AIR.

1. Regular BitmapData.draw() method without smoothing (0 miliseconds)
2. Regular BitmapData.draw() method with smoothing (1 miliseconds)
3. Using my own method that resizes by the odd scale first, then by halves (8 milliseconds)
4. Using my method but after the odd scale, only scaling down by quarters (33 miliseconds)
5. Using the voq Lanczos3 method with easyScaling at .25 and sharpening (694 miliseconds)
6. Using the voq Lanczos3 method with easyScaling at .25 and no sharping (676 miliseconds)
7. Using the voq Triangle method with easyScaling at .25 and sharpening (275 miliseconds)
8. Using the voq Triangle method with easyScaling at .25 and no sharpening (266 miliseconds)

My personal opinion is that the best looking thumb is #3. I was surprised that #4 wouldn't be as good. I knew the performance would be lower because I was doing more iterations of BitmapData.draw(), but I thought that scaling it to 75% (down a quarter) each time would end up nicer. Looks like 50% is the best scale to use.

The voq.com algos looked pretty decent, but obviously were slow. I'm quite happy with the solution I've found. I only had to write a little bit of code, it's fast enough, and looks better than any other solution I've found (even Fireworks resizing IMO).

Here is the method I wrote for this. Note, when scaling up, it seemed to look better to just use smoothing and do it in one draw() and not iterations of 2.

Enjoy!

Update: I was getting unsatisfactory images when the resize scale was more than 50%. For example, the original code posted would size an image from 100x100 to 60x60 using one BitmapData.draw() step. And it didn't look that great.

I found that if I sized the image up to a scale that allowed it to be size back down by exactly 50% that the results were much better. In the above example, the 100x100 would scale up by 120% to 120x120, then scale down 50% to 60x60. The final image looks much better this way. The code has been updated to work like this. It also had the option to turn constrain proportions off.

Update: I've posted my code library to Google Code. You can see my final implementation of bitmap resizing in the ImageUtils class.

Framerate makes great sense when doing games or timeline based animations, but in applications do we need it? We can update the screen on mouse moves, roll overs, etc. with the MouseEvent.updateAfterEvent instance method. And for transitions and tweening the class could use a Timer for the duration of the animation and again call Timer.updateAfterEvent. Then the screen would only refresh when it needs to. Performance would be greatly increased. Seems like it makes sense. Would this be something to add to Flex? Would it give us the performance we need/want for mobile applications and more responsive desktop applications?

Any foreseeable drawbacks? What do you think?

Update: I did some testing and it seems that the Timer class is directly influenced by the frameRate. With a frame rate of 0 a timer which should fire immediately (set to 0ms) doesn't fire for 20 seconds! With the frame rate a 0.1 it happens at about 2 seconds, a frame rate of 1 is about 145 ms and a frame rate of anything over 4 seems to be around the same (10ms - 30ms probably depending on what the OS is currently doing).

MouseEvent updating and such happen as they should however, so as long as you start of with a frame rate of 4 so that the app can initialize visually, you could drop it down to 0 until a tween is needed and then bump it up to 4 for the duration of the tween. The rest of the visual changes can respond to mouse events (resize, click, rollover, etc). Or leaving it at 4 frames a second probably isn't too bad on CPU, either way, you'd have to call updateAfterEvent when needed.

1. Fix for abstract classes
   The tiny static classes in the flight.error package allow you to ensure an abstract class is not instantiated and that abstract methods are overriden.
2. Registry
   A global registry to store objects or data that anything in an application can have access too.
3. Reflection
   The "Type" class handles all your reflection needs, including caching the expensive describeType calls and helping pull out needed metadata.
4. Nice base for models
   The ValueObject class is a lazy IEventDispatcher that implements an equals() and clone() method which will work with all subclasses.
5. ValueObjectEditor
   This nifty utility lets you "edit" a ValueObject and then either commit the changes or revert them. Great for dialogs that let ValueObjects be changed but can then either Cancel or Ok the change.
6. AS3 ArrayContainer
   When working in an AS3 project, it would be nice to know when an array is changed, but Flex's ArrayCollection brings in half the framework when referenced. This little guy is the little brother AS3 has been wishing for.
7. Services
   Some common services (RPC services, e.g. remoting, HTTP, etc.) that can be used in Flex or AS3. Much smaller than Flex's built in services.
8. Configuration
   Config lets you define your application configurations in the app, an XML file, SharedObjects, and even the URL. Not only that, you can have multiple sources with some overriding others, and it is all accessible to your classes through a global config property. Super neat!
9. Undo framework
   With CommandHistory and all the command interfaces available, you can build undo-redo into your application without using any of the rest of Flight. Way, way awesome.
10. Weak-referenced binding
    Using the Bind class you can create faster, smaller, and weak-referenced binds. With two-way deep binds and being able to use in AS3-only projects without importing half the Flex framework, this is my favorite nugget.

None of the above pieces references any of the others. They can all be used independently in your own frameworks or applications. That's my favorite part about Flight, is I can use it 100% if I want to, but if I can't that doesn't mean I have to give up my favorite features. I could use any/all of the above with any other framework, AS3 only, or Flex.

Instead of making different Flex and Flash components to use in place of the available components, I made one that adds undo to existing text components. It should work in Flash and in Flex, though I just have a Flex example to show you today. You can see that it can be container specific, though you would probably just put it on the root of your application or the stage. Type in the text components in the top panel. Then do the same in the bottom. You should be able to press Ctrl+Z and Ctrl+Y (or Ctrl+Shift+Z) to undo and redo. If you're on a Mac just substitute Ctrl with Cmd. I've only tested it in Safari and Firefox on a Mac. I hope the key command work on other machines without issue. But I also added a couple of menu items to the right-click context menu. Give it a whirl below, view the source, and see how easy it is to add text undo and redo to all your existing applications without any refactoring.

Update: The keyboard shortcuts don't work in the ActiveX version of Flash (Internet Explorer on Windows).

Let me know if the key-shortcuts don't work on your system. Maybe phase 2 can be some javascript magic to capture those better.

If I created a component that you put on the root of your application (or any MXML component) which added undo/redo to any/all INPUT TextFields with in Flash or Flex would that be better? If you're not doing any custom INPUT TextFields I don't see any issues. But it could cause problems if you're doing your own text components. Also, I would do it by listening to Event.ADDED events and whenever a TextField is added to the display list it would initialize it and add some right-click menu items to it. And I can even make sure when I have script access through ExternalInterface to capture the Ctrl+Z key combo.

Comment and let me know if this would be better than the Flex components. It would work in Flash apps too is the nice part and also you could add it to existing applications without any find-replace. The downsides is it could interfere with text manipulation code you may have in place for custom text components. I'll decide this week and get to work on it next!