Servoy 2020 Documentation
Child pages
  • Client Design Mode

Versions Compared

Old Version 32

changes.mady.by.user Joas de Haan

Saved on

compared with

New Version 33

changes.mady.by.user Sanneke Aleman

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

The client design mode will not save 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.

...

Code Block
 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; }
Code Block
Note
titlerecreateUI()

All the changed of the user will be lost if controller.recreateUI() is used.

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).

If you want to To be able to cancel the drag if the user sets the element somewhere you don't want it, you should save the start positions here so you can restore them 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.

...

Every element that is selected will get this event, you can return true if you want the user to should be able to select it, or false if you don't want that the users uses that element element should not be selectable in clientDesign mode. It is better practice to set your element elements 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 . By using this method you the user could see the element being selected for a fraction of a second.

...


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:

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

...