Разработка контролов

Hello world

На Wasaby можно достаточно быстро и легко научиться разрабатывать, потому что наш фреймворк строится на базовых принципах HTML, CSS и JavaScript. Посмотрите на демо-пример:

На его основе можно создать собственный и модифицировать в процессе тестирования заявленных возможностей.

Файловая структура примера:

  • Demo — папка с исходными файлами контрола;
    • Template.wml — шаблон контрола;
    • Module.js — модуль контрола;
  • index.html — тестовая веб-страница, на которую подключено ядро Wasaby (wasaby.min.js).

Инициализация контрола и его вставка на страницу выполнена следующим скриптом:

<script>
   require(["Core/Control", "Demo/Module"], function(Control, Module) {
      Control.createControl(Module, {
         element: document.querySelector("#mainContainer")
      }, element);
   });
</script>

Декларативное отображение

Чтобы отобразить данные на странице, достаточно указать в каком месте шаблона их следует поместить.

<!-- WML -->
<div title="{{ text }}">
   {{ text }}
</div>
// JavaScript
define("Demo/Module", ["UI/Base", "wml!Demo/Template"], function(Base, template) {
   var ModuleClass = Base.Control.extend({
      _template: template,
      text: "Hello Wasaby!"
   });
   return ModuleClass;
});

Результат. При наведении курсора на строку отобразится подсказка.

Hello Wasaby!

Демо-пример:

Как видно из примера, данные можно вставлять в содержимое тега и в его атрибуты. Более того, теперь они реактивно связаны с DOM. Как это проверить? Откройте страничку демо-примера в отдельной вкладке. Затем выполните в консоли разработчика следующий код:

document.querySelector('#mainContainer').controlNodes[0].control.text = 'Hello world!'

Так мы изменяем значение переменной text, и оно сразу автоматически обновляется на странице.

Условия и циклы

Для управления присутствием элемента в DOM мы используем директиву <ws:if>, что продемонстрировано в следующем примере.

<!-- WML -->
<div>
   <ws:if data="{{ isVisible }}">
      Message is visible.
   </ws:if>
   <ws:else>
      Message is hidden.
   </ws:else>
</div>
// JavaScript
define("Demo/Module", ["UI/Base", "wml!Demo/Template"], function(Base, template) {
   var ModuleClass = Base.Control.extend({
      _template: template,
      isVisible: true
   });
   return ModuleClass;
});

Результат:

Message is visible.

Демо-пример:

Для многократного добавления элемента мы используем директиву <ws:for>, как это показано в примере ниже.

<!-- WML -->
<ul>
    <ws:for data="key, value in list">
        <li>{{ value }}</li>
    </ws:for>
</ul>
// JavaScript
define("Demo/Module", ["UI/Base", "wml!Demo/Template"], function(Control, template) {
   var ModuleClass = Base.Control.extend({
      _template: template,
      _beforeMount: function() {
         this.list = ["Messages", "Chats", "Groups"];
      }
   });
   return ModuleClass;
});

Результат:

* Messages
* Chats
* Groups

Демо-пример:

В примере мы впервые использовали метод _beforeMount(), где объявили переменную. А последующих разделах мы подробнее поговорим о назначении метода.

Обработка событий

Для создания интерактивных приложений мы можем реагировать на действия пользователя, например, клик по кнопке. В следующем примере показано, как мы можем отследить и обработать событие click для DOM элемента.

В следующем примере в обработчике описана только логика обработки, а сама работа с DOM выполняется автоматически ядром Wasaby.

<!-- WML -->
<div>
    Counter: <button on:click="clickHandler()">{{ count }}</button>
</div>
// JavaScript
define("Demo/Module", ["UI/Base", "wml!Demo/Template"], function(Base, template) {
   var ModuleClass = Base.Control.extend({
      _template: template,
      count: 0,
      clickHandler: function() {
         this.count++;
      }
   });
   return ModuleClass;
});

Результат: мы создали простой счетчик, подсчитывающий количество нажатия на кнопку.

Демо-пример:

В следующем примере показана обработка пользовательского ввода.

<!-- WML -->
<div>
    <p>Input your name: <input type="text" on:input="inputHandler()"/></p>
    <p>Your name is {{ name }}</p>
</div>
// JavaScript
define("Demo/Module", ["UI/Base", "wml!Demo/Template"], function(Base, template) {
   var ModuleClass = Base.Control.extend({
      _template: template,
      inputHandler: function(event) {
         this.name = event.target.value;
      }
   });
   return ModuleClass;
});

Результат: когда пользователь вводит символ в поле ввода, они сразу же отображаются в строке ниже.

Демо-пример:

Приложение как набор контролов

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

Контрол — это изолированная часть функционала. С точки зрения файловой структуры, это минимум два файла: JS-модуль, где описана логика, и WML-шаблон, где описано представление контрола.

Ниже показан пример контрола-спойлера:

<!-- WML -->
<div>
    <button on:click="clickHandler()">show more</button>
    <ws:if data="{{ showSpoiler }}">
        <p style="border: 1px solid #ccc">{{ _options.description }}</p>
    </ws:if>
</div>
// JavaScript
define("Spoiler/Module", ["UI/Base", "wml!Spoiler/Template"], function(Base, template) {
   var ModuleClass = Base.Control.extend({
      _template: template,
      showSpoiler: false,
      clickHandler: function() {
         this.showSpoiler = !this.showSpoiler;
      }
   });
   return ModuleClass;
});

Теперь его можно переиспользовать в другом контроле. Давайте сделаем это:

<!-- WML -->
<div>
    Click on the button to display additional text.
    <Spoiler.Module description="{{ text }}" />
</div>
// JavaScript
define("Demo/Module", ["UI/Base", "wml!Demo/Template"], function(Base, template) {
   var ModuleClass = Base.Control.extend({
      _template: template,
      text: "This text was hidden by spoiler, but now it is visible. You can click again to hide this text."
   });
   return ModuleClass;
});

Демо-пример:

В примере показано, что родительский контрол Demo/Module передаёт данные в дочерний контрол-спойлер.

Узнать больше

Выше мы кратко представили основные возможности Wasaby Framework. Подробнее о разработке контролов вы можете прочитать в разделах:

© 2020 Тензор. Все права защищены.