Skip to content

Instantly share code, notes, and snippets.

@willblaschko
Created March 24, 2019 22:53
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save willblaschko/e72fe9359fb8cb605484819eec3583ab to your computer and use it in GitHub Desktop.
Save willblaschko/e72fe9359fb8cb605484819eec3583ab to your computer and use it in GitHub Desktop.
An example of using nested APL elements (Containers, Pagers) to achieve over 200 items in a relatively small payload. Use sparingly, this starts to have impact on performance of rendering.
{
"grid": {
"values": [
[ 2, 2, 3, 4, 5, 6, 7, 8, 9, 10 ],
[ 1, 2, 4, 4, 5, 6, 7, 8, 9, 10 ],
[ 1, 1, 3, 4, 5, 6, 7, 8, 9, 10 ],
[ 2, 2, 3, 4, 5, 6, 7, 8, 9, 10 ],
[ 1, 2, 4, 4, 5, 6, 7, 8, 9, 10 ],
[ 1, 1, 3, 4, 5, 6, 7, 8, 9, 10 ],
[ 2, 2, 3, 4, 5, 6, 7, 8, 9, 10 ],
[ 1, 2, 4, 4, 5, 6, 7, 8, 9, 10 ],
[ 1, 1, 3, 4, 5, 6, 7, 8, 9, 10 ],
[ 1, 1, 3, 5, 5, 6, 7, 8, 9, 10 ]
]
},
"tiles": {
"height": "10vh",
"width": "10vh"
},
"game": {
"colors": [
"#0000ff",
"#ff0000",
"#00ff00",
"#f0000f",
"#0f0f00"
]
}
}
{
"type": "APL",
"version": "1.0",
"theme": "dark",
"import": [
{
"name": "alexa-viewport-profiles",
"version": "1.0.0"
},
{
"name": "alexa-layouts",
"version": "1.0.0"
}
],
"layouts": {
"Tile": {
"parameters": [
{
"name": "name",
"type": "string"
}
],
"items": [
{
"type": "Frame",
"style": "gridBackground",
"bind": [
{
"name": "parentIndex",
"value": "${index}"
}
],
"items": [
{
"type": "Pager",
"width": "${payload.tiles.width}",
"height": "${payload.tiles.height}",
"id": "${name}",
"data": "${payload.game.colors}",
"items": [
{
"type": "Frame",
"width": "${payload.tiles.width}",
"height": "${payload.tiles.height}",
"backgroundColor": "${data}",
"style": "tileBase",
"position": "absolute"
}
]
}
]
}
]
}
},
"resources": [],
"styles": {
},
"mainTemplate": {
"parameters": [
"payload"
],
"items": [
{
"type": "Container",
"alignItems": "start",
"direction": "column",
"style": "gridBase",
"width": "100vw",
"height": "100vh",
"items": [
{
"type": "Container",
"width": "100vw",
"height": "100vh",
"data": "${payload.grid.values}",
"items": [
{
"type": "Container",
"direction": "row",
"width": "100vw",
"height": "${payload.tiles.height}",
"data": "${data}",
"bind": [
{
"name": "parentIndex",
"value": "${index}"
}
],
"items": [
{
"type": "Tile",
"name": "${parentIndex+'.'+index}"
}
]
}
]
}
]
}
]
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment