Гибкий дизайн

Инструментальные панели, созданные для Web UI, могут динамически адаптироваться под различные расширения экрана и размеры окна браузера. Такой подход широко известен как гибкий веб дизайн.

Процесс создания гибких интерфейсов выглядит следующим образом:

  • Тулбар конструктора Web UI содержит поле со списком Выбор расширения, которое выбирает режим редактирования для различной ширины окна браузера
  • После того, как выбрана ширина окна, любые и изменения в сетке будут соответствовать выбранной ширине
  • Все изменения сетки отражаются в соответствующих строках таблицы Свойства расширения, которая принадлежит контейнеру редактируемой сетки (например, если выбрана ширина Tablet 800px, все изменения сетки будут сохраняться в строках с параметром Разрешение, равным 800).

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

Для каждого компонента в контейнере с сеткой выбирается строка таблицы Свойства расширения с наиболее релевантной шириной (указанной параметром Разрешение). Ограничения сетки (X, Y, ширина, высота), указанные в этой строке, используются для отрисовки компонента в сетке контейнера.