In this document and accompanying video we will discuss how to display data bound images in a List Control in a UX Component. By "data bound images" we mean images that are contained or referenced in a table that is used as the data source for a List Control.
In this example we have a MySQL table called movieimages and a column called movieName, which is a character field. Then we have two binary columns, one that contains the movie image as PNG data (movieImageBlobPng) and another that contains the binary data for the image as .JPG data (movieImageBlob):
We also have a folder called MovieImages, and inside this folder we have a series of images as .JPG files. As an example, 4281 under the movieName column is the reference to the movie image 4281.JPG:
Let's go back to the UX Builder and build a List Control to display these images from this table. Start by clicking the Design tab, then [List] under Data Controls:
When the New Control window opens, let's name it list1:
Now click List properties:
Click the Data Source tab, then choose SQL. Click Connection string, then choose mysql_alphasports_v11_2 from the drop-down list in the Connection String window:
Next we will click Table name, and select movieimages:
Now we click on Field list and check id, movieName, movieImageBlobPng, and movieImageBlob from the Available Fields list:
When we click on the Fields tab we see that Alpha Five assumes that since movieImageBlobPng and movieImageBlob are using binary data they will be images, but we need to specify what type of binary data we have in the field. So for movieImageBlobPng we will choose PNG from the drop-down list for Image type:
The default Image type is JPG, which is what we want for movieImageBlob, so there is no need to change it:
Click on the Data Source tab to change the Record limit to 10, as this table has approximately five hundred records and we want to limit it:
Now click the the List Layout tab to select from the Available Fields and add them to Columns in List by clicking the arrow:
Click OK, then Save. Click Firefox then Fast Preview to see our list:
Here is our list of 10 rows of data with images:
Click on any of the images and Inspect Element with Firebug:
We see that Alpha Five has taken the binary data from the field and created a file inside session storage with the data for the image in it so that it can be displayed in the list:
Clearly there is a bit of work involved for Alpha Five in extracting the data from the binary field and creating a physical file in session storage, which is why we set the limit for the number of rows in the List Control to ten. If we had set the limit to five hundred rows Alpha Five would have had to extract a large number of binary fields and create many temporary files. What we can do to manage that is turn on automatic pagination, which we will discuss in Part 2 of this document and video.