Auto Draft

3
(2)
Created on September 03, 2019, Last modified on June 08, 2021

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());

Give feedback

Rating - 3 / 5. . Reviews - 2

No votes so far! Be the first to rate this post.

Go To Top