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 in their own part. So a element that original is in the body part will stay in the body part.

The client design mode will not save the new positions/sizes of the elements, this is someting that the developer has to take care of. By saving and restoring these elements for each user individualy you can give the user his personal layouts. To save and restore positions/sizes it is important to give all you elements names, so you can reach them by code.

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 put handlers when you do to design mode, sample:

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

By creating the onDrag/onDragEnd/onDragOver/onDrop from the form properties you get a sample method.

/**
 * Handle a drag over. Determines of a drop is allowed in this location.
 *
 * Return true is drop is allowed, otherwise false.
 *
 * @param {JSDNDEvent} event the event that triggered the action
 *
 * @returns {Boolean}
 *
 * @properties={typeid:24,uuid:"A97879DD-6465-4A89-8210-122C94857626"}
 */
function onDragOver(event) {
	// TODO Auto-generated method stub
	if (event.getSource() && event.data) {
		return true;
	}
	return false;
}

onDrag

 Handle start of a drag, it can set the data that should be transfered and should return a constant which dragndrop mode/modes is/are supported.
  
  Should return a DRAGNDROP constant 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).

onDrop

Handle a drop.
Return true if drop has been performed successfully, otherwise false.

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

TODO:explain hidden properties used by mirus

onSelect

Every element that is selected will get this event, you can return true if you want the user to be able to select it, or false if you don't want that the users uses that element in clientDesign mode. It is better practice to set your element not selectable with the client design properties before you go into clientDesign mode because then the element is really not selectable and if you use this method you could see a second of selection. 

onResize

Handle the resize of a element. This is a good position 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 handles 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.

Sample:

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

The options are: