Статьи

Grails & Dojo: Часть I

Январь 31, 2018

Я работал над интеграцией Grails и недавно выпущенного Dojo 1.0.2 . Мне особенно интересны компоненты Dijit , которые теперь являются частью Dojo. Кажется, это простой и простой способ добавить некоторые AJAX-виджеты в веб-приложение. Grails поставляется с плагинами для распространенных сред AJAX — YUI, Dojo 0.4.2 (?) И Prototype. Кто-то даже выпустил изящный плагин AJAX «dummies», называемый richUI .

Моя главная причина для этого состоит в том, чтобы создать что-то простое и естественное, но все же очень мощное. Я хочу использовать новые компоненты Dijit, чего не делают нынешние плагины Grails AJAX. Я опираюсь на свой опыт работы с системой плагинов Grails из эксперимента, который я провел этим летом с интеграцией OpenLaszlo 4 с Grails. Я даже выступил с докладом о проведении RIA с использованием Grails и OL4 в Атланте JUG в июле. К сожалению, после работы с OL4 все больше и больше я решил, что это просто не подходит для Grails. Но я отвлекся …

Давайте углубимся в глубину и посмотрим, как Grails и Dojo работают с данными в формате JSON. Два компонента Dojo, которые мы будем использовать, — это просмотрщик миниатюр изображений, который поддерживается объектом данных JSON.

Приложение: Grallery

Я искал хорошее приложение для размещения нескольких фотографий в Интернете, AKA — «веб-фотогалерея». У меня есть десятки тысяч цифровых снимков, которые я сделал за эти годы, поэтому использование Picasa или какого-либо подобного сервиса не могло быть и речи (интересно, сколько будет стоить разместить 65 Гб изображений … ммм). После поиска хорошего приложения на Java для запуска на моем сервере в подвале я понял, что нет ничего такого, что могло бы иметь функции gallery2 (приложение PHP). Я подумал, что это будет идеальный маленький проект для изучения Додзё и Javascript — то, что я долго откладывал. Следовательно, Grallery родился. В течение следующих нескольких месяцев я буду публиковать блог о своих экспериментах по созданию плагина Dojo / Dijit для Grails.

Стандартный JSON, который ожидает Dojo ItemFileReadStore

{"items":[
	{
	"thumb":"/grallery/pictures/album1/thumbnails/thumbnail_pic7.jpg",
	"large":"/grallery/pictures/album1/pic7.jpg",
	"title":"pic7 comment",
	"link":""
	}
]}

Метод контроллера для генерации JSON

     def thumbsJSON = {
        def album = Album.get(params.id)
        def rootPath = '/grallery'
        def basePath = rootPath + "/" + "pictures" + "/" + album.path

        render(contentType: "text/json") {
            items {
                for (picture in album.pictures) {
                    pictures(thumb: "$basePath/thumbnails/thumbnail_$picture.filePath",
                            large: "$basePath/$picture.filePath",
                            title: "$picture.comment",
                            link: "")
                }
            }
        }
    }

Как показывалось выше, в Groovy & Grails создавать выходные данные в формате JSON смехотворно просто. Единственная «магия», которая нуждается в объяснении, это строка:

render(contentType: "text/json") {

Приведенная выше строка указывает на использование JSON Builder, который принимает закрытое замыкание в качестве параметра. Пойди сюда для хорошего учебника по строителям в Groovy.

GSP для Dojo ItemFileReadStore

   <script type="text/javascript">
    dojo.require("dojo.data.ItemFileReadStore");
    dojo.require("dojox.image.ThumbnailPicker"); 

    function initItemStoreWidget(){
      var itemRequest = {
        query: {},
        count: 1
      };
      var itemNameMap = {
        imageThumbAttr: "thumb",
        imageLargeAttr: "large"
      };
      dijit.byId('thumbPicker2').setDataStore(imageItemStore, itemRequest, itemNameMap);
    }
    dojo.addOnLoad(initItemStoreWidget);
  </script>

  <div id="thumbPicker2" dojoType="dojox.image.ThumbnailPicker"
              numberThumbs="1" isClickable="true" isHorizontal="true"></div>
   <div jsId="imageItemStore" dojoType="dojo.data.ItemFileReadStore"
             url="${createLinkTo(dir: 'album/thumbsJSON/' + album.id)}"></div>

Приведенный выше код использует ItemFileReadStore для заполнения виджета ThumbnailPicker Dojo.

Функция initItemStoreWidget используется для привязки ItemFileReadStore (данные JSON) к ThumbnailPicker.

В следующий раз

Надеюсь, эта статья разожгла ваш аппетит к магии Додзё и Грааля. В этой статье представлен сложный пример, в котором использовались JSON и DojoX, или Dojo Experimental, виджет ThumbnailPicker. Использование виджетов Dijit, таких как календари, кнопки и ползунки, очень просто, это почти скучно — как вы увидите в следующей части, которая скоро появится.

 

33
Share: