Image controls and the Image Gallery Component
Before exploring these topics, be sure your Workspace will look for all the images shipped with Alpha Anywhere.
Along with the instructor, complete these steps.
- In the Web Projects Control Panel, click the button.
- The Web Project Properties window appears.
Mark the Include Image Gallery checkbox, as shown here:
The Image control
- The Image control is located in the Other Controls group.
- It is typically used in place of a Button control.
- Instead of having a Button Text Property, it has an Image name Property.
- It can display an image in your Workspace, or any image you can point to with a URL.
- The image it displays can be the same every time the control appears, or a different image can appear.
Along with the instructor, create an Image control.
- Create a new blank UX component.
- Add an Image control to the Component.
- Save the Component, with the file name DemoImages.
- Click the Design tab.
- Highlight the Image control.
- Click the smart button opposite Image name.
- The Specify Image window appears. Click the button.
- In the box that appears, click Select from Web Project Folder.
- The Select Image window appears.
Select any of the available images, and then click OK.
If no images appear, click Add Image to Project and find any image on your computer and add to your project.
If the image is very large, be sure to enter reasonable values in the Image Width/Height at the lower left of the screen, 200px by 200px for example.
- In the Specify Image window, click OK.
- In the Design area, notice the Image name Property is filled in.
- Save the Component.
- Display the Component in Live Preview.
(The image is part of an HTML span, so it needs to appear in a Web browser.)
The “Image – Data Bound” control
- The Image – Data Bound control is in the Data Controls group.
- Bind the control to a table field of type binary large object (BLOB) so that you can display the BLOB (which is an image in this case.)
- The control must know the value of a selected row’s primary key.
- The user clicks a row in a List control.
- The control selects the row in the table.
- Selecting the row will return that row’s primary key.
- The Image – Data Bound control shows the user an image which is stored in a BLOB field in that same row.
Follow through the instructions below . We do not have a BLOB field in our demo so just go through the motions but do not create a new component.
To display a BLOB field:
- Add an Image – Data Bound control to a Component. Give it a name of ImageDataBound.
- In the left-side pane of the Design tab, click Data Binding.
- Bind the control to the BLOB field.
- In the left-side pane of the Design tab, click Server-side Events.
- For the onDialogInitialize Event, use the Action Scripting button to add the Action Load Primary Key for Parent Table.
- In the left-side pane of the Design tab, click Controls.
- For the Image – Data Bound control, in the Properties pane, locate the group Data Binding-Images (it is near the bottom of the list of Properties):
- Select the Field name of the BLOB field.
- When you do, you will see the Property Image Type appear. Select the file extension of the images stored in the table.
This Property must match the file extension of the images stored in the table.
The control is now ready to display an image.
The ImageGallery Component
- The ImageGallery Component scans the thumbs sub-folder of an image folder, and creates a single-page gallery.
- The gallery displays the thumbnails in a row at the bottom of the gallery. When the user selects a thumbnail image, the full-size image appears in the gallery viewport.
- The image directory must be under the Webroot.
- The Component adjusts to take advantage of the capabilities of the target device.
- You can bind the image directory to an argument in a parent Component.
Along with the instructor, create an ImageGallery Component, and explore its Properties.
- Create a new Component of type ImageGallery.
- In the left-hand pane, click Properties.
- Click the smart button opposite Default image directory. Notice that there is no browse button to select a folder.
The Default image directory is the one referenced in the Web Project Properties window.
- Save the Component using the name DemoGallery.
Along with the instructor, create a control that will access an ImageGallery
- Open the DemoImages Component.
- At the bottom of the Design area, add a Button with the name Galleria.
- Save the Component.
- Click the button and select Full Preview
choose one of the installed browsers to display the DemoImages Component, and try the Galleria button.
(Do not use Live Preview and Alpha Anywhere’s “default browser.”)
- Close the browser window.