#Introduction

In this lab you'll add the form as the second tab.

#Steps

??Make the second tab a form

You'll add a <b>Save</b> button, and in the handler log the contents
of the form. This simulates the set of data you'd send to the back-end.

Import `src/form/Container.mjs`, and use it as the second item.

Configure the form to use vbox, along with some other configs.

    {
        module: Form,
        reference: 'form',
        header: {
            text: 'Edit'
        },
        style: {
            padding: '8px'
        },
        itemDefaults: {
            labelWidth: 80,
            flex: 'none'
        },
        layout: {
            ntype: 'vbox',
            pack: 'start',
            align: 'stretch'
        },
        items: []
    }

??Add two fields

Add two fields to the `items:[]`. 

Add a text field. You'll need to import `src/form/field/Text.mjs` and 
use that module. Configure the field with `labelText:'Name'`
and `name:'name'`. 

Add a number field. You'll need to import `src/form/field/Number.mjs` 
and use that module. Configure the field with `labelText:'Rating'`, 
`name:'rating'`, 
along with `minValue:1`, `maxValue:5`, and `stepSize:0.5`.

The `name` config isn't required, but it makes it easier to 
initialize, as you'll see in the next step.

??Initialize the form with values from the record

In the `afterSetBusiness()` method add code to update the form with 
values from the record.

    const form = this.getReference('form');
    form.setValues({
        name: business.title,
        rating: business.rating
    });

If you save and refresh, then choose businesses, you should see the 
form updating to reflect the selected record.

??Add a <b>Save</b> button

Add _two_ new items to the form's `items:[]`. One to take up available 
room at the bottom of the form, and the other a save button.

    {
        flex: 1
    }, {
        module: Button,
        text: 'Save',
        handler: data => data.component.up({ntype: 'yelp-business-details'}).onSaveClick()
    }

As you can see, the button calls an `onSaveClick()` event. Add that as a new member
of the view, and log the values in the form.

    onSaveClick() {
        const form = this.getReference('form');
        form.getValues().then(data => {
            console.log(data);
            // Send the data to the back-end.
        });
    }

Note that in a real-world app you _might_ code a couple of events in the view, but
beyond a trivial view, you'll create a view controller and put those events there!
