It would be possible to create an entire application by coding everything inside a Controller and doing all the formatting inside view methods. However, you would soon end up with some pretty ugly web pages. To apply more formatting, you need to create a View that more accurately defines the layout of a web page.

You can think of a View as an HTML page that will be displayed when someone logs onto a specific web address—in which case, the name of the View forms the final part of the address as in the previous examples where the /index and /bye parts of the URL took you to views that displayed data supplied by the index and bye methods in the Controller.

You can create HTML view “templates” that match these web addresses and the corresponding method names. Using an HTML (or plaintext) editor, create a file named index.html.erb in the appviewssay_hello directory, if such a template does not already exist. Remember, as explained previously (in The Generate Controller Script Summarized in The Generate Controller Script Summarized), you can optionally autocreate one or more view templates when you initially generate the Controller.

Now that you have a view template, you can edit it in order to control the way data is displayed in the web page. That means you won’t need to display plain, unformatted text using the render method in the Controller from now on. But, with the View being out of the Controller’s control (so to speak), how can the Controller pass data to the View? In turns out that it can do this by assigning data to an instance variable.

Edit the code in say_hello_controller.rb (or delete it and paste in the code from the file sayhello2.rb, supplied in the source code archive) so that it matches the following:

sayhello2.rb

class SayHelloController < ApplicationController
    def showFamily( aClass, msg )
       if (aClass != nil) then
            msg += "<li>#{aClass}</li>"
            showFamily( aClass.superclass, msg )
       else
           return msg
       end
    end

    def index
        @class_hierarchy = "<ul>#{showFamily( self.class, "" )}</ul>"
    end
end

This version calls the showFamily() method in order to build up a string inside two HTML “unordered list” tags, <ul> and </ul>. Each time a class name is found, it is placed between two HTML “list item” tags, <li> and </li>. The complete string forms a valid HTML fragment, and the index method simply assigns this string a variable named @class_hierarchy.

All you need to do now is to find some way of putting that HTML fragment into a fully formed HTML page. That’s where the View comes in. Open the view file you just created, index.html.erb, in the app/views/say_hello folder. According to the Rails naming convention, this is the default view (the “index” page) that is partnered with the say_hello_controller.rb file. Since Rails works out relationships based on file, folder, class, and method names, you don’t have to load or require any files by name or write any configuration details.

In the index.html.erb file, add this:

<h1>This is the Controller's Class Hierarchy</h1>
<%= @class_hierarchy %>

The first line is nothing more than plain HTML formatting that defines the text enclosed by the <h1></h1> tags as a heading. The next line is more interesting. It contains the variable @class_hierarchy. Look back at the index method in say_hello_controller.rb, and you’ll see that this is the variable to which you assigned a string. Here in the View, @class_hierarchy is placed between two odd-looking delimiters: <%= and %>. These are special Rails tags. They are used to embed bits of Ruby that will be executed prior to displaying a web page in the browser. The page that is finally displayed will be a fully formed HTML page that includes any HTML fragments from the view template plus the results, after execution, of any embedded Ruby code. Try it now, by entering the page address into your browser:

http://localhost:3000/say_hello/

This should now display the heading “This is the Controller’s Class Hierarchy” in big, bold letters followed by a list of classes each element of which is preceded by a dot. In Rails 2, this is what you’ll see:

• SayHelloController
• ApplicationController
• ActionController::Base
• Object

However, in Rails 3, you seem to have a problem. Instead of a list, the HTML tags are rendered literally like this:

<ul><li>SayHelloController</li><li>ApplicationController</
li><li>ActionController::Base</li><li>ActionController::Metal</
li><li>AbstractController::Base</li><li>Object</li><li>BasicObject</li></ul>

This definitely is not what you want. The explanation for this is that the default treatment of HTML tags embedded in strings has changed between Rails 2 and Rails 3. In Rails 2, tags were passed through to the View unmodified. In Rails 3, substitution is done to ensure that HTML tags are displayed on the screen rather than rendered by the browser. For example, the <li> tag is changed to <li> where < and > are the HTML codes for angle brackets (< and >). To ensure that HTML tags are not substituted in this way, you need to use the raw method, passing to it a string argument. This is index.html.erb rewritten for Rails 3:

<h1>This is the Controller's Class Hierarchy</h1>
<%= raw( @class_hierarchy ) %>

Now when you log onto the address http://localhost:3000/say_hello in Rails 3, you should see class names shown as a bulleted list with no HTML tags displayed.

You could, if you want, remove all the HTML from the view file by creating the heading in the Controller and assigning the resulting string to another variable. You can do this by editing the index method in say_hello_controller.rb to this:

def index
    @heading = "<h1>This is the Controller's Class Hierarchy</h1>"
    @class_hierarchy = "<ul>#{showFamily( self.class, "" )}</ul>"
end

Then edit the view file (/app/views/say_hello/index.html.erb) to match the code shown next (or cut and paste the code from the sample file into index.html.erb) for use with Rails 3:

say_hello_rails3.html.erb

<%= raw( @heading ) %>
<%= raw( @class_hierarchy ) %>

For Rails 2, use this code:

say_hello.html.erb

<%= @heading %>
<%= @class_hierarchy %>

If you do this, the end result, as displayed in the web page, will remain unchanged. All that’s happened is that some formatting has been moved out of the view template and into the Controller.