Template

Published: September 03, 2019
Edited: September 03, 2019

Lightning initially sets up the render tree from the app's static template. This template defines the render tree using nested Javascript objects. Your app contains a template which defines the render tree of it. When a new instance of your app is created, the elements are automatically created and properties are set.

Live demo

In this simple example, two elements are defined: for holding the header and the content. The header itself has a solid color background (rect: true and color: 0xff005500) and certain dimensions. It also has a child element that contains title (specified using the text property).

class LiveDemo extends lng.Application {
    static _template() {
        return {
            Header: {
                rect: true, w: 1920, h: 50, color: 0xff005500,
                Title: {
                    x: 50, y: 30, mountY: 0.5, text: { text: 'Header' }
                }
            },
            Content: {
                y: 60,
                MyImage: {
                    x: 100,
                    y: 100,
                    src: "/Lightning/img/LngDocs_LilLightningIdle.png" 
                }
            }
        }
    };
}

const app = new LiveDemo({stage: {w: window.innerWidth, h: window.innerHeight, useImageWorker: false}});
document.body.appendChild(app.stage.getCanvas());