SUPPORT THE SITE WITH A CLICK

Subscribe Rss:

SUPPORT THE SITE WITH A CLICK

Wednesday, September 17, 2008

Layouts and content_for

In rails application usually we will be using <%=yield%> for dispalying the content in the block.
Our Rails Layout will something like this

<html>
<title>Content_for</title>
<head>
<%=stylesheet_link_tag 'application'%>
</head>
<body>
<div id='header'> </div>
<div id='content'><%=yield%></div>
<div id='sidebar'> </div>
<div id='footer'> </div>
</body>
</html>

If you want to change something in the layout on a per-template basis, content_for is your answer! This allows templates to specify view code that can be placed anywhere in a layout.
Now we want to include one more stylesheet for our index.html.erb,that should be used only for index.html.erb & not for other.

Assume there are two controllers

1.light

2.image


Both controllers are using the same layout,but each controllers need different css & stylesheets.For this purpose we will be using content_for

Example


In this example,content_for have been used & it is called in the layout itself,so the brower is showing the block content.

Code



Browser



Similarly we can use this for diff controllers.

1.Define our Layout


View code



<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<meta name="Description" content="A free open source web design by Gen. Free for anyone to use as long as credits are intact. " />
<meta name="Keywords" content="open source web design,http://gendesigns.blogspot.com" />
<meta name="Copyright" content="Gen" />
<meta name="Designed By" content="http://gendesigns.blogspot.com" />
<meta name="Language" content="English" />
<title>Image Gallery Demo</title>
<%=yield :head%>
</head>
<body>
<div id="wrapper">
<div id="header">
 
</div>
<div id="content">
<div id="yield"><%=yield%></div>
</div>
<div id='carsoul'>
<%=yield :carsoul%>
</div>
<%=yield :carscript%>
<%=yield :controller2%>
<div id="footer">
</div>
</div>
</body>
</html>

2.Define content_for in light controller


View code


Now content_for has been defined for the light controller for index action.

index.html.erb


<ul>
<%=render :partial=>'image_show' ,:collection=>@images%>
</ul>

<% content_for :carsoul do %>
<div id="horizontal_carousel">
<div class="previous_button"></div>
<div class="container">
<ul>
<%=render :partial=>'image_show' ,:collection=>@images%>
</ul>
</div>
<div class="next_button"></div>
</div>
<% end %>
<% content_for :carscript do %>
<script type="text/javascript">
// <![CDATA[
function runTest() {
hCarousel = new UI.Carousel("horizontal_carousel");

}

Event.observe(window, "load", runTest);
// ]]>
</script>
<%end%>
<%content_for :head do%>
<%=stylesheet_link_tag '/lightview/stylesheets/base'%>
<%=stylesheet_link_tag '/lightview/stylesheets/lightview'%>
<%=javascript_include_tag '/lightview/javascripts/prototype'%>
<%=javascript_include_tag '/lightview/javascripts/scriptaculous.js'%>
<%=javascript_include_tag '/lightview/javascripts/lightview'%>
<%=javascript_include_tag '/lightview/javascripts/carousel'%>
<%=stylesheet_link_tag '/lightview/stylesheets/prototype-ui'%>
<%end%>


Here the css & js files have used only for index.html.erb.so other actions wont be able to access the style & css

3.Define content_for in image controller


View code


Now we have defined content_for in image controller for the action new

new.html.erb


<% form_for(:image,:url=>{:action => 'upload' },:html => { :multipart => true }) do |f| %>
Upload a new image
<%= f.file_field :uploaded_data, :class => 'input-file' %>
<%= f.submit 'upload' %>
</p>
<% end %>
<%content_for :controller2 do%>
<h1>Stylesheet & js files not available for here</h1>
<%end%>

4.Output of content_for


Just view the figures below.

Light controller



Image controller



Page source for light controller



Page source for image controller



Finally content_for has been implemented


Kind notice this tutorial has been created & tested in rails 2.1.0