Friday, January 15, 2010

GroupBox / FieldSet Legend Component / Spark Skin in Flex 4

I have written a new custom component/spark skin for Group Box. I tried with many of the GroupBox components that are developed in Flex 3. But somehow, I was not able to get it working as I expected. So, I ended up creating a Spark Skin and custom component for this Group Box.

Here is the sample look and feel of the component. It can be rendered with out label as well.



It has total of 3 steps to make use of the complete component.
  1. Create a Custom Component called GroupBox which has a Property called "label"
  2. Create a GroupBox Spark Skin which accepts arguments for Label. (Can add more arguments for background shadow)
  3. Make use of the new GroupBox component with the GroupBoxSkin in your component mxml
1. Create a Custom Component for GroupBox  
    Let us name it "GroupBox.as"

2. Create a Spark Skin for Group Box     
    Let us name it "GroupBoxLegendSkin.mxml"
]]> -->

3. Use it in your MXML Component

Let me know, if you see any issues while using it.
If you can add / improve the functionality you are most welcome for the suggestions.