Friday, December 14, 2012

WebSDK: Image Delivery Hints

When delivering custom web controls to your developers or customers, it can be problematic if your control has required images. Here are some hints to make the process easier on you and your customers:

1. Embed needed images right in your controls as private base64 constants... just like your IDE icon! This means that your users will not have to add lots of additional assets to their projects to get your controls to run, nor do you run the risk of name conflicts with other images!

Private Constant myImageConstant as String

2. Create WebPicture properties on your control so the variables don't go out of scope.

Private Property myImage as WebPicture

3. Convert these base64 strings into WebPictures in the Open() event:

myImage = new WebPicture
myImage.data = DecodeBase64(myImageConstant)
myImage.mimetype = "image/png" //This MUST match the image data
myImage.filename = "myImage.png"
myImage.session = nil //Very Important!

4. Make sure that any images that will not change from Session to Session are stored in a Shared Property so they are only stored once!

Shared Private Property myImage as WebPicture

You should only initialize them once as well. Using the code from step 2:

If myImage = nil then
  myImage = new WebPicture
  myImage.data = DecodeBase64(myImageConstant)
  myImage.mimetype = "image/png" //MUST match the image data
  myImage.filename = "myImage.png"
  myImage.session = nil //Very Important!
End If

NOTE: Make sure you set the Session property to nil, otherwise it will only be available in the session that created it!

5. Use Spritesheets for better compression. If you have lots of little images that will be used all the time, it might be worth it to combine them into a single larger image and then use CSS to specify the section of the image to use at runtime. A single image means one download, and from then on, the browser will use the one from its cache.

2 comments:

Jakkie v.d.Walt said...

Can you provide an example in a project file? and also example on how to use an Spritesheets

Jakkie v.d.Walt said...

Can you provide an project file for the example and can you also show an example on how to use an Spritesheets.