« September 2007 | Main | November 2007 »

October 2007 Archives

October 7, 2007

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.

October 11, 2007

Choosing the appropriate RIA Technology: my speech at the Oreilly Web 2.0 Conference

I am very glad to be part of one of the coolest and rich of contents conference made by Oreilly : Web 2.0 Summit .
I'll be present the following speech where I'll give you an overview of pros and cons of different techologies for RIAs development

web2_0_logo.gif
Choosing the final RIA path or Choosing the appropriate RIA Technology
Thursday, 8 November - 11:20 am–12:10 pm

Rich user interfaces and a satisfactory user experience are fundamental factors of Rich Internet Applications. Improved productivity, more effective work, time and cost reduction in the field of both operations and applications development are an important plus which deserves to be higlited when evaluating the suitability of tecnologies for applications projects. New development approaches have recently come to market : Flex, AIR, Flash, XUL, OpenLazlo, Silverlight, WPF, JavaFX. There are so many different technologies that it's easy to lose focus and misjudge goals when choosing a RIA platform. How to choose the best technology? What are their advantages? Which one is going to get the widest adoption? What can you do with them? This session guides you through the ecosystem of RIA's technologies, analyzing and comparing the benefits, features and disadvantages of each approach. Make the final RIA choice for your web applications.

Web 2.0 Expo in Berlin is the place to learn, network, and engage in the European Web 2.0 community.
Join your colleagues at this must-attend event and tap the power of Web 2.0 through:

* A comprehensive 5-track conference: Design and User Experience, Development and Web Operations, Fundamentals, Marketing and Community, and Strategy and Business Models
* Keynotes from thought leaders influencing the future of the web
* An Expo showcasing Web 2.0 services and technologies
* In-depth Workshops to get you up to speed
* Web2Open, an Open Space event for all delegates, where the audience become the speakers
* Great networking events designed to celebrate the Web 2.0 community

October 12, 2007

Comtaste represented at the Adobe Max 2007 Europe

Adobe Max is the annual conference which Adobe dedicates to designers and developers in order to offer them the opportunity to learn about new and emerging technologies, deepen their knowledge of technical issues, exchange experiences amongst themselves and with experts of international level.
At the Adobe Max 2007 European edition, which will take place from 15 to 18 October at the Barcelona International Convention Centre (Ccib), Comtaste’s Chief Executive Officer Marco Casario will hold a speech entitled “Extending and Creating New Flex Components”, the table of contents of which we can now provide as a sneak preview:

Flex Component Framework Overview
Flex Component Life Cycle
Extending Flex Components
Building Loosely Coupled Components
Using Template Components
Understanding the Invalidation and Validation methods
Tips and Tricks


Versione italiana

Adobe Max è la conferenza annuale che Adobe dedica agli sviluppatori ed ai designer per offrire loro l’opportunità di conoscere le novità e le tecnologie emergenti, approfondire tematiche tecniche e confrontarsi tra di loro e con esperti di livello internazionale.

All’edizione europea che si terrà dal 15 al 18 ottobre 2007 presso Barcelona International Convention Centre (Ccib), il nostro CEO Marco Casario terrà uno speech dal titolo “Extending and Creating New Flex Components” di cui riveliamo in anteprima i contenuti:

Flex Component Framework Overview
Flex Component Life Cycle
Extending Flex Components
Building Loosely Coupled Components
Using Template Components
Understanding the Invalidation and Validation methods
Tips and Tricks

October 19, 2007

Online survey for the first European 360Flex Conference

"360Conferences" is a brand new concept of conference organization created by the keen eye of Tom Ortega and John Wilker, well known protagonists of the international Adobe users' community.

The 360 number not only indicates how wide and complete the topics' treatment in such conferences is: it also recurs because the entry fees are kept as low as 360 USD or Euros (which is definetly a more than affordable amount for a high level 3-day conference) and the available tickets are limited to 360 units (more or less).

