Exercise 2

In this exercise, you must combine the following elements:

  • resources
  • a Marker layout
  • a Marker layout invocation in the mainTemplate

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.

img

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"
                            }
                        ]
                    }
                ]
            }
        ]
    }
}