Главная
Блог разработчиков phpBB
 
+ 17 предустановленных модов
+ SEO-оптимизация форума
+ авторизация через соц. сети
+ защита от спама

Применение javascript в Vaadin 7 либо как я сэкономил $490 на графиках (часть 1)

Anna | 2.06.2014 | нет комментариев
В этой статье я расскажу вам как внедрял прекрасные графики в наш сервис учета коммунальных службDom24x7 и с какими задачами и неудобствами пришлось столкнуться.

Для Vaadin 7 имеется очаровательное официальное дополнение для работы с графиками, но задача в том, что оно не бесплатное и стоит примерно $500! Таких денег мне тратить не хотелось, и я решил поискать альтернативу из бесплатного, но, к сожалению, все что я обнаружил меня абсолютно не удовлетворяло по качеству и тогда я вернул свое внимание на официальное дополнение для работы с графиками и решил исследовать его повнимательнее.

Оказалось, что это дополнение каждого лишь оболочка для красивой javascript библиотеки Highcharts, которую, о Диво, дозволено было применять даром в некоммерческих планах, правда есть еще красивая альтернативная библиотека Amcharts, но все же решил остановиться на предыдущей.

Кстати, разработчики Vaadin поясняют, отчего так дорого просят за дополнение по работе с графиками тем, что им доводится приобретать корпоративную лицензию.

Определившись с библиотекой осталось решить вопрос, как же все таки ее подключить к своему плану?
Статья состоит из 2-х частей. Первая часть это перевод статьи о том как подключать javascript библиотеки к vaadin планам, а вторая часть расскажет о там, как я, применяя полученные познания, написал библиотеку для отображения графиков.
Итак…

Vaadin 7 любит JavaScript компоненты

Применять JavaScript компоненты в Vaadin 7 легко. Безусловно, у Vaadin теснее давным-давно имеется способWindow.executeJavaScript(), но у этого способа достаточно много ограничений. Скажем, если у вас имеются зависимости с Javascript файлами, то трудно гарантировать их загрузку до вызова.

Как и другие Vaadin 7 GWT компоненты, JavaScript компонент состоит из 4 частей:

  • серверный компонент (server-side component),
  • состояние (state),
  • коннектор (connector)
  • и клиентский компонент – виджет (client-side widget).

В примитивных примерах (скажем, как в рассмотренном ниже), проще объединить коннектор и клиентский виджет. Впрочем, объединяя готовый javacsript виджет с функциональностью Javascript компонента, вы пишите только сам коннектор, тот, что будет руководить виджетом (являющейся библиотекой).

Примерно все, что вы можете делать с GWT виджетом, вы так же можете сделать и с виджетом JavaScript. Ниже мы разглядим примитивный пример, Дабы показать, как работают разный его части.

В рассмотренном ниже примере мы легко выведем на экран сообщение.

Серверная сторона
@JavaScript({ "js_label.js" })
public class JsLabel extends AbstractJavaScriptComponent {

    public JsLabel(String xhtml) {
        getState().xhtml = xhtml;
    }

    @Override
    protected JsLabelState getState() {
        return (JsLabelState) super.getState();
    }
}

Как мы видим, наш компонент дюже примитивный. В нем объявлен только конструктор с одним параметром – текстом, тот, что нужно вывести на экран. Данный параметр передается на клиентскую сторону при помощи всеобщего состояния. Значимая часть кода – это аннотация, которая расширяет класс JsLabel.

JavaScript информирует Vaadin о всяких JavaScript файлах, которые требуются вашему виджету. В нашем примере требуется только js_label.js, тот, что является реализацией клиентской стороны JsLabel. Так как мы указали относительный путь к файлу, то он должен находиться в том же самом java-пакете, что и класс JsLabel. Таким образом, в моем IDE, js_label.js и JsLabel.java расположены рядом. Если нужно, то дозволено перечислить несколько файлов в виде строкового массива в аннотации JavaScript, также путь дозволено указать в формате URL.

AbstractJavaScriptComponent – класс, тот, что мы расширяем. Он разрешает сделать двухстороннюю связь между JavaScript и Vaadin, с поддержкой объекта всеобщего состояния.

