gallery

Creates a gallery layer. Gallerys can retrieve children dynamically from a Database table or be configured statically using galleryItems.

note

Actions are explicitly forbidden on the gallery layer. Use the galleries children to execute actions.

Field Configurations

Key	Type	Description	Default Value
"galleryItems"	Array	The gallery items can either be defined by a JSON string literal or an array of objects.	null
"galleryPageOffset"	UnitSize	Offset of the elements.	0
"galleryPageWidth"	UnitSize	Width of each gallery item.	"100%"
"insets"	Object	Use the provided values to space the gallery content.	null
"layout"	String	The layout to be applied.	null
"layoutField"	String	Query result field to use as layout.	null
"path"	String	Specific path of gallery items.	null
"query"	String	Query in the related DB table.	null
"queryParams"	Array	The params to append to the query.	null
"scrollCircular"	Boolean	Determines, if the gallery can scroll infinite.	true
"scrollEvent"	String	Event fired when switching items (trackingKey is the tracking key of the elements or the index, if not available).	null
"table"	String	Name of the DB-Table.	null
"template"	String	The client template to be applied.	null
"templateField"	String	Query result field to use as template.	null
"timerInterval"	Number	Automatically scrolls gallery. Disable automatic scrolling by omitting this value.	0

Inherited

From Base Layer

Base Layer

Field Configurations

Key	Type	Description	Default Value
"_value"	Value	[PREVIEW] Dynamic value of the layer.	null
"accessibilityAppendState"	String	Defines this layer appends its state to the accessibility text.	null
"accessibilityText"	String	Text for accessibility navigation. Can be translated.	null
"actions"	ActionList	List of actions, which will be executed when the layer is tapped.	null
"borderColor"	Color	The color of the border in hex color value.	null
"borderRadius"	UnitSize	The radius applies to all corners; with a borderWidth of 0 the border is not drawn and radius is set anyway.	0
"borderWidth"	UnitSize	The width of the border.	0
"bottomLeftRadius"	UnitSize	Radius for the bottom left corner.	0
"bottomRightRadius"	UnitSize	Radius for the bottom right corner.	0
"classes"	Array	List of classes for layer styles.	null
"conditions"	Conditions	List of conditions to alter the layer state.	null
"constraints"	Constraints	A list of constraints defining the position of the layer in a layout.	null
"consumesKeyboard"	Boolean	This layer will be used to shrink, if a keyboard is shown.	null
"dataKey"	String	Name for assigning data to this layer.	null
"focusColor"	Color	The highlight color of this layer when it is focused. Mainly used on TV. If no color is provided, the pressedColor will be used.	null
"hidden"	Boolean	Indicates whether the layer is hidden. Default: false.	false
"isAccessibilityElement"	String	Defines if this layer is important for accessibility navigation. The default depends on the layer type.	null
"layerRotation"	Number	The layer is rotated by the specified degree.	0
"name"	String	Unique name in the layout. Used for alignment or actions.	null
"opacity"	Number	The opacity of the layer.	1
"overInsetBottom"	Boolean	Determines if this layer ignores the save space at the bottom of the device.	false
"overInsetTop"	Boolean	Determines if this layer ignores the save space at the top of the device.	false
"pressedColor"	Color	The highlight color of this layer when it is pressed. Mainly used on TV. If no color is provided, the focusColor will be used.	null
"safeArea"	SafeAreaTypeObject	Determines the safe area behaviour.	null
"shadowElevation"	Number	The elevation of this layer for casting shadows.	0
"state"	String	The state the layer will use as default.	"default"
"states"	LayerStates	A list of named states that affect the appearance of the layer.	null
"topLeftRadius"	UnitSize	Radius for the top left corner.	0
"topRightRadius"	UnitSize	Radius for the top right corner.	0
"touchFeedback"	TouchFeedback	Determines if the layer should show a touch feedback if touched.	"visible"
"trackingKey"	String	Defines a key for a scroll event.	null
"type"	LayerType	The type of the layer	null
"value"	Value	(Initial) value of the layer.	null

Examples

Example 1: Create a static Gallery using galleryItems.

Goal: Create a full-width gallery with a height of 450 pt that automatically rotates between three images every 10 seconds.

1. Add a gallery layer to the layout:

{
  "name": "gallery",
  "type": "gallery",
  "dataKey": "myGallery",
  "timerInterval": "10",
  "constraints": [
    {
      "type": "pos",
      "x": "0",
      "y": "0"
    },
    {
      "type": "pos",
      "x": "0",
      "anchor": "e",
      "relativeAnchor": "e"
    },
    {
      "type": "size",
      "height": "450pt"
    }
  ]
}

