Archive for category Flex

Proposal for a new logo for Apache Flex

This evening I read that the Apache Flex project needs a new logo. Flex is originally an Adobe product, but Adobe no longer wants to be the owner of the product and it has moved Flex development towards a community based model. The goal is that Flex will be part of the Apache foundation. One of my logos visualizes this by declaring Flex using an xml tag with Apache as a namespace instead of the mxml (Macromedia xml). I think that this explains exactly the situation.

Read the rest of this entry »

No Comments

Pitfall when using Resize effect in Flex.

I recently tried to use the Resize effect to animate the width of a component inside an HGroup. The height should remain fixed to 100%. But after using the effect once, the height never updated itself to the height of the HGroup.

I guess the reason is that the Resize effect always updates both width and height, even if you specify just one of the two dimensions. So when the Resize ends, not only the width has changed, but also the height, i.e. it no longer contains the value NaN.

I fixed this by using AnimateProperty, so I could animate just the width and leave the height to NaN and the percentHeight to 100;

No Comments

Open Data Eindhoven – Apps for Eindhoven

I recently submitted my ‘app’ (hate the word) called ‘Buurtvergelijker’ for the Apps for Eindhoven Challenge. For those who don’t know, Eindhoven is situated in the south of The Netherlands and it’s the place where Philips, PSV and Arie Ribbens have their roots. The Challenge is one of the many ‘Apps for <some city>’ challenges that are  popping up all over the globe these days. I worked on it for about a week and would have worked on it much longer if the closing date hadn’t prevented me from doing so.

More details can be found through the application itself. Only in Dutch unfortunately.

Edit on July 3, 2011:

I won the competition. See here (in Dutch).

No Comments

Mozilla Open Data Visualization competition


You can read about the competition as an introduction.

Or go straight to the visualization.

I started looking at the answers that the Mozilla team was looking for, but at the same time I tried to find what kind of information I would be interested in myself. One of the questions that the Mozilla team wants to be answered is:

Do people who use more tabs use more bookmarks or fewer bookmarks?

Inspired by that question, I was wondering if a lot of people are like me: hording bookmarks but never use them. Or perhaps there are people that diligently structure their bookmarks and by doing so can have their surfing needs satisfied by only selecting bookmarks. And can we identify different bookmarking habits by each age group?

Preprocessing the data

Data per user session

To be able to get a grip on the data I decided to extract the following parameters for each user session. (I define a user session as the user actions between starting up the browser and browser close/crash.):

  • duration (in milliseconds)
  • inactive time (in milliseconds)
  • number of stored bookmarks at browser start up
  • number of bookmark folders at browser start up
  • maximum folder depth at browser start up
  • number of selected bookmarks
  • number of tabs at startup
  • number of windows at startup
  • the event type of the last event (usually ‘browser shutdown’, but this is different if the browser crashes (?))
  • is the browser restarted after a crash

Data per user

Then for each user, I aggregated all sessions to a single record describing for each user:

  • average session time
  • average number of selected bookmarks per hour
  • average number of stored bookmarks at browser start up
  • average number of folders at browser startup
  • average bookmark depth
  • average number of tabs at start up
  • the age group to which the user belongs

Data per number of bookmarks interval

Finally, based on the individual user statistics, I categorized all users into categories that are based on the average number of bookmarks . The categories are power of two intervals, i.e.:

  • 1 bookmark
  • 2 up to 4 bookmarks
  • 4 up to 8 bookmarks
  • 8 up to 16 bookmarks
  • 16 up to 32 bookmarks
  • and so on


People with more bookmarks use more bookmarks

Sounds pretty obvious, but if I look at myself: I do a lot of bookmarking, but (I think) I almost never use them.

Fig. 1

On the horizontal axis we see the number of stored bookmarks. On the vertical axis we see the number of selected bookmarks per hour. Clearly, the line is ascending. There is a big orange bubble in the category 4096 up to 8192 bookmarks. Using the tooltip, we can see that the bubble relates to 3 users. The application gives you the possibility to ignore small groups. By using one of the controls, we can hide all bubbles that correspond to 6 users or less. We then get a different picture. See Fig. 2.

People with more bookmarks have more tabs open at browser start up

The big orange bubble of Fig. 1 is filtered out and the remaining bubbles scale to fit between the minimum and maximum bubble radius. We see (by examining the bubble size) that people with more bookmarks have more tabs open at browser startup.

Fig. 2

We see the same pattern if we don’t use the bubble size to indicate the number of open tabs, but if we use the vertical axis, see Fig. 3. In Fig. 3 we choose that the bubble size corresponds to the number of users. So we can see that most users (in the selected age groups) have between 8 and 256 bookmarks.

Fig. 3

Younger people use bookmarks more often

Using the controls at the lower right, we can set the transparency of each series. If we select the series that correspond to users of age:

  1. 18 to 25 years old
  2. over 55 years old

We clearly see that the younger age group uses more bookmarks (green bubbles are positioned higher, albeit with the top purple bubble as an exception).

Fig. 4

People with more bookmarks surf longer

Differences are small, but you can see a trend of longer session times (time between starting up a browser and closing it down) of people with more bookmarks. See Fig. 5.

Fig. 5

Most users in age group 18-25, increasing bookmark usage with increasing number of stored bookmarks

