How to animate a Window.show()

[pallen]

In the Office Supply Catalog example, the Show Example IButton animates the Window.show() with a really nice outline and then minimizes back to the button when closed. How is this done?

[Isomorphic]

We're glad you like it
It's actually a pretty simple effect using the SmartClient animation APIs - all you need to do is:

- Create a visibility:"hidden" Canvas instance with a 2 px border (you can use a css class or the canvas.border property).
- Position it over the "launch" button and show it.
- Call 'animateRect()' passing in the desired final window size, and a callback method which hides the outline canvas and actually shows the window in question.

You can then override the 'closeClick' method on the window to
- hide the window and show the outline canvas
- use 'animateRect()' to shrink it back down to the size / position of the button, and then hide itself when the animation completes.

Take a look at the animation examples in the feature explorer and in the SDK [http://localhost:8080/examples/anima...gramming.html] for some more tips on using the SmartClient animation APIs.