We could steal time, just for one day
We can be Heroes, for ever and ever
What d'you say?

- David Bowie



- Install TIBET

##The Application Shell

- tibet clone heroes
- cd heroes; tibet init;

- tibet start

- Open app

- Open Sherpa

- Navigate to show the heroes:app tag

- Double click on the app tag to show the editor

- Click the 'snap out' arrow to snap the editor out into a console tab

- Empty out all of the content of the *insides* of the app tag

- Insert the following content

    <h1>{{$SOURCE.title}}</h1>

- Go to Node Type -> Instance Methods and click the '+' button

- Add the 'getTitle' method

    - Code it to return 'Tour of Heroes'

- Double click on app tag to show the editor on the CSS

- Paste in the following to the CSS;

```css
/* Application-wide Styles */
h1 {
    color: #369;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 250%;
}
h2, h3 {
    color: #444;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: lighter;
}
body {
    margin: 2em;
}
body, input[text], button {
    color: #888;
    font-family: Cambria, Georgia;
}
/* everywhere else */
* {
    font-family: Arial, Helvetica, sans-serif;
}
```

- Push all of your changes

##The Hero Editor

Create the heroes:hero_ui tag

- Drag and drop a piece of tofu after the h1

- Type the following in the tag type: heroes:hero-ui

- Tofu will appear

- Create the component type by clicking on the tofu and clicking 'create'. The type will be defined and the tofu will be turned into a link.

- Click on the link. You'll be navigated to the Structure of the 'heroes:hero_ui' tag component.

- Edit it to contain:

```xml
<heroes:hero_ui id="heroDetail">
{{$SOURCE.hero}}
</heroes:hero_ui>
```

#### Add a hero property

- Go to Node Type -> Instance Methods and click the '+' button

- Add the 'getHero' method

    - Code it to return 'Windstorm'

```javascript
APP.heroes.hero_ui.Inst.defineMethod('getHero',
function() {
    return 'Windstorm';
});
```

- Push all of your changes

###Create Hero class

- Navigate to: TIBET -> Types

- Click the '+' button

- Update the hero_ui tag

- Define an attribute for the Hero object

```javascript
APP.heroes.hero_ui.Inst.defineAttribute('hero');
```

- Define an initializer that builds and sets a Hero

```javascript
APP.heroes.hero_ui.Inst.defineMethod('init',
function() {

    this.callNextMethod();

    this.set('hero', APP.heroes.hero.fromObject({
                        id: 1,
                        name: 'Windstorm'});

    return this;
});
```

- Remove the 'getHero' method. The regular "get('hero')" machinery will work
  fine now.

- Update the hero_ui template to be this:

```xml
<h2>{{$SOURCE.hero.name}} Details</h2>
<div><span>id: </span>{{$SOURCE.hero.id}}</div>
<div><span>name: </span>{{$SOURCE.hero.name}}</div>
```

#### Format with the uppercase formatter

- Change the hero_ui template's first line to be this:

```xml
<h2>{{$SOURCE.hero.name .% upperCase}} Details</h2>
```

###Edit the Hero


- Establish a data binding

- Remove the hero_ui 'hero' attribute

- Update the hero_ui initializer code to look like:

```javascript
APP.heroes.hero_ui.Inst.defineMethod('init',
function() {

    var currentHeroHolder;

    this.callNextMethod();

    //  Define a URN value holder that will hold the current Hero
    currentHeroHolder = TP.uc('urn:tibet:currentHero');

    currentHeroHolder.setResource(APP.heroes.hero.fromObject({
                                    id: 1,
                                    name: 'Windstorm'});

    return this;
});
```

- Update the hero_ui template to:

```xml
<h2>[[urn:tibet:currentHero#tibet(name) .% upperCase]] Details</h2>
<div><span>id: [[urn:tibet:currentHero#tibet(id)]]</span></div>
<div>
    <label>name:
      <input bind:io="[[urn:tibet:currentHero#tibet(name)]]" placeholder="name">
    </label>
</div>
```

```xml
<ul id="heroes" bind:repeat="urn:tibet:heroData#tibet(heroes)" bind:repeatsize="5" on:click="UISelect" bind:io="{value: urn:tibet:currentHero}">
    <li>
        <span class="badge">[[id]]</span> [[name]]
    </li>
</ul>
```

