it’s  all smoke & mirrors

 

gone are the days of staid grey forms and controls. now screens need to have visual appeal as well as functionality. microsoft started the trend by designing the outlook 2000 interface and went one better with the outlook 2003 interface which uses themes. everywhere on the net we see the effect of colour on web pages.

 

well we have the ability to use themes in vfp and the outlook interface lends itself to easily copying and adding the similar look and feel to a vfp interface.

 

i must state at the outset that these images are copy write and belong to the company i work for and may not be used without permission.

 

the following two screens are from an application i designed and which is in use in my company. there are a few points of note here that i will elaborate on.

 

as i mentioned in my previous blog, my programming philosophy is to program to an interface. so i do not bother with adding functionality that will not be used. hence the buttons on the left are fixed and i have not added the functionality to add or remove them.

 

let’s explore the interface.

 

the main form is a sdi top level form. nothing special here.

 

top left is a date control activex whose main purpose at present is to fill the space. it is fully functional so that date lookups are possible. but for the application, i have my own date picker.

 

below that, mid left, is an area for selection of the screens that will appear on the right. this is a custom class i developed using the ms treeview control. the items that appear here are read from a local dbf, including the images, and are fully configurable.

 

bottom left are the famous outlook gradient buttons. again a custom class i developed. these buttons while being configurable at design time cannot be changed at runtime.

at the bottom, is another custom status bar control i developed. it is simple, displays the time, some messages and has a dragger for resizing the form. in this application resizing is not allowed since it would break the effect of the screens as well as the placement of objects. it is there simply because it is there and looks good.

 

in its usual place, at the top, is a menu which is a standard vfp menu and add copy/paste, plus some other functionality not available in the tree view/outlook buttons combo.

 

to the right is the main screen area which just displays an appropriate image – in this case a personal trainer assisting a member in training.

 

the interface works as expected. the user selects a button from the bottom left which

populates the treeview above it from a dbf giving the user access to the screens under that group.

 

all this works similar to a menu where you select a menu item and another from the dropdown that appears.

 

now comes the cool part.

 

we have run the samples supplied with vfp and seen the “transparent form” where the form and all its contents are made transparent using the setlayeredwindowattributes api. while this is nice, using it requires a top level form and causes all the contents to become transparent, including the controls and everything in the form. not a very pleasant look when even the text you type in is transparent!

 

the form is after all a 2 dimensional representation and displays what we want it to display. the transparent effect has its place, but on in a form where even the controls become transparent? that is just a plain no-no. but what if we could make the form semi transparent while keeping the controls and everything else on the form opaque?

 

here is where the smoke & mirrors comes in. to a user, the effect i am trying to achieve, is a semi transparent form where the background image is partly visible but the controls are all opaque and text entry is clearly visible. how i do it does not really matter provided the final effect is there to see.

 

obviously setlayeredwindowattributes is not appropriate here because it makes everything transparent, including the controls. this is not the effect i want so ditched it. how then to achieve the effect? the key here is knowing what you want to achieve.

 

after some experimenting i came up with the solution below. the user selects an action from the treeview and the form opens on the right. this form has all opaque controls but yet you can see the main image seeping through. the form appears semi-transparent yet the controls are all opaque just like a normal form. this is what the user sees. this is the effect i want.

 

to emphasise the translucency i have left a small gap of about 3 pixels to the left of the form. this shows the background image flowing through and adds to the illusion, that the form is transparent.

 

but how is this done?

now to let you in on my little secret. it’s all an illusion. if pavement drawings can be made to look 3d which is nothing but an optical illusion, then so can my form be made to look translucent. the slight gap to the left adds to the impression that the user is seeing the image below through the form above it..

 

magicians use smoke and mirrors to achieve their effect. i use vfp and some imagination. the form on top does not have to be transparent to actually appear to be so. just that the final effect gives that impression.

 

illusion complete.

 

now who said that vfp was not cool? it can be as cool as you want it to be. ice cool blue and glassy in my case.

 

now get busy, let your imagination flow and design some flashy screens. send me some pictures when you have done so.

interested in finding out more? post a comment and your email.

 

14 Responses to VFP is very very cool

Leave a Reply

Your email address will not be published. Required fields are marked *