Creating a “Cool” Desktop
By: George Burt, President of TrueShot Produce Systems, Inc.

Introduction
The Desktop Form

The Desktop form described in this article is a combination of styles borrowed from different programs. It is a tribute to the easy power and understandable flexibility that makes dBASE a superior development platform. As is often the case, a simple looking design can mask a great deal of software complexity. It is hard to make software look easy.

Desktop.wfm is actually a slightly modified version of a real form that the author uses in his accounting and information system designed for the produce industry. The idea was to create a simple-to-use interface that even a computer neophyte could use.

Look at the Diagram. The buttons that run down the side and across the top are «Cool» buttons. That is, they change in some way when you move over them. This helps the user know that if you they click on this area, something will happen. In this case, the buttons on the left and across the top have various behaviors and states that help the user to understand what is happening. When the mouse cursor moves over one of these areas, it rises into a button and goes from gray to color as if to say “I’m an option!”. When one of these buttons is pressed, it takes on a “pushed in” look. This helps the user remember which item was last selected.

Additionally, a push of the buttons on the left causes a panel to slide out from behind the button’s container, creating an nice animated effect. The purpose, in this case, is to provide a two level choice. Each cool button brings forth choices.

The entire look and feel of this form was fabricated. Nothing about it was created automatically. If you were going to create a great many forms like this, it would pay to create various custom controls and forms with sizing and scrolling abilities. This form uses none of that. Instead, all functionality is attached to the objects themselves. This form makes extensive use of CODEBLOCKS. A codeblock is a small group of commands that attach to an object’s events.

You start with a Cool Button

As described earlier, the cool buttons used on the left and top of the form react to various user events.  Before getting to the events, let’s look at the objects that make up a cool button.

First of all, drag a button from your pallet to the form.  Next drag an image and drop it on top of the button.  Right-click on the image and point the datasource to the gray image, in this case company1.gif.

Change the alignment to true size and change the border property to none.  At this point you have an image control that has no border and exactly fits the graphic that it is displaying.

The button’s purpose is to provide an «up» appearance when the mouse moves over it.  First of all, get rid of the text.  Next, turn its speedbar property to true.  This is so the button cannot keep focus.  Next, use your arrow keys to position it so that it’s top left corner is lined up with the top left corner of the image.  The idea is to position the button so that if you hit your Down arrow once (thus moving the button down one pixel) the top border of the button will be hidden by the image.  Then hit your Up arrow key TWICE so that the button’s border is again visible.  Do the same with the left edge.   Now, hold down your Shift–Down arrow to size the button so that its bottom border is just revealed.  Finally repeat the procedure for the right edge.

At this point, you may be wondering why it is necessary to use the button, after all, you could just change the border of the image itself to look like a button.  While this approach does work and is much simpler, it causes the image to jump and shift.  In contrast, making an underlying button visible creates a very smooth effect.

The onMouseMove event

So now that the parts of the cool button are in place, it is time to work on the bringing it to life.  This step involves attaching code to various events.  Events affect, and are connected to, an object.  When the user moves the mouse over an object, that object’s onMouseMove event fires; which means it runs any code placed in the onMouseMove() function.

To figure out what instructions need to be run when the mouse moves over the image, think about the behavior you want.  First, the button should become visible with the effect of making the image «rise up.»  Also, it should be change from gray to color.  This further confirms to the user that this is in fact an option that will have some effect if they were to click it.

In object oriented programming, it is helpful to think in terms of objects and what those objects can do.  Pseudo-code to perform this might be as follows.
 
 
Hey pushbutton 1, make yourself visible
Hey image 1, make your datasource be the file named «company.gif»
   

The pseudo-code is not quite explicit enough.  You might have many forms running at the time.  Are these instructions supposed to be addressed to objects in this form, or some other form. Since it is this form, we need to tell it form.
 
 
form.pushbutton1.visible = true
form.image1.datasource = ‘filename company.gif’
   

So these are the instructions, where do you put them?

