Из этой статьи вы узнаете о том, как подготовить среду для разработки на Webix, а также о возможных способах установки библиотеки.
Для простейшего приложения на Webix, вам потребуется всего лишь один HTML файл (рекомендуем HTML5 doctype) со следующими подключениями:
Пакет Webix содержит две версии:
Для разработки подойдёт любой из текстовых редакторов (Sublime, Visual Studio Code и пр.). Также вы можете включить функцию автозаполнения кода.
Чтобы подключить ссылки на webix.js и webix.css напрямую, используйте Webix CDN:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="https://cdn.webix.com/edge/webix.css"
type="text/css">
<script src="https://cdn.webix.com/edge/webix.js" type="text/javascript"/>
</head>
</html>
Этот вариант подходит только для open-source версии Webix под лицензией GPL.
Установка Webix посредством NPM позволит получать обновления как для open-source версии, так и для коммерческой версии (PRO).
GPL версия
Чтобы установить open-source версию, выполните следующую команду:
npm install webix
PRO версия
Если вы обладатель Webix PRO, вы также можете установить библиотеку с помощью NPM.
Вам необходимо зарегистрироваться в личном кабинете (секция Users).
После чего вы получите учётные данные для доступа к репозиторию:
npm config set @xbs\:registry https://npm.webix.com
npm login --registry=https://npm.webix.com --scope=@xbs --auth-type=legacy
При запросе введите следующие данные учётной записи:
User:
Password:
После чего вы сможете использовать стандартные npm команды для установки Webix PRO и комплексных виджетов в соответствии с вашей лицензией:
npm i @xbs/webix-pro
npm i @xbs/chat
npm i @xbs/diagram
npm i @xbs/docmanager
npm i @xbs/filemanager
npm i @xbs/gantt
npm i @xbs/kanban
npm i @xbs/pivot
npm i @xbs/query
npm i @xbs/reports
npm i @xbs/scheduler
npm i @xbs/spreadsheet
npm i @xbs/usermanager
// доступен к скачиванию, но более не поддерживается
npm i @xbs/querybuilder
После регистрации вы сможете установить Webix Pro и комплексные решения в соответствии с вашей подпиской. Обновления будут доступны на протяжении действия лицензии.
Чтобы получить пакет локально, необходимо:
Вы можете включить советы по работе с методами Webix, а также автозаполнение кода в вашем редакторе.
В случае импорта ES6 спецификации, автозаполнение будет работать автоматически:
import * as webix from "@xbs/webix-pro";
const t = webix.uid(); // покажет сигнатуры и типы методов Webix
Если вы используете Webix глобально, используйте следующую команду обращения (директива triple-slash):
<reference path="../../node_modules/@xbs/webix-pro/types/webix.global.d.ts" />
const t = webix.uid(); // покажет сигнатуры и типы методов Webix
Директива сообщает компилятору о необходимости подключить определения типа TypeScript для включения автозаполнения кода.
Обратите внимание, что команда должна находиться в начале файла или после других команд обращения. Если команде предшествует инструкция или объявление, она будет проигнорирована как и любой другой комментарий.
Есть три способа запустить пакетные примеры локально. Самый простой способ - перейти в корневую директорию (core), затем в папку samples и открыть необходимый пример двойным щелчком мыши. Пример откроется в новой вкладке браузера.
Как запустить примеры на локальном сервере
Вы можете использовать любой локальный сервер (напр., Apache). Укажите папку Webix как корневую директорию локального сервера и запустите его. Обычно локальный сервер доступен по localhost.
Как запустить примеры на дев сервере
Чтобы менять код в примерах и видеть соответствующие изменения, вам необходимо запустить дев сервер. Перейдите в корневую папку Webix, установите необходимые зависимости и запустите дев сервер:
// переходим в корневую папку
cd core
// устанавливаем зависимости
yarn install //или npm install
// запускаем дев сервер
yarn server //или npm run server
Обратите внимание, что для корректной работы примеров с web socket необходимо выполнить следующую команду:
// запускаем примеры без предварительной сборки
node backend/index.js