Components and ErML

Components (which are subclasses of ErstwhileComponent) are Erstwhile’s way of building reusable UI elements of arbitrary complexity. They let a developer essentially create their own HTML tags (which we call ErML) and then drop them in their view templates as needed to create an easily-reusable components.

They can be simple inline elements:

<TextInput name="username" label="Username/Email Address" />

Or slightly more complicated containers, like <Card /> or <Alert /> here:

<div class="row">
  <div class="col-lg-6 col-md-8 offset-3">
    <Card>
      <div class="row">
        <h2 class="pb-2">Login</h2>
        <hr />
        <Alert id="login-alert" color="danger" light="true" dismissible="true" hidden="true"><%= (page.message || "The username/password combination entered doesn't match.") %></Alert>
        <Form id="login-form" >
          <TextInput name="username" label="Username/Email Address" />
          <PasswordInput name="password" label="Password" />
          <Button color="primary" onclick="@.page.submitForm">Login</Button> 
          <p class="mt-3">
            Need an account? Click <a href="/signup">here</a> to create an account.
          </p>
        </form>
      </div>
    </Card>
  </div>
</div>

Or simple tags that can produce more elaborate user interfaces. For example this:

<TodoCalendar todos="@.page.todos" month="@.page.calendarMonth" year="@.page.calendarYear" />

Becomes this:

You can also create components with their own internal structure, including other ErML:

<DataTable id="todo-list-table" url="<%= $App.getConfig('baseUrl') %>/todo/list" sort="date" sortDir="asc" filter="list-filter">
  <columns>
    <col key="color" title="Color" sortable="true" width="50px">
      <ColorBox color="{{color}}" />
    </col>
    <col key="title" title="Title" sortable="true" />
    <col key="date" title="Date" sortable="true" type="date" />
    <col key="description" title="Description" sortable="false" />
    <col key="done_flag" title="Done?" sortable="true" type="boolean" />
    <col title="Actions" key="id" sortable="false" width="150px">
      <Button color="success" size="sm" data-id="{{id}}" onclick="@.page.markDone">Mark Done</Button> <Button class="mx-2" color="light" size="sm" data-id="{{id}}" onclick="@.page.editTodo">Edit</Button>
    </col>
  </columns>
</DataTable>

Erstwhile components and ErML provide you with the opportunity to encapsulate a lot of complex logic in a very elegant package.

Related Articles