Ruby on rails :: Layouts

Posted by PunNeng, Wed Aug 02 23:00:00 UTC 2006

มาต่อกันด้วยสิ่งสวยๆ งามๆ กันต่อ ผมชอบส่วนนี้มากครับ เพราะได้ทำ css เพลินมาก ทำไปเรื่อยๆ แป๊บเดียว จะตี 5 ละ เพลินจริงๆ

สำหรับหน้า layout นี้ มันจะถูกเก็บไว้ใน app/views/layouts/ ซึ่งตอนนี้ มันยังไม่มีอะไรเลย นอกจาก layout ที่ถูกสร้างมาจาก scaffold เรามาเริ่มสร้างฝั่ง front-end กันก่อนดีกว่า สร้าง post.rhtml ขึ้นมาเลย ตามนี้

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33

<html>
<head>
  <title>Admin: <%= controller.action_name %></title>
  <%= stylesheet_link_tag 'home' %>
</head>
<body>
<div id="header">

<span><%= link_to("My Simple Blog", :action => "index") %></span>
</div>

<div id="container">
  <div id="mainNav">
    <ul id="sidebar">
      <li><%= link_to "List", :action => 'index' %></li>
      <li><a href="#">page2</li>
      <li><a href="#">page3</li>
    </ul>
  </div>

  <div id="content">
    <% unless flash[:notice].nil? %>
      <div id="notice" >< %= flash[:notice] %></div>
    <% end %>
    <%= @content_for_layout %>
  </div>  
</div>

<div id="footer">
  Powered by Ruby on Rails
</div>
</body>
</html>

แล้วไปเพิ่ม <div> ให้กับ post แต่ละอันใน app/views/post/index.rhtml หน่อย ดังนี้

  1
  2
  3

<div class="post">
  <h1><%= link_to post.title, :action => "show", :id => post %></h1>
  <p><%= truncate(post.body, 200)%></p>

ยังขาด css อยู่หน่อย แต่ css ตัวนี้ ผม test บน firefox ของ ubuntu นะครับ ผมยังไม่แน่ใจว่าไปอยู่บน IE หรือ firefox ของ windows จะเป็นยังไงบ้าง ไปที่ public/stylesheets/ แล้วสร้าง home.css แล้วใส่ตามนี้เลย

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64

body{
  padding: 0;
  margin: 0;
}

a{
  color: #186F2B;
  text-decoration: none;
}

a:hover{
  color: #30A148;
}

h1, h2{
  color: #186F2B;
}

#header{
  text-align: center;
  background: #31BB4E;
  height: 70px;
  border-bottom: 2px solid;
  color: #282;
}

#header span{
  color: #fff;
  font-size: 40px;
}

#notice{
  padding: 2px;
  background-color: #D1DAD3;
  display: block;
  color: #186F2B;
}

#container{
  background: #D1DAD3;
}

#mainNav {
  float: right;
  padding-top: 1em;
  padding-bottom: 1em;
  width: 7em;
  background: #D1DAD3;
}

#mainNav ul {
  list-style: none;
}

#content{ 
  padding: 2em;
  margin-right: 7em; 
  background: white;
}

#footer{
  text-align: center;
  font-size: .8em;
}

และอีกอันหนึ่ง สำหรับแสดง error messages ตอนที่ validate ไม่ผ่าน ซึ่งผมก็ไปเอามาจากใน scaffold.css นั่นแหละ

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36

/* css for error messages */
.fieldWithErrors {
  padding: 2px;
  background-color: red;
  display: table;
}

#errorExplanation {
  width: 400px;
  border: 2px solid red;
  padding: 7px;
  padding-bottom: 12px;
  margin-bottom: 20px;
  background-color: #f0f0f0;
}

#errorExplanation h2 {
  text-align: left;
  font-weight: bold;
  padding: 5px 5px 5px 15px;
  font-size: 12px;
  margin: -7px;
  background-color: #c00;
  color: #fff;
}

#errorExplanation p {
  color: #333;
  margin-bottom: 0;
  padding: 5px;
}

#errorExplanation ul li {
  font-size: 12px;
  list-style: square;
}

หน้าตาน่าจะได้แบบนี้

คลิกเพื่อดูขนาดจริง

คลิกเพื่อดูขนาดจริง

อ่าาา ต่อไปจะไปทำต่อที่ฝั่ง back-end ละกัน คราวนี้ไปแก้ใน app/views/layouts/admin.rhtml เลย

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36

<html>
<head>
  <title>Admin: <%= controller.action_name %></title>
  <%= stylesheet_link_tag 'admin', 'error_messages' %>
</head>
<body>
<div id="header">

<span><%= link_to("Admin Area", :action => "list")  %></span>

</div>
<div id="container">
  <div id="mainNav">    
    <div id="< %= controller.action_name %>">
      <ul id="topbar">
        <li class="list"><%= link_to "List", :action => "list" %></a>
        <li class="new"><%= link_to "Create", :action => "new" %></a>
        <li class="action3"><a href="#">action3</a>
        <li class="action4"><a href="#">action4</a>
        <li style="float: right;"><%= link_to "Logout", :controller => "login", :action => "logout" %></li> 
        <li style="float: right;"><%= link_to "View Site" , :controller => "post", :action => "index" %></li>
      </ul>
    </div>
  </div>
  <div id="content">
    <% unless flash[:notice].nil? %>
      <p id="notice" >< %= flash[:notice] %></p>
    <% end %>
    <%= @content_for_layout %>
  </div>
</div>
<div id="footer" >
    Powered by Ruby on Rails
</div>
</body>
</html>

จากนั้นก็ไปสร้าง css ต่อใน public/stylesheets/admin.css ตามนี้

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91

body{
  padding: 0;
  margin: 0;
}

a{
  color: #5991AE;
  text-decoration: none;
}

a:hover{
  color: #83B1C8;
  background: #fff;
}

#header{
  text-align: center;
  background: #accdde;
  height: 70px;
  border-bottom: 2px solid;
  color: #5991AE;
}

#header span{
  color: #fff;
  font-size: 40px;
}

#mainNav ul {
  margin: 0;
  padding: 0;
  float: left;
  list-style: none;
  background: #D1DAD3
}

#mainNav ul li { 
  float: left;
}

#mainNav ul a {
  display: block;
  padding: 0 1em;
  line-height: 2.1em;
  text-decoration: none;
}

#index #topBar .list a,
#list #topBar .list a,
#new #topBar .new a ,
#lnk3 #topBar .link3 a,
#link4 #topBar .link4 a{
  background: #fff;
  cursor: default;
}

#content{ 
  padding: 2em;
  background: white;
}

#footer{
  clear: both;
  text-align: center;\
  font-size: .8em;
}

/* for content */
.headTable{
  background: #accdde;
}

.listTitle {
  color:       #244;
  font-weight: bold;
  font-size:   larger;
}

.listActions {
  font-size:    small;
  text-align:   center;
  padding-left: 1em;
}

.listLine0 {
  background: #dce7ed;
}

.listLine1 {
  background: #eeeeee;
}

ตามรูปเลย

คลิกเพื่อดูขนาดจริง

คลิกเพื่อดูขนาดจริง

post.rhtml และ admin.rhtml ลองสังเกตดูมะนจะมีจุดที่เหมือนๆ กันอยู่ หลักๆ ก็มีการ import css จะใช้

  1

<%= stylesheet_link_tag 'admin', 'error_messages' %>

ก็ทำการ import ชื่อ file เท่านั้น ส่วนต่อไปจะอยู่ที่การแสดง flash[:notice] 

  1
  2
  3

<% unless flash[:notice].nil? %>
  <p id="notice" ><%= flash[:notice] %></p>
<% end %>

ถ้า flash[:notice] ไม่เป็น nil ก็จะทำการแสดงผลตัว flash[:notice] เมื่อแสดงแล้วมันจะถูกเคลียร์ค่าทันที ส่วนต่อไป จะเป็น

  1

<%= @content_for_layout %>

ตรงนี้นี่แหละ จะเป็นส่วนที่ทำการดึงหน้ามาแสดง ที่เราสร้างๆ เอาไว้

ส่วนที่เหลือ จะเป็น Erb เล็กๆ น้อยๆ คิดว่าเคยอธิบายไปแล้ว แต่ส่วนของ css อันนี้มันเยอะจัด ไม่ขออธิบายละกัน ไว้ว่างๆ จะมาลงกับ css กันต่อ

อ้อ ยังขาดเรื่อง authentication ไว้คราวหน้าละกันครับ

แก้ไขล่าสุด วันที่ 10 กรกฏาคม 2550 เวลา 22.38 น.

Filed Under: Ruby on Rails | Tags: howto layout ruby on rails

Comments

Leave a response

Have your say

A name is required. You may use HTML in your comments.




About this site

Worst view in IE.

Pages

Categories

Top Tags

More

codegent: we're hiring