В этой статье я расскажу вам, как я внедрил красивые графики в наш сервис учета коммунальных услуг.
Дом24x7 и с какими проблемами и неудобствами им пришлось столкнуться.
В Vaadin 7 есть отличное официальное дополнение для работы с графиками, но проблема в том, что оно не бесплатное и стоит почти 500 долларов! Мне не хотелось тратить такие деньги, и я решил поискать бесплатную альтернативу, но, к сожалению, все, что я нашел, меня совершенно не удовлетворило по качеству, и тогда я вернул свое внимание к официальному добавлению.
-за работу с графиками и решил изучить ее повнимательнее.
Оказалось, что это дополнение — всего лишь обертка для отличной javascript-библиотеки.
Высокие графики , который, о чудо, можно было бы бесплатно использовать в некоммерческих проектах (что на данный момент и является нашим проектом, хотя когда его статус изменится, я буду рад приобрести коммерческую лицензию), хотя еще есть отличная альтернативная библиотека Амчартс , но все же решил остановиться на предыдущем.
Кстати, разработчики Vaadin объясняют, почему они берут такую высокую цену за графическую надстройку, тем, что им приходится приобретать корпоративную лицензию.
Определившись с библиотекой, остался единственный вопрос: как подключить ее к своему проекту? Статья состоит из двух частей.
Первая часть — это перевод статьи о том, как подключить javascript-библиотеки к проектам vaadin, а вторая часть расскажет, как я, используя полученные знания, написал библиотеку для отображения графиков.
Так…
Vaadin 7 любит компоненты JavaScript
Использовать компоненты JavaScript в Vaadin 7 очень просто.Конечно, у Ваадина уже давно есть метод. Окно.
executeJavaScript() , но этот метод имеет довольно много ограничений.
Например, если у вас есть зависимости с файлами Javascript, сложно гарантировать, что они загрузятся до вызова.
Как и другие компоненты Vaadin 7 GWT, компонент JavaScript состоит из 4 частей:
- серверный компонент,
- государство (государство),
- разъем
- и клиентский компонент — виджет (клиентский виджет).
Почти все, что вы можете сделать с помощью виджета 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 как общедоступное.
Ничего не мешает нам добавить туда геттер и сеттер, но поскольку класс состояния предназначен только для передачи данных и не содержит никакой логики (и не должен там присутствовать), то и геттер и сеттер для полей в нашем случае не нужны .
Примечание: Вы можете сделать класс состояния внутренним классом JsLabel, чтобы сократить код. Проблема этого подхода в том, что встроенные классы состояний работают только с компонентами JavaScript. Классы общего состояния для GWT не работают как внутренние классы, за исключением некоторых особых случаев.
Кроме того, если по каким-то причинам мы не хотим вызывать метод getState(), то не забываем вручную вызывать метод markAsDirty() каждый раз, когда меняем состояние.
Поэтому, чтобы избежать путаницы, настоятельно рекомендуется хранить классы состояний отдельно от компонента.
Сторона клиента
org_vaadin_blog_JsLabel = function() {
var e = this.getElement();
Теги: #dom24x7 #vaadin #java #JavaScript #highcharts #Разработка сайтов #java
-
Каньон
19 Oct, 24 -
Креольские Языки
19 Oct, 24 -
Xronos - Агрегатор
19 Oct, 24 -
Курс Пиксель-Арта 2.
19 Oct, 24