Since we want this to happen when the mouse moves over the image object, it only makes sense that the code should be placed there.  Right-click on the image and bring up the Inspector.  Click the Events tab at the top.  Find the event named onMouseMove and click it.  As mentioned before, we want to use codeblocks instead of functions.  You will notice that their are two buttons to the right of onMouseMove, a Wrench and a T.  To create a code block, you must hit the T and then choose Codeblock.

With that done, you can now hit the Wrench and a small editor appears.  First, click the radio button Command and clear the supplied code «null».  Next, type in:
 
 
form.pushbutton1.visible = true
form.image1.datasource = 'filename company.gif'
   
And then click OK.

Now if you run this form, you should see a black and white image, which is what we wanted to see.  But the border or «raised up» effect is already there!  The default behavior for this object needs to be not visible or rather visible = false. Go back to the Form designer.  One of the properties that is available for any object is the visible property.  All objects are always visible in the form designer, but any object with visible set to false will not be visible when the form is actually running.   But here is another problem, it is hard to select the pushbutton because only a tiny portion is visible because the image almost completely covers it.  You could go the inspector and use the drop down field at the top to find the object, but let’s go straight to the source code.  In dBASE,  there is no difference between a change made to the source code and one made through the Form designer.  Right-click anywhere on the form and choose Source Editor/designer.  Next, find the code that looks similar to the following:
 
 
this.PUSHBUTTON1 = new PUSHBUTTON(this)
   with (this.PUSHBUTTON1)
      height = 1.5909
      left = 2.4286
      top = 0.3636
      width = 5.2857
      text = ""
      colorNormal = "BtnText/BtnFace"
      pageno = 1
      value = false
   endwith
   

Notice that the height of the pushbutton is 1.5909 and other properties are defined between the with and endwith.  Insert a new line anywhere between the with and endwith and type:
 
 
Visible = false
   

Close up the Editor.  If you were now to inspect the pushbutton1 object, it’s visible property would now be set to false.  This is an example of the two-way tools.

Now, if you run the form, you should indeed have a gray image, with no border around it.  If you move your mouse over it, it should rise up and become colored.  Now we have our Cool Button!  Except, it isn’t cool yet.  It can only do it’s trick one time and then it is stuck there.  This happens because there is no code that tells it go back down and turn gray.  Looks like we need a new event!

Ideally, there should be an event that fires when the mouse is no longer over an object; an onMouseOut event.  While we have been promised one in a future release of dBASE, as of now we have to make do.  Let’s examine the problem:  we need an event that fires when the mouse moves off of the image.  Logically, if the mouse moves off of one object, doesn’t it have to move onto another object?  In this case, the form itself can be the event.  When the mouse is moving over the form, it must not be moving over the image.  So let’s have the form tell pushbutton1 (whose parent is the form) to turn itself off and tell image1 (whose parent is the form) to display the gray image again.

Right-click on the form and choose the Inspector.  Click on the Events tab at the top then click on the onMouseMove line.  Click the T and choose Codeblock.  Click the Command radiobutton and then type (after removing «null»):
 
 
form.pushbutton1.visible = false
form.image1.datasource = 'filename company1.gif'
   

Now run the form and it works!  When you move your mouse over the image, it rises up and turns colored, when you move it off, it falls down and turns gray.  If you have actually run this form, you may notice a problem.  As you move your mouse around, the image flickers.  The OnMouseMove event fires hundreds of times when you move the mouse around because it’s job is fire every time the mouse moves.  Our objective is to have a smooth user interface, so we need to fix this problem.  The problem is not really that the event fires a bunch of times.  The problem is that it thinks it has to reassign the datasource of the image and make the button visible hundreds of times.

The solution is to make a flag that keeps track of whether the work needed has already been done once.  Once the image is colored and the button is visible,  we need not change those properties until the mouse moves back onto the form.  Right-click on the image and choose the Inspector.  Click the Events tab, click the onMouseMove line and then click the Wrench.  Make the following changes.
 
 
if .not. form.image1.color
  form.image1.color = true
  form.image1.datasource = 'filename company.gif'
  form.pushbutton1.visible = true
endif
   

