Статьи

Разработайте приложение MongoDB с помощью ZK & Grails

Август 13, 2018

Вступление

В этой статье я покажу вам, как создать приложение MongoDB, используя новую версию ZKGrails,  ZKGrails 2.2 . Это приложение было разработано после приложения Simon’s  MongoMaps  также на DZone. В конце этой статьи вы сможете создать простое приложение MongoDB с ZK и Grails.

ZKGrails является частью экосистемы Grails с 2008 года. Я предполагал, что  Grails будет полноценной веб-платформой  вместо фреймворка, поддерживающего только MVC. Эта идея была движущей силой развития ZKGrails. На сегодняшний день ZKGrails является ведущим плагином из почти 1000 доступных, который поддерживает еще один уровень View / Controller, помимо GSP Grails. Также в ближайшем будущем  Grails снова превратится  из платформы веб-разработки в полноценную платформу разработки приложений. Конечно, ZKGrails также будет развиваться как  профиль RIA Grails .

Доменный класс и MongoDB

Как обычно, мы начинаем создавать приложение ZKGrails из доменной части приложения. Grails 2 поднял опорный слой постоянства за Hibernate. Слой GORM Grails 2 обеспечивает очень прозрачный способ подключения к MongoDB. Это означает, что вы можете переключаться между отображением Hibernate и MongoDB, просто меняя плагины и перенастраивая источники данных.

Я начну с создания приложения Grails, установки плагина MongoDB и указания источника данных на мой локальный экземпляр MongoDB.

$ grails create-app mongomaps
$ cd mongomaps

Найдите свой grails-app / conf / BuildConfig.groovy и добавьте:

compile ‘: mongodb: 1.1.0.GA’

в блок plugins {} для установки плагина Grails MongoDB.

//
// BuildConfig.groovy
//

plugins {
    compile ':mongodb:1.1.0.GA'
}

Также внутри BuildConfig.groovy рекомендуется установить значение true для legacyResolve, чтобы Grails могла правильно разрешать зависимости плагинов.

//
// BuildConfig.groovy
//

grails.project.dependency.resolution = {
    ...
    legacyResolve true
    ...
}

Чтобы убедиться, что плагин MongoDB установлен правильно, введите:

$ grails refresh-dependencies

Если у вас есть сообщения о том, что плагин MongoDB устанавливается, то это хорошо.

Тогда пришло время для нашего класса домена. У нас будет класс домена для хранения почтовых индексов США и их местоположения. Введите следующую команду для создания Zipcode.groovy :

$ grails create-domain-class Zipcode

Затем найдите его в grails-app / domain / mongomaps / , откройте и, в основном, скопируйте и вставьте следующие коды.

package mongomaps

class Zipcode {

    Integer pop
    String state
    List loc
    String city
  
    static transients = ['lat', 'lng']

    Double getLng() { loc[0] as Double }
    Double getLat() { loc[1] as Double }

    static constraints = {
        loc geoIndex: true
    }

    static mapping = {
        collection "maps"
    }

}

Начнем со свойств класса домена. Существует четыре свойства, сопоставленных с коллекцией «maps» MongoDB (см. Статическое сопоставление в строке 19). Свойство pop для численности населения, штат — это название штата, city — название города. Хитрый здесь — это loc , который отображается как список из 2 элементов. Предложенный в статье Саймона, у нас также есть геттеры для долготы (loc [0]) и широты (loc [1]). Оба типа Double . Свойство loc отображается правильно на долготу и широту с помощью loc geoIndex: true в блоке ограничений (строка 16-18).

Двигается рядом с настройкой наших данных , S Ource . Для экземпляра MongoDB на локальном хосте достаточно поместить следующую конфигурацию в grails-app / conf / DataSource.groovy .

//
// DataSource.groovy
//

grails {
    mongo {
        host = "localhost"
        databaseName = "grails"
    }
}

