Download Sample

We have had a lot of request on how to make a Image Preview when mouse over in a Subform.

A lot of you have figured out how to do it but some of the solutions is quite "acrobatic" to put it mildly so it might be a help to some of you if we show the ropes and explain a little about the challenges.

In this sample we use OML as MouseOver (or really MouseEnter and MouseLeave) are events and only OML has the triggers for this.

Our sample is just a simple SubForm with some "products" with a ImageField to save/thumbnail the product picture. 

A lot of you have tried to make the Preview feature by resizing and moving the image field and that is where it has gone wrong for a lot of you.

The object model of DataEase for WIndows is quite strict which here interprets as you can't move an object outside the record it is a child of.

A subform is first a FORM object with record objects. All the record objects (rows) are clones of the original row that you designed. So you ca in fact move and resize the different rows (records) inside the subform object (jumble them if you like), but you can't make them bigger or move them outside the subform object.

Likewise, you can't make the image field bigger than the subform record it is a child of and you can't move it outside the same record. (I bet that lit up a bulb in many hard trying heads ;-).

But why would you need to use the clone in the subform anyway? That is just making it messy!

You only need a "Home" for your image i.e. an object to manipulate so you can create a virtual Imagefield on the Main record (or even directly on the main form if you like). This object will have no restraint in where it is moved so you are completely free!

So this done and in our sample we put it next to the heading and Manip.

This is simply a virtual imagefield (text) with nothing going for it other than the length. The manip next it is simply there to hide the preview field upon form load (and itself of course).

So now we move on to the hard bit.... ;-)

MouseOver as a lot of you use is not a good event for this kind of work as it will be called for every pixel move when you are over an object so the "nice" way of doing this is to use MouseEnter and MouseExit.

What we do is simply tell the Preview ImageField object that we want it to display the image stored in the ProductImage field in each row, then to resize it to the correct size for that image (stored in XSize and YSize) and finally show it.

define "retval" text .

define "vXSize" number .

define "vYSize" number .

vXSize := XSize.value + 0 .

vYSize := YSize.value + 0 .

retval := SetValue("Preview",ProductImage.value) +MoveObject("Preview",concat("S",vXSize),concat("S",vYSize))+MoveObject("Preview","C","C")+SetState("Preview","MoveToFront") +SetState("Preview",1) .

The reason we allocate the XSize and YSize field values to temp varibles in the OML script is simply to make sure we convert them to number again properly. All VALUEs in OML is Text as the Value property of any object is a text propety.

If you use this directly you might get problems (as we did) as we had thousand separator (blank) so the text property (value) for our XPOS was 1 000 so when used in MovbObject Size would result in concat("S",XSize) i.e. S1 000 rather than S1000.

Another "challenge" which we did intentionally is the Object Order. 

We put the Preview field at the top of the form which means it is "behind" all objects further down which will mean it is behind our Subform when we choose to display it.

In DataEase for Windows the order is ALWAYS top to bottom/left to right. Which means that an object that is 1 - one - pixle higher up is always earlier in the object (tab) order and if they are on the same line the one that is 1 - one - pixel to the left is also ahead in the tab order.

You will see that we inserted the Preview field next to Manip. If we move this image to the centre and then resize it, it will be behind all the objects on the screen hence we use the SetState("Preview","MoveToFront") to put it ontop of everything.

Another way of solving this is simply to put the Preview field lower down in the form but then you might get into the malarchy of the field being off screen on a small display, but that is a story for another day ;-)