CFtips.net

Setting up and connecting a simple CSS file with Flex 3

Filed under CSS , Flex

I consider myself a developer with limited design skills.  I decided this weekend that I wanted to change that by learning some simple design techniques for flex 3.  After doing a little research I came across the Flex 3 Style Explorer that makes a developer like me very happy!  I am sure it has been around a really long time but it is the coolest thing since *insert something nerdy*.  It basically creates all your css for you through a cool visual dashboard.  Here is a link if you wanna check it out:

http://examples.adobe.com/flex3/consulting/styleexplorer/Flex3StyleExplorer.html

Alright, now that we have a program that makes our CSS for us all we need to do is make a css file in flex 3, call it into our project and then apply the styles as needed.  Before we make a css file for our flex 3 project it is important (in my mind at least) that we stay organized.  I would recommend adding a couple subfolders to your flex 3 project.  People have different ways to organize a project but the picture below is how I have learned to do it.  Just right click to make a new folder and you can drag and drop them however you would like.

As a project grows or if you work in a team environment it is very important to stay organized or else the project will become a fragmented mess. (I have learned from experience!)

So now we need to make our css file.  It is as easy as,  File -< New -> CSS File.  Place the css file in the appropriate folder (for this example I will use "styles") and name the file whatever you would like (I will use "style").  Flex builder automatically starts your new css and all you have to do is copy and paste the css that the Flex 3 Style Explorer made for you.  Below is a sample of some css for a button.

It should be noted that by putting a period in front of ".Button" it will not be applyed to all buttons in the project and only the buttons that call that specific style.

Next, we need to call that style sheet into our mxml page.  I believe that there are many ways to do this but the easiest for me is to add <mx:Style> right after the <mx:Application>.  For this example here is the sample code:

Finally, all we need to do is call the styleName where ever we want.  For this example we call it within a button.  Here is the code for the button:

Click Design View and your styles are applied automatically!  I know this is something very simple but for a developer with limited design skills like myself it is the coolest thing since *insert something nerdy*. ;)