Использование примеров в Cuba Platform

Вопросы и проблемы
#1

Добрый день,
Подскажите пожалуйста, как запускать скаченные примеры для Cuba Platform, есть-ли какая инструкция по шагам?

Например:

  1. скачал пример с OrgChart
  2. Создать новый проект Cuba.platform
  3. Закрыть Cuba.platform
  4. Копировать распакованый архив в директорию с новым проектом. Подтвердить перезапись файлов.
  5. Запустить Cuba.platform и открыть проект, который был создан ранее
  6. Выполнить команду: Run Cuba Application

Но это не работает, подскажите пожалуйста как правильно это делать.
Спасибо

#3

Добрый день!

Можете уточнить, Вы хотите использовать библиотеку OrgChart в CUBA приложении?

#4

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

#5

В CUBA можно обарачивать JavaScript библиотеку в компонент пользовательского интерфейса, для этого можно использовать JavaScriptComponent или попытаться полностью обернуть JS библиотеку компонентом на Java (см. Подключение JavaScript библиотеки)

В данном случае можно воспользоваться JavaScriptComponent, чтобы посмотреть как работает библиотека.
Я скачал исходники последней версии OrgChart и сделал пример, который написал автор в codepen.io.

Следуя примеру в документации необходимо определить зависимости для компонента. Для этого положим JS и CSS зависимости в папку web/web/VAADIN:
image

orgchart-connector.js в основном повторяет код описанный в документации и отличается только созданием самого org chart.

orgchart-connector.js 
com_company_demorg_web_screens_Test = function() {
    var connector = this;
    var element = connector.getElement();
    element.innerHTML = '<div id="chart-container"></div>'

    var dataSource;

    connector.onStateChange = function() {
        var state = connector.getState();
        var data = state.data;

        if (data.content) {
            var content = JSON.parse(data.content);
            createOrgChart(content);
        }
    }

    function createOrgChart(content) {
        var oc = $('#chart-container').orgchart({
          'data' : content,
          'nodeContent': 'title'
        });
    }
}

В дескриптор экрана добавляем jsComponent:

<layout>
    <jsComponent id="orgChart"
                 initFunctionName="com_company_demorg_web_screens_Test"
                 height="400px"
                 width="400px">
        <dependencies>
            <dependency path="webjar://jquery:jquery.min.js"/>
            <dependency path="vaadin://orgchart-connector.js"/>
            <dependency path="vaadin://jquery.orgchart.min.js"/>
            <dependency path="vaadin://jquery.orgchart.min.css"/>
        </dependencies>
    </jsComponent>
</layout>

OrgChart требует для работы jQuery, который поставляется CUBA в виде web jar. Далее в контроллере экрана мы создаём объект состояния для нашего компонента и заполняем его данными, которые придут в onStateChange функции orgchart-connector.js.

Контроллер экрана 
@Inject
private JavaScriptComponent orgChart;

@Subscribe
public void onInit(InitEvent event) {
    OrgChartState state = new OrgChartState();
    state.content = "{\n" +
            "     \"name\": \"Lao Lao\",\n" +
            "     \"title\": \"general manager\",\n" +
            "     \"children\": [\n" +
            "       { \"name\": \"Bo Miao\", \"title\": \"department manager\" },\n" +
            "       { \"name\": \"Su Miao\", \"title\": \"department manager\",\n" +
            "         \"children\": [\n" +
            "           { \"name\": \"Tie Hua\", \"title\": \"senior engineer\" },\n" +
            "           { \"name\": \"Hei Hei\", \"title\": \"senior engineer\",\n" +
            "             \"children\": [\n" +
            "               { \"name\": \"Pang Pang\", \"title\": \"engineer\" },\n" +
            "               { \"name\": \"Xiang Xiang\", \"title\": \"UE engineer\" }\n" +
            "             ]\n" +
            "            }\n" +
            "          ]\n" +
            "        },\n" +
            "        { \"name\": \"Hong Miao\", \"title\": \"department manager\" },\n" +
            "        { \"name\": \"Chun Miao\", \"title\": \"department manager\" }\n" +
            "      ]\n" +
            "    }";
    orgChart.setState(state);
}

class OrgChartState {
    public String content;
}

Результат:
image

Полный пример можно посмотреть здесь: demorg.zip (94.3 КБ)

#7

Спасибо