Developers

Omnis Technical Note TNWE0015 May 2007

Dynamically Resizing Web Client Windows

For Omnis Studio 4 or after
By Andreas Pfeiffer

You may have noticed that remote form objects, like their window class counterparts, have got the $edgefloat property, which in the case of standard thick-client windows controls how objects are resized or repositioned when the window is resized. Now considering the end user cannot resize a remote form you may be wondering why the $edgefloat property is there at all for remote form objects.

In Tech note TNGI0015 I have already written about $edgefloat and its usefulness for container objects in standard window classes. In this issue I want to show you how to use it with objects in a remote form, that is, within the Omnis Web Client, so that objects are resized or repositioned dynamically.

Build containers
To achieve this effect you should combine objects that belong together in container objects. The only container object in a remote form that you can use for this purpose is the Page Pane object. For example, this object allows you to combine a number of entry fields and/or buttons into one group. You simply have to drag the required objects onto a Page Pane object and from thereon they are contained in the Page pane and behave as a group. Normally we are using a page pane to be able to switch between different pages dynamically, but in this case we are using a single page to group objects.

Now all you have to do is select the appropriate $edgefloat property for the page pane itself, as well as any other objects in your remote form, such as Headed List Boxes or Tree Lists, to control how these objects will be resized. For example, let's assume you want to put a tree list on the left side of your remote form, therefore you should set its $edgefloat property to the constant kEFPosnLeftToolbar - this positions the tree list exactly on the left border of your remote form.

Now you can place your Page pane containing any other fields and objects on the righthand side of the remote form - remember, any objects you drag and drop inside the page pane will resize or move in relation to the edge of the page pane. And don't forget to give the objects inside the page pane meaningful names, since you'll need to reference these objects. Next, assign the kEFPosnClient constant to the $edgefloat to the Page pane itself so that it takes up the remainder of the space on the right of the remote form.

Allow the removal of borders
For the tree list you can set its $dragborder property to kTrue. Make sure that its $effect property has a visible border setting otherwise the user won't be able to drag its edge. Now a user will be able to modify the width of the tree list by dragging the border, and the page pane on the right will be resized.

Nesting is helpful
By the clever nesting of additional containers (page panes) you can create additional dependences within the containers. I suggest that you combine smaller objects such as single line entry fields, buttons and so on, into groups within a container. Bigger objects such as tree lists, headed list boxes, and so on, don't require a container if they are not linked to additional objects (such as a separate status bar for a list box). The most important constants here are those that start with a kEFPosn... because they define positions in relation to other objects or the form border. For an overview of the exact positions and how they relate to each other, refer to Chapter 5 in the Omnis Programming manual (November 2005).

The Field List will give you a review
The Field list is a handy tool for showing and selecting deeply nested objects withing a window or form - you can open it by Right-clicking your mouse on the field or window. Please note: When you want to move objects it is better in most cases to turn off the $edgefloat property of those objects. Otherwise you may discover unintended surprises - when you move an object which is laying on kEFPosnClient it may overlap other objects that don't have kEFPosn... in their edgefloat.

The dynamic resizing of remote forms
Now you will say: That can't be true - the user is not able to modify the size of a remote form! Well, that's true! But with a little trick you can achieve a similar effect.

Simply place a container around all objects on your remote form, but as an exception, you don't need to set the $edgefloat property of this container (we will adjust its height and width; see below). Now make sure that all containers and objects within this - let's call it main container - are set with an $edgefloat so that they will resize and/or move within the container when it's resized.

Now use the Slider object to make the size of the main container customisable. The slider object receives in the event evNewValue the event parameter pNewVal which you can use to set the properties $width and $height of the main container object accordingly. So the user can dynamically change the size of the main container and thus the size of the entire web application window. All objects inside the container will resize and/or move depending on the settings in their respective $edgefloat property.

Example Library rf_Resize.zip

Please click to download the example library (Studio 4.3 and higher)