Making an HTML Template

Making an HTML Template

Working with the Data UI has allowed us to concentrate on application logic without having to worry about what things will look like in the real user interface. When building a real application we will often be referring to wireframes or mock ups so that we know what the application will actually do.

One of the key ideas of Pedestal is that it separates rendering from application logic. We can work on the two separately. In this tutorial we have waited to do the rendering work until after we finished the application logic. In a real project this work can be done in parallel.

In this section you will create a simple HTML template which will be used by your application.

Organizing our work

With the development project running, click on the Design link in the tools menu or just go to:

http://localhost:3000/design.html

The purpose of this page is to provide links to all of the HTML templates for this project. Templates can be arranged in many different ways. You may want to have everything that you need for the application in one page or you may want to make templates to more closely reflect the pages of your application.

The file behind this page is located at

tools/public/design.html

You may add anything to this file. The only purpose of this file is to make it easy for you find and load the template files you are working on. The changes shown below make the page a bit more informative.

<div class="section panel">
  <h2>Tutorial Templates</h2>
  <ul>
    <li><a href="/design/tutorial-client.html">Plain Counter Page</a></li>
  </ul>
</div>

Looking at the source for this page, we are introduced to the first of two special tags which are used for combining HTML files

<_within file="tooling.html">
   <div>...</div>
</_within>

From the development tool, we can refer to this page as we did above.

http://localhost:3000/design.html

When the design.html file is loaded it will see the _within tag and will load the page tooling.html and put the content of design.html within tooling.html.

How does it know where to put the content? design.html has a top-level div with id content. tooling.html also has div with id content. The div#content in tooling.html is simply replaced with the div#content of design.html. Only the top-level elements in the _within section are inserted into the parent file.

There is also an _include tag which allows us to include the contents of one file into another.

It is very important to realize that _within and _include are only used at development time. They are not part of Pedestal's templating system. These tags are only recognized by the development server while templates are under development. As such, these tags are only meant to provide designers with a very simple way to not repeat themselves.

Creating a template

The source for our template is located in

app/templates/tutorial-client.html

We can get to it by loading:

http://localhost:3000/design/tutorial-client.html

Below is the complete source for the updated template. Most of this is standard HTML.

<_within file="application.html">

  <div id="content">

    <div class="row-fluid" template="tutorial" field="id:id">

      <div class="span6">

        <div>
          <button class="btn btn-success" id="inc-button">Increment Counter</button>
        </div>

        <div class="counter-row">
          <span class="counter-label">Counter:</span>
          <span class="counter" field="content:my-counter">40</span>
        </div>

        <div id="other-counters">
          <div template="other-counter" class="counter-row" field="id:id">
            <span class="counter-label">Counter for <span field="content:counter-id">ahbnytnh</span>:</span>
            <span class="counter" field="content:count">10</span>
          </div>
        </div>

      </div>

      <div class="span2">

        <div class="stat-label">
          Max Count
        </div>
        <div class="stat" field="content:max-count">40</div>

        <div class="stat-label">
          Avg Count
        </div>
        <div class="stat" field="content:average-count">25</div>

        <div class="stat-label">
          Total Count
        </div>
        <div class="stat" field="content:total-count">50</div>

      </div>
      <div class="span3">

        <div class="stat-label">
          Max Dataflow Time
        </div>
        <div class="stat" field="content:dataflow-time-max">35</div>

        <div class="stat-label">
          Avg Dataflow Time
        </div>
        <div class="stat" field="content:dataflow-time-avg">9</div>

        <div class="stat-label">
          Current Dataflow time
        </div>
        <div class="stat" field="content:dataflow-time">6</div>

      </div>

    </div>

  </div>

</_within>

All the special stuff that makes this a Pedestal template can be explained by focusing on two lines in this files.

Pedestal uses two special attributes to define a template: template and field. An HTML element with a template attribute is a distinct template which can be referred to by name. The field attribute is used to describe how data is mapped from a Clojure map to this template.

<div class="row-fluid" template="tutorial" field="id:id">

In the example above we create a template named tutorial. This div and its contents are a single template. The field attribute indicates that the value under the key :id in the provided map should be set as the id attribute of this div.

We can define a mapping to several attributes by creating a comma delimited list.

field="class:c,width:w,id:my-id"

The names to the right of the colon are the keys in the supplied map. The names to the left of the colon are the HTML attributes. To fill this template we might supply the data below.

{:c "example-class"
 :w 200
 :my-id "example-id"}

<span class="counter" field="content:my-counter">40</span>

Other than setting attributes, we may want to set the content of an element. To do this we use the special attribute name content.

You may have noticed that the HTML above contains a template within a template. Later in this section we will see how to sort this out.

Update CSS

The CSS for this example is located in the file

app/assets/stylesheets/tutorial-client.css

The updated CSS is shown below.

#content {
    margin-top: 30px;
}

.counter-row {
    margin-top: 20px;
    margin-bottom: 10px;
}

.counter-label {
    font-size: 30px;
    font-weight: bold;
    color: #888;
}

.counter {
    font-size: 30px;
    font-weight: bold;
    padding-left: 10px;
}

.stat-label {
    font-size: 16px;
    font-weight: bold;
    color: #666;
    margin-top: 10px;
}

.stat {
    font-size: 16px;
    font-weight: bold;
}

As one final improvement, change the class container to container-fluid in the main div under body in app/templates/application.html.

<div class="container-fluid">

Next steps

The tag for this step is v2.0.9.

Home | Slicing Templates