I have known about them for a long time because I try to keep tabs on all Adobe’s news but I understood how it works recently just after using Flex Builder’s profiler. Instead of retelling background information I will give you an example where you might see how useful these weak references may be:

public class GuestbookEntry
{
	public function get comments() : ArrayCollection
	{
		return _comments;
	}

	public function set comments(value : ArrayCollection) : void
	{
		if (_comments != null)
		{
			_comments.removeEventListener(CollectionEvent.COLLECTION_CHANGE,
				onCommentsChange);
		}

		_comments = value;

		if (value != null)
		{
			value.addEventListener(CollectionEvent.COLLECTION_CHANGE,
				onCommentsChange, false, 0, true);
		}
	}

	protected function onCommentsChange(event : CollectionEvent) : void
	{
		switch (event.kind)
		{
			case CollectionEventKind.ADD :
				CommentEntry(event.items[0]).guestbookEntry = this;
				break;
		}
	}

	private var _comments : ArrayCollection;
}

Let’s imagine we have got a guest-book and its record type GuestbookEntry which is represented above. This type has its own collection of comments. Let the comment be described by CommentEntry type. Somewhere there is an UI form for adding new comments. By the architecture of the project we are required to give each comment a reference to guest-book’s record by guestbookEntry property.

GuestbookEntry instances are likely to be received from server but it doesn’t matter. In comments property’s setter I subscribe to the collection change event to control the moment of adding a new comment. As you can see the reference to the method onCommentsChange is transfered into the collection as weak one (the last argument of addEventListener method).

During application profiling with such a kind of code before using weak references in it all of instances of the GuestbookEntry that have ever been created remain there. The inspector of loitering objects shows two types of connection between GuestbookEntry and CommentEntry instances: one is maintained via guestbookEntry property another one via onCommentsChange (its instance is held by the collection of comments) method’s savedThis (the context of the function) which refers on the guest-book’s entry.

As far as I understand Flash Player’s garbage collector automatically clear the memory from objects that are connected with the help of strong references (including cycling ones) but if there are event references it can’t do anything. That is where weak references may be useful. There is no risk of using them because usually they are the last references that are left between objects and are ready to be collected.

Thoughtful reader who loves Martin Fauler will mention and ask what stop us from deleting these references manually? I will answer: nothing, but such decisions would be bulky and ugly. In this case I might need to realize something like dispose() in GuestbookEntry class:

public function dispose() : void
{
	comments = null;
}

and call this method everywhere where I say goodbye to the instances of entries in the guest-book. It is boring, old-fashion and not practical at all.

UPD.: After discussing with colleagues I found out some situations where weak references may play a dirty trick on you. For example if you have an object without strong references which is linked to another object by weak reference it would receive events until it is deleted by garbage collector and probably the processing of these events may appear to be unexpected as far as you  have forgot about that object. To avoid such situations you of course need to delete listeners manually.

My example does not have that kind of issue. As guest-book entries are deleted along with their comments it is impossible to change the collection of comments after straight references to GuestbookEntry are removed and before they are deleted by garbage collector.

class ServiceBase
{
	public function ServiceBase(destination : String,
		resultHandler : Function = null, faultHandler : Function = null)
	{
		_resultHandler = resultHandler;
		_faultHandler = faultHandler;

		_remoteObject = new RemoteObject(destination);
	}

	protected function call(name : String, args : Array) : void
	{
		CursorManager.setBusyCursor();

		var operation : AbstractOperation = _remoteObject.getOperation(name);
		operation.addEventListener(ResultEvent.RESULT, onResult);
		operation.addEventListener(FaultEvent.FAULT, onFault);
		operation.send.apply(operation, args);
	}

	protected function onResult(event : ResultEvent) : void
	{
		CursorManager.removeBusyCursor();

		if (_resultHandler != null)
		{
			_resultHandler(event.result);
		}
	}

	protected function onFault(event : FaultEvent) : void
	{
		CursorManager.removeBusyCursor();

		if (_faultHandler != null)
		{
			_faultHandler(event.fault);
		}
	}

	private var _resultHandler : Function;

	private var _faultHandler : Function;

	private var _remoteObject : RemoteObject;
}

I have seen similar solutions in different projects but they were not that useful. The class is not very clear for understanding itself but with the second one it will be easier to get the idea:

