Занятие №6 в рамках Курсов программирования Ruby on Rails. Группа курсов «ВКонтакте»: http://vk.com/ruby_school Организатор — Агентство интернет-маркетинга Мэйк makeagency.ru. Курсы проводятся на базе Кузбасского государственного технического университета, кафедры «Информационные и автоматизированные производственные системы».

1. #6 Ruby on Rails. Пользовательский
интерфейс
Вьюшки, стили, скрипты
Денис Калесников, главный программист Мэйк
make.st

2. План
1. Assets
a. Подключение фреймворка Twitter Bootstrap (практика)
2. Шаблонизаторы
a. erb
b. haml
c. slim (практика)

3. UI в веб-приложении
1. Непосредственно html-документ
2. Стили оформления
3. javascript - интерактивность и удобства для пользователя
4. Фоновые изображения и иконки
5. Подключаемые шрифты
2-5 в терминах Ruby on Rails называются assets (материал)
Проблема - где складывать и как подключать ассеты.

4. Практическое задание №1
Для изучения подключения ассетов в Rails-приложение, добавим в наш
проект twitter bootstrap.
Сперва получим результат, а затем разберем - что как работает.

5. Подготовка учебного проекта
1. Переходим в папку с проектом cd ruby_lesson1
2. Выполняем команду git stash before_lesson_6
3. Выполняем команду git pull

6. Twitter Bootstrap
Bootstrap (также известен как Twitter Bootstrap) — свободный набор
инструментов для создания сайтов и веб-приложений. Включает в себя
HTML и CSS шаблоны оформления для типографики, веб-форм, кнопок,
меток, блоков навигации и прочих компонентов веб-интерфейса, включая
JavaScript-расширения.
Оф. сайт http://getbootstrap.com/

7. Основные фичи
1. 12-столбцовая сетка. Очень удобна при взаимодействии дизайнера и
верстальщика
2. Типографика http://getbootstrap.com/css/#type
3. Формы http://getbootstrap.com/css/#forms
4. Кнопки http://getbootstrap.com/css/#buttons
5. Меню http://getbootstrap.com/components/#navbar

8. 3 способа добавить в проект
1. Вручную, скачав файлы с оф. сайта.
a. Разместите их в папке vendor
2. Gem https://github.com/twbs/bootstrap-sass
3. Gem https://github.com/seyhunak/twitter-bootstrap-rails
Преимущество использования гема перед подключением файлов вручную -
bundler будет добавлять в проект все свежие обновления и исправления
ошибок, в противном случае это придется делать, вручную - самому.
Попробуем использовать гем twitter-bootstrap-rails. Этот гем помимо чистого
бутстрапа предоставляет полезные хелперы.

9. Подключение в наш проект
1. Добавляем в Gemfile и запускаем установочный генератор
2. Перегенерируем главный макет app/views/layouts/application
3. Используем хелперы меню
a. Добавить пункт меню Работники
b. Выпадающее меню справочники
4. Настроим верстку таблицы с работниками http://getbootstrap.
com/css/#tables
5. Настроим верстку форм http://getbootstrap.com/css/#forms

10. Стили в Ruby on Rails
Стили могут размещаться в
1. app/assets/stylesheets
2. lib/assets/stylesheets
3. vendor/assets/stylesheets

11. Сборка стилей.
В большом сложном проекте, стили будут разделены на файлы и
сгруппированы по директория. Однако, в веб-приложениях часто принято -
делать сборку всех файлов и отдавать ее пользователю одним файлом.
В ROR для этого создается отдельный файл стилей(манифест, по-умолчанию
application.css) в котором с помощью специального синтаксиса указывается
какие файлы и директории следует добавить в сборку.
Сборка подключается в основном шаблоне (по умолчанию layouts/application.
html.erb) с помощью метода stylesheet_link_tag(‘манифест’)

12. Сборка стилей. Подключение компонентов
/* ...
*= require
*= require_directory
*= require_self
*= require_tree .
*/

13. Подключение javascript
Происходит аналогично стилям. Скрипты размещаются в:
1. app/assets/javascripts
2. lib/assets/javascripts
3. vendor/assets/javascripts
Скрипты подключаются в шаблоне с помощью вызова метода
javascript_include_tag(“манифест”)

14. Перерыв

15. Вывод изображений
Разумеется, изображения должны храниться в директории public. Но в Rails,
изображения используемые для оформления (фон, иконка, и просто забитое
в верстку изображение) помещаются в директорию app/assets/images
В режиме разработки сервер отдаст нужный файл, как будто он лежит в
директории public.
В процессе развертывания сайта Rails положит этот файл в директорию
public, и в боевой среде этот файл будет отдаваться сервером статики
(например, nginx)

16. Практическое задание 2
Вывести картинку на главной странице.
1. Подключить локальную картинку
2. Подключить удаленную картинку. Можно отсюда http://getbootstrap.
com/css/#forms - этот сервис можно использовать для веб-разработки

17. HTML-документ
Отвечая на запрос пользователя, Rails:
1. ищет и рендерит вьюху
2. ищет и рендерит макет подставляя в него результат рендеринга макета
Макеты хранятся в папке app/views/layouts. По-умолчанию - это applicaton.html.
erb

18. Вьюха внутри макета

19. Шаблоны
Шаблон состоит из html-кода документа + управляющие команды на языке
Ruby. Модуль, занимающийся преобразованием шаблона в HTML-документ
называется шаблонизатор. По-умолчанию используется ERB - обычный HTML
+ ruby-инъекции
В нашем приложении можно рассмотреть код вывода списка всех
работников.

20. Альтернативные шаблонизаторы
Разумеется разработчики постарались сократить размеры исходного кода
шаблонов и время их написания. Таким образом появилось достаточно много
шаблонизаторов, мы рассмотрим 2 самых популярных:
1. haml
2. slim

21. HAML
http://haml.info/

22. SLIM
http://slim-lang.com/
По сути, это просто HTML без <> скобок, в котором используются отступы для
обозначения вложенных элементов.
Мы будем использовать его, так как он достаточно удобный и более
производителен чем haml.

23. Практическое задание 3
1. Подключить гем slim, slim-rails
2. Переделать вьюху со списком сотрудников в slim.
3. Можно использовать гем https://github.com/slim-template/html2slim

24. Спасибо за внимание!
Денис Калесников, главный программист Мэйк
make.st