1.Problem.md

What do we want to do?

Find a way to easily allow industrial web applications developers to write consistent user interfaces without having to repeat themselves, and to efficiently handle variability.

The user interface is displayed by the web browser from the HTML of the page. Developers write the HTML markup using a template engine. This template engine allows to include parametrized fragments, giving the ability to define some UI traits (capturing one UI concept) and to reuse them across the application.

2.List.scala.html

/* In our application we often display lists of items
 * So we write the following reusable HTML fragment, displaying a list of items.
 */
@(items: List[Html])
<ul>
  @for (item <- items) {
    <li>@item
  }
</ul>

3.List2.scala.html

@(items: List[ListItem])
  …

4.Listitem.scala.html

/* Actually we often display editable lists of items (lists where items can be added, edited or removed)
 * So we write the following tag, defining how an editable list item should look like.
 */
@(content: Html, edit: Html, delete: Html): ListItem
 <div class="editable list-item">
   <span class="content">@content</span>
   <span class="actions">@edit @delete</span>
 </div>

5.Useritem.scala.html

/* When we define an item displaying a User, we can just reuse the generic listitem tag */
@(user: User): UserItem extends ListItem
@add = {
  <button>…
}
@delete = {
  …
}
@userHtml = {
  …
}
@listitem(userHtml, add, delete)

6.Issues.md

• Using a template engine, tags can handle variability only by parametrizing variable parts (so they must be anticipated) ;
• Behavior of components cannot be expressed directly in the tags (otherwise it would be included several times). It must be in an external Javascript file ;
  • Defining the components and their behavior (and then specialize them) directly in Javascript sounds like a more useable alternative. So we just need a Javascript framework.