Posted by: edsyrett | 25 May 2009

Sliding Panel


Sliding Panel Test App

Sliding Panel Test App

I’ve been working on a screen that shows a diary something like the calendar in Outlook.  We’re targeting fairly low-spec machines with screen resolutions not more than 1024 x 768.

On one side I have a list of items that I can drag onto the schedule to create entries.  As development continues, the width of this list is getting wider as the implementors want more columns in the list, and the visible area of the schedule is getting smaller.

Once again, the old saying is never more true – Necessity is the Mother of Invention. I need to show a list and a schedule almost at the same time.

So here’s my solution to the problem.  My list of things to drag onto the schedule will go in a SlidingPanel on the right.  The user can click on the arrow button to show or hide the panel.  Once they have selected an item from the list on the right they can drag it onto the schedule, close the panel, and then move the item around on the schedule.

Click on the image above to go to my test app.  The SlidingPanel component can be set to anchor to the left or right, and start up open or closed.  The tab (the vertical bar with the button on it) is a separate component, SlidingPanelTabSkin, and you can change that to alter how the tab is displayed.   The only requirement is that it implements ISlidingPanelTabSkin and dispatches a SlidingPanelEvent when the user clicks somewhere on the tab to get the panel to open or close.

Advertisements

Responses

  1. Hi Ed,

    I really like the sliding panel that you’ve created. One thing I want to ask you is how can you change from a mouse click event into a mouse over or rollover event? Also, is it possible that this sliding panel program be fitted into just one mxml file instead of different action script components? If so, can you please let me know how? I’m new to flex and just trying to learn how the sliding panel works.

    Thanks so much.

    • Changing to mouse-over wouldn’t be too difficult – I think you would just need to listen for a Mouse Enter event over the Tab Skin component, check that the panel is closed and then open the panel. You would need to start a timer to close the panel after a set period – mouse events over the tab would restart the timer each time so that the tab only closes once there has been no mouse activity over it after the set period.

      I wouldn’t recommend putting any of the components into one MXML file. Firstly Flex doesn’t support it anyway, but as soon as you merge components together you lose the ability to use them in other places.

      • Ed, can you please provide the mouse-over example based on your sliding panel? Thanks so much!

  2. Dear

    I’ve stumbled on a problem while trying to implement your sliding panel.

    I got the following structure:

    …..

    _______________________

    If I hide my ViewStack the SlidingPanel appears, but when I unhide my ViewStack, the slidingpanel disappears.
    How can I make sure that both are visible?

    regards
    Stece

    • Hi Stephan,

      I’m afraid the “structure” bit didn’t make it to your comment. Until I have some more information I can’t really make any comment on what the problem might be.

      Cheers,

      Ed.

  3. […] Sliding Panel May 2009 5 comments 4 […]

  4. I know this was posted quite a while ago and most likely done in Flex 3.. but I am hoping you can at least point me in the right direction. Using Flex sdk 4.5.1. I import all your code and get an error in the SystemManager.as file saying “Interface ISystemManager not found”. If I import the ISystemManager class then I get a whole slew of errors on your manager classes. Do you have any idea what the problem could be? Any help would be appreciated since your sliding panel is exactly what I have been looking for 🙂

    Thanks,
    Nicole

    • Hi Nicole,
      I had to monkey-patch the SystemManager class in Flex 3.2 as it wouldn’t allow me to do the focus properly in a sliding panel. I’m afraid I would have to set up Flex 4.5 and try out the test app with it before I could offer any advice, and I just haven’t time to do that. About all I can suggest is that you leave out the SystemManager class and see what works. The whole architecture of the Flex classes is probably different so you won’t need to fix the issue that I had to fix in 3.2, but there are probably others…

    • Actually just tried to compile with 3.6 sdk and still having the same problem :-/

  5. Hi…, I know this post was a long long time ago but still I’m wondering if I could have access to the code of this implementation ?? If so, I would appreciate it. Thanks in advance!

    • Hi,

      You can see the source code for the test app (and all the others for that matter) by right-clicking on the app and selecting “view source”.

      Cheers,

      Ed.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: