#Introduction

In this lab you'll create a container to hold the _city_ and _category_. 
Eventually, you'll pass that information to the Yelp data feed to get 
a list of matching businesses.

#Steps

??Create the filter container

Use the command line to navigate to the Neo workspace and generate
the filter class.

    npm run create-class

Name the class `Yelp.view.businesses.Filter`, and have it extend `container.Base`.

Give it `ntype:'yelp-filter'` and add a the property `html:'This is the new filter container',`.
The `html` property is just a placeholder; later we'll be adding input fields for city
and category.

When you're finished the file should look like this:

<pre class="runnable readonly text 280">
import Base from '../../../../node_modules/neo.mjs/src/container/Base.mjs';
class Filter extends Base {
    static config = {
        className: 'Yelp.view.businesses.Filter',
        ntype: 'yelp-filter',
        html: 'This is the new filter container',
        items: []
    }
}

Neo.setupClass(Filter);

export default Filter;
</pre>

The `html` config is just a way to make it easier to see that we're
using the new component. Once we start using the filter container in
the main view we'll remove that property.


??Use the filter container

Then edit the main view and 
- Import `FilterPanel`
- Change the second top docked item config
    - Use `module:FilterPanel`
    - Remove the `html` config

Save and refresh and you should see that the new filter container is being used.

??Plan your work

Don't change `Filter.mjs` yet, but think about the changes you'll be
making.

The filter container needs two text fields, arranged horizontally.

- An import for the text field component
- A `layout` config for the container
- Two field component configs in the `items:[]` 

If you were to go to the API docs for `Neo.form.field.Text` you'd see 
these key configs:

- `labelText`
- `labelWidth`
-  `clearable`

When you code, make small changes and refresh frequently.

Now that it's clear what we need to do, we can start coding...

??Remove the `html` property

Before doing anything, edit `Filter.mjs` and delete the `html` config.

??Import the text field component

Add an import `TextField` that imports `form/field/Text.mjs`. Be careful 
to code the relative path correctly. The Neo framework is at the same
relative location as the base class, so only the path at the end will differ.

??Add the city text field

Add a text field config to `items:[]`.

    items: [{
        module: TextField,
        clearable: true,
        width: 220,
        labelText: 'City',
        labelWidth: 40
    }]

Save and verify that you see the new text field.

??Add a category text field

Add a second item for the category field. It'll be a copy-and-paste
of the city config, but you'll have to modify the label and widths.

Save, refresh, and modify the code until it until it looks the way you want.

??Separate the two components

The components touch, so add a `style` to the city field to give it a right margin.

    style: { marginRight: '16px' },

??Use `itemDefaults`

Note that the text fields share a couple of properties: they are of the
same type, and they both use `clearable:true`. Sharing common configs is
what `itemDefaults` is designed to do. 

Add a new config to the filter contaner, and remove the corresponding properties 
in the child items.

    itemDefaults: {
        module: TextField,
        clearable: true,
    },