Color is a custom property, that is, it is a property that you make up.  It becomes a property of the object just like height, colorNormal or name.  We are going to make the property color true if the object is raised up and in color and false if it is flat and gray.  If you were to run the form with this change, you would get an error though.  Because color is a custom property, it doesn’t exist until we create it.  Since the onMouseMove event above assumes that there is a color property of image1, it crashes when it looks for it.  It’s as if the program were saying «Who?  Color?  I don’t know no stinkin’ Color!»

Again, we need a new event.  We need an event that will assign the color property as soon as image1 is opened.  That is what the onOpen event does for a living.  Right-click on the image and choose Inspector.  Click on the Events tab and click on the line OnOpen.  Click the T and choose Codeblock.  Click the Wrench and select Command.  Get rid of the «null» and type:
 
 
this.color  = false
   

Notice that use of the word this.  In an intuitive way, it makes sense to say «this ‘color’ flag is set to false.»  This is a way to refer to the image specifically, without naming it explicitly.  Because the this is used in code attached to the image1 object, it could only refer to the image1 object.  It’s like looking at someone and saying «I am looking at you» as opposed to saying «I am looking at John Smith».   The difference is that «I am looking at you» will work with anyone you happen to be in front of whereas «I am looking at John Smith» is only useful if you are in fact talking about John Smith.

Another way to accomplish the same thing would have been to type:
 
 
form.image1.color = false
   

Think about it.  This is not the only cool button that we are going to use.  We are also going to have several of them.  If we are smart about the way we code this, we won’t have to change the code for each object.  Consider what we have to do if we have five image cool buttons.

On the first one we have to say:
 
 
form image1.color = false
   

On the second we have to say
 
 
form.image2.color = false
   

And so on.

Or, if we simply say:
 
 
this.color = false
   

Then it is always going to set its custom property color to false.  This kind of versatility is one of the most important concepts in object-oriented programming.

The code changes described solves the flicker problem when you move the mouse around on top of the image.  It only turns color and rises up one time thanks to the color flag.

Unfortunately, the flicker returns when we are moving around on the form.  This is because we haven’t taught it how to tell if the cool button is already gray.  We need to change the form onMouseMove event in the following way:
 
 
if form.image1.color
   form.image1.color = false
   form.pushbutton1.visible = false
   form.image1.datasource = 'filename company1.gif'
endif
   

Great.  Now we have a flicker-free cool button!

Next we need to add the «pushed in» effect when it has been selected.

For this we need only change the borderStyle of the pushbutton1 from 0 (zero) to 7.

For this we need a new event to fire when the user clicks on the button.  If this were done on a pushbutton, we would use the onClick event.  Since the event is going to happen to the image1 object, the closest thing available to the onClick event is the onLeftMouseDown event.  Right-click on the image1 and choose Inspector.  Click on the Events tab and click on the onleftMouseDown event.  Click the T and chooseCodeblock.   Click the Wrench and click the radiobutton Command.  Get rid of the «null» and type:
 
 
this.parent.pushbutton1.borderstyle = 7
this.on = true
   

Notice the use of parent.  This is another important aspect of object-oriented programming.  We use parent for the same reasons we used this in the example above.  You may be noticing that we are still using the explicit name pushbutton1.  Image1 is not formally related to pushbutton1.  True, they are stacked on top of each other and our intention is for them to be related, but as far as the form knows, they are two separate, independent objects.  That means that the image1 object must call the pushbutton by name if it is get tell it to change borderStyle to 7 (the pushed-in look.)  So if there is no formal relationship between pushbutton1 and image1, why do we use the parent reference above.  Wouldn’t the following work as well?
 
 
form.pushbutton1.borderstyle = 7
this.on = true
   

Yes, it works as well, but I am thinking ahead.  What good is one cool button?  Usually, we will use them in combinations.  This organization lends itself to using containers to hold groups of related cool buttons.   A container is similar to a form or sub-form.  If you move a container, all the objects inside the container stay together relative to the container.  For instance, if you decided you wanted all the panel of cool buttons currently located down the left side of the form to, instead, be on the right side, simply drag the form to the right side.  That’s it.  No re-coding, no moving of individual objects.  So how does this relate to the use of parent above?