A difficult (and incomplete) title. But that’s why we need visualizations: explain it with images! This is one of my favorite images of this series. You can clearly see the different age group trends:

  • Most users in age group 18-25
  • Number of users decrease with each step to the next (older) age group
  • bookmark selection increases as the number of stored bookmarks increase


During development/analysis, I used Adobe Flash Builder 4, Flex SDK 4.1, Adobe AIR and SQLite to do all parsing and visualization.

The final product is a web application and only uses Flex SDK 4.1 (with an xml-file as input). Right-click above the application to view/download the source code.


Flex tree event ITEM_CLOSE and ITEM_OPEN dispatched too soon

I’m not really sure if Adobe would agree that these events are dispatched too soon, but here’s the story.

If you manually click on a tree item that has children, the tree component processes this event immediately and dispatches one the mentioned events. If you are listening to these events, you will find out that during handling the event, the tree property ‘isItemVisible’ does not give expected results.

I would expect that handling the event ITEM_CLOSE, the property ‘isItemVisible’ would return false for the closed item and its children. But this is not true, because at this point the tree has not updated the variable ‘visibleData’ that is used in the method ‘isItemVisible’. The variable ‘visibleData’ is updated in the function updateDisplayList(). So you’ll have to wait for the event updateComplete if you want to access an updated ‘isItemVisible’.

No Comments

Away3DLite uses an inverted y-axis

I switched over from Away3D to Away3DLite, hoping that my performance issues would be solved. And indeed, Away3DLite is much faster than it’s big brother. However, I suddenly noticed that the y-axis seemed to be inverted (negative values above the root and positive values under the root). I first thought I made some errors with the camera and that I was seeing everyting upside down.

This post seems to explain the reason: The y-axis is inverted.

Strange thing is, however, if you place a cone on the scene, it is pointing upwards as you would expect when using a normal (not-inverted) y-axis. Makes it all a bit confusing, but now you know…

No Comments

Refer to an embedded image by a string variable

I’m making a small banner like application. All images have to be embedded into the application, but I want to be able to dynamically create these images. The position on the stage is configured using an external XML file. So, somehow, I have to be able to make references to the embedded images in my XML-file.

Example of an embedded image:

private var myImage:Class;

An easy way to do this is of course:

var imgClass:Class;
switch (imageName) {
    case 'myImage':
        imgClass = myImage;
   case 'otherImage':
        imgClass = otherImage;

But there is an easier solution. Say that the image is embedded in MyView.mxml, then you can use this statement in MyView.mxml;

var imgClass:Class = getDefinitionByName(getQualifiedClassName(this)+'_'+imageName) as Class;

If you use the debugger, you’ll see that imgClass looks like: MyView_myImage. Or more specifically, if MyView.mxml is located in package, e.g. ‘views’, then imgClass = views.MyView_myImage;

No Comments

How to make a Dictionary bindable

The Dictionary class in Flex is not bindable. To make a Dictionary bindable, use the ObjectProxy class as a wrapper.

public class BindableDictionary extends ObjectProxy
		private var _state:Dictionary;
		public function BindableDictionary() {
			_state = new Dictionary();


Now you can set eventlisteners on the wrapper:

var bd:BindableDictionary = new BindableDictionary();
bd.addEventListener(PropertyChangeEvent.PROPERTY_CHANGE, handler);

I haven’t done full functional testing on this, but it seems to work fine so far.


Monthly open source donation: Efflex – Flex effects

Efflex logoI wanted to donate in March to the Efflex project. There is a Paypal button on the site, but it doesn’t lead to page where you can actually donate. So I’ll wait until this button is fixed.

The project presents some excellent effects, especially for use with viewstacks.

Update april 14, 2010:
The button now works!


Flex HSlider tooltip does not respect stage boundaries

Had some difficulty in formulating a good title. But the problem is as follows:

If you have an HSlider and the right side of the slider is close to the right side of the stage, the tooltip may ‘walk off’ the screen. See the following image.  The grey background is the standard Flex Halo background. The green background is the color of my desk top.

This does not happen at the left side of the stage. If you drag the thumb to the left end of the slider, you see some smart things happening: the tooltip gets stuck at stage.x = 0;

I set myself to solve this problem and came up with a solution, which may also be called a hack. It uses mx_internal namespace, which means that it may not work in future versions of the Flex SDK. But I don’t know a better way. You do? Please let me know!

Step 1. Extend the SliderDataTip class:

package cbs.components.sliderClasses
	import flash.geom.Point;

	import mx.controls.sliderClasses.Slider;
	import mx.controls.sliderClasses.SliderDataTip;

	public class MySliderDataTip extends SliderDataTip
		private var _slider:Slider;

		public function MySliderDataTip(owner:Slider):void {
			_slider = owner;

	 	override protected function updateDisplayList(w:Number, h:Number):void {
			// Check if the tip overlaps the right side of the slider

			if (_slider) {
				var sliderPos:Point = _slider.localToGlobal(new Point(0, 0));
				if (this.x + w >= sliderPos.x + _slider.width) {
					this.x = sliderPos.x + _slider.width - w;

Extend the HSlider and override the onThumbPress function.

override mx_internal function onThumbPress(thumb:Object):void {
	// Hack this function, to be able to generate our own slidertip and
	// set a parameter.
	if (!dataTip) {
		dataTip = MySliderDataTip(new MySliderDataTip(this));

		var dataTipStyleName:String = getStyle("dataTipStyleName");
		if (dataTipStyleName)
			dataTip.styleName = dataTipStyleName;

That’s it!

No Comments