2/25/2011 Jaya's: GroupBox / FieldSet Legend Co…

Share Report Abuse Next Blog» Create Blog Sign In

Jaya's
Technical Posts, Links and Good Quotes

FR I D A Y , J A N U A R Y 15 , 2 01 0
Total Visitors
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.
Archives
Here is the sample look and feel of the component. It can be rendered with out label as well. ▼ 2010 (2)
► May (1)
▼ January (1)
GroupBox / FieldSet Legend
Component / Spark Skin ...

► 2009 (2)

About Me

Jayachandra / Jagadish
Adusumalli
Guntur, Tirupati, Andhra
Pradesh, India
View my complete profile

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"

01 package com.edsoft.flex.controls
02 {
03 import spark.components.SkinnableContainer;
04
05 public class GroupBox extends SkinnableContainer
06 {
07 private var _label : String;
08
09 public function GroupBox()
10 {

12
11 }super();
13
14 public function get label():String
15 {
16 return _label;
17 }
18
19 public function set label(value:String):void
20 {
21 _label = value;
22 }
23 }
24 }

2. Create a Spark Skin for Group Box

Let us name it "GroupBoxLegendSkin.mxml"

01 <?xml version="1.0" encoding="utf-8"?>

02 <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
03 xmlns:s="library://ns.adobe.com/flex/spark"
04 xmlns:mx="library://ns.adobe.com/flex/halo"
05 width="100%" height="100%"
06 creationComplete="initializeCustomProperties()">
07
08 <fx:Metadata>
09 [HostComponent("com.edsoft.flex.controls.GroupBox")]
10 </fx:Metadata>
11
12 <fx:Script>
13 < ! [ CDATA [
14 import spark.effects.interpolation.RGBInterpolator;
15
16 [Bindable]
17 private var groupBoxLabel:String="";
18
19 [Bindable]
20 private var backGrdColor:uint;
21 /**
22 * @private
23 */
…blogspot.com/…/groupbox-fieldset-lege… 1/2
2/25/2011 Jaya's: GroupBox / FieldSet Legend Co…
23 */
24 override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
25 {
26 backGrdColor = getStyle("contentBackgroundColor");
27
28 super.updateDisplayList(unscaledWidth, unscaledHeight);
29 }
30
31 private function initializeCustomProperties() : void
32 {
33 if(hostComponent != null) {
34 groupBoxLabel = hostComponent.label;
35 }
36 }
37
38 ] ] >
39 </fx:Script>
40 <!-- Define the skin states. -->
41 <s:states>
42 <s:State name="normal" />
43 <s:State name="disabled" />
44 </s:states>
45
46 <s:layout>
47 <s:BasicLayout/>
48 </s:layout>
49
50 <!-- layer 1: Define a Rect to fill the area of the skin. -->
51 <s:Rect
52 radiusX="3"
left="0" radiusY="3"
right="0.5" top="5" bottom="0.5">
53 <s:stroke>
54 <s:LinearGradientStroke weight="1"/>
55 </s:stroke>
56 </s:Rect>
57
58 <!-- layer 2: fill Back Ground Gradient-->
59 <s:Rect left="1" right="1" top="6" bottom="1.5" radiusX="3" radiusY="3">
60 <s:fill>
61 <s:LinearGradient rotation="90">
62 <s:GradientEntry color="0xFDFDFD" />
63 <s:GradientEntry color="0xDFDFDF" />
64 </s:LinearGradient>
65 </s:fill>
66 </s:Rect>
67
68 <mx:Canvas width="{gbLabel.width != 0 ? (gbLabel.width + 8) : 0}" height="{gbLabel.height}"
69 left="14" top="0" backgroundAlpha="0.95" backgroundColor="{backGrdColor}"
70 textAlign="center" />
71 <s:Label id="gbLabel" text="{groupBoxLabel}" left="18" top="0" fontStyle="italic" fontWeight="bold"/>
72
73 <!-- Define the content area of the container. -->
74 <s:Group id="contentGroup"
75 left="5" right="5" top="15" bottom="5">
76 </s:Group>
77
78 </s:SparkSkin>

3. Use it in your MXML Component

01 <custom:GroupBox label="Group Box with Label" skinClass="skins.GroupBoxLegendSkin">

02 <custom:layout>
03 <s:HorizontalLayout />
04 </custom:layout>
05
06 <s:Button label="Button 1"/>
07 <s:Button label="Button 2"/>
08 <s:Button label="Button 3"/>
09 <s:Button label="Button 4"/>
10 </custom:GroupBox>

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.

Posted by Jaya at 1:53 PM

Labels: FieldSet Flex 4, Flex 4 Component, Flex Component, GroupBox Flex 4, Spark Skin Flex 4

Newer Post Home Older Post

…blogspot.com/…/groupbox-fieldset-lege… 2/2