Flex2 Fieldset Component

Posted At : August 10, 2006 4:07 AM | Posted By : Mike Nimer
Related Categories: General,Flex,ColdFusion

One thing that keeps driving me nuts is the lack of a "FieldSet" component, like the html tag of the same name, in Flex. So I wrote one.

This component is based on the base VBox component so all of the properties and methods of the VBox apply. Here is an example of using the component.

<nimer:FieldSet
   label="This is the fieldset legend"
   borderStyle="solid" borderThickness="2" cornerRadius="10">
      
   <mx:Label text="Label"/>
   <mx:TextInput/>
      
</nimer:FieldSet>

Note: I've added this new component to the same .swc file as my DebugPanel component. Considering that the .swc now has more then one component, I've also renamed the .swc too. So, if you are already using the DebugPanel.swc you'll want to remove the link to that .swc file and create a new link to this nimerComponents.swc in your project.

Comments (12) | Print | Send | Download | del.icio.us | Digg It! | Linking Blogs | 3354 Views
Comments
[Add Comment]
Devin's Gravatar I'm still a bit unclear on how to install and call swc components. mind giving a instructions for this component?
# Posted By Devin | 8/24/06 3:17 PM
Mike Nimer's Gravatar To install this, do the following.

1) Right-Click on your project, go to the properties option
2) Select the "Flex Build Path" property panel
3) Select the "Library Path" tab
4) Click on the "Add SWC" button and browse to the .swc file you want to add.

To use the component, from the swc (after you've added the swc to the project).
1) in the mxml file you want to add it, add another xmlns in the root tag. Right next to the xmlns:mx="" attribute.
2) for the example above you would use (this is the same as an Import)
xmlns:nimer="com.mikenimer.components.*"
3) call the tag, using the namespace prefix you defined in step 2.
<nimer:FieldSet>...</nimer:FieldSet>

does that help?
# Posted By Mike Nimer | 8/29/06 5:07 PM
Olle Jonsson's Gravatar Thanks, Mike. That's a great and succinct walkthrough of how the namespacing works!
# Posted By Olle Jonsson | 8/31/06 10:54 AM
Rick Root's Gravatar Mike, great stuff - but I can't get it to display in design mode. Is that expected behavior?

It looks fine in the compiled swf - just won't show up in design mode.
# Posted By Rick Root | 10/17/06 9:45 AM
mike nimer's Gravatar Yes, it is. If I remember right you have to do a decent amount of extra work to get a custom component to render correctly in design mode. Maybe one day, I'll stop and figure out what needs to be done. But if it works..... ;)
# Posted By mike nimer | 10/17/06 11:02 PM
Antoni Bertrand's Gravatar Hi,

thanks for that sweet component! There is a little bug in it though, you shouldn't be calculating the leftPadding for your label, it shouldn't be supposed move. Otherwise great job!

I commented out that part in the FieldSet class and it's working fine:

         //legend.setStyle("paddingLeft", cr);

thanks again!

A.
# Posted By Antoni Bertrand | 9/17/07 1:35 PM
Speed Dating's Gravatar Thanks, Mike. That's a great and succinct walk through of how the name spacing works!
# Posted By Speed Dating | 10/7/07 4:42 AM
Rasto Ambrus's Gravatar I was thinking about how to simplify this code, because that drawing of border is tricky. In case you add there one line you dont need render border manually.

override protected function createChildren():void
      {               
         legend = new Label();
         legend.text = this.label;
         legend.opaqueBackground = this.getStyle("backgroundColor");
         this.addChild(legend);
         super.createChildren();   

         
      }
# Posted By Rasto Ambrus | 3/10/08 10:09 AM
needfornews's Gravatar Try NeedForNews.com, a new comprehensive news aggregator.
http://needfornews.com/top_search.php
http://vidslib.com/
# Posted By needfornews | 3/27/08 6:54 AM
rssnewsdigest's Gravatar Try rssnewsdigest.com, a new comprehensive news aggregator. With NeedForNews, you don ’t really have to go anywhere else.
http://rssnewsdigest.com/top_search.php
# Posted By rssnewsdigest | 4/2/08 8:23 AM
[Add Comment]
BlogCFC was created by Raymond Camden. This blog is running version 5.9.001.