Saturday, September 10, 2011

Learning Ramaze (1) - Changing title and Background

I would like to learn how to use Ramaze framework. My approach is to start with the default app it creates. Then bit by bit, I modify it to my liking, learning the framework along the way.



1. Resources.


Ramaze: http://www.ramaze.net


2. Create a new Ramaze app.


I would like to create a web app to manage PostgreSQL databases.
So I named my app "dbadmin".
$ cd ~/public_html/apps/                                   # switch to apps folder
$ ramaze create dbadmin                                    # create a ramaze app "dbadmin"
The application has been generated and saved in dbadmin
$ cd dbadmin/                                              # go into the newly created app root
$ ls                                                       # view all default files/directories created
app.rb  config.ru  controller  layout  model  public  spec  start.rb  view
$ ramaze console                                           # launch ramaze console
irb(main):001:0> Ramaze.options.app.name                   # test a ramaze command
=> :pristine                                               # what is pristine?
irb(main):002:0> quit                                      # exit from ramaze console
Ramazement has ended, go in peace.
$
This is the directory of a newly created Ramaze app:























3. Personalizing Ramaze app (Title and Footer).


First, I edit /controller/main.rb to make a title change from "Welcome to Ramaze!" to "DBAdmin".
# /controller/main.7. Now It Looks Like This.rb
#
class MainController < Controller
  def index
    @title = 'DBAdmin'         # 2011.09.10 - changed title
  end

  def notemplate
    @title = 'DBAdmin'         # 2011.09.10 - changed title
    return 'There is no \'notemplate.xhtml\' associated with this action.'
  end
end
Next, I edit /layout/default.xhtml to make changes in footer as follows.
<footer id="footer">
  Copyright &copy;2011 Socrateos | Powered by <a href="http://ramaze.net/">Ramaze</a>
</footer>


4. Personalizing Ramaze app (Background).


I want my background white and most texts black. I want a really simple style.

(A) First, I remove Ramaze's default background (dotted) image.
To do this, I edit /public/css/text.css.
body
{
    <!-- 2011.09.09 - remove default background image
    background:  url('../images/bg.png') repeat top left;
    -->
    border-top:  5px solid #444;
    color:       #444;
    font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, sans-serif;
    font-size:   14px;
}
(B) Second, I want to change the background of the header section
I want to make background color of the header to white, same as the page background.
Since background becomes white, the color of text in the header can no longer be white.
So I edit /public/css/layout.css for the changes.
/* Top part of the website, contains the title and the navigation menu */
#top
{
    /* 2011.09.10 - changed to white backgroud
    background:    #E33F1E;
    */
    background: #fff; 
    height:        70px;
    margin-bottom: 20px;
    padding:       0px 10px;
}

    #top header h1
    {
        /* 2011.09.10 - cannot use white color for text since background is now white
        color:       #fff;
        */ 
        font-size:   38px;
        margin:      10px 0px 0px 0px;
        padding:     0px;
    }
...
            #top nav ul li a
            {
                /* 2011.09.10 - cannot use white color for text since background is now white
                color:           #fff;
                */ 
                display:         block;
                height:          45px;
                padding:         25px 10px 0px 10px;
                text-decoration: none;
            }
In addition, I do not like the square background color when the cursor moves on navigation items.
So I remove it.
...
            #top nav ul li a:hover
            {
                /* 2011.09.10 - remove this color 
                background: #D43919; 
                */ 
            }


5. So far, It Looks Like This.





















6. Personalizing Ramaze app (contents)

Now I modify the contents, both navigation menu bar as well as its body.

(A) Modifying Navigation menu bar.
To make a change to the navigation menus, I edit /layout/default.xhtml. My navigation menu bar has 4 main items: Home, Data, Desin, and System.

...

...

(B) Modifying Body of Contents.
To make changes in the body of contents, I edit /view/index.xhtml.

DBAdmin is a web tool to manage PostgreSQL databases.

Features:

  • Create and Design Databases.
  • View/Add/Edit/Delete Database Records.
  • Generate Reports.
  • Configure System.
DBAdmin is based on Ramaze.


7. Now It Looks Like This.


















8. Summary.

1. To create a skeletal Ramaze app, execute $ ramaze create myapp.
2. To change the page title, edit the value of @title variable in /controller/main.rb.
3. To change the footer, edit the <footer></footer> section in /layout/default.xhtml.
4. To change the background image, edit body{background:...} section in /public/css/text.css.
5. To change the text and background color of the header section, edit edit /public/css/layout.css.
6. To change the navigation menu, edit the <nav></nav> section in /layout/default.xhtml.
7. To change the body contents, edit /view/index.xhtml.

9. Next Step

I only made changes to the main (home) page so far. Next, I want to create other pages: Data, Design, and System pages.
Goto: Learning Ramaze (2) - Adding More Pages

No comments:

Post a Comment