Store Pictures in Properties

In User Guide, Ch3, Sect 1: “Optimizing Web Applications”, it says this…

Store Pictures in Properties
Pictures stored in properties of a web application are cached by the web browser so they are sent only once from the app to the browser. As a result, storing pictures as App properties reduces the amount of data that is transmitted between the app and the browser. Storing your pictures in Modules will also allow the
browser to cache them.”

Before I start changing things, I want to be clear on the benefit. Today, if there are images I want to use in my app, I usually import them. And after I do that, they appear in the IDE Contents Panel. I may organize them in folders from there. Is this, or is this not equivalent to storing images in properties?

Doing that, they take up space in your binary and are always loaded into memory. It also causes the app to take longer to load. You also get the added “benefit” that when you use them, they actually take up 2x the space because you convert them in to a WebPicture (which just has a memoryblock under the hood).

Following the instructions in the User Guide, you load them from disk directly into a WebPicture so they only take up as much memory as they take, and you can load them as needed.

So does that suggest that I load pictures during run-time or is there a different way to initialize them?

Yes, you’d load them at runtime. The easiest way to do this is to use an CopyFilesStep post-build script to copy the images to a folder next to the app and then use a routine something like this:

[code]Function LoadWebPicture(Name as String) As WebPicture
dim f as FolderItem = GetFolderItem(“images”).Child(name + “.png”)
if f<>nil and f.Exists then
dim wp as new WebPicture
wp.MIMEType = “image/png”
wp.Session = nil

try
  dim bs as BinaryStream = BinaryStream.Open(f)
  wp.Data = bs.Read(bs.Length)
  bs.Close
  
catch ioex as IOException
  //Opening the picture failed
  return nil
end try

return wp

end if

End Function
[/code]

Define a property in a module, lets say it’s called Images:

Protected myLogo as WebPicture

Then you can load images from disk (making sure that they are PNG files in this case):

Images.myLogo = LoadWebPicture("logo")

Then whenever you need to use the image somewhere, you can get the URL thusly:

url = Images.myLogo.URL

[quote=107276:@Greg O’Lone]Mark Pastor So does that suggest that I load pictures during run-time or is there a different way to initialize them?
Yes, you’d load them at runtime. The easiest way to do this is to use an CopyFilesStep post-build script to copy the images to a folder next to the app and then use a routine something like this:[/quote]

When I add a picture with a URL during design, does it not load only when the containing control is displayed ?

Yes. If you simply use URLs, you’ll be fine. It’s images that you wish to include with your project and serve from your application that are the problem.

The method described worked fine if I need to display the already loaded webimage in a webimageviewer but I cannot use the web image as the cellpicture image in a weblistbox. Any idea why.
I am doing something like: Listbox1.cellpicture(0,0) = images.mypicture

A sample project showing what you are doing would be very helpful.

A post build copy files step is added (something like. …/images/atom.png)
I use your exact same LoadWebPicture method in App. There is a module called images with a protected property called atom as webpicture.
In App open event handler: Images.atom = LoadWebPicture(“atom”)
If I do something like imageviewer1.picture = images.atom, it correctly shows the webpicture.
If I try Listbox1.Cellpicture(0,0) = images.atom, nothing shows in the first row, first column position.

Please put something on dropbox or another file service so we are not guessing. If you can replicate it in a small project, it’ll be easier to track down.

link text

You’ve almost got this right. There are two issues you would have to resolve:

  1. You need to assign the filename wp.filename = f.name
  2. You need to define the width & height of the webpicture.

The alternative is to just let WebPicture do the work for you. Change your load routine to:

[code]Dim f As FolderItem = GetFolderItem(“images”).Child(name + “.png”)
if f<>nil and f.Exists then
Dim wp As New WebPicture(f)

return wp
end if[/code]

Done! Thanks