class GuestbookService extends ServiceBase
{
	public function GuestbookService(resultHandler : Function = null,
		faultHandler : Function = null)
	{
		super("GuestbookAction", resultHandler, faultHandler);
	}

	public function getGuestbookEntries() : void
	{
		call("getGuestbookEntries", arguments);
	}

	public function getEntryById(id : Number) : void
	{
		call("getEntryById", arguments);
	}

	public function updateEntry(id : Number, text : String) : void
	{
		call("updateEntry", arguments);
	}
}

That class is a service for working with a guestbook. It has all the methods which server class GuestbookAction (Servlet, Facade depends of platform) do. The constructor has non-required arguments resultHandler and faultHandler, these functions are invoked with the result of a server callback or error information. Usage example:

new GuestbookService().updateEntry(5, "Nice solution!");

or

new GuestbookService(onGetEntryById).getEntryById(6);

function onGetEntryById(result : GuestbookEntry) : void
{
	_list.addItem(result);
}

The main feature is that we do not save the reference to GuestbookService instance, it is unnecessary after the call is completed. That issue may be useful if we are going to make multiple server calls. In that case we could create a service instance for each call.

I like this approach much more then low level syntax based on RemoteObject instance because it is simple and clear. That kind of inheritors could be also generated automatically on the base of structure of server classes. In that case you get a total control over server and client methods accordance. If there are some mismatches the compiler will not be able to build your project.

That kind of solution may also help you with unit-testing. You can replace the base class of your service with something like MockServiceBase.

First let’s overview application types to search for the fertile field for starting Flex development. Apparently we can already divide the applications we are interested in into desktop and web-top applications. Web applications may be usual (casual) or RIA, and each of them may have either front-end (surface site) or back-end (admin panel). We must never forget that they may be internet type for casual men of the web and intranet type for corporative users. With the help of Adobe AIR Flex became available on desktop but its usage comply with the same requirements as it does on web.

Web applications which are not RIA

You almost never need Flex to develop classic sites. I mean home pages, news services, forums, blogs, portals, social networks etc. Everybody who try it on the base of anything except HTML+JS, receive inflexible hardly indexable craft which has problems with text rendering and holding standard behavior in browsers and so on.

I took part in the development of such a kind of project in Sonopia. Our authorities who were impressed by RIA features wanted us to work out a social network on Flex which supposed to be full of media content and other ultra-things. As a result we got the list of standard services such as Dashboard, Profile, Photos, Guestbook that appeared to be at least awkward. Users could not put formatting tags, photo references and flash widgets in Guestbook. Site navigation did not synchronize properly with the button “Back” in browser. The application weighted 1,5 Мb performing the minimal list of functions. Once everybody had noticed that the speed of development of something that should have not been considered as Flex was twice as long as using HTML. The rest of the project was written using standard technologies. As a result we came up again problems with synchronization between both HTML and Flex parts of the project. A bit later Flex developers crew was disbanded and the project failed.

Another example is portal top4top.ru. Although it was foreseeingly written using pure Action Script it is a spectacular example of incorrect positioning of technology (not to mention the whole ideological trend).

For personal interest while studying Flex I made with the help of it several standard web sites for the Etwas Unders band and for JMAK studio. As far as the number of chapters and content was not so wide they looked good enough. Although lots of inviters could not understand why I did use Flex. I agree there was no proper reason for this. The only advantage is that there were almost no problems while adapting them to the different browsers (I agree that it could be the main advantage in some cases).

Recently I came across xoalt.com the internet-catalogue of goods. Such projects as well as internet-markets or just catalogues of something you must never develop with Flex. The main feature of such projects is high accessibility to searching engines in which Flex as well as all flash applications traditionally is not too good.

The development of administrative panels is also quite doubtful. You will have some problems in case you need flexible work with text but if you need to show a lot of tabular data with ability to edit it then Flex with AdvancedDataGrid component may be useful. Drag-n-drop is also possible on JS but I do not resist the fact that Flex may do it easier and more quickly.

RIA

Strange though it may appear Flex does not always rule here also. Sometimes it seems that in general flash player is used only for playing music and video. But once HTML 5 is likely to support these features why should we use Flex? Though it may seem that Flex will never find its stable field and is always going to be just an alternative but do not worry there is a range of situations were Flex is totally useful. I am going to describe something like a project requirements which can be done successfully if you choose Flex.

