[Tip] Animated Mac OS X Style "Sheet" Dialogs in Servoy

by Jeff Bader
Freight Logistics

One great feature of Mac OS X's UI is "Sheets." Sheets are a great way to handle modal dialogs b/c they do not allow users to hit the "close" button (which could mean more than one thing e.g. close, cancel etc.) and b/c they are more contextual than a floating dialog.

Sheets are not cross platform, and to the best of my knowledge are not implemented at the UI level in Linux or Windows. But using the following technique, you can simulate a Mac OS X-style sheet dialog (which is cross-platform) complete with animated "grow" effect.

The idea is very simple and takes only a few lines of code to implement...

First you need to create two forms - one form to call the sheet dialog from and another for the sheet's content itself (which could potentially be set using JText or other similar bean if you don't want to create a second form). For the purposes of this example, the form from which you call the sheet must contain a JInternalFrame bean as an element - I called mine "sheet_frame." I also included a button to fire the "showSheet" method (below) and a tabpanel that I set [programatically] as the frame's content pane to show the sheet content form.

The animation effect is created by a simple loop and update UI routine that reshapes the frame each iteration.

Here is the code - two methods - one to show the sheet ("showSheet") and another to hide it ("hideSheet"):

/**
*    showSheet
*
*    Simulate Mac OS X's sheet-style dialog (modal)
*
*    @author    Jeff Bader
**/

// Gives us that "glass pane" look
controller.enabled = false;

elements.sheet_frame.visible = true;
elements.sheet_frame.contentPane = elements.sheet_content_tab;


for (var i = 1; i < 6; i++)
{
    elements.sheet_frame.reshape((application.getWindowWidth()/2 - (750/2)), -25, 750, 100*i);
    application.updateUI();
}

elements.sheet_content_tab.addTab(forms.sheet_content);

/**
*    hideSheet
*
*    Hide the sheet
*
*    @author    Jeff Bader
**/

for (var i = 5; i >= 0; i--)
{
    forms.sheet.elements.sheet_frame.reshape((application.getWindowWidth()/2 - (750/2)), -25, 750, 100*i);
    application.updateUI();
}

forms.sheet.elements.sheet_frame.visible = false;

forms.sheet.controller.enabled = true;

That's it! Pretty easy really.

Sample solution included for downloading.

***FYI, I tried this only on Mac OS X!***