Верстать на Ruby on Rails - это клево! )

Статья писалась для пользователей Linux. Для пользователей других операционных систем консольные команды могут иметь несколько иной синтаксис. В статье я не стал касаться верстки с использованием sass, compass и прочих дополнений, ускоряющих работу с css. Про это достаточно много написано. В то же время я хотел описать общие принципы начала разработки с использованием RoR.

Верстка под Ruby on Rails сокращает работу. Давайте рассмотрим небольшой пример - нам необходимо сверстать три странички странички. Путь это будут home, about и contact.

Как верстать их с чистого .html понятно. А вот как это выглядит под RoR:

1. Подготовительные работы

Описывая подобный подход, я подразумеваю, что у вас установлено все необходимое. Если нет - вы можете подготовить рабочее окружение с помощью этой статьи.

После того, как вы подготовили рабочее окружение необходимо создать проект. Для этого открываем консоль и пишем:

$ rails new sample_app
$ cd sample_app

Теперь мы доставим, необходимые нам для работы гемы. Для этого внесем дополнения в файл Gemfile, расположенный в корне папки sample_app:

source 'http://rubygems.org' 
gem 'rails', '3.0.9'
gem 'sqlite3', '1.3.3'
gem 'compass' 
gem 'susy' 
gem 'simple_form' 
...
gem 'haml-rails'

Сохраним изменения и вернемся в консоль, для установки гемов:

$ bundle install

Итак, наша подготовка к работе завершена. Запускаем наш проект командой:

$ rails s

И переходим по адресу http://0.0.0.0:3000/ чтобы убедиться, что все работает. Мы должны увидеть дефолтную страницу Rails

Убедились что работает? Удаляем страницу, она нам не нужна:

$ rm public/index.html

2. Создаем контроллер

Мы сделаем всего один контроллер, который поможет нам в верстке навигации по страницам.

Rails поставляется со скриптом для создания контроллеров называемым generate имя контроллера - это все, что нужно для его магической работы. Так как мы делаем этот контроллер для обработки статичных страниц, мы просто назовем его Pages, и запланируем сделать actions (действия) для Home, Contact и About страниц.

$ rails generate controller Pages home about contact

Сгенерированный автоматически контроллер Pages автоматически обновляет файл config/routes.rb, который Rails использует для определения соответствий между URL и веб-страницами.

Давайте откроем файл config/routes.rb и посмотрим что получилось

SampleApp::Application.routes.draw do

get “pages/home”

get “pages/contact”

get “pages/about”

…

end

Теперь, перейдя по адресу http://localhost:3000/pages/home (аналогично для contact и about) мы сможем увидеть наши странички

Еще один момент: ранее мы удалили страницу public/index.html и теперь по адресу http://localhost:3000/ у нас выдается ошибка. Давайте исправим это, добавив в файл config/routes.rb еще одну строчку, которая определит страницу, открывающуюся по умолчанию:

root :to => ‘pages#home’

Теперь посмотрим на созданный генератором контроллер Pages app/controllers/pages_controller.rb

class PagesController < ApplicationController

def home
end

def contact
end

def about
end

end

Все три функции (метода) home, contact, about пусты. При посещении URL /pages/home, Rails смотрит в контроллер Pages и выполняет код в home, а затем визуализирует представление (view), соответствующее действию. В данном случае, home действие пустое, так что все посещения /pages/home просто визуализируют представления.Здесь мы не будем ничего дописывать, потому что единственное, что нам необходимо - это просто визуализировать страницы.

3. Представления

Теперь обратимся к представлениям, которые также сгенерированы автоматически. Они расположены по адресу app/views/pages/

Пройдя по этому адресу мы увидим три файла:

home.html.haml
contact.html.haml
about.html.haml

Все они имеют схожий код:

%h1 Pages#home
%p Find me in app/views/pages/add.html.haml

Эти представления всего лишь заглушки. Однако именно с ними мы и будем работать.

Можно было бы уже сейчас начать писать html-код в этих представлениях. Но, согласитесь, было бы неплохо иметь какой-то общий шаблон, в котором можно было бы задать общую структуру макета.

Этот шаблон уже есть. Это файл app/views/layouts/application.html.haml

