Flexmdi is a good flex component to create and manage multiple window in a flash desktop, and its now part of flexlib open source project. One of its key features is the ability to customize the styles of the window. This owes to the power of css in flex.

Following is a sample css file for flexmdi taken from the example with flexlib. You can see how easy it is to define a new feel and look for flexmdi window. For better understood, I have add some comments here.

• windowControlClass is a class define the layout of title buttons, such as close button, maximize button, etc.
• If a window is focused by mouse-click, then its style name change to mdiWindowFocus. If a window loses focus, then its style name change to mdiWindowNoFocus.

Application
{
	background-image: Embed(source="assets/img/wallpaperOS9.gif");
}

{
	windowControlsClass: ClassReference("windowControls.MacOS9WindowControls");
	titleStyleName: "macTitle";
}

.macTitle
{
	fontFamily: Georgia;
	fontSize: 12;
	fontWeight: normal;
	color: #000000;
}

.mdiWindowFocus
{
	borderColor: #CCCCCC;
	borderAlpha: 1;
	borderThicknessLeft: 2;
	borderThicknessTop: 0;
	borderThicknessBottom: 2;
	borderThicknessRight: 2;
	roundedBottomCorners: false;
	cornerRadius: 5;
	dropShadowEnabled: false;
	headerHeight: 29;
	backgroundAlpha: 1; 
	backgroundColor: #FFFFFF;	
	titleBackgroundSkin: Embed(source="assets/swf/WindowsAssets.swf", symbol="macHeaderFocus");
}

.mdiWindowNoFocus
{
	borderColor: #CCCCCC;
	borderAlpha: 1;
	borderThicknessLeft: 2;
	borderThicknessTop: 0;
	borderThicknessBottom: 2;
	borderThicknessRight: 2;
	roundedBottomCorners: false;
	cornerRadius: 5;
	dropShadowEnabled: false;
	headerHeight: 29;
	backgroundAlpha: 1; 
	backgroundColor: #FFFFFF;
	titleBackgroundSkin: Embed(source="assets/swf/WindowsAssets.swf",
	symbol="macHeaderNoFocus");
}

.mdiWindowMinimizeBtn
{
	upSkin:        Embed(source="assets/swf/WindowsAssets.swf", symbol="minimizeBtnOS9");
	overSkin:      Embed(source="assets/swf/WindowsAssets.swf", symbol="minimizeBtnOS9");
	downSkin:      Embed(source="assets/swf/WindowsAssets.swf", symbol="minimizeBtnOS9");
	disabledSkin:  Embed(source="assets/swf/WindowsAssets.swf", symbol="minimizeBtnOS9");
}

.mdiWindowMaximizeBtn
{
	upSkin:        Embed(source="assets/swf/WindowsAssets.swf", symbol="maxRestoreBtnOS9");
	overSkin:      Embed(source="assets/swf/WindowsAssets.swf", symbol="maxRestoreBtnOS9");
	downSkin:      Embed(source="assets/swf/WindowsAssets.swf", symbol="maxRestoreBtnOS9");
	disabledSkin:  Embed(source="assets/swf/WindowsAssets.swf", symbol="maxRestoreBtnOS9");
}

.mdiWindowRestoreBtn
{
	upSkin:        Embed(source="assets/swf/WindowsAssets.swf", symbol="maxRestoreBtnOS9");
	overSkin:      Embed(source="assets/swf/WindowsAssets.swf", symbol="maxRestoreBtnOS9");
	downSkin:      Embed(source="assets/swf/WindowsAssets.swf", symbol="maxRestoreBtnOS9");
	disabledSkin:  Embed(source="assets/swf/WindowsAssets.swf", symbol="maxRestoreBtnOS9");
}

.mdiWindowCloseBtn
{
	upSkin:        Embed(source="assets/swf/WindowsAssets.swf", symbol="closeBtnOS9");
	overSkin:      Embed(source="assets/swf/WindowsAssets.swf", symbol="closeBtnOS9");
	downSkin:      Embed(source="assets/swf/WindowsAssets.swf", symbol="closeBtnOS9");
	disabledSkin:  Embed(source="assets/swf/WindowsAssets.swf", symbol="closeBtnOS9");
}

Now you can compile the css file into swf with flex builder.

Well, that's it for today. Next time I will show how to apply the complied window styles in Async Flash Studio.