Как — jMaki События

В техническом совете от 27 января 2007 г. « Введение в jMaki» была представлена jMaki , облегченная среда для создания приложений Web 2.0 с использованием технологий, основанных на стандартах, таких как CSS, HTML и JavaScript. Помимо других функций, платформа jMaki делает доступными виджеты из популярных наборов инструментов JavaScript, таких как Dojo, Yahoo, Scriptaculous и Google, так, чтобы это было знакомо разработчикам Java-технологий, PHP или Phobos. Подсказка кратко обсудила компоненты в jMaki и показала несколько примеров использования инфраструктуры для встраивания функциональности Web 2.0 в приложение. В нем также кратко описаны механизм событий фреймворка и Glue, ключевая функция в механизме событий jMaki.

Следующий совет расширяет обсуждение механизма событий в jMaki. Вы узнаете больше о концепциях, лежащих в основе механизма событий jMaki, и о том, как использовать его для простого взаимодействия с виджетами. Например, рассмотрим приложение, в котором пользователь нажимает на дату в виджете календаря, и это событие заставляет другой виджет, такой как комбинированный список, обновлять или загружать различные данные. Или подумайте о приложении, в котором выбор значения в виджете со списком определяет значения, отображаемые в таблице. Или, может быть, приложение, в котором нажатие на виджет загружает службу, такую ​​как блог, в другой виджет, такой как виджет таблицы. Использование механизма событий jMaki делает эти операции простыми и понятными.

Обзор событий jMaki

События в jMaki обрабатываются чем-то, что называется Glue. jMaki Glue — это мощная функция, которая позволяет компонентам JavaScript общаться друг с другом. Вы можете использовать Glue в своем веб-приложении для реализации связи между виджетами. Однако любой компонент JavaScript может использовать всю мощь jMaki Glue.

Давайте начнем с простого примера, который использует клей. Предположим, у вас есть приложение, которое отображает две кнопки и две таблицы на странице, как показано на рисунке 1.

[img_assist | nid = 2984 | title = | desc = Рисунок 1. Веб-страница, отображающая две кнопки и две таблицы | link = нет | align = нет | width = 626 | height = 145]

Первая кнопка с меткой «выбрать строку 2» выбирает вторую строку обеих таблиц, как показано на рисунке 2 , а вторая кнопка с меткой «таблица yahoo: выбрать строку 2» выбирает только вторую строку второй таблицы.

[img_assist | nid = 2986 | title = | desc = Рисунок 2. Что происходит, когда вы нажимаете кнопку выбора строки 2 | link = none | align = none | width = 643 | height = 198]

Вот код, который позволяет взаимодействие:

<a:widget name="yahoo.button"
     value="
        {label : 'select row 2',
        action : {topic : '/table/select', message: {targetId: 'bar'}}}"/>

   <a:widget name="yahoo.button"
     value="
        {label : 'select row 2 in yahoo table',
        action : {topic : '/mytable/select', message: {targetId: 'bar'}}}"/>

   <a:widget name="dojo.table"
   value="{columns : [
        { label : 'Title', id : 'title'},
        { label :'Author', id : 'author'},
        { label : 'ISBN', id : 'isbn'},
        { label : 'Description', id : 'description'}
        ],
        rows : [
        { title : 'Book Title 1',
          author : 'Author 1',
          isbn: '4412',
          description : 'A Some long description'},
        { id : 'bar',
          title : 'Book Title 2',
          author : 'Author 2',
          isbn : '4412',
          description : 'A Some long description'}
        ]
        }" />

<a:widget name="yahoo.dataTable"
   subscribe="['/table', '/mytable']"
   value="{columns : [
        { label : 'Title', id : 'title'},
        { label :'Author', id : 'author'},
        { label : 'ISBN', id : 'isbn'},
        { label : 'Description', id : 'description'}
        ],
        rows : [
        { title : 'Book Title 1',
          author : 'Author 1',
          isbn: '4412',
          description : 'A Some long description'},
        { id : 'bar',
          title : 'Book Title 2',
          author : 'Author 2',
          isbn : '4412',
          description : 'A Some long description'}
        ]
        }" />

Обратите внимание, что в примере кода есть пользовательские теги ajax, которые переносят четыре виджета: два для виджетов кнопок Yahoo, один для виджета таблицы Dojo и один для виджета таблицы Yahoo. Также обратите внимание, что теги для обоих виджетов кнопок содержат actionатрибут:

