Этот пост покажет вам простые шаги по созданию TODO веб приложения с ипользованием ExtJS, Ruby on Rails и Netzke. Это займет у вас приблизительно 7 минут, и если вам заранее любопытно стоит ли оно того, смотрите сразу последнюю часть (кстати самую большую), где и обсудим результаты. Наша цель заключается в создании веб приложения которое позволит вам добавлять, редактировать и удалять TODO задачи, а также отмечать сделанные. В дополнение к этому вы сможете сортировать и искать задачи, редактировать несколько задач одновременно, и это еще не все. Можете засечь время на своих часах, давайте приступим к работе.
Когда писался этот туториал, я использовал: Rails 3.0.1, netzke-core 0.6.2, netzke-basepack 0.6.1, Ruby 1.9.2, Ext 3.3.0.
Создание Rails приложения:
Добавьте Netzke гемы в ваш Gemfile:
Если позже вы увидите связанные с пагинацией ошибки, вам может потребоваться установка will_paginate, пока я не найду лучшего решения:
Установим гемы:
Подключим библиотеку Ext и, опционально, иконки от FamFamFam, например:
Добавим роуты Netzke и root:
Создадим контроллер welcome:
Не забудьте удалить public/index.html.
В лайауте приложения стандартные ссылки на JavaScript и CSS заменяются с помощью хелпера netzke_init, так что результат будет выглядеть похоже на это:
Учтите, что netzke_init это все что нужно для подключения Ext и Netzke JS и CSS файлов.
3 минуты прошло, мы готовы приступить к действительно интересной части.
Давайте создадим модель Task с полями name, priority, notes, due date и флагом «done»:
Отредактируйте файл с миграцией (db/migrate/xxx_create_tasks.rb), чтобы флаг «done» по умолчанию был снят:
Внесем изменения в базу данных:
Мы хотим чтобы наши задачи, как минимум, всегда имели какое-то имя, поэтому давайте добавим соответствующие валидации. И установим default_scope для получения только незавершенных задач:
Для того чтобы увидеть Ext таблицу как интефейс к нашей модели, нам не потребуется прилагать много усилий. Просто объявите Netzke GridPanel в app/views/welcome/index.html.erb:
Запустим сервер:
… и посмотрим как это выглядит на localhost:3000/:
Это все уже довольно функционально, и при этом пристойно выглядит. Через минуту я покажу вам впечатляющий список возможностей, которые у вас появились. Но сначала давайте немного подправим приложение, чтобы оно выглядело еще лучше — у нас еще есть на это время.
С Netzke::Basepack::GridPanel вы можете с легкостью настраивать колонки (смотрите документацию по этому поводу). Давайте сделаем 2 простые вещи: 1) укажем какие колонки мы хотим видеть, исключая созданные по умолчанию рельсами created_at и updated_at, и 2) изменим заголовок колонки «due» на «Due on».
Отлично. Давайте используем оставшиеся 2 минуты для финальной, чисто визуальной модификации. Давайте отобразим нашу таблицу посередине страницы, под заголовком, без этого толстого синего хедера, и с нормальной рамкой вокруг. Также зададим для некоторых колонок ширину по умолчанию, и сделаем так, чтобы они занимали всю ширину таблицы.
Для того чтобы поставить таблицу посередине страницы, давайте быстренько добавим некоторые css стили в лайаут нашего приложения (после netzke_init хелпера):
Для добавления названия, включим рамку и выключим хедер:
Вот, это оно! Остановите свои часы, и давайте обсудим то, что мы получили:
Так как Netzke::Basepack::GridPanel очень мощный компонент, мы бесплатно получили кучу фич.
Добавление, изменение и удаление записей может с легкостью происходить так:
Даже если ваша таблица содержит десятки тысяч записей, это не проблема для таблицы Netzke, все благодаря встроенной пагинации.
Некоторые действия кнопок внизу таблицы продублированы в контекстном меню:
В нашем приложении мы используем в модели Task поля с типами integer, boolean, string, text, и date — и каждое из полей получает свой тип колонки, пользователь не сможет ввести буквы в поле priority.
Валидации Rails поддерживаются, и работают даже при множественном редактировании!
Нажмите на заголовок колонки, чтобы включить сервер-сайд сортировку:
Умные фильтры по умолчанию включены для каждой из колонок, конечно, учитывая тип колонки.
Пример с датой:
Приоритет:
Иногда добавление/изменение записи гораздо удобнее с помощью формы. Конечно, у Netzke есть такая возможность. Поддерживается даже мульти-редактирование, просто выделите нужные записи и нажмите «Edit in form».
В этой статье не рассмотрено, но Netzke grid panel также поддерживает one-to-many («belongs_to») связи (посмотрите ссылку на демо ниже).
Вы научились малой части вещей, которые Netzke предоставляет, например Netzke::Basepack::GridPanel — мощный, настраиваемый и расширяемый компонент, который вы можете использовать в своих RIA приложениях. Вы можете увидеть больше примеров использования GridPanel и других компонентов в демо. В принципе, Netzke задумывался как фреймворк который позволяет вам создавать свои собственные мощные компоненты — с нуля, или используя существующие.
Следите за мной в твиттере и узнавайте новости о Netzke, и не забудьте добавить в закладки официальный сайт проекта.
Делитесь Netzke опытом в Google группе, и (не в последнюю очередь), пожалуйста помните: Netzke это многогранный проект, где большее сообщество будет означать более быструю разработку. Спасибо!
UPD d43 подсказал где посмотреть демо с ExtJS 4.
Когда писался этот туториал, я использовал: Rails 3.0.1, netzke-core 0.6.2, netzke-basepack 0.6.1, Ruby 1.9.2, Ext 3.3.0.
Первоначальные шаги
Создание Rails приложения:
> rails new netzke_task_manager && cd netzke_task_managerДобавьте Netzke гемы в ваш Gemfile:
gem 'netzke-core', :git => "git://github.com/skozlov/netzke-core.git"
gem 'netzke-basepack', :git => "git://github.com/skozlov/netzke-basepack.git"
Если позже вы увидите связанные с пагинацией ошибки, вам может потребоваться установка will_paginate, пока я не найду лучшего решения:
gem 'will_paginate', '~>3.0.pre2'
Установим гемы:
bundle installПодключим библиотеку Ext и, опционально, иконки от FamFamFam, например:
> ln -s ~/code/extjs/ext-3.3.0 public/extjs
> ln -s ~/assets/famfamfam-silk public/images/icons
Добавим роуты Netzke и root:
NetzkeTaskManager::Application.routes.draw do
netzke
root :to => "welcome#index"
# ...
end
Создадим контроллер welcome:
> rails g controller welcome indexНе забудьте удалить public/index.html.
В лайауте приложения стандартные ссылки на JavaScript и CSS заменяются с помощью хелпера netzke_init, так что результат будет выглядеть похоже на это:
<!DOCTYPE html>
<html>
<head>
<title>Netzke Task Manager</title>
<%= netzke_init %>
<%= csrf_meta_tag %>
</head>
<body>
<%= yield %>
</body>
</html>
Учтите, что netzke_init это все что нужно для подключения Ext и Netzke JS и CSS файлов.
3 минуты прошло, мы готовы приступить к действительно интересной части.
Создание модели
Давайте создадим модель Task с полями name, priority, notes, due date и флагом «done»:
> rails g model Task done:boolean name:string notes:text priority:integer due:dateОтредактируйте файл с миграцией (db/migrate/xxx_create_tasks.rb), чтобы флаг «done» по умолчанию был снят:
t.boolean :done, :default => false
Внесем изменения в базу данных:
rake db:migrate Мы хотим чтобы наши задачи, как минимум, всегда имели какое-то имя, поэтому давайте добавим соответствующие валидации. И установим default_scope для получения только незавершенных задач:
class Task < ActiveRecord::Base
validates_presence_of :name
default_scope :conditions => {:done => false}
end
Добавление Netzke grid panel
Для того чтобы увидеть Ext таблицу как интефейс к нашей модели, нам не потребуется прилагать много усилий. Просто объявите Netzke GridPanel в app/views/welcome/index.html.erb:
<%= netzke :tasks, :class_name => "Basepack::GridPanel", :model => "Task" %>
Запустим сервер:
> rails s… и посмотрим как это выглядит на localhost:3000/:
Это все уже довольно функционально, и при этом пристойно выглядит. Через минуту я покажу вам впечатляющий список возможностей, которые у вас появились. Но сначала давайте немного подправим приложение, чтобы оно выглядело еще лучше — у нас еще есть на это время.
С Netzke::Basepack::GridPanel вы можете с легкостью настраивать колонки (смотрите документацию по этому поводу). Давайте сделаем 2 простые вещи: 1) укажем какие колонки мы хотим видеть, исключая созданные по умолчанию рельсами created_at и updated_at, и 2) изменим заголовок колонки «due» на «Due on».
<%= netzke :tasks,
:class_name => "Basepack::GridPanel",
:model => "Task",
:columns => [:done, :name, :notes, :priority, {:name => :due, :header => "Due on"}]
%>
Отлично. Давайте используем оставшиеся 2 минуты для финальной, чисто визуальной модификации. Давайте отобразим нашу таблицу посередине страницы, под заголовком, без этого толстого синего хедера, и с нормальной рамкой вокруг. Также зададим для некоторых колонок ширину по умолчанию, и сделаем так, чтобы они занимали всю ширину таблицы.
Для того чтобы поставить таблицу посередине страницы, давайте быстренько добавим некоторые css стили в лайаут нашего приложения (после netzke_init хелпера):
<style type="text/css" media="screen">
h1 { text-align: center; margin: 10px;}
.netzke-component { width: 700px; margin: auto; }
</style>
Для добавления названия, включим рамку и выключим хедер:
<h1>Incomplete tasks</h1>
<%= netzke :tasks,
:class_name => "Basepack::GridPanel",
:model => "Task",
:columns => [:id, :done, :name,
{:name => :notes, :width => 200},
{:name => :priority, :width => 50},
{:name => :due, :header => "Due on"}
],
# Standard Ext.grid.EditorGridPanel configuration options:
:border => true,
:header => false,
:view_config => {
:force_fit => true # force the columns to occupy all the available width
}
%>
Вот, это оно! Остановите свои часы, и давайте обсудим то, что мы получили:
Обсуждение результатов
Так как Netzke::Basepack::GridPanel очень мощный компонент, мы бесплатно получили кучу фич.
Одновременное редактирование нескольких строк
Добавление, изменение и удаление записей может с легкостью происходить так:
Пагинация
Даже если ваша таблица содержит десятки тысяч записей, это не проблема для таблицы Netzke, все благодаря встроенной пагинации.
Контекстное меню
Некоторые действия кнопок внизу таблицы продублированы в контекстном меню:
Автоматическое определение типов атрибутов
В нашем приложении мы используем в модели Task поля с типами integer, boolean, string, text, и date — и каждое из полей получает свой тип колонки, пользователь не сможет ввести буквы в поле priority.
Поддержка Rails валидаций
Валидации Rails поддерживаются, и работают даже при множественном редактировании!
Сортировка на стороне сервера
Нажмите на заголовок колонки, чтобы включить сервер-сайд сортировку:
Фильтрация на стороне сервера
Умные фильтры по умолчанию включены для каждой из колонок, конечно, учитывая тип колонки.
Пример с датой:
Приоритет:
Добавление/(мульти)редактирование записей в форме
Иногда добавление/изменение записи гораздо удобнее с помощью формы. Конечно, у Netzke есть такая возможность. Поддерживается даже мульти-редактирование, просто выделите нужные записи и нажмите «Edit in form».
Продвинутый поиск, с использованием шаблонов
И еще...
В этой статье не рассмотрено, но Netzke grid panel также поддерживает one-to-many («belongs_to») связи (посмотрите ссылку на демо ниже).
Заключение
Вы научились малой части вещей, которые Netzke предоставляет, например Netzke::Basepack::GridPanel — мощный, настраиваемый и расширяемый компонент, который вы можете использовать в своих RIA приложениях. Вы можете увидеть больше примеров использования GridPanel и других компонентов в демо. В принципе, Netzke задумывался как фреймворк который позволяет вам создавать свои собственные мощные компоненты — с нуля, или используя существующие.
Следите за мной в твиттере и узнавайте новости о Netzke, и не забудьте добавить в закладки официальный сайт проекта.
Делитесь Netzke опытом в Google группе, и (не в последнюю очередь), пожалуйста помните: Netzke это многогранный проект, где большее сообщество будет означать более быструю разработку. Спасибо!
UPD d43 подсказал где посмотреть демо с ExtJS 4.
