The client design mode is created to make it possible for end users to edit the possitions and sizes of elements on a form.
When the form enters client design mode, the user can use drag & drop to relocate elements or change the size of elements.
Stoc |
---|
To enter client design mode using:
Code Block |
---|
controller.setDesignMode(true) |
To exit client design mode:
Code Block |
---|
controller.setDesignMode(false) |
There can only be one form in client design mode at any time.
When the Form is in Client Design mode, users can move the elements or resize them. In order to respond to the user actions, the function that puts a Form in Client Design mode optionally takes a set of event handlers as parameters:
Using these events the developer can respond to the changes made by the user, for example storing the modifications, as the changes made by the user are not automatically persisted.
It's possible to "annotate" elements with certain UIProperties that will affect their behavior when the Form they are on is put in client Design mode.
Through these properties, it's possible to restrict elements from being selectable and to provide information on which resize handles should be available on the element when selected
Making an element not selectable in Client Design mode:
Code Block |
---|
elements.\{elementName}.putClientProperty(CLIENTDESIGN.SELECTABLE, false); |
Restricting the available Resize handlers
The selected element on a Form in Client Design mode by default shows resize handlers for all directions.
If the directions in which the element is resizable should be restricted, this is possible using the following code:
Code Block |
---|
elements.\{elementName}.putClientProperty(CLIENTDESIGN.HANDLES, ['r', 'l']); |
The code sample above will result in the following resize handlers:
The second argument in the code above is an Array with all the supported handlers. These are the available values:
Value | Resize handler |
---|---|
't' | Top |
'b' | Bottom |
'r' | Right |
'l' | Left |
'bl' | Bottom left corner |
'br' | Bottom right corner |
'tl' | Top left corner |
'tr' | Top right corner |
These are runtime properties and will be lost by use of controller.recreateUI().
The following restrictions are applicable when working with Client Design mode: