Introduction to the Resize Manager in Ample SDK

The Resize Manager in Ample SDK is modeled after Internet Explorer resize implementation with a bit of goodies added on top. It is events based as well and you can use CSS to define constraints for the resizable areas.

Events and sequencing

The events you should be aware of are: resizestart, resizeend, resize. The sequence for the events as follows:

1. First when user starts resize operation by pressing the mouse button on the edge of a resizable object a resizestart event is fired, At that point if code in event handler calls preventDefault() method on the event, the entire resize operation will be canceled.
2. During resizing there will be a resize event dispatched continuously indicating that user is interacting with the object
3. Lastly, when user releases its mouse button an event resizeend is fired, and if it's default action is not prevented, the size of the object will be set permanently. Otherwise it will be reset to the original one.

Note, with the aml:resizable attribute you here define a resizable behavior of an instance of a component. You could also define a component to be resizable wherever it is met (for example you would need dialog or window components to be resizable always) by defining a property $resizable with a value true on the component class definition.

Defining min/max sizes

You can also define maximum and minimum sizes of an resizable object with CSS:

:resize pseudo-class

During the resize operation a special pseudo-class ":resize" is available on the object resizing. You can use this pseudo-class to apply specific styles to the element.

The implementation described will be available in the next version to be released on 3rd March, 2009.