На данный момент нам, конечно же, нужен работающий экземпляр MongoDB и тестовые данные. Установка MongoDB относительно проста. Просто зайдите на http://mongodb.org, скачайте и распакуйте. Затем запустите bin / mongod –dbpath =. / Data и ваш экземпляр будет запущен.

Чтобы импортировать тестовые данные, загрузите « zips.js » со следующего URL:

https://dl.dropbox.com/u/381580/zkgrails/zips.json

и используйте утилиту MongoDB, mongoimport , для импорта файла. Не забудьте, что мы настроили имя базы данных «grails», а имя коллекции — «maps» .

Пользовательский интерфейс с ZK

Теперь вернемся к BuildConfig.groovy, чтобы установить плагин ZK для Grails. Поставьте следующую строку:

скомпилируйте «: zk: 2.2.0»

в блок plugins {} , например:

//
// BuildConfig.groovy
//

plugins {
    ...
    compile ':mongodb:1.1.0.GA'
    compile ':zk:2.2.0'
}

Также нам нужен компонент Google Map ZK (для тега <gmaps />), который можно скачать здесь:

http://www.zkoss.org/download/zkgmaps

Загрузить бинарный файл, и экстракт gmapz.jar в ./lib каталог

Затем позвольте Grails снова обновить все зависимости.

$ grails refresh-dependencies

Начиная с ZKGrails 2.1, он представил новый способ разработки приложений ZK с использованием API в стиле jQuery. ZKGrails 2.2 улучшает набор API несколькими способами, включая новую систему шаблонов пользовательского интерфейса.

Мы запускаем часть пользовательского интерфейса, создавая ZUL-файл и его Composer с помощью следующей команды:

$ grails create-zul index

В сгенерированном grails-app / zul / index.zul отредактируйте его следующим образом:

<zk xmlns="http://www.zkoss.org/2005/zul">

  <vlayout width="600px" vflex="true" apply="mongomaps.IndexComposer">

    <gmaps width="600px" vflex="true" />

    <listbox width="600px" height="280px">
      <listhead>
        <listheader label="Id"/>
        <listheader label="Name"/>
        <listheader label="State"/>
        <listheader label="Population"/>
      </listhead>
    </listbox>

    <hlayout sclass="z-valign-middle">
      <paging hflex="true" />
    </hlayout>

  </vlayout>

</zk>

Файл index.zul содержит 1. компонент карты Google ( <gmaps /> ) 2. компонент списка с 4 столбцами данных ( <listbox /> ) и 3. компонент разбиения на страницы ( <paging /> ) для управления отображением данные. Пожалуйста, обратите внимание, что мы не устанавливаем идентификатор для этих компонентов специально. Они будут управляться CSS-селекторами в стиле jQuery из связанного mongomaps.IndexComposer .

Вдохновленные Backbone.JS, мы упростили имя нашего базового класса Composer, zk.grails.Composer , чтобы сделать его более интуитивным в ZKGrails 2.2. Новое имя Composer гораздо легче запомнить, чем старое, предоставленное более старыми версиями ZKGrails. Кроме того, новый не требует каких-либо преобразований AST для добавления новых API в Composer. Ничто не должно замедлять процесс компиляции. Более того, объявление явного суперкласса делает осмысленным интеллигентство или автозаполнение в любой среде IDE.

package mongomaps

class IndexComposer extends zk.grails.Composer {

    static PAGE_SIZE = 8

    def afterCompose = { window ->

        $('listbox').template {
            listitem {
                listcell()
                listcell()
                listcell()
                listcell()
            }
        }

        $('paging') pageSize PAGE_SIZE totalSize Zipcode.count()

        redraw(0)

        $('paging').on('paging', {
            redraw $(it).activePage()
        })

        $('listbox').on('select', {
            def zipcode = $(it).object()
            $('gmaps') lat zipcode?.lat lng zipcode?.lng
        })
    }

