This is part 4 of Ramaze by Example, a tutorial on web development. In Part 3: Model, we coded a model class to interface with the database.
The View part of the MVC pattern is the part of your application you look at. It is essentially comprised of the static stuff: HTML and CSS. But the pretty picture is not completely inert: some parts are always the same, but other bits vary. 
In other words, views are templates. You setup the overall picture, and instruct Ramaze where to put the parts of the picture that change.
By default, Ramaze looks for template files in a view/ subdirectory in your project. Here is a template I made for our application, view/index.xhtml:
<html> <head> <title>Todo List</title> </head> <body> <h1>Todo List</h1> <ul> <?r @tasks.each do |task| ?> <li>(#{task.status}) #{task.description}</li> <?r end ?> </ul> </body> </html>
For the most part, this is just plain HTML. There are a couple of features that are non-HTML, though.
The first is the <?r ... ?> syntax. This is the syntax used by Ramaze’s default templating engine (Ezamar) to inject Ruby flow control and conditional expressions, and any other basic Ruby code you might need to control the dynamic portions of your views. Ramaze supports many other templating engines, so if you have a preferred templating engine, feel free to go ahead and use it in your own apps. In this template, we are using <?r ?> to iterate over an array of tasks which has been preprepared for us. We’ll cover the details of this preparation in the next part of the tutorial.
The second feature we encounter is the #{ ... } syntax. This is just plain Ruby string interpolation, and functions just as you would expect: It interpolates the string values of Ruby expressions into your template.
So, as you can see, our template is instructing Ramaze to build an HTML list out of the tasks, with each list item consisting of a task’s status and description.
The third and final component of MVC is explored in Part 5: Controller.
Share ThisRelated posts:
Pingback by Catholicism Computes » Ramaze by Example - Part 5: Controller — November 20, 2008 @ 13:27
[...] by Example - Part 1: Database SchemaRamaze by Example - Part 4: ViewRamaze by Example - Part 3: ModelRamaze by Example - Part 2: Base ApplicationRamaze by Example - [...]
Pingback by Catholicism Computes » Ramaze by Example — November 26, 2008 @ 16:41
[...] Part 4: View [...]