« Automating ActionScript 3 classes generation from Java Beans in a LiveCycle Data Services context | Main | Choosing the appropriate RIA Technology: my speech at the Oreilly Web 2.0 Conference »

Creating an ObjectManager for improving the Flex interaction with Ajax or Javascript - 3rd part

The last part of my object manager will supply the interface required to modify the objects added to the object manager. In our example we need three methods for being able to manage the state of whichever object we need. These three methods are:

1) Get the status of a registered object:

ObjectManager.prototype.GetObjectStatus = function (objectName) {
    if(eval('this.' + objectName +' != null'))
        return eval('this.' + objectName + '.enabled');
    else
        return 0; //Default value
}

In order to obtain the state of an object it is only necessary to control if an object with that name has been recorded and, in that case, return the value of its property enabled.

2) Set a function on the registered object, that has to be called to change its status:

ObjectManager.prototype.SetStatusFunction = function (objectName, statusFunction) {
    if(eval('this.' + objectName +' != null')) {
        eval('this.' + objectName + '.setStatus = \''+statusFunction+'\'');
        return true;
    }
    else
        return false;
}

With this method it is possible to register the name of a function that will be called when the state will be updated. In our case it is the string we used in our Flex movie by calling ExternalInterface.addCallback("functionName", statusFunction): it will allow to update the state of the movie, when possible.

3) Set the status for a registered object:

ObjectManager.prototype.SetObjectStatus = function (objectName, status) {
    if(eval('this.' + objectName +' != null')) { // Object is registered?
        eval('this.' + objectName + '.enabled = status');
        if(eval('this.'+objectName+'.setStatus != null')) { // Is there a status function to call?
            var swfObj = thisMovie(objectName); // thisMovie is a function from the previous post, returns a Flex movie object
            if(swfObj != null) { // is Flex movie still available?
                var functionName = eval('this.'+objectName+'.setStatus');
                if(eval('swfObj.'+functionName) != null) // is Flex status function reachable?
                    eval('swfObj.'+functionName+'('+status+')'); // Call Flex status function through ExternalInterface class
            }
            else
                return false;
        }
        return true;
    }
    else
        return false;
}

The third method allows to update the state of our Flex movie. After updating the correct variable in the object manager, the method tries to call the function that the Flex movie has registered through the ExternalInterface class to update the state.

This is a simple version of the structure of a possible object manager, it can be improved and optimized by taking advantage of all the potentialities offered by languages like ActionScript and JavaScript, for example using events.

Using the object manager

Let's see how to take advantage of the potentialities of our manager.
In the HTML page, within a script tag, we can write the following, after we have included all the files related to the object manager:

var myObjMan = new ObjectManager();
function getObjectManager() { return "myObjMan" };
var myFlexMovieName = "myFlexMovie";
myObjMan.AddObject(myFlexMovieName); // Register movie

The only innovation is the function getObjectManager() that returns a string with the name of the object manager variable; in the next lines we'll see how to make a good use of it.

To disable or enable the movie from JavaScript:

Obj.SetObjectStatus(myFlexMovieName, 0); // Disable movie
Obj.SetObjectStatus(myFlexMovieName, 1); // Enable movie


Let's see the ActionScript code that matches the JavaScript call: in the Application's creationComplete event handler:

// Get ObjectManager's name:
var ObjManName:String;
ObjManName = ExternalInterface.call("getObjectManager");

// Register ActionScript setStatus function on JavaScript
ExternalInterface.addCallback("setFlexStatus", setStatus );
// Register setStatus function on ObjectManager
ExternalInterface.call(ObjManName + ".SetStatusFunction", "myFlexMovie", "setFlexStatus" );
//set status saved in object manager
setStatus(ExternalInterface.call(ObjManName + ".GetObjectStatus", "myFlexMovie"));

while the function that modify the state in Flex is simply:

public function setStatus(status:Boolean):void {
    enabled = status;
}

This code requires the name of the object manager to be able to register its own status function and then to get the current state.
The code presented in this page is simplified and does not control for runtime errors but it can be easy improved based on your requirements.

TrackBack

TrackBack URL for this entry:
http://blog.comtaste.com/mt-tb.cgi/27

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)

About

This page contains a single entry from the blog posted on October 7, 2007 10:25 PM.

The previous post in this blog was Automating ActionScript 3 classes generation from Java Beans in a LiveCycle Data Services context.

The next post in this blog is Choosing the appropriate RIA Technology: my speech at the Oreilly Web 2.0 Conference.

Many more can be found on the main index page or by looking through the archives.

Powered by
Movable Type 3.33