It is simple and intuitive to work with containers, but you have to understand the relationship between a container and the objects in the container.  Using the word parent refers to the container that holds the current object.  It can be a form.  So if the image1 object refers to this.parent and image1’s parent is the form then obviously this.parent is the form. But if you place the cool button in a container, this.parent would refer to the container.  The bottom line is that if you use this.parent instead of form, the code will work in either a form or any container.

So to recap, this is how we created the cool button

Obtain two image files that are suitably sized, one gray, the other color.  Place a button on the form, get rid of the text.  Put an image on the form.  Set the datasource for the image to the gray image.  Change the alignment to top left.  Size the image object so that it exactly fits the image it is displaying. Next, position the button underneath the image so that only its borders are showing.  Set the visible property to false.  Create a codeblock on the image’s onOpen event that sets a custom property, called color, to false.  Add a codeblock in the onMouseMove event that checks if the color property is true.  If it is true, then nothing needs to be done since it is already in color.  If true is false, then we need to raise the button (make it visible), show the color image instead of the gray image, and set the color property to true since the cool button is now in color.  Next, we need to get the container, whether it is the form, or a container, to make sure the object is not in color and is not raised up.  If the form or container’s onMouseMove event is firing, then the mouse is not over the cool button.  This form or container’s onMouseMove event should check the property color of the cool button’s image object.  If it is color, then it should make the pushbutton’s visible property equal to false, and show the gray image.  Finally it should set the color property to false since the cool button is no longer shown in color.  Lastly, a codeblock should be attached to the onLeftMouseDown event of the image object which should change the pushbutton’s borderStyle to 7, which gives it a «pushed in» appearance.  Whew!

The more advanced dBASE user will recognize the opportunity for a custom control.  There is no doubt that a lot of code could be re-used if this approach were followed.  On the other hand, for the intermediate or beginning dBASE developer can benefit from being a little less sophisticated.  Having all the codeblocks  attached to the objects lets them jump from object to object inspecting the interaction between the events and properties of the objects used in the form.  There is not a need to jump to the source code to see anything.  The codeblock editor shows the snipets of code that each event relies upon.

So now that we have a fully functional cool button, its time for make several work together.

Groups of Cool Buttons

Because dBASE lacks a onMouseOut event, objects have to work together to tell each other when the mouse is over them. The mouse cannot be firing onMouseMove events from more than one object at a time, so we can safely assume that if the mouse is over one object, in cannot be over another. Look at the real code that is associated with the container’s onMouseMove event from the first image in desktop.wfm.
 
 
form.taskbar.image1.onmiddledblclick()
form.taskbar.image2.onmiddledblclick()
form.taskbar.image3.onmiddledblclick()
form.taskbar.image4.onmiddledblclick()
form.taskbar.image5.onmiddledblclick()
form.taskbar.image6.onmiddledblclick()
   

The first think to notice is that there are six commands. Each one corresponds to the six images shown in the panel that runs down the side (refer to the desktop diagram). The container that holds these six cool buttons is called “taskBar”. Each element of the cool button (pushbutton, image, text) is contained inside of the container named taskBar. In order to refer to it, you have to use dot notation. The code above refers to the image objects explicitly. Notice the dot notation:
 
 
form.taskbar.image1.onmiddledblclick()
   

form refers to the form itself. The form acts as a container for all the objects used in this form.
taskbar refers to a container. Containers hold other objects
image1 refers to the image object contained in the taskbar container.
onMiddleDblClick() refers to an event that is associated with the image image1. Notice the parenthesis at the end. This tells dBASE to go ahead and run the code contained in that event.

What the heck is onMiddleDblClick? Years ago, it was common for a mouse to have three buttons. The onMiddleDblClick event is a convenient place to hold code that you don’t want the user to trigger directly. While it is certainly possible for a user to have a three button mouse and to double-click it while over an image, it is not likely. Experienced users will instantly protest that this is sloppy and that a custom method should simply be attached to the object. This is true, but there is a very good reason for not doing it in this case. I will elaborate on this later.

