Saturday, October 22, 2011

Learning Ramaze (2) - Adding More Pages

I am learning Ramaze, a small Ruby web framework. This post continues what I started in the previous post, Learning Ramaze (1).

As described in my previous post, my approach to learn Ramaze is to start with a skeletal Ramaze app and to make changes bit by bit to my liking, learning how Ramaze works along the way.

In this second post, I describe what I did to add more pages to the application.
My navigation menu has 4 items: Home, Data, Design, System. I want separate pages for these menu items.

Basically, I create a controller and a view file for each of these three new pages. Ramaze then takes care of the rest.


1. Resources

Ramaze: http://www.ramaze.net
Learning Ramaze (1): My previous post that started Leaning Ramaze series.



2. Display Page Title


Currently the instant variable @tile is used to display the title, "DBAdmin". Since the application is going to have multiple pages, I want to display a page title also. Then, I will know immediately which page I am looking at. To do this, I edited /layout/default.xhtml and added a new instance variable @subtitle, which can be "Home", "Data", "Design" or "System".

# /lauout/default.xhtml

  <head>
    <title>#{@title}/#{@subtitle}</title> # added subtitle
    ...
    </head>
  <body>
    ...
    <header class="grid_6">
      <h2>#{@title}</h2>                  # used for application title (in smaller font)
      <h1>#{@subtitle}</h1>               # added to display current page (in larger font)
    </header> 
  ... 
So the header section of a page looks like this:






3. Create Controllers For New Pages

Edit /controller/main.rb to add controllers for new pages: DataController, DesignController, and SystemController. Note that I added @subtitle variable to display user's current page (menu).


# /controller/main.rb

class MainController < Controller
...  
 def index
    @title = 'DBAdmin'
    @subtitle = 'Home'     # display current page in multi-page application/site
  end
...
end


class DataController < Controller
  map '/data'               
  
  def index                # Ramaze will find its content in /view/data/index.xhtml
    @title = 'DBAdmin'
    @subtitle = 'Data'     # display current page in multi-page application/site
  end
  
end


class DesignController < Controller
  map '/design'
  
  def index                # Ramaze will find its content in /view/design/index.xhtml
    @title = 'DBAdmin'
    @subtitle = 'Design'   # display current page in multi-page application/site
  end
  
end


class SystemController < Controller
  map '/system'
  
  def index                # Ramaze will find its content in /view/system/index.xhtml
    @title = 'DBAdmin'
    @subtitle = 'System'   # display current page in multi-page site
  end
  
end


4. Create View Files For New Page Contents

Now I create view files, one for each of new pages to display its contents.
All these four files have same name, index.xhtml, and placed in its own sub-folder under /view folder. For example, the data view file (index.xhtml) will be placed in /view/data.

So my view directory becomes like this:















And each view file looks like the followings:
# view/data/index.xhtml

<p>
    DBAdmin is a web tool to manage PostgreSQL databases.
</p>

<p>
    Here we can: View/Add/Edit/Delete Database Records
</p>

<ul>
    <li>
       View - displays query results
    </li>
    <li>
       Add - add new record(s)
    </li>
    <li>
       Edit - modify existing record(s)
    </li>
    <li>
       Delete - delete record(s)
    </li>
</ul>
# view/design/index.xhtml

<p>
    DBAdmin is a web tool to manage PostgreSQL databases.
</p>

<p>
    Here we can design database structure.
</p>

<ul>
     <li>
       Databases - create, alter, drop database(s)
     </li>
     <li>
       Tables - create, alter, drop table(s)
     </li>
     <li>
       Roles - create, alter, drop role(s)
     </li>
</ul>
# view/system/index.xhtml

<p>
    DBAdmin is a web tool to manage PostgreSQL databases.
</p>

<p>
    Here we can modify web interface.
</p>

<ul>
    <li>
       UI Templates - select preferred UI template
    </li>
    <li>
       Add-Ons - add new capabilities through add-ons
    </li>
    <li>
       Etc.
    </li>
</ul>



5. Results of Changes

Here are the results of the changes.




















6. Another way

Instead of creating controllers, sub-folders and index.xhtml files,I could have used additional methods within MainController and created corresponding view files in the same /view folder.

# /controller/main.rb
#
class MainController < Controller

  def index
    @title = 'DBAdmin'
    @subtitle = 'Home'
  end
  
  def data
    @title = 'DBAdmin'
    @subtitle = 'Data'
  end

  def design
    @title = 'DBAdmin'
    @subtitle = 'Design'
  end

  def system
    @title = 'DBAdmin'
    @subtitle = 'System'
  end

end
Then I would create the corresponding view files (data.xhtml, design.xhtml, and system.xhtml) placed directly in /view directory without sub-folders.

 This is much simpler. But using of controllers and sub-view folders is perhaps more scalable. Since my DBAdmin is going to be rather complex, I decided to use controllers and sub-folders for these main pages. Besides, a well-organized sub-directories of view gives an instant preview of basic structure of the application/site.


7. Summary

1. There are at least two way of creating multiple pages (besides static files).
2. One way of creating multiple pages is to use controllers, sub-view folders.
3. Another way of creating multiple pages is to use additional methods within the /controller/main.rb and corresponding view files directly under the /view directory.
4. Using of additional methods has advantage of simplicity.
5. Using controllers and sub-view folders has advantage of scalability.
6. Using controllers and sub-view folders has also advantage of providing an instant preview of basic structure of application/site.


8. Next

There are a few things that I would like to modify. For example, I initialize @title to "DBAdmin" - four times. Since the value of the variable never changes, its initialization should be done only once. Another thing that I would like to change is about usage of layout. Currently distinction between layout and view is blurred. I would like to make a clear distinction so that layout is used for display framework only and its view for contents only.

No comments:

Post a Comment