Here are some of the most important new features :

• Minimize/Close to tray (WINDOWS)
• Local Books
• Online Books Download
• Inline Search
• Performance Upgrade (SQLITE)
• Custom tree icons
• Complete design makeover

Take a look on our website to learn more …

Somethings been bugging me while skinning a flex application :

The label from the selected tab from the TabNavigator component is 1px lower than the other tabs. As you can see in the example.
(It has something to to with the bottom border I’m guessing).

This can help as a visual support you are on a different tab, but I found it rather annoying, so here is my fix for it.
A quick fix by changing the “paddingTop” property.

View source is enabled so can download the example there.
http://ninetynine.be/blog/wp-content/uploads/2009/12/srcview/index.html

Code after the jump.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

import mx.events.IndexChangedEvent;
import mx.events.FlexEvent;
 
/*
*	@author: Michiel Vancoillie
*	http://www.ninetynine.be
*/
 
private function init():void{
 
	//fix the first selected tab
	fixedTabNav.addEventListener(Event.ADDED_TO_STAGE,onTabNavCreated);
	//fix the newly selected tab
	fixedTabNav.addEventListener(IndexChangedEvent.CHANGE,onTabNavChanged);
 
	//JUST ADD THE SAME EVENTLISTENERS TO ALL TABNAVIGATORS YOU WANT FIXED
	//notfixedTabNav.addEventListener(Event.ADDED_TO_STAGE,onTabNavCreated);
	//notfixedTabNav.addEventListener(IndexChangedEvent.CHANGE,onTabNavChanged);
}
 
private function onTabNavCreated(e:Event):void{
	var tabNav:TabNavigator = e.target as TabNavigator;
	tabNav.getTabAt(tabNav.selectedIndex).setStyle('paddingTop',-1)
}
 
private function onTabNavChanged(e:IndexChangedEvent):void{
	var tabNav:TabNavigator = e.target as TabNavigator;
	//reset the old tab
	tabNav.getTabAt(e.oldIndex).setStyle('paddingTop',0);
	//fix the new tab
	tabNav.getTabAt(e.newIndex).setStyle('paddingTop',-1);
}

‘Why is this useful?’, you could ask. Well one situation is you’re creating an online rich text editor, and you want to add a font
to the font list. You would only have to edit the css and upload the new swf instead of the whole application. Or you want a client
to be able to add fonts without him having the source code from the application.

Luckily it’s possible in Flex to load runtime CSS compiled as an SWF with the StyleManager class.
StyleManager on LiveDocs

Fonts.css Example :

1
2
3
4

@font-face {
    src:url("fonts/Arial.ttf");
    fontFamily:"Arial";
}

How to compile the CSS to SWF?



In Flex Builder you can right click any CSS inside your source and check the “compile CSS to SWF” option.


An alternative way to compile the CSS to SWF is using the command line :

1

mxmlc Fonts.css

Loading the compiled stylesheet

For the example where we just compiled the Fonts.css to Fonts.swf

1
2
3

import mx.styles.StyleManager;
 
StyleManager.loadStyleDeclarations("Fonts.swf");

It’s as simple as that… you can now start using the font.
The nice thing about this is you can now load your fonts visually using an intermediate loader or animation.


Loading the stylesheet visually with intermediate loader

First thing we do is create a custom titlewindow with a preloader in it to show the loading.
We can catch the StyleEvent.COMPLETE with an IEventDispatcher.
Right click the example for the source code.

You can use this to ‘preload’ any stylesheet.

Compiling CSS to SWF and loading it runtime is also used for application with theme support.
You can read more about that and view an example here : Understanding runtime CSS

Happy coding!