Embed Size (px)
Citation preview
#6 Ruby on Rails. Пользовательский интерфейсВьюшки, стили, скрипты
Денис Калесников, главный программист Мэйк
make.st
План1. Assets
a. Подключение фреймворка Twitter Bootstrap (практика)
2. Шаблонизаторыa. erbb. hamlc. slim (практика)
UI в веб-приложении1. Непосредственно html-документ2. Стили оформления3. javascript - интерактивность и удобства для пользователя4. Фоновые изображения и иконки5. Подключаемые шрифты
2-5 в терминах Ruby on Rails называются assets (материал)
Проблема - где складывать и как подключать ассеты.
Практическое задание №1Для изучения подключения ассетов в Rails-приложение, добавим в наш проект twitter bootstrap.
Сперва получим результат, а затем разберем - что как работает.
Подготовка учебного проекта1. Переходим в папку с проектом cd ruby_lesson12. Выполняем команду git stash before_lesson_63. Выполняем команду git pull
Twitter BootstrapBootstrap (также известен как Twitter Bootstrap) — свободный набор инструментов для создания сайтов и веб-приложений. Включает в себя HTML и CSS шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейса, включая JavaScript-расширения.
Оф. сайт http://getbootstrap.com/
Основные фичи1. 12-столбцовая сетка. Очень удобна при взаимодействии дизайнера и
верстальщика2. Типографика http://getbootstrap.com/css/#type3. Формы http://getbootstrap.com/css/#forms4. Кнопки 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/application3. Используем хелперы меню
a. Добавить пункт меню Работникиb. Выпадающее меню справочники
4. Настроим верстку таблицы с работниками http://getbootstrap.com/css/#tables
5. Настроим верстку форм http://getbootstrap.com/css/#forms
Стили в Ruby on RailsСтили могут размещаться в
1. app/assets/stylesheets2. lib/assets/stylesheets3. vendor/assets/stylesheets
Сборка стилей.В большом сложном проекте, стили будут разделены на файлы и сгруппированы по директория. Однако, в веб-приложениях часто принято - делать сборку всех файлов и отдавать ее пользователю одним файлом.
В ROR для этого создается отдельный файл стилей(манифест, по-умолчанию application.css) в котором с помощью специального синтаксиса указывается какие файлы и директории следует добавить в сборку.
Сборка подключается в основном шаблоне (по умолчанию layouts/application.html.erb) с помощью метода stylesheet_link_tag(‘манифест’)
Сборка стилей. Подключение компонентов/* ...
*= require
*= require_directory
*= require_self
*= require_tree .
*/
Подключение javascriptПроисходит аналогично стилям. Скрипты размещаются в:
1. app/assets/javascripts2. lib/assets/javascripts3. 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. haml2. slim
SLIMhttp://slim-lang.com/
По сути, это просто HTML без <> скобок, в котором используются отступы для обозначения вложенных элементов.
Мы будем использовать его, так как он достаточно удобный и более производителен чем haml.
Практическое задание 31. Подключить гем slim, slim-rails2. Переделать вьюху со списком сотрудников в slim.3. Можно использовать гем https://github.com/slim-template/html2slim
Спасибо за внимание!
Денис Калесников, главный программист Мэйк
make.st
