Виджеты Примеры Демо Форум Сервисы
Документация
СтартГайдыИнтеграция с другими фреймворкамиИнтеграция с Angular

Интеграция с ранним Angular

В этой статье описана интеграция Webix с Angular JS версии 2 и ниже.

Ресурсы для интеграции Webix и Angular не входят в стандартный пакет библиотеки Webix. Вы можете найти их в соответствующем GitHub репозитории.

Структура Webix-Angular приложения

Для интеграции Angular JS с Webix компонентами сделайте следующее:

  • подключите соответствующие ресурсы Angular и Webix в главном файле вашего приложения. Помните, что порядок подключения скриптов здесь играет важную роль. Ресурсы Angular должны подключаться в первую очередь
  • установите директиву ngApp в корне документа, чтобы загрузить приложение. Для удобства, задайте ей название "webixApp"
  • создайте новый модуль, используя название директивы из предыдущего шага и обязательный параметр "webix", чтобы подключить его к библиотеке Webix.
<!doctype html> <!--setting directive-->
<html lang="en" ng-app="webixApp"> 
<head>
  <meta charset="utf-8">
  <title>Webix-Angular App</title>
  <script src="js/angular.min.js"></script>
  <script type="text/javascript" src="../../codebase/webix.js"></script>
  <link rel="stylesheet" type="text/css" href="../../codebase/webix.css">
 
  <script type="text/javascript">
    var app = angular.module('webixApp', [ "webix" ]); // создаем новый модуль
    ... // логика приложения (контроллеры)
  </script>
</head>
<body>
    <!-- html код -->
</body>
</html>

Учитывая то, что логика приложения может быть сложной, лучше всего хранить контроллеры в отдельном файле(-ах):

<script type="text/javascript" src="controllers.js">

Инициализация компонентов Webix

Для работы с Angular, у Webix предусмотрена специальная директива webix-ui, которая запускает приложение. И здесь есть 2 варианта:

<div webix-ui type="space"> <!-- app html --> </div>
  • инициализация через объект конфигурации — директива используется с объектом конфигурации в качестве параметра (без дополнительной разметки). Объект конфигурации должен храниться в контроллере приложения:
<div webix-ui="config" webix-ready="doSome(root)" 
style="width: 450px; height: 300px;">

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

Лейаут с Tabbar и Multiview

<body>
  <div webix-ui type="space"> <!--создаем ряды лейаута с типом "space"-->
    <div height="35">Header { {app} }</div> <!--инициализируем шаблон Webix-->
    <div view="cols" type="wide" margin="10"> <!--инициализируем столбцы лейаута-->
        <div width="200"> 
            <input type="text" placeholder="Type here" ng-model="app">
        </div>
        <div view="resizer"></div>
        <div view="tabview">
            <div header="Tab1">
                1. Some content here
            </div>
            <div header="Tab2">
                2. Other content here
            </div>
        </div>
    </div>
    <div height="35">Footer</div>
  </div>
</body>

Related sample: Webix-Angular:Layouts

Шаблоны input и header связаны директивой ng-model.

Вы можете посмотреть как инициализировать эти же компоненты в окружении Webix: layout, resizer, tabview, template

Компонент Datatable

Webix datatable — это комплексный виджет для работы с большими наборами данных. Таблица из примера ниже состоит из 4 столбцов. Для нее установлена автонастройка высоты, которая будет зависеть от контента, а также возможность выбирать ряды. У каждого столбца есть уникальный ID, метод сортировки, и хедер, который определяется через innerHTML.

<div style="width:750px;">
 <div webix-ui view="datatable" webix-data="records" 
 autoheight="true" select="row">
   <div view="column" id="rating" sort="int" css="rating">Rating</div>
   <div view="column" id="year"   sort="int">Year</div>
   <div view="column" id="votes"  sort="int">Votes</div>
   <div view="column" id="title"  sort="string" fillspace="true">Title</div>  
 </div>
</div>

Related sample: Webix-Angular:Grid

Стоит учитывать, что любая HTML разметка вне блока "webix-ui" обрабатывается обычным образом. А теги с атрибутом webix-ui (div, p) создают Webix компоненты.

О загрузке данных читайте в этой статье.

Компонент Chart

Webix chart — это удобный инструмент для визуализации данных. Для диаграммы из примера ниже установлен тип bar. Она демонстрирует рейтинг продаж и отображается без границ.

<div style="width:500px; height:200px;">
  <div webix-ui view="chart" id="mychart" webix-data="lines" 
  type="bar" value="#sales#" borderless="true"></div>
</div>

Related sample: Webix-Angular: Chart

