Web Templates

Now we need do implement the Web Client UI for our module. This file should only contain

Let’s write some HTML templates to define the structure of our interface. We want to have three rows: One for the day, one for the month and one for the year. For each row, we want to have three buttons in each direction for altering the date. —

<template id="tmpl-tutorial-calendar-row">
  <tr>
    <td>
      <button><i class="fas fa-angle-double-left"></i> 10</button>
    </td>
    <td>
      <button><i class="fas fa-angle-double-left"></i> 3</button>
    </td>
    <td>
      <button><i class="fas fa-angle-left"></i> 1</button>
    </td>
    <td><span class="cal-value"></span></td>
    <td><button>1 <i class="fas fa-angle-right"></i></button></td>
    <td>
      <button>3 <i class="fas fa-angle-double-right"></i></button>
    </td>
    <td>
      <button>10 <i class="fas fa-angle-double-right"></i></button>
    </td>
  </tr>
</template>

This is the structure of one row. We’re using Font Awesome, which is bundled with the Web Client, for icons.

We’re using a long id because they must be unique in the whole document. Our HTML will be appended to the HTML of the core and any other plugin, so we’ll better be explicit with our names. —

<template id="tmpl-tutorial-calendar-state">
  <table class="pure-table pure-table-horizontal">
    <tbody>
    </tbody>
  </table>
</template>

We’re using CSS classes from Pure CSS, which is bundled with the Web Client, for styling. This relieves us from bundling any custom CSS.

Since we’re not using a template language, we don’t write the code to inject the rows into <tbody> here. We’ll do it later in JavaScript.

That’s all the templates we need.