Ruby on Rails 2.1-레이아웃

레이아웃은 HTML 페이지의 주변을 정의합니다. 최종 출력의 일반적인 모양과 느낌을 정의하는 곳입니다. 레이아웃 파일은 앱 / 뷰 / 레이아웃에 있습니다.

이 프로세스에는 레이아웃 템플릿을 정의한 다음 컨트롤러가 존재하고 사용할 수 있음을 알리는 것이 포함됩니다. 먼저 템플릿을 만들어 보겠습니다.

standard.rhtml이라는 새 파일을 app / views / layouts에 추가합니다. 컨트롤러에게 파일 이름으로 사용할 템플릿을 알려주므로 동일한 이름을 따르는 것이 좋습니다.

새 standard.rhtml 파일에 다음 코드를 추가하고 변경 사항을 저장합니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>    
      <meta http-equiv="Content-Type" content="text/html;.
         charset=iso-8859-1" />
      
      <meta http-equiv="Content-Language" content="en-us" />
      
      <title>Library Info System</title>
      
      <%= stylesheet_link_tag "style" %>
   </head>
	
   <body id="library">
      
      <div id="container">
         
         <div id="header">
            <h1>Library Info System</h1>
            <h3>Library powered by Ruby on Rails</h3>
         </div>
			
         <div id="content">
            <%= yield -%>
         </div>
			
         <div id="sidebar"></div>
      
      </div>
   
   </body>
</html>

방금 추가 한 모든 것은 표준 HTML 요소입니다. stylesheet_link_tag스타일 시트 <link>를 출력하는 도우미 메서드. 이 경우 style.css 스타일 시트를 연결합니다. 그만큼yield 명령은 Rails가 여기에서 호출 된 메소드에 대한 RHTML을 넣어야 함을 알려줍니다.

지금 열다 book_controller.rb 첫 번째 줄 바로 아래에 다음 줄을 추가하십시오.

class BookController < ApplicationController
   layout 'standard'
   def list
      @books = Book.find(:all)
   end
...................

standard.rhtml 파일에서 사용 가능한 레이아웃을 사용하려는 컨트롤러를 지시합니다. 이제 다음 화면을 생성 할 책을 찾아보십시오.

스타일 시트 추가

지금까지는 스타일 시트를 만들지 않았으므로 Rails는 기본 스타일 시트를 사용하고 있습니다. 이제 style.css라는 새 파일을 만들고 / public / stylesheets에 저장하겠습니다. 이 파일에 다음 코드를 추가하십시오.

body {
   font-family: Helvetica, Geneva, Arial, sans-serif;
   font-size: small;
   font-color: #000;
   background-color: #fff;
}
a:link, a:active, a:visited {
   color: #CD0000;
}
input { 
   margin-bottom: 5px;
}
p { 
   line-height: 150%;
}
div#container {
   width: 760px;
   margin: 0 auto;
}
div#header {
   text-align: center;
   padding-bottom: 15px;
}
div#content {
   float: left;
   width: 450px;
   padding: 10px;
}
div#content h3 {
   margin-top: 15px;
}
ul#books {
   list-style-type: none;
}
ul#books li {
   line-height: 140%;
}
div#sidebar {
   width: 200px;
   margin-left: 480px;
}
ul#subjects {
   width: 700px;
   text-align: center;
   padding: 5px;
   background-color: #ececec;
   border: 1px solid #ccc;
   margin-bottom: 20px;
}
ul#subjects li {
   display: inline;
   padding-left: 5px;
}

이제 브라우저를 새로 고침하고 차이점을 확인하세요.

다음은 무엇입니까?

다음 장에서는 모든 데이터베이스의 레코드를 추가, 삭제 및 수정할 수있는 사용자 액세스 권한을 부여하기 위해 Rails Scaffolding을 사용하여 애플리케이션을 개발하는 방법을 설명합니다.