action : {topic : '/table/select' ...

В jMaki все обертки таблиц подписываются на общую тему «/ table», а также на тему, которая задает конкретную таблицу (например, «dojo / table»). Обратите внимание, что тег для виджета таблицы Dojo содержит subscribeатрибут:

subscribe="['/table', '/mytable']" ...

В обоих случаях виджеты подписываются на темы, которые публикуются виджетами кнопок. Более конкретно, один виджет таблицы подписывается на общие темы ( "/table"и "/dojo/table"), а другой — на общую тему ( "/table") и пользовательскую тему ( "/mytopic") для этого экземпляра таблицы.

Это все, что вам нужно написать для общения этих виджетов. jMaki Glue обрабатывает взаимодействие виджетов с виджетами без необходимости писать какой-либо дополнительный код JavaScript.

Механизм публикации / подписки

Так что же такое клей? Это программный подход к обработке событий в jMaki на основе механизма публикации / подписки. Механизмы публикации / подписки широко используются в системах обмена сообщениями. В jMaki есть производители событий (также называемые издателями) и потребители событий (также называемые подписчиками). Виджеты могут быть как производителями, так и потребителями. Когда событие происходит в виджете, являющемся производителем, он публикует уведомление об этом событии в теме. Тема — это строка или имя, которое связывает производителя события с потребителями этого события и позволяет производителю и потребителям взаимодействовать асинхронно и независимо друг от друга. Виджеты, которые заинтересованы в получении уведомлений о событиях, опубликованных в этой теме, могут зарегистрироваться, чтобы стать пользователями этой темы. Для этого они подписываются на эту тему.

Большинство виджетов в jMaki публикуют события в темах, основанных на некоторых действиях. Например, пользователь, выбирающий строку в таблице, или нажимающий на кнопку, или расширяющий узел дерева, может привести к тому, что соответствующий виджет публикует уведомление, то есть событие в теме. Некоторые виджеты, такие как jMaki dcontainerявляются потребителями и ожидают получения уведомлений о событиях, говорящих им о том, чтобы что-то сделать в ответ, например, загрузить контент с другой страницы, обновить строки в таблице или добавить узел в дерево. Уведомление включает в себя данные, идентифицирующие виджет производителя, и любые данные в виджете, которые полезны для потребителя. Каждый потребитель получает уведомление о событии вместе с опубликованными данными. Используя этот механизм, любой виджет производителя может «общаться» с любым потребительским виджетом (или набором потребительских виджетов) в слабосвязанной форме.

Использование публикации / подписки

Существует два способа использования механизма публикации / подписки jMaki: (1) посредством действий, которые представляют декларативный подход, или (2) посредством программных событий. Оба подхода используют одну и ту же реализацию и поэтому ведут себя одинаково.

действия

Действия — это способ определения производителя событий в декларативной форме. Этот подход полезен, когда действие простое или прямое. Рассмотрим предыдущий пример. Вспомните, что вы хотите выбрать вторую строку обеих таблиц, когда пользователь нажимает кнопку «выбрать строку 2».

Здесь снова есть тег для виджета кнопки:

<a:widget name="yahoo.button"
     value="
        {label : 'select row 2',
        action : {topic : '/table/select', message: {targetId: 'bar'}}}"/>

Виджет кнопки использует actionсвойство для публикации в '/table'теме команды '/select'и полезной нагрузки targetId: 'bar'.

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

• Названия тем. По умолчанию имена тем начинаются с косой черты, за которой следует название набора инструментов (например, jmaki, dojo, yahoo и google), а затем косая черта, за которой следует имя виджета (например, таблица, дерево или аккордеон). Например, имя темы таблицы dojo по умолчанию равно «/ dojo / table». Обратитесь к документации виджета jMaki, чтобы узнать название темы, по которой виджет будет публиковаться по умолчанию. Однако вы можете переопределить имя темы по умолчанию, а поскольку имя темы является строкой, вы можете установить для нее любую строку. Для виджета кнопки Yahoo имя темы установлено на «таблица».
• Команды. Многие виджеты являются потребителями событий и поэтому содержат код обработчика событий. Обработчики событий в коде виджета выполняют обычные операции с виджетом. Набор поддерживаемых операций указывается на страницах модели jMaki Data Event. В документации jMaki операции называются командами. Команды зависят от типа виджета. Имя команды добавляется в конец имени темы, и по соглашению это строка, которая следует за последней косой чертой в имени темы. Для виджета кнопки Yahoo опубликованной командой является «выбрать», и она следует за косой чертой после названия темы «таблица».
• Payloads. Когда виджет публикуется в теме, он указывает название темы и полезную нагрузку. Полезная нагрузка — это данные, которые виджет публикует в теме. Виджет кнопки Yahoo публикует полезную нагрузку targetId: 'bar'.

Здесь снова есть тег для виджета таблицы Yahoo:

<a:widget name="yahoo.dataTable"
      subscribe="['/table', '/mytable']"
      value="{columns : [
        { label : 'Title', id : 'title'},
        { label :'Author', id : 'author'},
        { label : 'ISBN', id : 'isbn'},
        { label : 'Description', id : 'description'}
        ],
        rows : [
        { title : 'Book Title 1',
          author : 'Author 1',
          isbn: '4412',
          description : 'A Some long description'},
        { id : 'bar',
          title : 'Book Title 2',
          author : 'Author 2',
          isbn : '4412',
          description : 'A Some long description'}
        ]
       }" />

Действия основаны на коде, который уже существует в каждом виджете. Базовый код устанавливает обработчики событий, которые можно использовать через свойство action или напрямую. Когда виджет инициализируется, тема, такая как /table/select, связана базовым кодом с функцией, которая находится в коде виджета.

