Beginner

Установка Webix

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

Подготовка рабочей среды

Для простейшего приложения на Webix, вам потребуется всего лишь один HTML файл (рекомендуем HTML5 doctype) со следующими подключениями:

  • необходимые CSS и JS файлы (установленные одним из нижеперечисленных способов)
  • JavaScript код для приложения (инлайн или подключённый отдельным файлом).

Пакет Webix содержит две версии:

  • full (webix.js) - читабельный код с в возможностью отладки
  • minified (webix.min.js) - минифицированный код готового продукта

Для разработки подойдёт любой из текстовых редакторов (Sublime, Visual Studio Code и пр.). Также вы можете включить функцию автозаполнения кода.

CDN

Чтобы подключить ссылки на 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.

NuGet и NPM

Используя NuGet

Вы можете установить Webix с помощью пакетного менеджера NuGet, выполнив всего одну строку кода:

nuget install Webix
 
// если вы используете Microsoft Visual Studio, выполните код из консоли Package Manager 
install-package Webix

Этот вариант подходит только для open-source версии Webix под лицензией GPL.

Используя NPM

Установка Webix посредством NPM позволит получать обновления как для open-source версии, так и для коммерческой версии (PRO).

GPL версия

Чтобы установить open-source версию, выполните следующую команду:

npm install webix

PRO версия

Если вы обладатель Webix PRO, вы также можете установить библиотеку с помощью NPM.

Вам необходимо зарегистрироваться в личном кабинете (секция Users).
После чего вы получите учётные данные для доступа к репозиторию:

После регистрации вы сможете установить Webix Pro и комплексные решения в соответствии с вашей подпиской. Обновления будут доступны на протяжении действия лицензии.

Скачивание пакета Webix

Чтобы получить пакет локально, необходимо:

Автозаполнение кода

Вы можете включить советы по работе с методами 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
Наверх