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.