Notice that the dataKey is used to match it with name in the client_template.
Additionally, the timerInterval is set to 10 seconds for smooth image rotation, and there are constraints in place, ensuring a gallery height of 450pt.

2. Create a gallery item layout:

{
  "name": "p_image",
  "layers": [
    {
      "name": "image",
      "dataKey": "myImage",
      "type": "image",
      "scaleType": "scaleAspectFill",
      "constraints": [
        {
          "type": "pos",
          "x": "0",
          "y": "0"
        },
        {
          "type": "pos",
          "x": "0",
          "y": "0",
          "anchor": "se",
          "relativeAnchor": "se"
        }
      ]
    }
  ]
}

In the following line, the scaleAspectFill is set to scaleType to ensure that the image completely fills the gallery according to the defined constraints.
These constraints are designed to make the image occupy the entire gallery.

3. Add a data block to the client_template with values for the gallery.
   Make sure the items in the data block match the dataKey of the image in p_image:

{
  "content": {
    "data": [
      {
        "myImage": {
          "value": "http://res.appframework.de/media/demo/image1.png"
        }
      },
      {
        "myImage": {
          "value": "http://res.appframework.de/media/demo/image2.jpg"
        }
      },
      {
        "myImage": {
          "value": "http://res.appframework.de/media/demo/image3.jpg"
        }
      }
    ],
    "myGallery": {
      "galleryItems": [
        {
          "layoutName": "p_image",
          "dataSourceType": "data",
          "dataSource": "data.0"
        },
        {
          "layoutName": "p_image",
          "dataSourceType": "data",
          "dataSource": "data.1"
        },
        {
          "layoutName": "p_image",
          "dataSourceType": "data",
          "dataSource": "data.2"
        }
      ]
    }
  }
}

To configure the gallery, simply assign:
1. galleryItems to myGallery;
2. p_image to layoutName and set the name of data block to dataSourceType, with the desired data block index set to dataSource.

Result:

A static gallery layer using galleryItems has been created.

Example 2: Create a dynamic Gallery using a Database table.

Goal: Create the same gallery as in Example 1 using a database table.

1. Create a database table:

{
  "table": {
    "name": "galleryData",
    "fields": [
      {
        "name": "ID",
        "type": "TEXT"
      },
      {
        "name": "title",
        "type": "TEXT"
      },
      {
        "name": "image_url",
        "type": "TEXT"
      }
    ],
    "primaryKey": [
      "ID"
    ],
    "queries": {
      "all": {
        "custom": "SELECT * FROM galleryData"
      },
      "byId": {
        "custom": "SELECT * FROM galleryData WHERE galleryData.ID = ?"
      }
    }
  },
  "data": [
    {
      "ID": 1,
      "title": "image 1",
      "image_url": "http://res.appframework.de/media/demo/image1.png"
    },
    {
      "ID": 2,
      "title": "image 2",
      "image_url": "http://res.appframework.de/media/demo/image2.jpg"
    },
    {
      "ID": 3,
      "title": "image 3",
      "image_url": "http://res.appframework.de/media/demo/image3.jpg"
    }
  ]
}

The table galleryData which containts 3 fields, 2 queries and also 3 items has been created.
These items will be used in the gallery.

2. Design the layout to work with the database table.

{
  "name": "gallery",
  "type": "gallery",
  "dataKey": "myGallery",
  "table": "galleryData",
  "query": "all",
  "layout": "p_image",
  "template": "imageGallery",
  "timerInterval": "10",
  "constraints": [
    {
      "type": "pos",
      "x": "0",
      "y": "0"
    },
    {
      "type": "pos",
      "x": "0",
      "anchor": "e",
      "relativeAnchor": "e"
    },
    {
      "type": "size",
      "height": "450pt"
    }
  ]
}

Some necessary fields that allow the gallery to work with database table have been added.
1. table with value galleryData, which already exists.
2. query with value all, which was defined in section above.
3. layout with value p_image, which already exists.
4. template with value imageGallery, which is to be created in the next step.

3. Create a client_template for the p_image layout to get values from the database table and display them in the layout.

{
  "name": "imageGallery",
  "content": {
    "myImage": {
      "value": "{{image_url}}"
    }
  }
}

The imageGallery client_template, which will dynamically get value of image_url from query and set to myImage, which p_image will use for displaying the image has been created

Result:

A dynamic gallery layer using a database table has been created.