Use containers as Tic-Tac-Toe board rows
The best approach is to divide the viewport into three containers, one per row. The benefit of this approach is that you can adjust padding per row, and all the markers of the same row are aligned at the same height no matter what device they render on.
The following example shows the first container which represents the first row:
{
"type": "Container",
"direction": "row",
"justifyContent": "center",
"data": "${frameData.topRow}",
"item": [
{
"type": "Marker",
"markerURL": "${data.marker}"
}
]
}
Observe the data parameter of the container. This parameter defines an array of objects (in this case the ${frameData.topRow} array as defined in the frameData data source representing the top row). This means that the entire top row of markers displays as a group of visual objects under that same container. Also observe that the value passing as parameter now is "${data.marker}", meaning that it’s the marker’s URL defined in the topRow array of the frameData data source object that passes.
Putting all the pieces together, the following example shows how the APL document renders on multiple devices and for the previously defined data source. Test how it looks on different viewports by using the viewport selector on the APL authoring tool.
{
"type": "APL",
"version": "1.7",
"theme": "dark",
"import": [
{
"name": "alexa-layouts",
"version": "1.4.0"
}
],
"resources": [
{
"when": "${@viewportProfile == @hubRoundSmall}",
"dimensions": {
"frameWidth": "20%",
"frameHeight": "50%",
"imgHeight": "65%",
"paddingTopRow": "20vh",
"paddingBottomRow": "0vh"
},
"string": {
"bgScale": "best-fill"
}
},
{
"when": "${@viewportOrientation == @viewportOrientationLandscape}",
"dimensions": {
"frameWidth": "25%",
"frameHeight": "100%",
"imgHeight": "40%",
"paddingTopRow": "4vh",
"paddingBottomRow": "0vh"
},
"string": {
"bgScale": "best-fill"
}
},
{
"when": "${@viewportOrientation == @viewportOrientationPortrait}",
"dimensions": {
"frameWidth": "25%",
"frameHeight": "100%",
"imgHeight": "40%",
"paddingTopRow": "30vh",
"paddingBottomRow": "30vh"
},
"string": {
"bgScale": "best-fill-down"
}
}
],
"layouts": {
"Marker": {
"parameters": [
{
"name": "markerURL",
"type": "string",
"description": "URL of marker"
}
],
"items": [
{
"type": "Frame",
"width": "@frameWidth",
"height": "@frameHeight",
"spacing": "@spacingLarge",
"item": [
{
"type": "AlexaImage",
"imageSource": "${markerURL}",
"imageRoundedCorner": false,
"imageHeight": "@imgHeight",
"imageAspectRatio": "square",
"imageBlurredBackground": false
}
]
}
]
}
},
"mainTemplate": {
"parameters": [
"frameData"
],
"items": [
{
"type": "Container",
"paddingTop": "@paddingTopRow",
"paddingBottom": "@paddingBottomRow",
"items": [
{
"type": "AlexaBackground",
"backgroundScale": "@bgScale",
"backgroundImageSource": "https://d3j5530a0cofat.cloudfront.net/adlc/board.png"
},
{
"type": "Container",
"direction": "row",
"justifyContent": "center",
"data": "${frameData.topRow}",
"item": [
{
"type": "Marker",
"markerURL": "${data.marker}"
}
]
},
{
"type": "Container",
"direction": "row",
"justifyContent": "center",
"data": "${frameData.middleRow}",
"items": [
{
"type": "Marker",
"markerURL": "${data.marker}"
}
]
},
{
"type": "Container",
"direction": "row",
"justifyContent": "center",
"data": "${frameData.bottomRow}",
"items": [
{
"type": "Marker",
"markerURL": "${data.marker}"
}
]
}
]
}
]
}
}