I’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!
PaulH Said:
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.
andyl Said:
@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.
PaulH Said:
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.
andyl Said:
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’);
}
nando Said:
Hello arc90 personal:
I have a question. If CollapsiblePanel have height to 100% not work correctly, the component have the same value.
thanks!!
Avi Flax Said:
Awesome! Now we just need the triangle to rotate when it opens and closes. I hear that may be coming soon…
Steve Said:
How would one go about changing the collapse from vertical to horizontal?
David Meissner Said:
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
David Meissner Said:
Sorry. XML stripped. Try again…
<ns1:CollapsiblePanel height=”200″ width=”200″ x=”10″ y=”10″>
</ns1:CollapsiblePanel>
ReeceX Said:
Is there anyway to change the skin when the panel is collapsed or stop it from shrinking the skin when it collapses?
Shane Said:
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
lingie Said:
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?
Ragnar Said:
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.
coulix Said:
Works well except when you use them inside a VdividedBox, apparently you can not resize all panel inside the vbox, one have to grow to take the space of an other.
If someone has the solution i am interested
Carlos Said:
hi,
i liked a lot the component, but i need to add a search text field at the title of the panel.
how can i do this?
Can you give me any ideas?
thanks
JR Said:
A nice component. A couple of bits of feedback.
First, there seems to be a problem if the panel’s height property is adjusted programmatically while it is collapsed. When restored, it is not restored to the correct height. Workaround is to expand the panel before making any height adjustments, then collapse it again.
Second, I seem to have a problem setting the collapseDuration programmatically. I used panel.setStyle(“collapseDuration”,0) but it still seems to use the default duration. This one may be my mistake?
JR Said:
Follow up to my comment.
Setting collapseDuration to 1 seems to work.
So here’s the kludge I’m using at the moment.
If collapsed, then I setStyle(“collapseDuration”,1) and collapsed=false before updating the height.
Then I add a restore event handler which does event.target.setStyle(“collapseDuration”,250). If the collapseDuration is set immediately after re-collapsing, the event queue seems to pick it up quickly and use the new value.
Pretty messy. Any cleaner solutions are welcome.
ryan Said:
this is exactly what i am looking for… unfortunately i am a bit of a noob and get this this installed
I keep getting an error: “the prefix containers for element containers:CollapsiblePane is not bound”
thanks for your help
Darren Said:
@Ryan, you probably haven’t defined the namespace ‘containers’ properly to use it in MXML. Add this in the opening tag of your app/module/component, in the same place as any other xmlns declarations:
xmlns:containers=”com.arc90.flexlib.containers.*”
Then as soon as you start typing ‘
Rob Said:
I believe the license for this is incorrect as the CC license should not be used for software.
Also, the code and download doesn’t indicate any type of license or what attribution and where it is required?
Thanks
Raj Said:
I am having trouble in usng it .
I downloaded the binary swc file . Included the path in my built path .
Now i set
xmlns:containers=”com.arc90.flexlib.containers.*” on the application .
then use the following in my mxml . It doesnot work .Can anyone help me
Carlos Saenz Said:
Great component! There is one problem I haven’t been able to solve for the life of me.
If my CollapsiblePanel is set to 100% height / width, it, like any normal panel, uses Flex’s great liquid layout tools. Meaning if the available height in its parent container increases, it too will increase to fill up the whole height. (Since it’s 100% height in this case)
Once I collapse the panel and restore it, it no longer has 100% height. The percentHeight property within it is still set to 100, but it will only go by the exact pixel height that it was measured at during its last open state.
How do you just restore the liquid layout flexibility of 100% width / height after restoring a collapsed panel? I tried setting height to 0, invalidateDisplayList, validate, all these things. Nothing works.
Thanks for taking the time to make this even better! I hope to hear back. Thanks.
Ryan Said:
So, what is with the static psuedo constructor to do style proxying? I am working on my own component and need to do the same thing as well. Just wondering the design decision behind it.
Tony Lee Said:
How to control the collapse direction??