Добавляем Wasaby на существующий сайт

Wasaby можно внедрить практически в любой сайт и не нужно ничего переписывать. Оживите вашу страницу. В готовом наборе контролов Wasaby можно найти более 40 элементов: от кнопки до таблицы.

Эта статья описывает процесс добавления Wasaby на страницу с примером.

Шаг 1: Подготавливаемся

Установите Node.js, NPM. Склонируйте или скачайте репозиторий wasaby-hello-world. Перейдите в папку с репозиторием (например C:\code\wasaby-hello-world) и выполните следующие команды в консоли для установки зависимостей, обновления хранилища и сборки:

npm install
npm run update-cli-store
npm run build

В результате в папке с репозиторием должна появиться директория wasaby со следующим содержимым:

Если после команды npm run build у вас неверно собрался проект, выполните еще раз команды npm run update-cli-store, npm run build.

Почти готово! Скопируйте директорию wasaby в корень вашего сайта.

Шаг 2: Добавляем DOM-контейнер для запуска Wasaby в HTML

<!-- HTML -->
<body>
    <!-- Остальной код вашей страницы-->
    <div id="wasabyRoot" application="HelloWorld/Simple" rootapp="HelloWorld/Simple:Timer"></div>
    <!-- Остальной код вашей страницы-->
</body>

Именно в этом месте сайта на экране будет оживать Wasaby.

Шаг 3: Добавляем скрипт на страницу. Всего один!

<!-- HTML -->
<body>
    <!-- Остальной код вашей страницы-->
    <script type="text/javascript" src="/wasaby/Start.js"></script>
</body>

Этот скрипт загрузит все необходимые зависимости на страницу и запустит wasaby в указанном месте. Обратите внимание, что скрипт расположен в директории wasaby, которую мы получили на подготовительном шаге и скопировали в корень сайта.

Шаг 4: Создаем свой контрол (необязательно)

В репозитории из шага 1 вы можете изучить строение библиотеки HelloWorld/Simple. Сейчас это простейший счетчик. Но, подключив к себе в зависимости (файл HelloWorld.s3mod) модуль Controls вы получите доступ к более чем 40 готовым универсальным контролам: от кнопки до таблицы. Откиньтесь на спинку кресла и представьте: насколько динамичным может сделать ваш сайт Wasaby!

<!-- HTML -->
<depends>
    <module id="f6fdf353-3ab3-4dbb-8671-01c2b418bf0a" name="Controls"/>
    <module id="af50caf5-f84b-4b81-a19c-6f6618372dbd" name="Controls-default-theme"/>
    <module id="ea29a33a-6636-4a1f-a655-1dec6974e04e" name="SbisEnvUI-default-theme"/>
    <module id="7e8aabad-d60f-4c48-aa74-f29d78fd8be2" name="RequireJsLoader"/>
</depends>

Так выглядит список зависимоcтей в конфигурации вашего будущего модуля Wasaby.

Готово!

Вы добавили Wasaby контрол на страницу и оживили страницу. Далее перейдем к примеру, который более близок к боевым условиям.

Разберем на примере

Синтетические примеры – это хорошо, но как же запустить это на уже реальном, разработанном сайте? Рассмотрим пример.

Шаг 1: Установка XAMPP

В качестве примера готового сайта возьмем страницу на PHP. Ее достаточно просто запустить на XAMPP. XAMPP в примере устанавливается в директорию C:\xampp. После установки и запуска (C:\xampp\ xampp-control.exe) по адресу localhost мы можем наблюдать страницу (см. Рисунок 1.), сюда и будем встраивать Wasaby.


Рис. 1. Страница приветствия XAMPP localhost/dashboard/.

Шаг 2: Размещаем ресурсы

Создайте символическую ссылку для директории <путь до репозитория>\wasaby-hello-world\wasaby и <путь до репозитория>\wasaby-hello-world\cdn в каталог C:\xampp\htdocs. При обращении по адресу localhost с включенным сервером XAMPP, файл C:\xampp\htdocs\index.php редиректит на страницу localhost/dashboard/. Можно изменить это поведение или отредактировать C:\xampp\htdocs\dashboard\index.html, используя инструкцию (шаг 2 и шаг 3).

Готово!

Перезапустите XAMPP. Да, этот маленький таймер над заголовком – полностью wasaby конрол. Не забудьте установить расширение Wasaby Developer Tools для Chrome.


Рис. 2. Wasaby контрол на странице.