Exercise 2
In this exercise, you must combine the following elements:
resources- a
Markerlayout - a
Markerlayout invocation in themainTemplate
Step 1. Breaking the previous elements down, start by defining the resources in the following table:
| Resource | Resource type | Viewport profile: @hubRoundSmall | Viewport orientation: @viewportOrientationLandscape | Viewport orientation: @viewportOrientationPortrait |
|---|---|---|---|---|
frameWidth |
(string or dimension) | 20% | 25% | 25% |
frameHeight |
(string or dimension) | 50% | 100% | 100% |
imgHeight |
(string or dimension) | 65% | 40% | 40% |
paddingTopRow |
(string or dimension) | 20vh | 4vh | 30vh |
paddingBottomRow |
(string or dimension) | 0vh | 0vh | 30vh |
bgScale |
(string) | best-fill | best-fill | best-fill-down |
Step 2. Create a better version of the Marker layout that takes one string parameter with the name markerURL and a description value of "URL of marker." The layout must comprise a Frame that embeds an AlexaImage component as an item.
Set the Frame width to the @frameWidth resource, and its height to @frameHeight. Also set the spacing parameter of the Frame to @spacingLarge for better visual results.
For the Marker layout, use the same AlexaImage component that you have seen previously:
{
"type": "AlexaImage",
"imageSource": "${markerURL}",
"imageRoundedCorner": false,
"imageHeight": "@imgHeight",
"imageAspectRatio": "square",
"imageBlurredBackground": false
}
The "imageSource" property is assigned to the parameter of the layout and the "imageHeight" is set to the @imgHeight resource that you defined in Step 1.
Step 3. Invoke the Marker in the mainTemplate.
The mainTemplate must have a single parent container with properties "paddingTop" set to resource @paddingTopRow and "paddingBottom" set to resource @paddingBottomRow. That parent container must comprise an AlexaBackground component of the empty Tic-Tac-Toe skill board and a child container that must invoke the Marker.
The following list shows the properties for the AlexaBackground component and their required settings:
"backgroundScale"must set to"@bgScale""backgroundImageSource"must set to "https://d3j5530a0cofat.cloudfront.net/adlc/board.png"
The following list shows what the properties for the child container and their required settings:
"direction"set to"row"so that you apply a row-by row strategy for displaying all the markers in the next section"justifyContent"set to"center"
The child container must also have a single item that is your Marker layout invocation. Pass the following value as the "markerURL": "https://d3j5530a0cofat.cloudfront.net/adlc/cross.png"
If you apply all the previous settings, you will see the following visuals across different devices.
Your starting point is this:
{
"type": "APL",
"version": "1.7",
"theme": "dark",
"import": [
{
"name": "alexa-layouts",
"version": "1.4.0"
}
],
"resources": [
],
"layouts": {
},
"mainTemplate": {
"parameters": [],
"items": [
{
"type": "Container",
"items": [
{
"type": "AlexaBackground"
},
{
"type": "Container",
"item": [
]
}
]
}
]
}
}
Solution
{
"type": "APL",
"version": "1.7",
"theme": "dark",
"import": [
{
"name": "alexa-layouts",
"version": "1.4.0"
}
],
"resources": [
{
"when": "${@viewportProfile == @hubRoundSmall}",
"strings": {
"frameWidth": "20%",
"frameHeight": "50%",
"imgHeight": "65%",
"paddingTopRow": "20vh",
"paddingBottomRow": "0vh",
"bgScale": "best-fill"
}
},
{
"when": "${@viewportOrientation == @viewportOrientationLandscape}",
"strings": {
"frameWidth": "25%",
"frameHeight": "100%",
"imgHeight": "40%",
"paddingTopRow": "4vh",
"paddingBottomRow": "0vh",
"bgScale": "best-fill"
}
},
{
"when": "${@viewportOrientation == @viewportOrientationPortrait}",
"strings": {
"frameWidth": "25%",
"frameHeight": "100%",
"imgHeight": "40%",
"paddingTopRow": "30vh",
"paddingBottomRow": "30vh",
"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": [],
"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",
"item": [
{
"type": "Marker",
"markerURL": "https://d3j5530a0cofat.cloudfront.net/adlc/cross.png"
}
]
}
]
}
]
}
}