Виды и взаимодействие контролов фреймворка Wasaby на примере списка с поиском

В идеологии интерфейсного фреймворка Wasaby приложения строятся из контролов. Можно выделить три основные группы контролов:

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

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

Визуальный контрол

Визуальный контрол может быть применен в любом контексте использования. Такой контрол получает данные и отображает их, но он не знает откуда они приходят, как изменяются или как создаются.

Например, использование визуальных контролов Controls/list:View и Controls/search:Input показано в следующем примере:

<div>
   <!-- Для полноценной работы каждого контрола необходима обёртка в виде специального контрола-контейнера -->
   <Controls.search:Input />
   <Controls.list:View />
</div>

Схема расположения контролов:

Контрол-контейнер

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

Например, использование контейнеров Controls/search:InputContainer и Controls/list:Container показано на следующем примере:

<div>
   <Controls.search:InputContainer>
      <Controls.search:Input .../>
   </Controls.search:InputContainer>
    
   <Controls.list:Container>
      <Controls.list:View />
   </Controls.list:Container>
</div>

Схема расположения контролов:

Контролы-контроллеры

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

  • контейнер оповещает контроллер о событиях визуального контрола;
  • контейнер берет данные от контроллера и передает визуальным компонентам.

Например, контрол-контроллер Controls/search:Controller cвязывает список со строкой поиска, получает изменения от контейнера строки поиска Controls/search:InputContainer, загружает данные и передает их через опции вниз, списку Controls/list:Container. Использование контроллера показано на следующем примере:

<div>
   <Controls.search:Controller>
       
      <Controls.search:InputContainer>
         <Controls.search:Input />
      </Controls.search:InputContainer>
       
      <Controls.list:Container>
         <Controls.list:View />
      </Controls.list:Container>
       
    </Controls.search:Controller>
</div>

Схема расположения контролов:

Схема взаимодействия контролов

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

Рис. 1. Схема взаимодействия контролов фреймворка. Взаимодействие с источником данных.

Рис. 2. Схема взаимодействия контролов фреймворка. Обработка событий визуального контрола.