How can I navigate through views in controls.js

I was trying the Hello demo

And wanted to create another page to navigate to. How can I do that?

Here is what I've thought:

var AppForm1 = new ngControls({

    Label1: {
      Type: 'weLabel',
      L: 20, T: 20,
      Data: {
        Text: 'Name:'
      }
    },

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

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

  });
var AppForm = null;

function ngMain() 
{
  AppForm = new ngControls({

    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) {
          alert('Hello, '+AppForm.Edit1.GetText()+'!');
          AppForm=AppForm1;
        }
      }
    } 

  });
  AppForm.Update();
}

For switching views you can use component ngPages with hidden page tabs (property PagesVisible: false). In OnClick event you simply switch pages via SetPage('SecondPage').

Example below:

var AppForm = null;

function ngMain()
{
  AppForm = new ngControls({
    MyPages: {
      Type: 'ngPages',
      L: 0, T: 0, R: 0, B: 0,
      Data: {
        PagesVisible: false,  // hide page tabs
        Page: 0
      },
      Pages: [
        {
          id: 'FirstPage',
          Controls: {
            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) {
                  alert('Hello, '+AppForm.Edit1.GetText()+'!');
                  AppForm.MyPages.SetPage('SecondPage')
                }
              }
            }
          }
        },
        {
          id: 'SecondPage',
          Controls: {
            Label2: {
              Type: 'weLabel',
              L: 20, T: 20,
              Data: {
                Text: 'Name:'
              }
            },

            Edit2: {
              Type: 'weEdit',
              L:80, T: 20, W: 150,
              Data: {
                Text: 'Second view!'
              }
            },

            Button2:
            {
              Type: 'weButton',
              L: 80, T: 60,
              Data: {
                Text: 'Say Hello'
              },
              Events: {
                OnClick: function(e) {
                  alert('Hello, '+AppForm.Edit2.GetText()+'!');
                }
              }
            }
          }
        }
      ]
    }
  });
  AppForm.Update();
}