Если вы изучите модели данных jMaki, вы заметите набор свойств, общих для всех моделей. Одним из таких свойств является id. Это свойство используется для идентификации элемента, такого как вкладка, строка таблицы или узел дерева. Некоторые из других общих свойств являются label, hrefи action. Обратите внимание, что вторая строка таблицы имеет идентификатор 'bar'(если свойство id отсутствует, jMaki генерирует для вас идентификатор) и напомните, что полезная нагрузка, опубликованная виджетом кнопки Yahoo для selectсобытия, равна targetId: 'bar'. Это предназначается для второй строки таблицы Yahoo, когда кнопка Yahoo выбрана.

Программные события

В некоторых случаях действие, которое вы хотите выполнить в ответ на событие, не так просто, как выделение строки в таблице. Например, вы можете захотеть, чтобы действие ответа получало данные из базы данных, а затем использовало данные для обновления таблицы. Для этого вам нужно использовать программный интерфейс Glue, который, как и подход к действию, основан на механизме публикации / подписки. Фактически, действия используют Glue, но прозрачны для вас как разработчика приложения. Чтобы использовать подход программных событий, вы обычно добавляете некоторый код в файл JavaScript с именем glue.js. Файл загружается фреймворком jMaki по умолчанию. Размещение кода JavaScript в glue.jsфайле делает его доступным для всего приложения и способствует отделению кода JavaScript от HTML, XML и другой разметки в приложении.

Давайте использовать подход Programmatic Events, чтобы расширить предыдущий пример. В частности, давайте добавим кнопку на страницу и используем кнопку, чтобы добавить строку в таблицу.

Вот код для новой кнопки:

<a:widget name="yahoo.button"
     value="
        {label : 'add row',
        action : {topic : '/mytopic'}}"/>

Вам также необходимо добавить слушателя в тему «/ mytopic», который добавит строку данных в таблицу. Добавьте слушатель или обработчик в glue.jsфайл. Среда выполнения jMaki добавит этот новый обработчик во внутреннюю хэш-карту для тем при загрузке страницы.

 jmaki.subscribe("/mytopic", function(args) {
       jmaki.log("in mytopic");
       var row = { id : 'new',
                   title : 'Book Title 3',
                   author : 'Author 3',
                   isbn : '4413',
                   description : 'A Some long description'};
       jmaki.publish("/table/addRow",{value: row});
   });

Здесь данные строки жестко закодированы, но они могут поступать из базы данных. jmaki.publishAPI используется для передачи данных в эту тему '/table'. Обе таблицы в этом примере подписываются на эту тему, поэтому обе будут добавлять строку при нажатии кнопки.

На рисунке 3 показано, как выглядит страница после нажатия новой кнопки с надписью «Добавить строку».

[img_assist | nid = 2988 | title = | desc = Рисунок 3. Кнопка, которая добавляет строку в таблицу | link = none | align = none | width = 686 | height = 180]

Цепные события

Давайте посмотрим на последний пример. Предположим, вы хотели, чтобы новая кнопка в предыдущем примере добавила строку в таблицы, а также выбрала новую строку. Для этого вам не нужно менять теги. Вместо этого вам нужно только обновить обработчик в glue.jsфайле. Вот как выглядит обновленный код обработчика:

jmaki.subscribe("/mytopic", function(args) {
       jmaki.log("in mytopic");
       var row = { id : 'new',
                   title : 'Book Title 3',
                   author : 'Author 3',
                   isbn : '4413',
                   description : 'A Some long description'};
       jmaki.publish("/table/addRow",{value: row});
       jmaki.publish("/table/select", {targetId: 'new'});
   });

Это пример того, как связывать события в jMaki. Вы объединяете в цепочку публикацию двух событий: событие, которое приводит к добавлению строки в таблицу, и событие, которое выбирает добавленную строку.

На рисунке 4 показано, как выглядит страница после нажатия кнопки добавления строки.

[img_assist | nid = 2989 | title = | desc = Рисунок 4. Кнопка, которая добавляет строку в таблицу и выбирает строку | link = none | align = none | width = 685 | height = 171]

Вы можете скачать приложение , отображающее страницу, показанную на рисунке 4, и попробовать его самостоятельно.

Дальнейшее чтение

Пример jMaki getwidgetdataявляется более полным примером использования клея в jMaki. В этом примере показано, как получить данные из виджета с помощью обработчика и как передать данные на сервер и на другую страницу приложения. Пример jMaki loadtableпоказывает, как использовать действия и код Glue для управления виджетом таблицы. Оба примера включены в отдельные пакеты, jmaki-java-1.1.zipи их jmaki-php-1.1.zipможно загрузить со страницы загрузок jMaki .

Для получения дополнительной информации о механизме публикации / подписки см. Обработка событий виджета jMaki с использованием механизма публикации и подписки .

Также см. Блог « Fun with jMaki: Использование службы геокодера Yahoo вместе с выпадающим списком Dojo» , в котором рассказывается о некоторых возможностях jMaki Glue в качестве контроллера.