Ruby on Rails. Пользовательский интерфейс

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

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

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

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

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

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

Основные фичи
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

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. Этот гем помимо чистого
бутстрапа предоставляет полезные хелперы.

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

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

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

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

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

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

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

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

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

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

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

HAML
http://haml.info/

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

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

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

Ruby on Rails. Пользовательский интерфейс

More Related Content

What's hot (20)

Similar to Ruby on Rails. Пользовательский интерфейс (20)

More from Digital-агентство Мэйк (14)

Ruby on Rails. Пользовательский интерфейс