Horizontal Multiline Layout

Sometimes it is necessary to place elements horizontally (like HorizontalLayout) in several lines instead of just one line:


Continue reading “Horizontal Multiline Layout”

Fit buttons in the toolbar

Sometimes buttons does not fit in the toolbar:


Continue reading “Fit buttons in the toolbar”

Spark Tree – faster, with icons and text colors

I’ve just updated the Spark Tree custom component. Here are the improvements and new features. Continue reading “Spark Tree – faster, with icons and text colors”

Spark Tree

Unfortunately Flex 4 does not have Spark Tree and MX Tree has 99 bugs at this moment.

In our project we were in need of Spark-based Tree for some time so inspired by Alex Harui I wrote it:

Download SparkTree4.0.swc for Flex SDK 4.0. and 4.1
Download SparkTree4.5.swc for Flex SDK 4.5 and higher
Download source code

Creating tree item renderers

Tree item renderers should extend TreeItemRenderer. Here is the default item renderer.

License: MIT.

Runtime icons for Flex components

Bitmap or BitmapData can not be used as icon in Flex components like MX Button because they want Class that will instantiate as BitmapAsset.

Solution

Create cache of special classes. Each of them will be able to become an icon. Here is RuntimeBitmapAsset.as that can be used the next way:

  1. var bitmapData:BitmapData = new BitmapData(100, 100);
  2. bitmapData.perlinNoise(100, 100, 3, 10, true, true);
  3. var icon:Class = RuntimeBitmapAsset.getClass(bitmapData);
  4. button.setStyle("icon", icon);

P.S.: The same for DisplayObject-s

The same method can be used to wrap any DisplayObject into Class.

Start/stop all nested MovieClips

Animation takes CPU time and sometimes it’s useful to stop/play it. The problem is that MovieClip’s in animation can be hardly nested.

Solution

Stop/start MovieClips recursively:

  1. public static function massStop(target:DisplayObjectContainer,
  2.     frame:Object = 1):void
  3. {
  4.     if (target is MovieClip)
  5.         MovieClip(target).gotoAndStop(frame);
  6.     var n:int = target.numChildren;
  7.     for (var i:int = 0; i < n; i++)
  8.     {
  9.         var child:DisplayObjectContainer = target.getChildAt(i)
  10.             as DisplayObjectContainer;
  11.         if (child)
  12.             massStop(child, frame);
  13.     }
  14. }
  15.  
  16. public static function massPlay(target:DisplayObjectContainer):void
  17. {
  18.     if (target is MovieClip)
  19.         MovieClip(target).play();
  20.     var n:int = target.numChildren;
  21.     for (var i:int = 0; i < n; i++)
  22.     {
  23.         var child:DisplayObjectContainer = target.getChildAt(i)
  24.             as DisplayObjectContainer;
  25.         if (child)
  26.             massPlay(child);
  27.     }
  28. }

Change font size in the whole app with Ctrl+/-

Browser supports changing page font size with Ctrl+/- and Ctrl+scrolling, but Flex applications are not affected by this. People with failing sight can not use such applications.

Solution for Flex 4

Work with StyleManager and set fontSize style at runtime. Here is FontSizeManager.as [plain] that does all the job.


View source

Usage examples

Simplest
  1. new FontSizeManager();

Now pressing Ctrl+ will increase font size in the whole application (if it is not set manually, see “Known issues” later).

Bigger or smaller

If some component need to have font size 2 pixels bigger then others, set it’s styleName to "fontSizeDelta2". The same
"fontSizeDelta-3" will make font size 3 pixels less then usual.

  1. <s:label text="I'm 2 pixels bigger" styleName="fontSizeDelta2"/>
Own CSS declarations

Use “fontSizeDelta” style property to make FontSizeManager
inject corresponding fontSize in style at runtime:

.header
{
    fontSizeDelta: 2;
}


Known issues

Note: FontSizeManager can not affect styles and components
that have fixed fontSize:

.popupText
{
    fontSize: 11px;
}

<s:Label text="I'm always 11px" styleName="popupText"/>
<s:Label text="Me too" fontSize="11"/>

Giving focus to the application on startup

In order to make Ctrl+/- work right after application starts (without clicking on it to give focus), set focus automatically:

  1. <body scroll="no" onLoad="document.getElementById('${application}').focus();"/>

Does not work in FireFox and seems that there is no way to fix this.

Generate color theme for Flex application using Camera

User may want to make Flex application look like himself, his room or his jacket.

Solution

Use Flex 4 color styles chromeColor, accentColor and screenshot from the Camera.

http://kachurovskiy.com/f/ria/10/camera-theme/ColorSchemes.html

Flex 4 provides coloring via styles chromeColor, color, selectionColor, accentColor and so on. Camera provides image of whatever user target it on. The main problem is how to extract colors from the BitmapData. I have user 2 methods:

  • Sorting colors by saturation and taking “distant” ones
  • Breaking colors into clusters usin K-means clusterization algorithm

View source code.