10
Apr
2006

New Flex component – Sliding Drawer v 0.5

[The sliding drawer component has been updated for the beta 3 version of the player. You can find the code here. –Sho, May 11, 2006]

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:

Picture of Drawer component in action

NOTE: Requires Flash Player 8.5 beta 2.
[Demo – sliding Drawers]
[Source code]

~

Known issues:

  • 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.

23 Responses to “New Flex component – Sliding Drawer v 0.5”

  1. Josh

    Looks cool! I hope you continue to enhance this component. I’m sure I might find a need for it in the future.

  2. barry.b

    Sho,

    can you make this behavour “optional” (ie, return to the onClick if req’d)?

    why?

    Microsoft’s visual Studio 2005 (and earlier) use this for the properties, server, errors, search results, toolbox, etc pannels.

    depending on placement, it’s as buggy and annoying as hell. Accidently mouse over it during normal mouse use and they open (and take far too long to close). Also, sometimes the bottom pannel triggers a side one to “pop-out” or visa versa)

    I’m hoping your FLEX implementation is much better sorted than the rubbish in VS2005. I wish I could turn the behavour off (on some or even the whole damn lot), it’s that poorly implemented.

    good luck

  3. Akeem

    Thanks a mil for that life saver. I am new flex user and trying to evaluate the merits of using flex (yes there are many). One of the things I didn’t like is the sameness of flex apps. I am working on this app and I was dying for slide panel and up here comes this. You just pushed a flash die hard closer to flex.

  4. Sho

    Hi Barry. Good points.

    For your own applications, you obviously have the choice of not using sliding drawers, but I don’t think that answers your question. :-)

    I think your point is that some people don’t like sliding drawers, so I should take that into consideration when designing this component, and provide the end user of the application the option of changing the behavior.

    I can’t think of an automatic way to do this, partly because of how I designed the drawers — they occupy no space when they are hidden. Furthermore, when they are showing, they overlay the view they are attached to, as opposed to pushing the contents over.

    I’ll think some more on this. Thanks for the feedback.

  5. barry.b

    > I think your point is that some people don’t like sliding drawers,

    VS panels/drawers are in a league of their own. other users agree their implementation is buggy (made worse by slow machines). I hate it because of this AND there’s no alternative.

    eg:

    MS: this is a nice feature. we’re using it everywhere.

    me: OK, I’ll try it. Uh, oh it has problems (premature triggering)/gets in the way/doesn’t fit into my workflow… Can I turn it off – use OnClick as a compromise so I can get the job done without going nutz?

    MS: no. live with it.

    me: (grumble…grumble…bloody arrogant MS…etc)

    but you touch on an interesting point: UI design – how the panel/drawer is used. Analyising workflows (regarding UI design) isn’t easy. what works for some people doesn’t for others.

    example: I have VS on my right monitor. Mouse movements from right to left monitor travel right over the RHS panels/drawers of VS*. False trigger or deliberate action? what should that depend on? speed? time? AI analysis of what the user is doing?

    I’m just hoping that it’s “used for good and not evil”. I’d hate to have another buggy implementation to “survive”…

    * these are the least buggy panels. the others (in seldom used areas) are much worse.

  6. Sho

    Got it. Thanks Barry. BTW, play with the demo and let me know how it strikes you. I’d be curious to hear your thoughts.

  7. milan

    Like you said – “I think my head is going to explode.” Really nice example.

  8. Alexander C. Tsoukias

    I would spend another $15000 for this feature alone. Thank you, thank you, thank you!

  9. AJ

    Nice Example, thanks for the code!

    The tabbing does not work as expected in the sliders. It goes to a transparent object on all of them…

  10. se

    Cool thing, but it’s impossible to stick the bottom pane when right one is already sticked.

    And comment Security code – people what’s wrong with you? Do you really beleve that somebody’s going to spam your comments? Can’t you protect your selves on server-side without such a bummer?

  11. Sho

    You can stick the bottom pane by clicking on the bottom pane to bring it to the front, and then sticking it.

    BTW, I’ve deleted somewhere between 5-10 spam today. Imagine how many I would have if I didn’t have a security code!

  12. jeremy

    this is really nice, great job !

  13. Maxim Porges

    Sorry for being a total idiot, but where is the source code for the Drawer component itself? I see that you referenced that you were publishing it to the creative commons, but where does one find that exactly?

    – max

  14. Sho

    Two ways to get to the source code:
    1) Click on the [source code] link in the article.
    2) Run the example, and right-click and do View Source.

    Either way, you will get a window that lets you see all the source code. From there, if you want to download the source as a ZIP file, you will find a link on the bottom left of the window that lets you do that.

  15. iuliub

    Well,

    If combined with the fisheye component from http://www.quietlyscheming.com/blog/, you ‘ll get a real nice autohiding menu…
    Though it will need few minor adjustmens, like backgroundAlpha=0, headerHeight=0 and the TackButton made invisible.

    Iuliu

  16. Nelson

    It’s a great Job and a very useful component. Thanks a lot for the code. It’s very easy to adjust to our needs.
    Nelson

  17. bob pardoe

    Please can you fix up this demo. We cannot download the source with the beta3 error.

    In beta 3, the Timer class is located in the flash.utils package and not
    flash.util (I am told)

    Many thanks.

    I look forward to seeing the later versions. Can I suggest that you provide the option to leave a little of the slider showing, so that the users knows it is there.

    BOb

  18. sho

    Thanks folks. I’m hoping to update the demo in a day or two.

  19. sho

    Updated code posted here.

  20. Sonny

    VerifyError: Error #1014: Class flash.util::Timer could not be found.
    at mx.managers::SystemManager/initialize()
    at mx.managers::SystemManager/::initHandler()
    hi why i got that error while trying to see your demo?thanks

  21. bobby

    demo is not working… tried to recompile as well, but still nothing…

  22. Morlek

    Is there any chance that someone has this in flex 4 (Spark)

  23. Anonymous

    Thanks for one’s marvelous posting! I really enjoyed reading it, you are a great author.I will be sure to bookmark your blog and may come back in the future. I want to encourage you continue your great job, have a nice holiday weekend!

Leave a Reply