Client Design mode

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. There can only be one form in client design mode at any time.

The elements can only be dragged within their original form part. So an element that originally is in the body part will stay in the body part.

The client design mode will not persist the new positions/sizes of the elements, this is something that the developer has to take care of. By saving and restoring these elements for each user individually you can give the user his personal layouts. To save and restore positions/sizes it is important to give all the elements a name, so you can address them by code using elements.elementName.

You can enter client design mode using:

	controller.setDesignMode(true)

To exit client design mode you can use:

	controller.setDesignMode(false)

If you want to do something with the modifications of the user, you should specify handlers when you do to design mode, for example:

 controller.setDesignMode(onDrag,onDrop,onSelect,onResize)

onDrag

 Handle start of a drag.
  
  The method should return a DRAGNDROP constant for what mode is supported or a combination of 2 constants:
  DRAGNDROP.MOVE if only a move can happen,
  DRAGNDROP.COPY if only a copy can happen,
  DRAGNDROP.MOVE|DRAGNDROP.COPY if a move or copy can happen,
  DRAGNDROP.NONE if nothing is supported (drag should not start).

To be able to cancel the drag if the user sets the element somewhere you don't want it, the start positions should be saved here so they can be restored in the onDrop.

onDrop

Event to handle the drop. This is a good place to save the position and size of the element.

onSelect

Every element that is selected will get this event, return true if the user should be able to select it, or false if the element should not be selectable in clientDesign mode. It is better practice to set elements not selectable with the client design properties before you go into clientDesign mode because then the element is really not selectable. By using this method the user could see the element being selected for a fraction of a second.

onResize

Handles the resizing of an element. The onResize method is a good place to save the element sizes.

Client design properties

There are two client design properties: selectable and handles.

Selectable

By default an element with a name is selectable in client design mode but you can set elements to not be selectable.

Sample:

elements\['element_1'\].putClientProperty(CLIENTDESIGN.SELECTABLE, false);

Handles

By default the elements have all the 8 handles (all the corners and all the sides (left, right, top, bottom, topleft, topright, bottomleft, bottomright)) if they are selectable.

It is possible to set specific handles. For example only left and right if you want the user to be able to change the width of the element but not the height. This can be used to make a gantt where items can be made bigger for the time (width) but not for the height.

Sample:

elements\['element_1'\].putClientProperty(CLIENTDESIGN.HANDLES, new Array('r', 'l'));

The options are: