HowTo: Using SD Image Gallery ControlUnofficial Content

The Smart Devices SD Image Gallery control provides an elegant way for displaying pictures and interacting with them as an alternative of the default Grid control.

The data of that list has to have a field based on the Image data type, that data would be used for the control to display the images in a nicer way.

The control's run-time behavior depends on the values of some properties and on the platform where the app is running. As you will be able to see you can change some properties to configure how the image gallery is going to show its elements and also which extra information you´ll be able to see.

SD Image Gallerty - example iOS

A key point of this control is that, even though it is shown as an image gallery, the collection of items still behaves as a list. This means that you can go to the detail view of each item with just one Tap Gesture, execute the default list actions (add, update, delete items) and customize the actions executed as if it were a regular list.

iSD Image Gallerty - example iOS 2

Using the Control

To set the control first apply the Work With for Smart Devices object (WWSD) pattern to a Transaction object. Then the next step is to go to the Grid properties, where you will find the Control Type property, which by default has the empty value.

Choose SD Image Gallery for this property. The next step is to set the Data Attribute to the image attribute you want the image gallery to show for each element of the Grid. In the image bellow there is a example of how to set this properties for this example.

imggallipad5

At this point if you run the app you'll get the default look and feel of the image gallery.

Properties

Properties which can let you customize the behavior and looks of the Image Gallery

Data Attribute This property is used to declare the name of the attribute that is going to be shown by the image gallery.
Grid Behavior Three options: Show Full Image, Show Detail View and none. Full image will show the grid with the images in a big size (one per slide), the detail view option enables you to see the image gallery as a set of small pictures (many per slide) and the none value takes as a default the platform default. See the images at the end of the page for some examples.
Title Attribute Specifies an attribute to be the title of the image. The value of the attribute set in this property will appear on top of the image.
Subtitle Attribute Specifies an attribute to be the subtitle of the image. The value of the attribute set in this porperty will appear under the image. By default, Forecolor for Title Attribute and Subtitle Attribute is black (the same color as the background), if you want to change the Forecolor property for this attributes you can configure Title class and Subtitle class (under the Attribute class) of the Theme.
Enable Share Action This property adds a button to the user interface that lets you select several images, and send them by e-mail. More info about this HowTo: use share action for the Image Gallery .

 

Examples

With grid behavior: Detail View

imggallIpad1

Tapping over the small image you can go to the detail view of the item.

imggallipad2

With the grid behavior on full image, first you see all the pics as detail view but when tapping over one you can go to a big picture and slide with a gesture to the following big picture.

imggallipad3

When tapping over the big picture you can see the detail view of the item.

imggallipad4

On Android, is a temporal restriction that this is how it looks no matter the grid behavior property.

imggallandroid

Take a look at this Gallery in the MyCowBook 

Notes

For Android

To change the background color on this control you have to set the Grid\Background Color class on the Android Theme.

For IOS

To change the background color of the Detail View on this control you have to set the Grid\Background Color class on the IOS Themes.

Availability

This feature is available as of GeneXus X Evolution 2 Upgrade 5

Videos

Start Video Work With for Smart Devices – General Aspects and List layout
Start Video WorkWith for Smart Devices – Detail Layout