How to use the elm.realise function in elm

var EXPAND_BOTH = { x : 1.0, y : 1.0 };
var FILL_BOTH = { x : -1.0, y : -1.0 };

var entry_text =
            "This is an entry widget in this window that<br>" +
            "uses markup <b>like this for styling and<br>" +
            "formatting <em>like this, as well as<br>" +
            "<a href="X">links in the text</a>, so enter text<br>" +
            "in here to edit it. By the way, links are<br>" +
            "called <a href="anc-02">Anchors</a> so you will need<br>" +
            "to refer to them this way.<br>" +
            "<br>";


var w = elm.realise(elm.Window({
    title : "Conform example",
    conform : true,
    align : FILL_BOTH,
    weight : EXPAND_BOTH,
    width : 240,
    height : 360,
    elements : {
        the_background : elm.Background ({
            weight : EXPAND_BOTH,
            resize : true,
        }),
        the_conform : elm.Conform ({
            weight : EXPAND_BOTH,
            resize : true,
            content : elm.Box ({
                weight : EXPAND_BOTH,</em></b>

return elm.Button({
    key: key,
    style: 'anchor',
    before: before,
    label: '#' + icon_count,
    on_click: function() {
      for (var i in items.elements)
        items.elements[i].style = 'anchor';
      this.style = '';
      selected = this;
      print('Item ' + selected.label + ' selected');
    }
  });
}

var win = elm.realise(elm.Window({
  title: "Box example",
  width: 480,
  height: 240,
  elements: {
    background: elm.Background({
      weight: EXPAND_BOTH,
      resize: true
    }),
    box: elm.Box({
      elements: {
        control: elm.Box({
          horizontal: true,
          elements: {
            append: elm.Button({
              label: "Append",
              on_click: function() {

label: "Go",
                    labels: { left: "Left", center: "Center", right: "Right" },
                }),
                enable_disable_center: elm.ActionSlider({
                    weight: { x: 1.0, y: 0.0 },
                    align: { x: -1.0, y: 0.0 },
                    labels: { left: "Left", center: "Center", right: "Right" },
                    magnet: "center",
                    slider: "center",
                }),
            },
        }),
    },
});

var e = elm.realise(w);

elm = require('elm');

w = elm.realise(elm.Window({
  title: 'Popup test',
  width: 480,
  height: 800,
  elements: {
    bg: elm.Background({
      weight: { x: 1.0, y: 1.0 },
      resize: true
    }),
    popup: elm.Popup({
      on_button_press: function(label) {
        w.elements.popup.toast("Pressed button: " + label);
        if (label === 'Content') {
          w.elements.popup.message({
            content: elm.Button({
              label: 'This text will be changed as soon as this button is realized',
              icon: elm.Icon({ image: 'starred' })

var elm = require('elm');

var EXPAND_BOTH = { x: 1.0, y: 1.0 };
var FILL_BOTH = { x: -1.0, y: -1.0 };

var w = elm.realise(elm.Window({
    label: "Day Selector Demo",
    width: 320,
    height: 480,
    align: FILL_BOTH,
    elements: {
        the_background: elm.Background({
            weight: EXPAND_BOTH,
            align: FILL_BOTH,
            resize: true
        }),
        the_box: elm.Box({
            weight: EXPAND_BOTH,
            resize: true,
            elements: {
                dubai: elm.DaySelector({
                    weight: EXPAND_BOTH,

var elm = require('elm');

var EXPAND_BOTH = { x: 1.0, y: 1.0 };
var FILL_BOTH = { x: -1.0, y: -1.0 };

var outlier = {
    row: 2, col: 1,
    element: elm.Label({
        label: "I was outside"
    })
};

var win = elm.realise(elm.Window({
        title: "Table Demo",
        width: 320,
        height: 480,
        align: FILL_BOTH,
        elements: {
            bg: elm.Background({
                type: "background",
                weight: EXPAND_BOTH,
                align: FILL_BOTH,
                resize: true
            }),
            the_table: elm.Table({
                weight: EXPAND_BOTH,
                align: FILL_BOTH,
                elements: {
                    etitle: {

var elm = require('elm');

var EXPAND_BOTH = {x: 1.0, y: 1.0};
var FILL_BOTH = {x: -1.0, y: -1.0};

var win = elm.realise(elm.Window({
    label: "Date Time Demo",
    width: 320,
    height: 480,
    align: FILL_BOTH,
    elements: {
        background: elm.Background({
            weight: EXPAND_BOTH,
            align: FILL_BOTH,
            resize: true
        }),
        box: elm.Box({
            weight: EXPAND_BOTH,
            resize: true,
            elements: {
                dubai: elm.DateTime({
                    weight: EXPAND_BOTH,

horizontal: false,
                            enabled: false,
                            span: 100,
                            value: 0.2,
                            align: { x: 0.5, y: -1 },
                            weight: { x: 0, y: 1 },
                            icon: logo_icon
                        })
                    }
                })
            }
        })
    }
});

var e = elm.realise(w);

#!/usr/local/bin/elev8

var elm = require('elm');

var EXPAND_BOTH = { x : 1.0, y : 1.0 };
var FILL_BOTH = { x : -1.0, y : -1.0 };

var entry_text =
            "Start typing...";

var my_window = elm.realise(elm.Window({
    title : "Notepad",
    width : 320,
    height : 480,
    weight : EXPAND_BOTH,
    align : FILL_BOTH,
    elements : {
        the_background : elm.Background ({
            weight : EXPAND_BOTH,
            align : FILL_BOTH,
            resize : true,
        }),
        the_box1 : elm.Box ({
            weight : EXPAND_BOTH,
            align : FILL_BOTH,
            resize : true,
            elements : {

elm = require('elm');

var EXPAND_BOTH = { x: 1.0, y: 1.0 };
var FILL_BOTH = { x: -1.0, y: -1.0 };

elm.realise(elm.Window({
        title: "Photocam Demo",
        width: 320,
        height: 480,
        align: FILL_BOTH,
        elements: {
            background: elm.Background({
                weight: EXPAND_BOTH,
                align: FILL_BOTH,
                resize: true,
            }),
            box: elm.Box({
                weight: EXPAND_BOTH,
                align: FILL_BOTH,
                resize: true,
                elements: {
                    photocam: elm.Photocam({