    def redraw(page=0) {
        def list = Zipcode.list(offset: PAGE_SIZE * page, max: PAGE_SIZE)
        $('listbox').fill(list, 'listitem', [
            id:    'listcell:eq(0)',
            city:  'listcell:eq(1)',
            state: 'listcell:eq(2)',
            pop:   'listcell:eq(3)'
        ])
        $('listbox').selectedItem null
    }
}

Наш код начинается с первой строки Closure afterCompose (строка 7). Список выбирается $ (‘listbox’), и мы вызываем .template (), чтобы определить шаблон пользовательского интерфейса для него (строки 9-16).

Затем в строке 18 мы выбираем компонент разбиения на страницы с помощью $ (‘paging’) , устанавливаем свойства pageSize и totalSize . Этот вид синтаксиса, предоставляемый Groovy начиная с 1.8, выглядит действительно круто. Но не волнуйтесь, если вы не знакомы с этим синтаксисом. Использование методов доступа к свойствам также прекрасно работает здесь.

Строка 19 вызывает перерисовку (0) для отображения первой страницы данных. Этот метод извлекает страницу данных из класса домена Zipcode, а затем «заполняет» их в список, выбранный с помощью $ (‘listbox’) . Метод fill выполняет визуализацию пользовательского интерфейса, используя шаблон, определенный в строке 9-16, и автоматически связывает каждый объект Zipcode из списка с каждым компонентом listitem . Все 4 столбца данных, указанных параметром Map, содержат имена свойств Zipcode, которые являются id , городом , государством и pop соответственно (строки 34-39).

Каждый раз, когда процесс рендеринга заканчивается, выбранный элемент списка устанавливается в ноль (строка 40), чтобы не выбирать ни один элемент списка.

Вы можете найти 2 обработчика событий пользовательского интерфейса в строках 22-24 и 26-29. Первый, $ (‘paging’). On (‘paging’) , предназначен для изменения страницы. Каждый раз, когда компонент пагинации изменяется, мы извлекаем другой набор данных и повторно заполняем список. Второй, $ (‘listbox’). On (‘select’) , предназначен для обработки выбора элементов. Когда выбрано поле со списком, текущий  объект Zipcode, прикрепленный к выбранному элементу списка, можно получить с помощью $ (it) .object (), а его данные используются для обновления карты Google.

Сопоставление URL

Далее следует косметический штрих, чтобы «index.zul» отображался как страница по умолчанию. открыто 

Grails-приложение / CONF / UrlMappings.groovy

и добавьте следующую строку:

«/»(View:»/index.zul»)

в блок static mapping = {…} , например:

class UrlMappings {

    static mappings = {
        "/$controller/$action?/$id?"{
            constraints {
                // apply constraints here
            }
        }

        "/"(view:"/index.zul")
        "500"(view:'/error')
    }
}

После того, как все настроено. Убедитесь, что ваш локальный экземпляр MongoDB запущен и затем вызывается:

$ grails run-app

или попробуйте онлайн  здесь .

Некоторые вещи на заметку

  • Я использую $ (…) с именами тегов, а не ID для выбора компонентов. Это только для демонстрации. В реальном приложении мы часто определяем идентификатор компонента и используем $ (‘# id’) для его выбора.

  • Модель программирования jQuery проста. Это ctive способ мышления. Вы все еще можете делать то, что вы хотите активно с более кратким синтаксисом.

  • Механизм привязки данных в ZKGrails 2.2 значительно упрощен. Вы можете использовать его без каких-либо обязательных аннотаций. Всего 2 шага, определите шаблон и заполните . (В любом случае мы используем привязку данных ZK внизу).

Вывод

В этой статье вы увидели быстрый и простой способ создания приложения MongoDB с использованием ZK & Grails. Эта статья призвана показать, что вы можете значительно повысить производительность, используя Grails для разработки своего корпоративного приложения, по сравнению с Java. В сочетании с мощью  ZKGrails  вы обнаружите, что создание серверного AJAX-приложения — это весело и эффективно.

36
Share: