Rails For Designers
Web 設計人員如何看 Rails?
- 了解一下 Model, View 及 Controller
-
- Model : 資料及處理資料時商業邏輯, 通常會將資料儲存於資料庫
- Controller : 主要的應用程式邏輯, 通常程式會利用一些變數傳遞給 view 使用
ex: @title, @article… - View – 使用者接觸到的部份, 不論是網頁, xml 都算是 view 的一種. 當然 Web 設計人員最常接觸這一部份!
- 一般 Rails 會依一定方法拆解 url, 以 http://localhost/articles/show/2 為例
- “articles” 會送給 ArticlesController 處理,
程式檔案在 app/controllers/articles_controller.rb - 接下來的 “show” 稱作 action, Rails 會執行 ArticlesController 內 show 這個 method, 去找到編號 2 這個文章, 然後藉著某個變數讓你的 view 可以使用, 例如: @article
- 最後 Rails 然後依 “show” action, 試著找到在 app/views/articles 下的 show.rhtml 來產生網頁內容
- “articles” 會送給 ArticlesController 處理,
- Views – Web 設計人員最需要了解的部份
- Builder Templates(.rxml) 是用來產生 xml 檔案
- RHTML Templates(.rhtml) 是用來產生網頁內容, Web 設計人員大部分都是接觸到這一部份
- RHTML
其實 RHTML 和一般網頁一樣, 只是特別將<% ... %>, <%= ... %>交給 ruby 處理而已, 跟 php<?, <?=一樣意思<% ... %>經由 ruby 直接執行<%= ... %>經由 ruby 直接執行後會把結果輸出到網頁
- Layouts, 基本上對於每個 action, 都可以有對應的 view. 但大部分 views 有很多都是相同的部分, 維護起來也不容易, 利用 Rails Layout 機制可以讓事情簡單一點
- 每個 Rails 應用程式可有一個 layout, application.rhtml app/views/layouts/application.rhtml
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <%= javascript_include_tag :defaults %> <title><%= @title || "my www" %></title> </head> <body> <div id="header"> Header </div> <div id="content"> <%= @content_for_layout %> </div> <div id="footer"> Footer </div> </body> </html> - 每個 controller 也可以有自己的 layout, 例如: articles.rhtml app/views/layouts/articles.rhtml
- 透過上面 @content_for_layout 變數, Rails 會將將 action 產生的網頁的內容輸出
- 所以我們的 show.rhtml 就像是
<h1><%= @article.title %><h1> ...
- 每個 Rails 應用程式可有一個 layout, application.rhtml app/views/layouts/application.rhtml
- Partials, 你也可以藉著 render :partial 指令產生一小部分的網頁, 讓你能共用一些網頁, Rails 會幫你載入 render :partial 後指定的檔名, 其檔名記得要以 ”_” 開頭, 例:
app/views/_header.rhtml
app/views/_footer.rhtml<div id="header"> <%= render :partial => 'header' %> </div> ... <div id="header"> <%= render :partial => 'footer' %> </div> - Componets 可以讓我們共用網頁及一些邏輯, 例如:
<div id="sidebar"> <%= render_compoment :controller => :link, :action => get_links %> </div> - Helpers, Rails 提供許多的 helper 指令能幫你處理輸出問題, 通常程式原會先完成這一部份應該蠻容易猜出來他要做甚麼, 例如: Form 處理, 日期輸出, 數字, 金額…
- stylesheet_link_tag
<%= stylesheet_link_tag 'application' %>產生的網頁內容:會產生的網頁內容: <link href="/stylesheets/application.css" media="screen" rel="Stylesheet" type="text/css" /> - javascript_include_tag
<%= javascript_include_tag :defaults %> 會產生的網頁內容: <script src="/javascripts/prototype.js" type="text/javascript"></script> <script src="/javascripts/effects.js" type="text/javascript"></script> <script src="/javascripts/dragdrop.js" type="text/javascript"></script> <script src="/javascripts/controls.js" type="text/javascript"></script> - render, 產生的部份的網頁內容
- link_to, 用來產生 url
- stylesheet_link_tag
- 好好善用 prototype 及 scriptaculous 兩個 javascript 提供的 effect …等功能
Inspired by Rails for designers , Kevin Clark