Обратите внимание на то, что Vaadin знает, какой класс состояния применяется, потому что мы переопределяем способ getState() для работы с нашим классом всеобщего состояния. Такое поведение не является особенностью JavaScriptComponent, а свойственно для всех компонентов Vaadin 7.

Определение состояния
public class JsLabelState extends JavaScriptComponentState {

    public String xhtml;
}

Исключительная цель объекта состояния в том, Дабы передавать данные между серверной и клиентской стороной, причем в обе стороны. Для его создания нужно расширить JavaScriptComponentState.

Дабы сберечь наш код лаконичным и симметричным со стороны JavaScript (как вы ниже увидите), я решил определить поле xhtml как публичное (public). Нам ничего не мешает добавить туда getter и setter, но так как класс состояния предуготовлен только для передачи данных и в нем отсутствует какая-либо логика (и не должна там присутствовать), то getter и setter для полей в нашем случае не необходимы.

Примечание: дозволено класс состояния сделать внутренним классом JsLabel для сокращения кода. Задача с таким подходом в том, что встроенные классы состояния работают только с компонентами JavaScript. Всеобщие классы состояния для GWT не работают как внутренние классы, за исключением некоторых специальных случаев. Помимо того, если мы по каким-либо причинам не хотим вызывать способ getState(), то не забываем вручную вызывать способ markAsDirty() всякий раз, когда изменяем состояние. Следственно, Дабы не было путаницы, настойчиво рекомендуется классы состояния удерживать отдельно от компонента.

Клиентская сторона
org_vaadin_blog_JsLabel = function() {
    var e = this.getElement();

    this.onStateChange = function() {
        e.innerHTML = this.getState().xhtml; 
    }
}

Именно данный js_label.js файл мы указали в аннотации JavaScript ранее. Тут необходимо обратить внимание на две вещи: имя функции и применение this.

Имеется соглашение в именовании, которому мы обязаны следовать. Это помогает Vaadin верно обнаружить JavaScript функцию для ее вызова, когда наш компонент применяется. Мы берем полное имя класса серверного компонента и легко заменяем точки на подчеркивание. В нашем случае JavaScript функция должна именоваться org_vaadin_blog_JsLabel. Не волнуйтесь, если вы ошиблись в наименовании, то Vaadin подскажет как (по его суждению) должна именоваться функция.

Дополнительную информацию дозволено прочитать в JavaDoc класса AbstractJavaScriptComponent (ссылка на документацию alpha 3′s JavaDoc. В примере мы используем только this.getElement() для приобретения элемента DOM, тот, что был сделан для нашего Vaadin виджета и this.getState() – для приобретения доступа к состоянию. В нашем случае мы читаем XHTML строку из состояния и вставляем его в DOM элемент innerHTML. К сожалению, компонент состояния не может быть обновлен на стороне заказчика так, Дабы эти метаморфозы были получены на стороне сервера.

Как упоминалось выше, данный файл — коннектор и виджет единовременно. Обязанность коннектора состоит в том, Дабы связать состояние и виджет. В нашем случае распределение только усложнило бы код, следственно мы объединили виджет и коннектор в одном javascript файле.

Обратите внимание, что всякие getters и setters в состоянии не могут применяться на стороне JavaScript и мы трудимся с полями как с обыкновенными свойствами. Это правильно даже в том случае, когда вы очевидно написали способы доступа в своем классе состояния.

Таким образом, мы имеем комфортный механизм соединения JavaScript компонента с существующими виджетами (js библиотеками). Это комфортно, когда вы обладаете JavaScript и хотите запрограммировать небольшие и стремительные функции на стороне заказчика. Но GWT, все же, лучшая альтернатива для создания больше трудных и верных компонентов для Vaadin.

В дальнейшей статье я детально опишу как, применяя полученные познания, я сотворил оболочку javascript библиотеки для работы с графиками Highcharts.

Источник: programmingmaster.ru

Оставить комментарий
Форум phpBB, русская поддержка форума phpBB
Рейтинг@Mail.ru 2008 - 2017 © BB3x.ru - русская поддержка форума phpBB