In this document and accompanying video we will continue our discussion on data bound images in a List Control.
We left off discussing the use of pagination to manage large tables. To turn on pagination we click the Design tab, then List properties to bring up the List Builder window. First set Record limit to -1 which means there is no limit to the number of records. Then check Paginate data to turn it on, and set the Pagination method to AutoFetchMore. What this means is that as we scroll down and we get toward the end of the list Alpha Five will then do an automatic Ajax callback to get the next twenty rows. So it will appear as though the list is continuous even though it is being fetched in chunks of twenty rows at a time:
Click Firefox then Fast Preview to see this callback in action:
FireFox shows us the callback taking place as we reach the end of each twenty row section:
So we have shown how we can display the binary data by creating temporary images, but another option is to embed the images directly inside the HTML by creating a base64 encoded HTML file. Let's go back to the builder by clicking on the Design tab, then List properties:
Start by clicking on movieImageBlob, then check Embed images into HTML:
We can also scale the image on the server before it gets served up. Click the smart field next to Scale image on server:
When the Scale Image window opens choose Specify absolute image size. Then choose Scale width and height independently, rather than specifying one of the dimensions and having the other dimension scaled proportionately. Let's specify .7 inches for Width and Height:
When we preview our list in Firefox we see the second image is scaled down, as we specified. Click on the image and use Inspect Element with Firebug to see the code:
We see the base64 encoded data has been embedded into the HTML:
Whereas when we inspect the first image we see that it is still a physical file on the server that has been created:
Depending on the particular application there may be benefits to embedding the image directly into the HTML, or there may be benefits to creating independent image files. The main benefit of embedding is that we reduce the number of round trips from the client device to the server in order to get the images. If we embed all of the images in the List Control only a single request needs to be made of the server, which can reduce the amount of network traffic dramatically.