If we look at the code attached to image1’s onMiddleDblClick event, it looks like this:
 
 
if this.color
   if this.on
   else
      this.datasource = 'filename company1.gif'
      this.parent.pushbutton1.borderstyle = 0
      this.parent.pushbutton1.visible = false
      this.color = false
   endif
endif
   

English pseudo-code would be:
 
 
If this image's color flag is set to true,
And if this image's "on" flag is true, then do nothing.
But if this image's "on" flag is false then
Set this image's datasource to the filename company1.gif (gray image)
Set this image's parent's pushbutton1's border style to a normal button look
Make the pushbutton invisible
Because the cool button is gray and not raised up, the "color" flag needs to be set to false
   

The image’s onMiddleDblClick event makes it gray and flat which indicates to the user that the option is not currently selected and is not the object that is currently “hot.”

When the container called “taskBar” receives a mouse movement, it simply tells each cool button to be flat and gray. This is the correct behavior because if the mouse is moving over the container itself, it is not pointing at any cool button.

Now we have seen that an image will rise up and turn into color if it’s onMouseMove event is fired. It will go flat and gray if it’s onMiddleDblClick event is fired, what other behavior is needed? If the user clicks on the image to choose it, the coolbutton has to a) turn color, b) push in, and c) launch the appropriate action. The following code shows it doing that. This code is connected to the onLeftMouseDown event of the image:
 
 
form.taskbar.pushbutton1.borderstyle = 7
this.parent.onmiddledblClick()
this.on = true
this.parent.onmousemove()
form.m1.onmiddleDblClick()
form.loadwfc("m1.wfc")
   

English pseudo-code would be:
 
 
Set this form's container named taskbar's pushbutton1's border style to look pushed in.
Run this image's parent's (the parent is the container named "taskbar") onMiddleDblClick method which makes all the cool buttons flat and gray.
Set this image's "on" flag to true. "On" is a flag that we created and is not a normal property of an image. We could have named the property "Sally" or "Edward", instead, the name "on" is meant to tell us whether the object is pushed in and therefore is the cool button that currently is on.
Next, run this parent's onMouseMove event which will turn this object to color and turn on the pushbutton behind it (remember that we changed the border to have a "pushed in" look)
Next, run the container called "m1"'s onMiddleDblClick event. This needs much more explaining, but briefly it clears out the "m1" container so that it has no objects in it.
Finally, the form's "loadwfc" method (or procedure) is run. This procedure populates the "m1" container and then slides it into view.
   

Look at the diagram to see the various events and how the events interact with each other.

The Top Panel


These are one-level cool buttons (no sub-menus)
The top panel is a container named “opBar” that works like taskBar. The only important difference is that all of these cool buttons instantly launch something when they are clicked instead of sliding out a sub-menus. Since all the other coding works identically to the taskBar container, the details are skipped.

Framing the Cool Buttons

Adding the framing around the two containers (taskbar and opbar) helps the user understand that these are separate groups of cool buttons that should might logically behave differently. One method is to simply change the borderStyle of the containers themselves. I wanted to mimic the look of Microsoft’s Outlook and so I looked at the framing that is used there. There are obviously multiple ways to accomplish this. I settled on the use of pushbuttons carefully sized and placed to create the desired effect. Pushbuttons are a good choice because they render (display) very quickly, use resources efficiently, and they have the needed visual characteristics. Notice that each of these pushbuttons have their speedbar properties set to true. The keeps the object from receiving focus. It’s enabled property is also set to false so that if the user clicks on the frame, it won’t behave like a pushbutton.

The problem with using pushbuttons for framing is that they have seams. Here the seams have been circled. These don’t exactly look bad, but they give a granular effect that is not ideal. It is simple to patch up these seams by placing small paintbox objects over the seams. When you create the paintbox objects, you only have to change two properties. 1) set the borderStyle to 3 which means no border. 2) set its ColorNormal property to BtnText/BtnFace.  This will set the color to the same color that the pushbuttons use. You might be interested to know that these colors are in turn, obtained from Windows. This allows your color scheme to be change to match the color scheme in effect on any particular machine.

To finish out the visual effect we have used a graphic and two text objects. These were added for stylistic reasons and perform no particular function. They have no events.

The Slide out Tray