Стоит учитывать, что любая HTML разметка вне блока "webix-ui" обрабатывается обычным образом. А теги с атрибутом webix-ui (div, p) создают Webix компоненты.

О загрузке данных читайте в этой статье.

Отображение массивов

При интеграции Webix в Angular вы можете отображать как массивы компонентов, так и массивы в конфигурации компонента с директивой Angular ng-repeat.

Отображение массива с одинаковыми компонентами Webix

Директива webix-ui может использоваться вместе с директивой ng-repeat фреймворка для отображения массива компонентов:

<div webix-ui>
    <div ng-repeat="chart in charts" view="chart">
</div>

где chart — это переменная из области видимости, которая включает массив конфигураций компонентов:

$scope.charts = [
    { data: chart_data, series: [...] },
    { data: chart_data, series: [...] }
  ];

Отображение массивов внутри конфигурации компонента

Массивы в конфигурации компонента помечаются свойством stack. Внутри обозначения массива вы можете использовать свойство ng-repeat для итерации по его элементам, и указать информацию которую нужно отобразить:

<config stack='series'>
    <config ng-repeat="serie in chart.series" value="#.template#"></config>
</config>

где series — это свойство переменной chart, которая содержить объект с конфигурацией виджета, и включает массив с настройками для серий:

{ 
    data: chart_data, 
    series: [ 
        { template: "sales3", color: "#ff8" }, 
        { template: "sales", color: "#f8f" }
    ] 
}

Related sample: Webix-Angular:Using ng-repeat

Отображение сложных лейаутов

Интеграция Webix-Angular позволяет создавать сложные приложения с использованием связанных между собой Webix компонентов.

Детали можно узнать в этом примере: Webix-Angular:Complex Initialization

Дополнительные материалы для изучения

Инициализация из объекта конфигурации

Инициализация через объект конфигурации помогает избавиться от лишней разметки (и соответствующих директив). А код всего приложения будет находиться в контроллере Angular.

Вам нужно указать только пару строчек:

<body ng-controller="webixTestController">
    <div webix-ui="config" webix-ready="doSome(root)"></div>
</body>
  • Этот способ напоминает паттерн инициализации приложения в Webix. Можно думать об объекте конфигурации, как о JSON, который мы передаем в конструктор webix.ui при разработке на Webix
  • Обработчики событий присваиваются с помощью директивы webix-ready. Она вызывает функцию контроллера, которая принимает config root в качестве параметра.

Код контроллера 

var app = angular.module('webixApp', [ "webix" ]);
 
app.controller("webixTestController", function($scope){
    var header = { type:"header", template:"App header" };
    var left = { view:"list", id:"a1", select:true, data:["One", "Two", "Three"] };
    var right = { template:"Right area", id:"a2" };
 
    // объект конфигурации
    $scope.config = {
        isolate:true, rows:[ // два ряда
            header,
            { cols:[ 
                left,  // компонент list
                { view:"resizer" }, // компонент resizer
                right // компонент template
            ]}
        ]
    };
};

Related sample: Webix-Angular:Initializing from Config

  • В примере выше мы используем такие компоненты как list, template, layout, resizer line
  • Верхний родительский компонент объекта конфигурации (здесь это лейаут с двумя рядами) должен включать свойство isolate. Это нужно для того, чтобы избежать путаницы с ID в тех случаях, когда на странице уже существует другой объект с таким же ID. Подобный результат можно получить при использовании webix миксина IdSpace.

Обработка событий с помощью директивы "webix-ready"

Директива webix-ready вызывает функцию контроллера с параметром config root. Она позволяет устанавливать обработчики событий для всех компонентов в текущей конфигурации. При инициализации из HTML разметки, используйте директиву webix-event.

<body ng-controller="webixTestController">
    <div webix-ui="config" webix-ready="doSome(root)"></div>
</body>

Root - это верхний родительский компонент в конфигурации вашего приложения. Здесь это layout с двумя рядами.

У корневого (root) компонента есть свойство isolate, которое позволяет задавать неуникальные ID его дочерним элементам. Однако при работе с обработчиками событий, вам необходимо ссылаться на такой дочерний элемент через его root. См. пример ниже:

Код контроллера 

app.controller("webixTestController", function($scope){
    $scope.doSome = function(root){
    var list = root.$$("a1"); // обращаемся к list через root объект
    var template = root.$$("a2"); // обращаемся к template через root
 
    list.attachEvent("onAfterSelect", function(id){
      template.setHTML(this.getItem(id).value); 
    });
 
    list.select(list.getFirstId());
  };
};

Внутри функции, которую вызывает webix-ready, ваше Webix-Angular приложение подчиняется общим правилам работы с событиями.

Наверх
© XB Software Ltd
2013-2023