In other words, 360 is a magic number which encompasses a successfull formula for conferences!

In occasion of the next (and first!) European 360 Conference appointment (April 2008 in Milan) totally dedicated to Adobe Flex, however, a particular problem arose and is now being examined: US speakers' trip to Europe is pretty expensive while the 360 formula does not include any form of reimbursement for them!

After the first protests related to the unforeseen reimbursements for the speakers' flight and/or lodging, Tom and Mike had the great idea to submit a question to the entire community: should the 360 formula be adjusted as a consequence of the long distance flight, or should it be kept unchanged, even though some speakers might not participate for budgetary reasons?

The survey can be accessed here: http://www.surveymonkey.com/s.aspx?sm=yGMLUk_2f4IRYXqoobzijRuQ_3d_3d

while the live results may be seen here: http://www.surveymonkey.com/sr.aspx?sm=vYl0EBqFwQOrWCuur46_2bDfittExkiV1oYuHuVUgA6k8_3d

You are all invited to tell yours!

October 27, 2007

Techniques to clone an ActionScript 3 Object in Flex using AMF3

If you want to clone an Actionscript Object you have three possible ways: the deep-copy, the shallow-copy and the lazy-copy.

The deep-copy is the slowest but the most effective way, because the new object will lose any reference to the original object, so there will not be any data shared between the objects.


The shallow-copy results in a situation in which some data are shared between the objects, with the advantage that their execution is faster.

The lazy copy is a combination of both the above techniques. When initially copying an object, a (fast) shallow copy is used. A counter is also used to track how many objects share the data. When the program wants to modify an object, it can determine if data are shared (by examining the counter) and can do a deep copy if necessary.

The Flex API has a function that is called ObjectUtil.copy; it is a nice function but the bad thing is that you cannot work on all the object classes. You can only make your own function for deep copy, and to do that you need to know everything about its structure.

Here it is how Flex copies objects:

var buffer:ByteArray = new ByteArray();
buffer.writeObject(value);
buffer.position = 0;
var result:Object = buffer.readObject();
return result;

It works good, right?. Here is what it does: instead of introspection and recursively copying properties from one object to another it will serialize the object as an array of bytes and then wil de-serialize it.

If you use the AMF3 there can be some strange things going on: the failure may be caused by casting back to the original object class, and the [Transient] metadata tag can affect the output.

When the object will be de-serialized it will not be possible to creat it as an istant of a class (even if it has all its properties). If you want to have this you can inform AMF3 about the object class. There are 2 ways to do that:

use [RemoteClass] metadata
use registerClassAlias()

Even though the first way is better and nicer it may not work in all cases because the remote class information is stripped from the byte array in some cases.

Here is how to use the registerclass alias:

// TestClass doesn't have [RemoteClass] metadata or
// it does not work, so we need to make an association between
// the TestClass and the full qualified name (com.tests.TestClass)
registerClassAlias("com.tests.TestClass",TestClass);

// The result of the copy can be casted now without errors
var testCopy:TestClass = TestClass(ObjectUtil.copy(test));

Now, this is a very effective method but it has one flaw: it is not compatible with bitmapdata. Here is a workaround for this issue:

public function copyBitmap(target: DisplayObject) : Bitmap
{
// Create the bitmap data object with the right size.
var data : BitmapData = new BitmapData(target.width, target.height, true, 0);
// Draw the target object into the bitmap data.
data.draw(target);
// Create a new bitmap object associated with this data.
var bitmap: Bitmap = new Bitmap(data);
return bitmap;
}

Some interesting links where you can go deeper :
Object copy
ObectUtil.copy() Flex API reference

About October 2007

This page contains all entries posted to Comtaste Consulting | Enterprise RIA consulting and development in October 2007. They are listed from oldest to newest.

September 2007 is the previous archive.

November 2007 is the next archive.

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

Powered by
Movable Type 3.33