How to use Client Design Mode

Servoy has a cool feature called Client Design Mode. You can use this to move UI components around on the form at runtime.

To turn Design Mode on:

currentcontroller.setDesignMode(true);

To turn Design Mode off:

currentcontroller.setDesignMode(false);

Seems easy enough. However, changes are not saved. You may be dealing with two possible scenario's:

You want to use this during development to optimize your solution at runtime
You want to give this functionality to your users in a production environment

In the first scenario we want to start the application, enter client design mode, move around the components any way we like and save the changes to the solution, overwriting previous component positions.

In the second scenario the user starts the application, enters client design mode, moves around components and save the component positions to a temporary file so we can use them next time to rearrange the components as the user has positioned them.

In this HOW TO we will build a generic handler to deal with the first scenario. From that it won't be too hard for you to code the second one yourself.

The first problem we need to address is how to make the code available to turn on/off the client design mode for every form in our application without having to add code to each and every form.
We will do this by adding two buttons to the main toolbar (yes, smart-client only) in the event that fires when the solution is opened/started: onSolutionOpen().

As you can see, two callback methods are used: designTime() and runTime().

Now, when we start our solution we see two extra buttons on the toolbar:

Notice that the runTime method contains a few extra lines of code, asking whether changes should be saved. If the user responds with Yes then the saveClientDesign method is invoked:

What this method does is first loop through the elements and store the new element positions in an array. Then the form is recreated by the use of the currentcontroller.recreateUI() command (the elements will return to their previous position). Then the elements are set to their desired position with the solutionModel which allows servoyDeveloper.save() to persist the changes to the solution.

With these few methods an entire application can be manipulated at runtime which in some cases is much easier because forms contained in tabpanels don't show their contents at designtime but do at runtime. Note, if you want to change the layout of contained forms you will have to open them individually, for example through the menu.

When we start the application and press the Design Time button, the currently active form goes in design mode and selected controls show handles that allow positioning or resizing (resizing is currently not built into our generic method but will easily be added):

Note: all elements that are to be repositioned should have a filled name property! I personally think all elements should always have a filled name property but that's another story. Also check out the Servoy wiki for more info, for example on excluding elements from client design.

External resources:

vfp plugin

ServoyWorld 2012 pics

Official Servoy website

Contents:

How to use Client Design Mode

External resources:

VisualFoxpro.com © 2010-2012 • All rights reserved • Contact: info@visualfoxpro.com