0

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

1 Answer 1

1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.