Редактирование расположения компонентов

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

Компоновка каждого контейнера редактируется независимо от других. В то же время, можно перемещать компоненты между контейнерами.

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

  • Добавление новых компонентов на инструментальную панель путем перетаскивания их с палитры в рабочую область

  • Перемещение компонентов из одного контейнера в другой

  • Перемещение компонентов между двумя локациями внутри одного контейнера

  • Изменение размеров компонентов

  • Клонирование компонентов

  • Редактирование ограничений компонентов (например, количество занимаемых столбцов)

Пожалуйста, внимательно ознакомьтесь с тем, как организована компоновка инструментальной панели, прежде чем приступить к чтению статей о редактировании сетки, абсолютной или плавающей компоновки.

Выбор типа компоновки

При создании инструментальных веб-панелей выбор правильного типа компоновки имеет решающее значение для организации компонентов и эффективного представления информации. Понимание уникальных особенностей каждого варианта компоновки может обеспечить выбор правильной компоновки для конкретных случаев использования.

Имя

Описание

Пример использования

Сетка

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

  • Формы ввода данных, отображающие табличные данные или несколько компонентов.

  • Обычные страницы веб-портала с преимущественно статичным содержимым.

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

Абсолютная

Позволяет детально контролировать расположение компонентов, определяя пиксельные координаты для каждого компонента. Компоненты можно перемещать, выравнивать и изменять их размер путем перетаскивания на страницу.

  • Человеко-машинные интерфейсы (ЧМИ).

  • Динамические карты объектов или этажей.

  • Скеоморфные панели управления.

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

Плавающая

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

  • Интегрированные среды разработки.

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

  • Когда в одной инструментальной панели должно быть много элементов, но разные пользователи будут сосредоточены на разных элементах.

Декорации режима редактирования

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

Следующие дополнительные визуальные элементы отображаются при включенных декорациях:

  • Пустые ячейки Сетки показаны как темно-розовые прямоугольники

  • У абсолютной компоновки имеется серо-зеленая вспомогательная сетка, помогающая размещать компоненты в пространстве

  • Каждый компонент/вложенный контейнер в компоновке Сетка имеет серый пунктирный контур, чтобы было удобнее находить отдельные и объединенные ячейки

  • Выбранный компонент/вложенный контейнер в компоновке Сетка имеет зеленый контур, чтобы показывать, свойства какого компонента редактируются в настоящий момент

  • Каждый компонент/вложенный контейнер в компоновке Сетка при наведении на него курсора мыши отображает маленькие зеленые прямоугольники. Эти треугольники позволяют менять положение компонента и вращать его внутри сетки родительского контейнера

  • У компонентов отображаются их названия, а названия контейнеров появляются при наведении на них курсора мыши

  • У некоторых контейнеров имеется значок Добавить, позволяющий создавать новую область контейнера (т.е. вкладку/шаг/слой/ и т.д.)

  • Выбранный компонент/вложенный контейнер имеет значки Редактировать и Удалить