Hobo - the web application builder for Rails

Nope, sorry. No Hobo 0.6 today, but to whet your appetites a little further, here’s an example of how clean a full DRYML template can look in the new DRYML. We’re pretty happy with the result over here – hope you like it :-)

In particular, look out for the new “smart HTML tags”. These aren’t a new DRYML feature, but a new style for the Rapid tag library. They’re just regular DRYML tags that have the same name as HTML tags. Want a link?

<a href="...">My Link</a>

Want Hobo to fill the href in for you? Say, to the author of the article you are rendering:

<a:author>...</a>

How about a form? Hobo will provide the attributes that make the form work (action, method…):

<form with="&Story.new">...</form>

Want to make that an ajax form? Just name the part (or parts) you want updated and Hobo does the rest:

<form with="&Story.new" update="stories">...</form>

So, on to that full page. It’s an index page BTW:

<Page title="Admin Home">

  <intro>
    <h1>Admin Home</h1>
  </intro>

  <maincol>
    <panel>
      <h2>All Accounts by client</h2>

      <section>
        <h3>Create a new client</h3>
        <form with="&Client.new">
          Name: <input:name/>
          <submit label="Create"/>
        </form>
      </section>

      <section>
        <p>Click on a client name to edit.</p>
      </section>

      <section repeat class="client">
        <h3><editor:name/></h3>

        <Table:accounts>
          <tr>
            <td><a/></td>
            <td>Created: <view:created_at.to_date/></td>
            <td>
              <a:quarters.latest if="&this.site_exists?">View Site</a>
            </td>
          </tr>
        </Table>

        <p>
          <b>&raquo; <a:accounts.new>Create a new account for 
              <name with="&this_parent"/></a></b>
        </p>

        <delete_button label="Delete #{this.name} permanently"/>
      </section>

      <section><page_nav/></section>

    </panel>
  </maincol>

</Page>

Let’s go over that again with some explanation. First the <Page> tag.

<Page title="Admin Home">

<Page> is a template. That’s a new DRYML feature. Where a normal tag has a single body, a template has a bunch of named parameters, and they can be placed wherever you like in the templates output. It’s a fill-in-the-blanks kind of model. Look up at the full listing again and you’ll see that <Page> has two children — <intro> and <maincol>. These are not normal tags that are being called, they are named parameters to the <Page> template. Whenever you see a tag with a capitalised name, remember that the children are parameters rather than tag calls.

Next, forms. Forms are blissfully neat now in Hobo.

<form with="&Client.new">
  Name: <input:name/>
  <submit label="Create"/>
</form>

Because the context for the form is a new AR object, Hobo knows to create a POST to the relevant RESTful create method. Furthermore, if you create the object via a has_many collection, the hidden field will be included so that the created object has the required foreign key.

Also notice the new tag for form controls: <input>, and the nice syntax to set the context to a given field: <input:name/>.

There are three general purpose tags of this kind: <view> for read-only views, <input> for form input fields and <editor> for ajax in-place editors. They all create the right stuff automatically depending on the type of the context, and it’s very easy to extend this with your own types. These replace the old show, form_field and edit (we’ve realised that nouns are better than verbs – they’re more declarative).

If the context is something enumerable, look how easy it is to repeat a tag for each item in the collection:

<section repeat class="client">

A quick click-to-edit title:

<h3><editor:name/></h3>

A table with a row for each account:

<Table:accounts>
  <tr>
    <td><a/></td>
    <td>Created: <view:created_at.to_date/></td>
    <td>
      <a:quarters.latest if="site_exists?">View Site</a>
    </td>
  </tr>
</Table>

That’s a template too – <tr> is a parameter and there are others for giving a thead and tfoot. Also Note the new in-line if syntax on that link.

And finally the page navigation:

<section><page_nav/></section>

That whole section will only appear if there is more than one page.

Sweet :-)