Вступление
Grails — это современная платформа веб-приложений с мощной архитектурой плагинов. Для того чтобы Grails лучше соответствовал требованиям для разработки корпоративных полнофункциональных интернет-приложений (RIA), для устранения этого пробела используется плагин ZK для Grails (он же ZKGrails). Для пользовательского интерфейса ZK предоставляет огромный набор готовых для предприятия компоновок, называемых ZUL, чтобы мы могли быстро разработать RIA. В то время как Grails служит надежной структурой для серверной части, поскольку он обеспечивает бесшовную интеграцию Spring и мощный слой GORM, основанный на Hibernate.
В этой статье я представлю новый набор API, основанный на знакомом стиле jQuery, в ZKGrails 2. Как того требует закон , я демонстрирую использование этих новых API через приложение Todo.
Начиная
Мы начнем с создания нового приложения Grails, назовите его todo .
$ grails create-app todo $ cd todo
Чтобы установить плагин ZK для Grails, добавьте строку компиляции «: zk: 2.0.4» в блок плагинов в grails-app / conf / BuildConfig.groovy , вот так (конфигурация ваших плагинов может отличаться):
plugins {
runtime ":hibernate:$grailsVersion"
//
// other plugins go here
//
compile ":zk:2.0.4"
}
Затем мы создаем класс домена для нашей записи задачи, а именно todo.Task , используя следующую команду:
$ grails create-domain-class task
Внутри
Grails-приложение / домен / TODO / Task.groovy , мы добавим два свойства,
предмет для хранения предметого выполнения задачи и
сделать для сохранения статуса завершения.
package todo
class Task {
String subject
Boolean done = false
static constraints = {
}
}
ZUL наценки
Затем мы создаем ZUL и Composer с помощью команды create-zul .
$ grails create-zul todo
Приведенная выше команда дает нам страницу ZUL, todo.zul и TodoComposer.groovy (в каталоге grails-app / composers / todo /). Ниже приведен файл todo.zul , который можно найти в каталоге grails-app / zul :
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" ?>
<?variable-resolver class="org.zkoss.zkplus.spring.DelegatingVariableResolver"?>
<zk xmlns="http://www.zkoss.org/2005/zul"
xmlns:h="http://www.w3.org/1999/xhtml"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul/zul.xsd">
<style>
.strike {
text-decoration: line-through;
}
</style>
<window apply="todo.TodoComposer">
<hbox align="center">
<image src="${z.resource(dir:'images', file:'zkpowered_s.png')}"/>
<image src="${z.resource(dir:'images', file:'grails_logo.png')}"/>
</hbox>
<separator/>
<vbox>
<hbox align="center">
<textbox id="txtAddTask"/>
<button id="btnAddTask">Add Task</button>
</hbox>
<vbox id="list"/>
</vbox>
</window>
</zk>
В todo.zul реальный пользовательский интерфейс начинается со строки 22. В строке 27 у нас есть тег <vbox id = «list» /> для хранения списка задач. Тег <textbox id = «txtAddTask» /> в строке 24 предназначен для ввода новой темы задачи, которая, конечно, будет сохранена в теме объекта задачи.
Композитор
Давайте посмотрим внутри TodoComposer, как мы будем создавать интерфейсы для каждой записи задачи.
package todo
import org.zkoss.zk.grails.composer.*
class TodoComposer extends GrailsComposer {
def afterCompose = { window ->
$('#txtAddTask')
.on('ok', {
addTask $(it).text()
})
.focus()
$('#btnAddTask').on('click', {
addTask $('#txtAddTask').text()
})
}
def addTask(subject) {
$('#txtAddTask').text('')
def task = new Task(subject: subject).save()
def id = task.id
$('#list').append {
hbox(id:"task${id}") {
checkbox()
textbox(inplace: true, value: subject)
}
}
$("#task${id}").link(task, [
done: 'checkbox',
subject: 'textbox'
])
$("#task${id} > checkbox").on('check', {
$(it).siblings('textbox')
.toggleClass('strike')
.toggleEnable()
task.save()
})
$("#task${id} > textbox").on('change', {
task.save()
})
}
}
Композитор — это в основном » C » в паттерне MVC. TodoComposer отвечает за управление пользовательским интерфейсом, чтение / запись данных из слоя модели, который является GORM платформы Grails.
В TodoComposer у нас есть » afterCompose » в строке 7, который является закрытием, аналогичным jQuery $ (document) .ready () . Мы начинаем связывать обработчики событий здесь. В ZK событие onOK будет вызвано , когда мы нажмем клавишу ввода в текстовом поле. В ZKGrails 2 мы можем привязаться к этому событию аналогично тому, что мы можем делать в jQuery, как показано в строке 8-11. Обратите внимание, что мы используем .on (‘ok’, {…}) .
Каждый раз, когда мы вводим новую строку темы, обработчик события будет вызывать метод addTask (строка 19). Обратите внимание, что в строках 10 и 15 я намеревался писать вызовы метода addTask без скобок, как это разрешено Groovy.
Метод addTask , начиная со строки 19, отвечает за создание нового объекта Task, установку его темы и сохранение в базе данных через GORM. Это просто делается одной строкой кода в строке 22.
Мы создаем блок пользовательского интерфейса для записи задачи в строке 25-30. Вызов $ (‘# list’) — это, конечно, выбор <vbox id = «# list» /> в приведенном выше ZUL-файле. Реализация встроенного компоновщика, ZKBuilder, работает здесь в строке 25 после вызова метода append . Для записи задачи создаются горизонтальное поле ( hbox ), флажок и текстовое поле . Все они являются компонентами пользовательского интерфейса ZK, похожими на теги ZUL.
Самая крутая часть этой статьи — это функция привязки данных в строке 31. ZKGrails 2 использует средства привязки данных ZK для прямой привязки объектов домена к элементам пользовательского интерфейса через ссылку метода . Синтаксис здесь похож на плагин ссылок jQuery. Мы привязываем каждое свойство объекта Task, done и subject к « флажку » и « текстовому полю » соответственно. Синтаксис селектора CSS3 используется здесь для выбора определенного элемента пользовательского интерфейса.
Далее мы привязываем обработчики событий для сохранения объекта «Задача» в базе данных каждый раз, когда флажок отмечен / снят, а также при изменении темы задачи. Вы можете видеть, что есть некоторая семейная функция для изменения атрибута CSS, в строке 37.
Резюме
В заключение можно сказать, что ZKGrails 2 привносит на предприятие ряд jQuery-подобных API-интерфейсов, обеспечивая полную совместимость со слоем Grails ORM. Сочетание знакомого синтаксиса jQuery и мощного стека Grails позволяет повысить производительность при разработке корпоративного приложения на другом уровне. Попробуйте сами!