Next → Ninth Step, Prettify Seventh Step, delete tasks ← Prev

Eighth Step, Elements

<Page></Page>

This is called an Element, Ramaze will go and search for a class that matches the name Page and responds to #render. Then it will go and hand the content in between to that Element.

Sounds weird?

Let us have a look at our templates, they got some repetitive stuff, like:

<html>
  <head>
    <title>TodoList</title>
  </head>
  <body>
    <h1>some title</h1>
  </body>
</html>

How about replacing that with something short and reusable:

<Page title="TodoList">
  your other content
</Page>

Would be nice of course, and when you start having more templates it makes an awful lot of sense being able to change the enclosing stuff in one place.

So let's apply DRY here as well.

Take a look at the src/element/page.rb

class Page < Ezamar::Element
  def render
    %{
    <html>
      <head>
        <title>Welcome to Ramaze</title>
      </head>
      <body>
        #{content}
      </body>
    </html>
    }
  end
end

Alright, most things we need are in place already, the most important thing is the #content method that we call with #{content} inside the string in #render.

Just adopt it to your liking, I'll just use the things we had in our templates so far:

class Page < Ezamar::Element
  def render
    %{
    <html>
      <head>
        <title>TodoList</title>
      </head>
      <body>
        <h1>#{@title}</h1>
        #{content}
      </body>
    </html>
    }
  end
end

Please note that instance variables reflecting the parameters are set.

And let's change our templates as well.

First the view/index.xhtml* <code html><Page title="TodoList"> <a href="/new">New Task</a> <?r if @tasks.empty? ?> No Tasks <?r else ?> <ul> <?r @tasks.each do |title, status, toggle, delete| ?> <li> #{title}: #{status} [ #{toggle} | #{delete} ] </li> <?r end ?> </ul> <?r end ?> </Page></code> and the view/new.xhtml**

<Page title="New Task">
  <a href="/">Back to TodoList</a>
  <form method="POST" action="create">
    Task: <input type="text" name="title" /><br />
    <input type="submit" />
  </form>
</Page>

Alright, now just go and look at the result in the browser, try changing the things inside the Element and look at how it behaves.

Next → Ninth Step, Prettify Seventh Step, delete tasks ← Prev