The slide out tray introduces a whole range of new concepts. First, it has a nice animated effect by which it “slides” out from under the container TaskBar. Second, it uses a “cool” image concept rather than a cool button. Thirdly, and most importantly, it is polymorphic and uses a Just-In-Time object creation system.

The Animated Effect

The animated effect is at its heart very simple. The relevant code takes place here:
 
 
form.m1.visible = false
form.m1.width = 9.14
form.m1.visible = true
form.m1.left += 1
form.m1.left += 1
form.m1.left += 1
form.m1.left += 1
form.m1.left += 1
form.m1.left += 1
form.m1.left += 1
form.m1.left += 1
form.m1.left += 1
form.m1.left = 10.86
   

M1 is the name of the container that "slides out". The English pseudo-code would be:
 
 
(Before this is called, M1 is moved to so that its "left" is zero)
Make the container called "M1" invisible
Make it the proper width
Make it visible again
Move it to the right one
Move it to the right one
repeat several times
Finally, make its left exactly equal to the screen coordinates where you want it to stop.
   

You might be wondering where the previous code is located. That answer gets into Just-In-Time object creation part and so discussion is deferred until that section. What is important here is that the animation is not difficult or mysterious.

The Cool Image

The Cool Image works just like the Cool buttons except that it does not “rise up”. This was done for stylistic reasons. The white background of the slideout tray did not look good with white buttons. All other aspects of this work the same except that there is no button to make visible.

Polymorphic and Just-In-Time

Aspects of this desktop form are polymorphic. “Polymorphic” in this context has a slightly different meaning than the traditional OOP (Object-Oriented Programming) definition, but it fairly describes this form. Polymorphic means “many shapes.” A pushbutton can have many combinations of border styles and colors, but it is still the same pushbutton underneath. Only its properties change. This polymorphism is taken for granted by the experienced developer. We constantly alter appearances and positions and function of all kinds of objects.

Polymorphism in this form means that the “shape” can be altered well after the .EXE has been created. This is accomplished by creating text files that contain the object definitions. These text files are opened at runtime (or later in this case) and the objects are generated in response to the information contained in those text files.

Why would you do this?

Compiled, this form is very small (just over 100k). Deploying a new EXE over the Internet would be no problem. But applications can be much larger. The original application that this form was designed to be a part of was originally over eight megabytes. Even zipped, it still was almost three megabytes. At 100k, you can send updates casually. At three megabytes you can’t update it so casually. Because the application is so large and complex, it also has more bugs and more missing features. Traditionally, when you find a bug, you must deploy a new .EXE file to correct the bug or to add the feature. If you properly use the power of dBASE, this does not have to be your only option.

The “M1.WFC” file

You will recall that form.taskbar.image1’s onLeftMouseDown() function include the following line:
 
 
form.loadwfc("m1.wfc")
   

