Real World Flex/ColdFusion: Part 4

Today I want to talk a little about making your application look nice. If you take a look around there are tons of articles about skinning your Flex applications. This is great for most people but If you know me I am not a designer and I won't even play one on TV. With that said there are some really great improvements in Flex 4 coming out that will help improve the workflow process.

For us non designers there are some really great resources out there for making our Flex applications look nice. One of my favorites is the ScaleNine Gallery. There is a listing of different themes that you can use in your application. There are very easy to use as well, simply download the the theme, drop it into your application, point to the css file and make sure your paths are correct.

For this project I am going to use the Undefined Skin One theme. If you following along at home the first thing you will want to do is download the theme. I created a folder named Undefined under our themes directory. Extract the content of the src folder from the download to our new themes/Undefined folder. Next we are going to point to our css file. After you do this your going to have to go through and clean up some of the paths, such as paths to images, fonts and package names.

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:programmatic="themes.Undefined.assets.programmatic.*" preloader="themes.Undefined.assets.programmatic.CustomPreloader"> <mx:Style source="themes/Undefined/css/skinPreview.css"/> <mx:HBox top="20" left="20" right="20" height="25"> <mx:Label text="RocketFM"/> </mx:HBox> <mx:HDividedBox top="50" left="20" right="20" bottom="50"> <mx:Tree width="25%" height="100%"/> <mx:DataGrid width="75%" height="100%"/> </mx:HDividedBox> <mx:HBox left="20" right="20" bottom="20" height="25"> <mx:Label text="Status text"/> <mx:Spacer width="100%"/> <mx:Button label="Delete"/> <mx:Button label="Download"/> <mx:Button label="Upload"/> </mx:HBox> </mx:Application>

The theme has basically created styles for all of the built in components we will use. Now we need to create our own stylesheet for custom components / styles that we will define. Here I am going to create a new stylesheet and create 2 styles for both our logo and status text. After we define our styles simply setup the style name in our label components.

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:programmatic="themes.Undefined.assets.programmatic.*" preloader="themes.Undefined.assets.programmatic.CustomPreloader"> <mx:Style source="themes/Undefined/css/skinPreview.css"/> <mx:Style source="assets/css/stylesheet.css"/> <mx:HBox top="20" left="20" right="20" height="25"> <mx:Label text="RocketFM" styleName="applicationTitle"/> </mx:HBox> <mx:HDividedBox top="50" left="20" right="20" bottom="50"> <mx:Tree width="25%" height="100%"/> <mx:DataGrid width="75%" height="100%"/> </mx:HDividedBox> <mx:HBox left="20" right="20" bottom="20" height="25"> <mx:Label text="Status text" styleName="statusText"/> <mx:Spacer width="100%"/> <mx:Button label="Delete"/> <mx:Button label="Download"/> <mx:Button label="Upload"/> </mx:HBox> </mx:Application>

.applicationTitle { color:#ffffff; fontFamily: Verdana; fontSize: 18; fontWeight: bold; } .statusText { color:#ffffff; font-style:italic; fontSize:13; }

With very little effort on our end we can go from this

to this