“We need to develop a huge cross-browser web system for monitoring/management/statistics of particular processes of particular company or product. It is expected that there would be lots of hierarchic or tabular data in the system which you need to sort out, group or edit. We need to develop more then ten different forms of entering and editing data. The code must realize OOP practices and be self-descriptive as far as the project is quite long-term and staff turnover is inevitable.”

or

“We need the on-line system for processing video-signals from several sources as well as appropriate UI for base editing and saving content to server.”

We might come up with more examples and all of them would be connected with similar feature which is essential for Flex.

Flex is the best way to develop web applications with big amount of forms including custom input controls with the ability to skinning them including all multimedia features of flash-player on the object oriented code base which is easy to support and maintain.

Since these criterias fully content corporative systems we do not see too many Flex applications that would be popular among well-known internet services except on-line photoshops and video editors.

Now I am involved in developing such a corporative system to manage advertising content on television. Instead of being long-winded I would present several UI wireframes which must be realized very soon.

I suppose there is no need to give any extra comments about why Flex was used here. This article altogether is one big comment which was caused by this project.

To conclude we should resume saying obvious things. Your purpose as a developer is to weight lots of  factors of future application and basing on this information not to chose (which happens more often) or to chose Flex. If you are being hired as a Flex developer in a project where its role is doubtful or even absurd then think twice not to become weak link in the eyes of rude java-developers or proud-selves c#-developers, you know, your team-mates (I have such an experience).

I was impressed by great feedbacks of RIA-gurus and decided to find out that is the matter. Don’t expect, I am not going to write about Mate’s model behavior but I will write only a few sentences. Mate is really cool!

I think the success of Mate relates to the fact that framework is not ported but exclusively written for Flex. It uses the main (maybe not very correct) principals and peculiarities of Flex Framework, such as:

• Inheritance of all visual components from EventDispatcher which give us possibility to use bubbling-events as transport messages between View and Model.
• Binding for IOC (Inversion of Controls).
• MXML for describing in simple way dependency declarations between application’s layers.

All I have described above works with your custom classes and components without mandatory inheriting of fatiguable abstract classes for commands, mediators, models etc. And for afters Mate Framework is extensible by custom plugins.

Altogether you could get the first impression after reading Mate documentation not longer then one hour. Reviewing of the source code confirms that framework’s authors are good professionals who turned back Flex’s issues to benefits. Let’s use it.

The component ResizeableLayoutBox is used for creating a GUI like dockable IDE. It must be used with CollapsablePanel which give us a possibility to expand and collapse panels.

Current realization of the component supports either a vertical (Accordion way) positioning or a horizontal one. Size of the panel can be changed by dragging it’s header by the mouse. While resizing such properties as minWidth, maxWidth, minHeight, maxHeight are considered.

Classes are located in Go!Verla Library.

Thanks to the article(Installing AIR Runtime Environment on Mac OS X) at last I have installed AIR Runtime Beta 3 for Mac OS X Leopard.

The problem was in “air_b3_mac_121207.dmg.bz2″ file which I get from Adobe’s site. The file has incorrect extension *.bz2, it is automatically added by Safari but it’s useless. The file with this extension raise an error in Disk Utility: “There are not mountable filesystem in package”. So, after file was renamed to “air_b3_mac_121207.dmg” the installation of AIR Runtime executes perfectly. ]]> http://tearaway-tea.com/blog/2007/12/air-runtime-installation-problems/en/feed/en/ 0 http://tearaway-tea.com/blog/2007/10/patternrectangularborder-component/en/ http://tearaway-tea.com/blog/2007/10/patternrectangularborder-component/en/#comments Wed, 17 Oct 2007 20:08:05 +0000 tearaway_Tea http://tearaway-tea.com/blog/?p=249 There is an example.

The component PatternRectangularBorder can be used as background for such containers as Application, Canvas, HBox, VBox, Form etc. It based on RectangularBorder and BitmapData classes from Flex 2 SDK and works more natural then CSS image patterns in WSBackgroundPixelSkin component.

The component supports base Container’s style property background-image, also it extends that one by a new style property background-repeat which is usually used in HTML CSS. Possible values are

• repeat
• repeat-x
• repeat-y

I was unable to extend RectangularBorder because it’s totally private so copy-past way is a solution here for me.

The class is located in Go!Verla Library.

List of related links

• Pimp your Flex app using WSBackgroundPixelSkin
• tile or repeat an image into a flex application background II