How to understand Hello World example

To run Hello World example you need two files: index.html and main.js.

index.html

Define settings for Loader - ngAppFiles, ngLibsURL.
Load Loader scripts - loader.js.
Define application container - DIV element with id "ngApp".
Launch Loader (then Loader launches the application) - ngLoadApplication('ngApp');

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>My application</title>

    <script type="text/javascript">
      var ngLibsURL='controls.js/release/libs/';

      var ngAppFiles = [
        'controls.js/release/controls-vm.js',

        'controls.js/release/libs/ng_wineight/wineight.css',
        'controls.js/release/libs/ng_wineight/wineight.js',

        'main.js'
      ];
    </script>

    <script type="text/javascript" src="controls.js/release/loader.js"></script>
  </head>

  <body scroll="no" onload="ngLoadApplication('ngApp')">
    <div id="ngApp" class="ngApplication"></div>
  </body>
</html>

main.js

Define global variable for application form - AppForm.
Define ngMain function - application entry point.
Create new form AppForm from GUI definition object - new ngControls({...}).
Render form - AppForm.Update();

var AppForm = null;

function ngMain()
{
  AppForm = new ngControls({/* ControlsForm: 'AppForm' */
    Label1: {
      Type: 'weLabel',
      L: 20, T: 20,
      Data: {
        Text: 'Name:'
      }
    },

    Edit1: {
      Type: 'weEdit',
      L:80, T: 20, W: 150,
      Data: {
        Text: 'John'
      }
    },

    Button1:
    {
      Type: 'weButton',
      L: 80, T: 60,
      Data: {
        Text: 'Say Hello'
      },
      Events: {
        OnClick: function(e) {
          AppForm.Message1.SetText('Hello, '+AppForm.Edit1.GetText()+'!');
        }
      }
    },

    Message1: {
      Type: 'weLabel',
      L: 80, T: 100
    }
  });
  AppForm.Update();
}

See more How-Tos