Embed Your Images
It has always been a problem for me to have to include images for each class as an external file. Not only is file access slow, but VFP has an irritating way of displaying the Hourglass cursor every time a file is accessed from disk. This is especially noticeable in graphical buttons that have a bitmap change for a MouseEnter and MouseLeave event.
Well not any more. Using a field in the class – the USER field, I have in one stroke removed both these irritants. Using the method described here, disk reads are eliminated and there is no need to include the bitmaps.
Note: This method only works with VFP9 since it uses the PictureVal property to load images. Also this will only work with the IMAGE base class since other objects, while they have a picture property, do not have a PictureVal property.
The method is simple. Store the bitmap into the USER field of the image class and at runtime retrieve it and assign the PictureVal property of the image object to it.
Let’s start. Create a new class – ImageXML based on the image object. For now, just save it.
I have created a simple Builder to assist in inserting the images. This is included in the download files. Feel free to improve the builder as you see fit.
Run the builder and follow the steps 1,2,3.
- Select the Picture. The image selected is displayed next to the button.
- Select the class you just created. The TextBox will display the selected class name.
There is a Button with Red writing if you want to clear out the contents of the USER field if there is any other data there. Click this button to clear it out.
3. Click the “Insert Image” button and the image is instantly inserted into the USER field of the class. Select other bitmaps (1) and append them (3). When you have inserted your images, close the builder and Browse the class as a table. In the USER field you will find lots of new data. I have used delimiters in the builder <name> and </name> <picture> and </picture> to separate the images inserted.
Please note down the images as you insert them so that you can know what they are later when you want to assign them. Close the class opened earlier as a table.
Now open your class as a class and add a new method to it – ProcessImages
Add the following code to the ProcessImages method.
* process the images
* open the class as a table
USE (THIS.CLASSLIBRARY) IN 0 ALIAS xClass SHARED
* get the field we want only
SELECT USER FROM xClass WHERE NOT EMPTY(USER) AND baseclass="image" INTO CURSOR userStr
* store the pictures
LOCAL cPixStr,nPix,cPixname,cPixContents
nPix = 1
cPixStr = ALLTRIM(USERSTR.USER)
* not needed anymore so close them off
USE IN SELECT("userstr")
USE IN SELECT("xClass")
* loop through the data extracting the images
DO WHILE .T.
cPixname = STREXTRACT(cPixStr,[<name>],[</name>],nPix)
IF EMPTY(cPixname)
EXIT
ENDIF
cPixcontents = STREXTRACT(cPixStr,[<picture>],[</picture>],nPix)
* add a property to hold this value
This.AddProperty("pix"+TRANSFORM(nPix),cPixContents)
nPix = nPix + 1
ENDDO
In the INIT of the class call the above method:
This.ProcessImages()
The image class is complete.
To test the image class, create a new form and add an instance of the ImageXML.bbImage to the form. As you can see from the above code, the images are stored in properties added at runtime, that are named pix1, pix2 etc for however many images you have inserted.
So open the INIT of the image object and add this code:
* run parent code
DODEFAULT()
* assign the PictureVal – pix1 or pix2 or pix3 etc
This.PictureVal = This.Pix1
If you are using the image object as a button and want the image to change when the Mouse enters and leaves, then in the MouseEnter add code like this:
This.PictureVal = This.pix2
And reset it in the mouse leave
This.PictureVal = This.pix1
That is all that needs to be done. No images to ship and no hourglass to be seen. This method of using images even works at runtime since the VCX is compiled into the exe and can be opened and read like a table.
As mentioned the Builder is very simple and can easily be improved. At present, with the sample code supplied, only 1 image class per classlib is supported, but by changing the ProcessImages Code, more than one image object can easily be added to the classlib.
Here is the Testform with the Images assigned:
and the large image changes as the mouse moves over it:
