Login Template

To follow along with this section, start with tag v2.1.3.

In this section you will add a new template which can be used for the login screen. For this application, it makes sense to have one template file for each screen.

Create the login template

All of the steps for doing this should be familiar by now.

In tutorial-client/tools/public/design.html add a link to a new login page.

<li><a href="/design/login.html">Login</a></li>

Create the file tutorial-client/app/templates/login.html with the following content.

<_within file="application.html">

  <div id="content">

    <div class="row-fluid" template="login" field="id:id">
      <input type="text" id="login-name" value="Fingolfin" field="value:name"><br>
      <button class="btn" id="login-button">Login</button>
    </div>

  </div>

</_within>

This template has an id field and name field. The text input element has an id of login-name and the button an id of login-button. These ids will be used to wire up events and extract values when sending messages.

Next Steps

In the next section you will render the new login screen.

The tag for this section is v2.1.4.

Home | Rendering the Login Screen