Гибкий дизайн
Инструментальные панели, созданные для Web UI, могут динамически адаптироваться под различные расширения экрана и размеры окна браузера. Такой подход широко известен как гибкий веб дизайн.
Процесс создания гибких интерфейсов выглядит следующим образом:
Тулбар конструктора Web UI содержит поле со списком Выбор разрешения, которое выбирает режим редактирования для различной ширины окна браузера
После того, как выбрана ширина окна, любые и изменения в сетке будут соответствовать выбранной ширине
Все изменения сетки отражаются в соответствующих строках таблицы Свойства расширения, которая принадлежит контейнеру редактируемой сетки (например, если выбрана ширина
Tablet 800px
, все изменения сетки будут сохраняться в строках с параметром Разрешение, равным800
).
Когда инструментальная панель отрисовывается во время выполнения, Web UI перестраивает ее компоновку каждый раз при изменении ширины окна браузера.
Для каждого компонента в контейнере с сеткой выбирается строка таблицы Свойства разрешения с наиболее релевантной шириной (указанной параметром Разрешение). Ограничения сетки (X, Y, ширина, высота), указанные в этой строке, используются для отрисовки компонента в сетке контейнера.
По умолчанию в строке таблицы Свойства разрешения указано значение ширины "None", что означает отсутствие конкретных разрешений экрана. Другими словами, любые стили и разметка, написанные при выбранной опции "None", будут применяться ко всем разрешениям экрана и устройствам, независимо от их размера или других свойств.