Up to this point, our View specifications have just been simple lists of controls with no layout information or styling. When you build real-world applications, you will arrange your controls in containers and indicate layout constraints (including sizing, alignment, margins, etc).

See the Control Sizing and Layout and Coordinate System and Layout documentation for more information on these topics.

Below we use stackpanel container controls along with new text captions, and use layout constraints on the text and edit controls, to make what is essentially a table style layout. With Synchro, it is possible to make complex layouts that are still platform-independent and responsive.

Module: hello6.js - View on GitHub


exports.InitializeViewModel = function(context, session) {
    return {
        firstName: "Jane",
        lastName: "Smith",
    }
}

exports.View =
{
    title: "Hello World 6",
    elements:
    [
        { control: "text", value: "Enter your name:", font: { bold: true } },
        { control: "stackpanel", orientation: "Horizontal", contents: [
            { control: "text", value: "First name:", verticalAlignment: "Center", width: 200 },
            { control: "edit", binding: "firstName", verticalAlignment: "Center", width: 240 },
        ] },
        { control: "stackpanel", orientation: "Horizontal", contents: [
            { control: "text", value: "Last name:", verticalAlignment: "Center", width: 200 },
            { control: "edit", binding: "lastName", verticalAlignment: "Center", width: 240 },
        ] },
        { control: "text", value: "eval('Hello ' + ({firstName} + ' ' + {lastName}).toUpperCase())" },
        { control: "button", caption: "Submit", binding: "onSubmit", enabled: "eval({firstName} && {lastName})" },
    ]
}

exports.Commands =
{
    onSubmit: function(context, session, viewModel)
    {
        Synchro.showMessage(context, { 
            title: "Hello World", 
            message: "User name: " + viewModel.firstName + " " + viewModel.lastName 
        });
    }
}

Hello 6

Next - Hello 7: View with shared styles