Layout and views
Extract common view component into layout
In our previous phase, if you notice in both of index.erb and cast.erb files, you will see some common code. We can extract the page layout related common code in Sinatra through Layout feature.
Common layout
Create a layout file layout.erb under views directory and add the common HTML content from both which
looks as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8' />
<title>Voting App</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1><%= @title %></h1>
<%= yield %>
</body>
</html>
In general Layout is used to define the HTML structure of the web page.
In Sinatra, we deal with forms which is HTML fragments, not fully structured.
Yield means that the layout should wait to the templates to render and then proceed.
What happens is that the page is rendering the layout file then it stops when it hits the 'yield' statement and
render the associated template file. When the template is done, it keeps going to render everything else after the 'yield' statement in the layout.
Therefore, it is very important to be cautious about choosing the right spot for yielding statement in your layout.
Therefore, it is very important to be cautious about choosing the right spot for yielding statement in your layout.
Update the views files
Update the views files index.erb and cast.erb as follows:
-
index.erbfile:<!-- Remove html, title and body tags --> <p>What's for dinner?</p> <form action='cast' method='post'> <ul> <% CHOICES.each do |id, text| %> <li> <label> <input type='radio' name='vote' value='<%= id %>' id='vote_<%= id %>' /> <%= text %> </label> </li> <% end %> </ul> <button type='submit'>Cast this vote!</button> </form> -
cast.erbfile:<!-- Remove html, title and body tags --> <p>You cast: <%= CHOICES[@vote] %></p> <p><a href='/results'>See the results!</a></p>
Now, if you reload the web app (https://localhost:4567) and cast the vote, you will get the same experience as before.
