Flex widget with rounded corners (code included)

It should be really easy to create the template for a widget with rounded corners in Flex. It is certainly not a difficult task, but it is not obvious. Rather than explain the things you need to pay attention to, I will just post the code below. After setting up a flex project with the following code, add and remove some lines to see what they do. Feel free to post any questions you have here.

Here is the application code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="absolute" width="450" height="220" backgroundAlpha="0">
 
	<mx:Style>
		Panel {
		   borderStyle: solid;
		   borderThickness: 0;
		   cornerRadius: 10;
		   borderColor: #cccccc;
		   backgroundColor: #eeeeee;
		   roundedBottomCorners: true;
		}
	</mx:Style>
 
	<mx:Panel id="application_container" width="100%" height="100%" 
		dropShadowEnabled="false">
 
	</mx:Panel>
 
</mx:Application>

In your wrapper file, make sure to set wmode to transparent. Here is how you do it with SWFObject (assuming your object is “so”):

so.addParam("wmode","transparent");

If you enjoyed this post, make sure you subscribe to my RSS feed!