String Concatenation vs. StringBuilder | Home | Avoiding Repetitious Code in JQuery

Filed under Lab on March 17, 2008 by Richard Ziade

Eliminate Interface Clutter With Arc90 Lab's Collapsible Panel! (As Seen On TV)

4 drawers base cabinetI'm one of those people that goes to great lengths to keep my visible workspace clean and uncluttered...at any cost. I revel in the clean, straight lines around my desk. Open up one of my drawers and it's a whole other story, though. Out of sight, out of mind. Yes, it borders on anal-retentive hypocrisy, but still.

It's not a whole lot different for user interfaces. Sometimes, an easy and familiar way to "put away" interface clutter is to give users the ability to "hide away" parts of the interface. The Flex interface library is really great. It has just about everything you need to build rich, slick interfaces...except a drawer to put all my junk in.

Our own Andy Lewisohn has changed all that. Today on the Lab, we're releasing a collapsible panel custom component for Flex. It's simple to implement and nicely fits into the existing Flex UI framework.

So get on over there and grab it...and start hiding that clutter!

Post a Comment Digg Del.icio.us

Trackback Pings (TrackBack URL for this entry)

http://www.arc90.com/cgi-bin/mt4/mt-tb.cgi/119.

Comments

looks like a pretty cool & easy to use component. a couple-three of things though:
- shouldn't the mml example be "containers:CollapsiblePanel" (missing "l")
- what SDK did you compile the swc against? i can't load it in flex 2.
- the assets.swf seems to be missing from the zip file.

Posted on March 18, 2008 7:32 PM by PaulH

@PaulH

Thanks. Taking your comments in order.
- removed the offending "1" from the MXML example.
- Compiled against 3.0.0 SDK, you could of course compile the course code against the 2.0.1 SDK with some minor modifications, mostly having to do with setting default styles.
- I added the assets.swf to the zip file.

Let me know if you come across any other issues.

Posted on March 19, 2008 11:02 AM by andyl

thanks, i was able to compile against 2.01 (after chopping away at the Style bits) but the collapse icon's not showing up, though it still works if you manage to hit the right spot on the panel. i guess i chopped away a bit too much.

any suggestions?

thanks.

ps: i'd just use flex 3 but we have one external component (w/out source) that won't run on flex 3 yet.

Posted on March 19, 2008 2:37 PM by PaulH

If you look in the new zip folder, there should be an assets.swf at src/assets. That file contains the icons and should be present when you compile. Also, since you removed the default style settings, you'll need to apply the icons via a style sheet.

CollapsiblePanel
{
collapseButtonUpSkin: Embed(source='/assets/assets.swf', symbol='CollapseButtonUp');
collapseButtonDownSkin: Embed(source='/assets/assets.swf', symbol='CollapseButtonDown');
collapseButtonOverSkin: Embed(source='/assets/assets.swf', symbol='CollapseButtonOver');
collapseButtonDisabledSkin: Embed(source='/assets/assets.swf', symbol='CollapseButtonDisabled');
}

Posted on March 19, 2008 4:43 PM by andyl

Hello arc90 personal:

I have a question. If CollapsiblePanel have height to 100% not work correctly, the component have the same value.

thanks!!

Posted on March 25, 2008 6:27 AM by nando

Awesome! Now we just need the triangle to rotate when it opens and closes. I hear that may be coming soon...

Posted on March 26, 2008 4:21 PM by Avi Flax

How would one go about changing the collapse from vertical to horizontal?

Posted on March 31, 2008 8:54 PM by Steve

Copied .swc file into libs directory and have added the component to my app as such


I cannot view the component in Design view, however I can view in the source and will work when compiled and run. Any ideas?

Dave

Posted on June 18, 2008 5:54 PM by David Meissner

Sorry. XML stripped. Try again...

<ns1:CollapsiblePanel height="200" width="200" x="10" y="10">
</ns1:CollapsiblePanel>

Posted on June 18, 2008 5:58 PM by David Meissner

Is there anyway to change the skin when the panel is collapsed or stop it from shrinking the skin when it collapses?

Posted on June 21, 2008 5:39 AM by ReeceX

Great component. Been using it for weeks without problems. Found one that is giving me fits. I get a very noticeable "pop" on the background (like the background color changes white/blue) when I use the Collapsible Panel in a new TitleWindow I use via the PopUpManager. This ONLY happens the first time the dialog is pop-upped.

Anyone encounter this? Using flex 3

Posted on July 16, 2008 4:57 PM by Shane

I like this component - it's easy to use and looks great. I'm trying to add objects (charts) to the panel dynamically, and the panel isn't resizing to show the charts. I'm creating the charts, calling panel.addChild(), and I've tried calling panel.invalidateDisplayList and panel.invalidateProperties and nothing is working. Any suggestions?

Posted on August 5, 2008 7:25 PM by lingie

This component is great.
just one question, can make the component start in minimized position. When I create it with the parameter collapsed="true" the first thing it does when I open it is minimize, so at the beginning everything is maximized.

Posted on October 9, 2008 8:59 PM by Ragnar

Post a Comment:

String Concatenation vs. StringBuilder | Main | Avoiding Repetitious Code in JQuery