This line calles the method (function, procedure, routine etc.) LoadWfc() which is listed here:
 
 
Function LoadWFC
   parameter Mfile
   ObjInit = new file()
   ObjInit.open(Mfile,"RW")
   Mtemp211=0
   do while .not. objInit.eof()
      Mtemp211 ++
      Mtemp221 = Objinit.readln()
      try
         if substr(Mtemp221,1,1) = '{'
            Mcodeblock = rtrim(Mtemp221)
            Mtemp221 = Objinit.readln()
            Mtemp211 ++
            Mevent = rtrim(Mtemp221)
            Mtemp77 = &Mcodeblock.
            &Mevent. = Mtemp77
         else
            &Mtemp221.
         endif
      catch (exception e)
         msgbox("Error: "+e.message+chr(13)+"Line:;
                 "+tran(Mtemp211,"99999")+chr(13)+Mtemp221,"Error Message")
      endtry
   enddo
   ObjInit.close()
   ObjInit = null
   

The code above is really very simple. A file is passed to the parameter Mfile. That file is a text file containing the lines of valid dBL code. Mfile is processed one line at a time. It looks for any lines that begin with a curly bracket “{”. If it finds such a line, the code knows it is dealing with a codeblock. It assigns the codeblock to the event that is next read. Otherwise, it simply executes each line the way it finds it using macro substitution. The whole thing is contained in a try/catch block which allows you to handle errors in an elegant way. Look at a code snippet from M1.WFC.
 
 
form.M1.IMAGE1 = new IMAGE(form.M1)
form.M1.IMAGE1.height =1.4545
form.M1.IMAGE1.left =2
form.M1.IMAGE1.top =0.2727
form.M1.IMAGE1.width =4.8571
form.M1.IMAGE1.dataSource ="FILENAME salesman1.gif"
form.M1.IMAGE1.pageno =0
form.M1.IMAGE1.borderStyle =3
{;this.color = false;this.on = false}
form.M1.IMAGE1.onOpen
{;set proc to openapps.prg addi;}
form.M1.IMAGE1.onLeftMouseDown
{;if this.color;this.datasource = 'filename salesman1.gif';this.color = false;endif;}
form.M1.IMAGE1.onMiddleDblClick
{;if .not. this.color;this.color = true;this.datasource = 'filename salesman.gif';endif;this.parent.image2.onmiddledblclick();this.parent.image3.onmiddledblclick();}
form.M1.IMAGE1.onMouseMove
{;this.color = false;this.on = false}
   

All that LoadWFC() does is execute each line above. When it hits a codeblock (i.e. begins with a “{”), it combines it with the next line to link the code block with the event which follows.

Let’s backup now and look again at the way that LoadWFC() gets called:
 
 
form.taskbar.pushbutton1.borderstyle = 7
this.parent.onmiddledblClick()
this.on = true
this.parent.onmousemove()
form.m1.onmiddleDblClick()
form.loadwfc("m1.wfc")
   

Notice the second to the last statement: form.m1.onMiddleDblClick(). The code that it executes follows:
 
 
do while this.first <> null
   this.first.release()
enddo
   

Since this code is executed from the perspective of the container named “M1”, this refers to M1. This code processes all the objects contained in the container, releasing each one. After this code has finished, the container is completely empty. Since the container is empty, form.loadwfc('m1.wfc') will execute the lines in m1.wfc which will populate the container M1. Remember that the container M1 is hidden behind the container taskBar, so the user won’t see the objects being rendered. Only after the objects have been created does the container M1 slide out.

It may sound like a lot of trouble to go through, and it would be without the proper tools, but look at what has been accomplished:

If the contents of the M1 need to change, all that is required is that the text file M1.WFC be replaced. This is a 3.5k file! If you had a standard application you could roll out different versions of M1.WFC to each client. Even if you upgraded the .EXE file in the future, the M1.WFC would remain in its customized state.

This polymorphic philosophy can be extended to include every visual object. Indeed, the author extracts all visual elements for all forms and includes them in these .wfc files. Before the form is opened, all visual objects get created. The net effect is that the forms look, act and feel the same. But every visual element can be changed in any way without the need to re-deploy the application’s exe file. Only the tiny .wfc files need be sent. In this way, a standard application can be “customized” per customer while retaining the ability to upgrade the .EXE file without having to recreate the customization. It is sorta like upgrading your web browser: you can get new features, but the old HTML pages still work.

A full description of this process is beyond the scope of this article, but since the the method is used in desktop.wfm, some explanation was in order.

Conclusion

Not all applications warrant the time and energy that went into creating the “Cool Desktop”. In fact all of its functionality can be duplicated with a lot less hoopla. But sometimes you want to create a form that works exactly as you would like it to. Desktop is such a form. It was not merely the end result of using dBASE objects in a traditional way. Instead, with a design concept firmly in mind, the power and flexibility of dBASE made creation of exactly what was desired possible.

Hopefully, the reader will take from this some ideas for how to better present applications to the user. The same concepts can be used to create forms that look nothing like this, but utilize the same form. This is the power of dBASE.

To download the Cool Desktop application,  click here
(it’s a 31Kb zipped file)


About the Author: George Burt is President of TrueShot Produce Systems, Inc. which provides a free accounting and information system specifically designed for the produce industry. TrueShot Accountant is designed to be completely customizable while remaining fully upgradable. TrueShot’s web site is http://www.TrueShot.com