DevelNext — Графические объекты, позиционирование

Про динамическое создание объектов упоминается в документации на хабе, но я хочу упомянуть про некоторые нюансы, с которыми можно столкнуться при разработке в DN..
Документация — динамическое создание элементов.

Навигация по статье

Все графические объекты начинаются с UX: UXButton, UXLabel и т.д. Список объектов можно увидеть в подсказках.

Для добавления дочерних объектов у всех родительских элементов есть метод add (все layout панели) или ->items->add(таблица UXTableView, список UXListView).

Изображения

Для изображений существуют классы UXImage и UXImageView.
UXImage — отвечает за загрузку, хранение в памяти, сохранение графического изображения. Загружать можно по ссылке, из файла, из ресурсов, всё есть в документации.
UXImageView — отвечает за отображение содержимого UXImage.

Текст

Текст можно отобразить в объектах UXLabel и UXLabelEx, разница лишь в том, что последний умеет подстраиваться под размер текста, есть свойство autosize.
Текст с автоматическим переносом можно создать так:

До изменения размеров


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

Шрифт

Шрифт у объектов нельзя изменять, можно лишь присвоить свойству ->font новый объект с новым шрифтом.

Как подключить свой шрифт описано в отдельной статье.

Списки

Список UXListView

За объект список отвечает класс UXListView. Содержимое списка хранится в свойстве ->items , из названия методов, думаю, можно понять, какой за что отвечает.
Можно добавлять как обычные текстовые элементы, так и объекты с изображением, панелями и т.д.

Таблицы

Методы у таблицы (UXTableView) схожи с методами списков (UXListView). Так же есть свойство ->items, где хранится содержимое таблицы; есть свойство ->columns (с такими же методами add, remove, etc…), где хранятся столбцы таблицы.
Отличие от списка лишь в том, что при добавлении данных нужно передать ассоциативный массив с id столбцов.
Например, есть таблица со столбцами id, name, value:

Чтоб добавить данные напишем такой код:

Для добавления столбца необходимо создать объект UXTableColumn

У столбцов есть возможность сортировки содержимого, но сортировка работает совсем не так как нужно, поэтому я написал класс для сортировки таблиц — GitHub, проект

Новая сортировка таблиц

Панель табов

Класс для панели табов — UXTabView
Новые табы (UXTab) можно добавить аналогично столбцам в таблице, но есть особенность — нужно на таб добавить какую-нибудь layout-панель, чтоб добавить на таб содержимое.

Добавить содержимое на конкретный таб можно так:

Объекты, отвечающие за разметку (Layout)

UXPane — просто панель, позиционирование объектов задаётся в их параметрах x и y.

UXScrollPane — панель с поддержкой скролла, если размер содержимого больше размера панели. Особенность в том, что напрямую добавить объект $scrollPane->add() не получится. Нужно сначала создать внутри объекта контейнер или панель, от которой будет зависеть наличие скролла, а на эту панель помещать объекты

UXAnchorPane — если объект расположен в этой панели, есть возможность указать якорь (к какому краю будет привязан объект), это свойства topAnchor, leftAnchor, rightAnchor, bottomAnchor. Например, $object->rightAnchor = 3.5 будет означать, что объект расположен на 3,5 пикселя от правого края панели.

UXVBox и UXHBox — располагают объекты вертикально или горизонтально соответственно

UXFlowPane — Может располагать объекты по-горизонтали или по-вертикали, содержимое перемещается на новую строку, если не влазят в заданную ширину.

FlowPane: Объекты влазят по ширине


После ресайза окна объекты не влазят и автоматически переносятся на новую строку

UXTilePane — аналогично UXFlowPane, только объекты располагаются в сетке с одинаковой шириной ячеек.

Позиционирование объектов

Для позиционирования объектов нам помогут объекты из пункта выше layout. Сами по себе объекты кнопка (UXButton), текст (UXLabel) и т.д. не могут быть позиционированы без использования layout объектов (только абсолютно — с указанием x и y), для этого их нужно разместить в UXAnchorPane или UXHBox и т.п., в зависимости от того, что нам нужно.

Внутри UXHBox и UXVBox layout объекты тоже могут позиционироваться (растягиваться) по-разному:
для UXHBox есть метод UXHBox::setHgrow($object, $rule);
для UXVBoxUXVBox::setVgrow($object, $rule);
$object — графический объект
$rule — правило, по которому будет растягиваться объект внутри layout — NEVER, ALWAYS, SOMETIMES

Элементы в списке до растягивания


После растягивания

Чтоб позиционировать текст или кнопку внутри бокса, их сначала нужно поместить на какой-нибудь layout (например UXAnchorPane), а layout в UXHBox.

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

До растягивания

После растягивания

Поиск объектов по селектору

В DN можно искать объекты по их css селектору (как в js). Для этого у layout объектов есть методы ->lookup и ->lookupAll
Например, найти все кнопки на форме можно так:

Почему-то ->lookupAll(‘*’) вызывает ошибку

Свойство graphic

У всех объектов, будь то кнопка, тест, таб, столбец таблицы, есть свойство ->graphic, с его помощью можно добавить любой графический объект

p.s. Статья актуальна для DevelNext версии 16.7.0

0

Добавить комментарий