!!!5

%html

%head

%title Sample App

%body

= yield

4. Синтаксис Haml

В самом начале статьи мы дополняли проект гемами, одним из которых был гем Haml. Подробнее о нем можно почитать на оф. сайте http://haml.info/ Однако я хочу сказать несколько слов о нем. Целью всей статьи - является показать как можно сократить работу по верстке. И как раз Haml является одной из тех составляющих, которая помогает ускорить работу.

А делает он это очень просто. Вместо того, чтобы писать:

<div class=”info”>
<p>Какой-то текст</p>
</div>

С помощью Haml мы напишем:

.info
%p Какой-то текст

Какой бы по размеру проект вы ни верстали, вы ощутите прирост в скорости хотя бы потому, что вам придется печатать гораздо меньше символов.

Теперь если вернуться к файлу app/views/layouts/application.html.haml (предварительно почитав документацию http://haml.info/ код application.html.haml не покажется нам настолько страшным

!!!5

%html

%head

%title Sample App

%body

= yield

5. Еще немножко Rails

В файле application.html.haml у нас осталась неясной всего лишь одна строка

= yield

Если бы мы не использовали синтаксис Haml, но эта запись выглядела бы так:

<%= yield %>

Этот код отвечает за вставку содержимого каждой страницы в шаблон. Ипользование этого шаблона обеспечивает, что при посещении страницы /pages/home содержимое home.html.haml преобразуется в HTML, а затем вставляется вместо = yield.

Давайте свяжем наши страницы с помощью ссылок навигации. Их логично разместить в общем шаблоне application.html.haml

Мы не зря создавали контроллер и теперь можем использовать синтаксис Rails для того, указать адреса страниц.

Чтобы вывести список нам достаточно написать:

= link_to ‘Home’, root_path

или

= link_to ‘Contact’, contact_path

Первый аргумент это текст ссылки, а второй - URL. Мы заполним URL-адреса именованными маршрутами, указанными в routes.rb.

Хотя иногда ссылка может никуда не вести, тогда мы можем просто использовать старую добрую заглушку

= link_to ‘Help’, ‘#’

В результате, список наших ссылок блока навигации может выглядеть так:

%nav
%ul
%li
= link_to ‘Home’, root_path, :class=>’home’
= link_to ‘Contact’, contact_path
= link_to ‘About’, about_path

Возможно код немного не привычен, но согласитесь, он все меньше и удобнее для чтения, чем:

<nav>
<ul>
<li><a class=”home” href=”pages/home”>Home</li>
<li><a href=”pages/contact”>Contact</li>
<li><a href=”pages/about”>About</li>
</ul>
</nav>

Давайте подключим CSS. Все стили хранятся в папке app/assets/stylesheets

Мы могли бы подключить CSS напрямую в application.html.haml

= stylesheet_link_tag ‘style’

Но я предлагаю вынести подключение в helper (app/helpers/application_helper.rb), чтобы посмотреть еще одну возможность, которая так же может сократить наш код.

Определим в вызов наших стилей через переменную style в app/helpers/application_helper.rb

module ApplicationHelper

def style

style = stylesheet_link_tag ‘style’, :media => ‘screen’

end

end

Теперь мы можем подключить CSS всего лишь указав:

!!!5
%html
%head
%title Sample App
= style
%body

6. Участки кода

Порой бывает необходимо подключать одинаковые участки кода к различным страницам. Например, блок уведомления:

<div class=”notice”>
Данные сохранены
</div>

Используя Raby on Rails мы можем вынести этот код в отдельный файл (партиал) и подключать его к различным страницам когда нам необходимо. Для этого мы используем в названии партиала нижнее подчеркивание, например _notice.html.haml, а затем вызовем его в общем шаблоне:

= render _notice

7. Итоги

Давайте окинем взглядом все что мы сделали:

Создав контроллер Pages мы обеспечили навигацию по страницам
Используя Haml мы получили возможность сократить написание кода
Используя Raby on Rails мы можем не копировать куски кода (такие header, footer), а использовать один шаблон и партиалы.

8. Ссылки

При написании статьи были использованы следующие ресурсы: