Skip to content

Table and Layout Tutorial, Part 1: The Goal

Jump to bottom Edit New page
Mathieu Agopian edited this page Apr 10, 2014 · 10 revisions

Part 1: The Goal
Part 2: Resources and Selectors
Part 3: Simple Transformations
Part 4: Duplicating Elements and Nested Transformations
Part 5: Frozen Transformations, Including Snippets and Templates

(Comments to Brian Marick, please.)

Critter4Us is a webapp used to reserve animals for labs and demonstrations at the University of Illinois College of Veterinary Medicine. I've decided to rewrite it in Clojure. I'm using Noir as the base framework. Because I'm using jQuery, I find Enlive attractive: they both share the metaphor of CSS selectors, and they both want you to keep code separate from the objects it's working on.

I had some trouble. Since I figure what confuses me confuses others, I decided to write yet another Enlive tutorial. This one complements the others out there because it explains from the bottom up rather than from the top down.

Let's begin! Consider this HTML:

<form action="/herd_changes" method="post" id="animal_addition_form">
    <table>
        
        <tr class="per_animal_row">
            <td>
                <input type="text" class="true_name" name="true_name"/>
            </td>
            <td>
                <select class="species" name="species">
                <option selected="selected">Bovine</option>
                <option>Equine</option>
                </select>
            </td>
            <td>
                <input type="text" class="extra_display_info" name="extra_display_info"/>
            </td>
        </tr>

        <tr>
          <td colspan="3" style="text-align: center">
            <input type="submit" value="Make the Change"/>
          </td>
        </tr>
    </table>

</form>

It produces this:

A single row

I want it to produce this:

A single row

Here, in particular, are the transformations I want to make:

  • The first table row should be duplicated N times.

  • Each of the TD entries should have its name rewritten into Rails-style names: name="animal0[true_name]". Noir translates them into a map of maps.

  • The whole thing needs to be wrapped in this:

<!DOCTYPE html>
<html>
<head>
    <title>Critter4Us</title>
    <link href="/css/reset.css" rel="stylesheet" type="text/css">
    <script src="/js/jquery.js" type="text/javascript"></script>
    <script src="/js/c4.js" type="text/javascript"></script>
    <script id="jquery_code" type="text/javascript">
        <!--jquery-->
    </script>
</head>
<body>
    <div id="wrapper">
       <!--body-->
    </div>
</body>
</html>

The form we'll generate goes in place of the <!--body-->, and a few lines of jQuery code are added within the <!--jquery--> script tag.

Table and Layout Tutorial, Part 2: Resources and Selectors

Add a custom footer
Add a custom sidebar
Clone this wiki locally