Application Drawer
I’ve seen the idea of a “drawer” to hold buttons, menus, etc on a few websites and applications in the past. I don’t really have an urgent need for this in any applications I’m currently working on, but wanted to explore the idea anyways. This is far from production code and is meant only to be a starting point for anyone who may need a similar component in their applications.
That being said, here’s a simple demo, view source enabled:
Let’s talk about the components that bring this together
DrawerMenu
This is the simple Application that holds all our pieces. Its layout is absolute so we can get the overlay effect. We’ve got a Panel representing the content of the Application, followed by a VBox that is our ‘Drawer’. This VBox holds four components that are AutoHideButtons, which we’ll talk about next.
AutoHideButton
The idea of the Drawer is to provide quick access to menus/tools in an Application, and it needs to get itself out of the way to conserve space. I decided to try out a component that would hold an icon and text, but would hide the text until it was hovered. I had more plans for this but decided I’d leave it in this rough state until I had a real need for it. It accepts “iconClass” as a style and “text” as a property. Explore the code and feel free to comment if you want me to explain the details.
RoundedRightBorder
I’ve been exploring programmatic skins, specifically border skins, in Flex lately. This class allows the right side of a component to be curved. In the example I use this on the AutoHideButtons and the VBox that is holding them. It exposes a “curveRadius” style that is not really accurately named as the drawing code is rough, but you should be able to tweak that number to get the desired look.
Check it out, comment, and hack away!