My previous blog gives a brief introduction to Rails framework, Model-View-Controller architecture and Rails Views. There I explained briefly about the three components of Rails Views, namely Templates, Partials and Layouts. In this blog we will go a bit deeper into the first essential component of Rails Views, i.e., Templates. As now we know, Rails Action Views use template systems based on Ruby library ERB or HAML which create a presentation layer for the end user, let’s proceed with Templates.
In a controller, in one action we can render data in multiple formats. We can use respond_to and pass the formats in the block we want to see in the view. For this blog, let’s take index action. Below is the code snippet which gives an idea about how to define a respond_to block.
respond_to do |format|
format.html
format.xml
format.js
end
As we know there are many ways of writing Action View templates. If .erb extension is used then it is a mixture of HTML and ERB or JS and ERB. But, if .builder extension is used then we are rendering data in XML format using an instance of Builder::XmlMarkup library. Let’s one by one go through the things we can do using Rails Views.
The first one is the most common one, i.e., displaying an HTML format page using ERB. Let’s say we want to print Hello world! five times on the page. Now in normal HTML pages we need to repeat the text five times, but in Rails, using ERB we can use Ruby loops to simply repeat the text five times on the page. For that, in the View directory which is associated with the controller, we need to create a view file named index.html.erb, and in that file we need to write the code. Below is the code snippet which explains how we can achieve this in Rails.
<% 5.times do %>
<p> Hello world! </p>
<% end %>
The above code explains that we can execute Ruby codes inside <% %> tags in Rails Views. We can also define conditions to show or hide a text using Ruby’s if or unless. These are the two most common things we can do in Rails Views. In our upcoming blogs we will discuss about that in deep.
The second format is XML, let’s say we want to render data in XML format, as we know, to render XML data Rails uses instance of Builder::XmlMarkup library. So in the same way , in the View directory associated with the controller we need to create a view file named index.xml.builder, and in that file we need to write the code. Below is the code snippet.
xml.instruct!
xml.messages do
2.times do
xml.text "Hello world!"
end
end
The output of the above code snippet is
<messages>
<text>Hello world!</text>
<text>Hello world!</text>
</messages>
So, now we know how to render data in XML format in Rails, dead simple, no?!
Moving on to the next format, i.e., Javascript. Rails by default uses UJS, where making AJAX calls are very simple. We just need to add remote: true to the link or form, and then we are done. Let’s say we want to alert Hello world! when a user clicks on a link. Let me explain it with a quick example. In some other view, we will add a link which will point to the index action we are working on.
<%= link_to "Click Me!", "controller/index", remote: true %>
We will go in details about the link_to method later. For now let’s create a view in the same directory we used in earlier two examples, name of the view should be index.js.erb, here we can write JS codes along with the embedded ruby. Below is the code snippet.
<% if true %>
alert("Hello world!");
<% end %>
When the Click Me! button is clicked, an alert box will popup with text Hello world!
Now we can say that we are familiar with Rails Templates, in upcoming blogs we will go in details with other components of Rails Views, Till then, stay connected. Thanks for reading the blog!
RSB 