APL Frame
A Frame component holds a single child and has a border and background color. It displays a single component, like mainTemplate, so if you want multiple items, you must place them in a container. The following example shows how to place a single AlexaImage component inside a Frame.
{
"type": "Frame",
"width": "100%",
"height": "100%",
"item": [
{
"type": "AlexaImage",
"imageSource": "https://d3j5530a0cofat.cloudfront.net/adlc/circle.png",
"imageRoundedCorner": false,
"imageAspectRatio": "square",
"imageBlurredBackground": false
}
]
}
Important: You must include width and height in your Frame definition. Relative values as percentages depend on the parent container of the Frame.
Because the Tic-Tac-Toe board can contain up to three images per row and column, make sure that you standardize the way every image will be placed. Frames that include every image help you achieve that.
Exercise 2
For now, focus only on Echo Show 8 devices (no need to use the when property for this task). Update the APL document so that it renders the following:
In the APL document, there's a parent container with an AlexaBackground and three containers as children. Every child container must have a single Frame as an item. And every Frame must have an AlexaImage component as an item.
Use the following values for the three containers and their frames:
| width | height | paddingTop | |
|---|---|---|---|
| First Container (Top) | 33% | 38% | 5vh |
| Frame inside the first Container (Top) | 100% | 100% | |
| Second Container (Top) | 33% | 38% | 5vh |
| Frame inside the second Container (Middle) | 100% | 100% | |
| Third Container (Bottom) | 33% | 33% | |
| Frame inside the third Container (Bottom) | 100% | 100% |
Also use the following values for the AlexaImage:
{
"type": "AlexaImage",
"imageSource": "https://d3j5530a0cofat.cloudfront.net/adlc/circle.png",
"imageRoundedCorner": false,
"imageHeight": "50%",
"imageAspectRatio": "square",
"imageBlurredBackground": false
}
Important: Click here and then Blank Document to test your solution against the APL authoring tool in the developer console.
{
"type": "APL",
"version": "1.7",
"settings": {},
"theme": "dark",
"import": [
{
"name": "alexa-layouts",
"version": "1.4.0"
}
],
"mainTemplate": {
"parameters": [],
"items": [
{
"type": "Container",
"width": "100%",
"height": "100%",
"paddingLeft": "15vh",
"items": [
{
"type": "AlexaBackground",
"backgroundImageSource": "https://d3j5530a0cofat.cloudfront.net/adlc/board.png"
},
{
"type": "Container",
"items": [
]
},
{
"type": "Container",
"items": [
]
},
{
"type": "Container",
"items": [
]
}
]
}
]
}
}
Solution
{
"type": "APL",
"version": "1.7",
"settings": {},
"theme": "dark",
"import": [
{
"name": "alexa-layouts",
"version": "1.4.0"
}
],
"mainTemplate": {
"parameters": [
"test"
],
"items": [
{
"type": "Container",
"width": "100%",
"height": "100%",
"paddingLeft": "15vh",
"items": [
{
"type": "AlexaBackground",
"backgroundImageSource": "https://d3j5530a0cofat.cloudfront.net/adlc/board.png"
},
{
"type": "Container",
"width": "33%",
"height": "38%",
"paddingTop": "5vh",
"items": [
{
"type": "Frame",
"width": "100%",
"height": "100%",
"item": [
{
"type": "AlexaImage",
"imageSource": "https://d3j5530a0cofat.cloudfront.net/adlc/circle.png",
"imageRoundedCorner": false,
"imageHeight": "50%",
"imageAspectRatio": "square",
"imageBlurredBackground": false
}
]
}
]
},
{
"type": "Container",
"width": "33%",
"height": "38%",
"paddingTop": "5vh",
"items": [
{
"type": "Frame",
"width": "100%",
"height": "100%",
"item": [
{
"type": "AlexaImage",
"imageSource": "https://d3j5530a0cofat.cloudfront.net/adlc/circle.png",
"imageRoundedCorner": false,
"imageHeight": "50%",
"imageAspectRatio": "square",
"imageBlurredBackground": false
}
]
}
]
},
{
"type": "Container",
"width": "33%",
"height": "33%",
"items": [
{
"type": "Frame",
"width": "100%",
"height": "100%",
"item": [
{
"type": "AlexaImage",
"imageSource": "https://d3j5530a0cofat.cloudfront.net/adlc/circle.png",
"imageRoundedCorner": false,
"imageHeight": "50%",
"imageAspectRatio": "square",
"imageBlurredBackground": false
}
]
}
]
}
]
}
]
}
}