I created a panel that slides into view when you mouse near the edge of the screen as part of a personal project. I’m distributing the sliding drawer under creative commons so that other people can use it.
To use the drawer component, just add the tag to your view:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:ui="sho.ui.*"> <ui:Drawer title="Left" dockSide="left"> < !-- drawer contents go here -- > </ui:Drawer> </mx:Application>
This results in a drawer that pulls out from the left edge of the screen like so:
- Programmatic instantiation of these drawers has not been tested. I have only used <Drawer> as a tag in MXML.
- Drawers shows up in Flex Builder’s design view at (0,0), which can be misleading.
- There is something funky about depth management. For example, if you put a <CompletionInput> in a drawer, the hints show up underneath the drawer.
- Resizing of children doesn’t seem to be happenning correctly. For now, either use fixed sized contents inside of drawers, or help me find the bug! :-)
- There appears to be a compiler bug that makes it impossible to use an MXML component that is based on <Drawer>. If you would like to make an MXML component for your drawer contents, base the component on a container (such as <Canvas>) and put your component inside a <Drawer> tag, as opposed to basing your component directly on a Drawer.