Перейти к концу метаданных
Переход к началу метаданных

Содержание

Введение


Инструмент Настройка формы предназначен для быстрой и удобной вёрстки полей.

С его помощью можно делать такие операции над полями формы и контейнерами как:

  • Перемещение полей
  • Выстраивание полей по колонкам
  • Выстраивание полей по строкам
  • Визуальную группировку полей
  • Создание панелей закладок (табов)
  • Размещение текста
  • Просмотр вложений
  • Разделение элементов формы с помощью пустого пространства

Вид инструмента в системе


Инструмент вызывается с помощью кнопки Настройка формы, находящейся на панели инструментов формы:

После вызова инструмента появится окно, в котором иерархически представлено расположение элементов на данной форме.

Операции над элементами формы


Перемещение полей

Инструмент поддерживает технологию drag&drop, поэтому перемещение полей и элементов в окне производится просто с помощью мыши. Захватите необходимое поле или элемент с помощью левой кнопки мыши и переместите в нужное место.

Расположение полей по колонкам

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

Добавленный контейнер появится внизу списка.

Переместите контейнер Колонки в нужное Вам место и добавьте в него те поля, которые необходимо организовать в столбцы. Добавить поля в элемент можно просто перетащив нужное поле на Колонки. Если всё сделано правильно, то поле станет визуально иерархически подчинено элементу. Все поля формы и контейнеры, добавленные в контейнер колонок становятся колонками. Для задания пропорций колонок нужно в настройке поля/контейнера формы задать значение в поле Вес.

Ширина колонки не имеет фиксированного размера, а некоторые поля имеют фиксированный размер. Поэтому

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

Для решения этих проблем можно задать абсолютный размер для колонок наравне с весом.

Рассмотрим примеры операций над элементами формы на примере справочника Пользователи.

Пример:

В результате этого действия поля на форме примут такой вид:

Расположение полей по строкам

Расположение полей по строкам производится аналогично расположению по колонкам. Создаём с помощью кнопки Добавить с выпадающим меню элемент Строки:

Добавленный элемент появится внизу списка. Все элементы внутри контейнера строк располагаются друг за другом по строкам. Сама форма является неявным контейнером строк.

Переместите элемент Строки в нужное Вам место и добавьте в него те поля, которые необходимо выстроить. Добавить поля в элемент можно, просто перетащив нужное поле на Строки. Если всё сделано правильно, то поле станет визуально иерархически подчинено элементу.

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

Пример:

В результате этого действия поля на форме примут такой вид:

Визуальная группировка полей

Для визуальной группировки полей на форме создаём с помощью кнопки Добавить с выпадающим меню элемент Группа полей:

Добавленный элемент появится внизу списка.

Переместите элемент Группа полей в нужное Вам место и добавьте в него те поля, которые необходимо визуально сгруппировать. Добавить поля в элемент можно, просто перетащив нужное поле на Группу полей. Если всё сделано правильно, то поле станет визуально иерархически подчинено элементу. Группа полей по сути является контейнером строк, обрамленным рамкой и имеющим заголовок.

Пример:

В результате этого действия поля на форме примут такой вид:

Создание закладок (табов)

Для создания закладок (табов) на форме создаём с помощью кнопки Добавить с выпадающим меню элемент Панель табов:

Добавленный элемент появится внизу списка.

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

Пример:

В результате этого действия поля на форме примут приблизительно такой вид:

Размещение текста

Текст позволяет поместить на форму надпись. Для создания Текста на форме создаём с помощью кнопки Добавить с выпадающим меню элемент Текст:

Добавленный элемент появится внизу списка. Переместите элемент Текст в нужное Вам место.

Пример. Добавим на форму надпись с текстом "Пример". Чтобы изменить текст надписи, необходимо в модальном окне "Настройки формы" двойным щелчком мыши открыть элемент Текст и изменить значение поля "Наименование".

Просмотр вложений

Элемент формы Просмотр вложений позволяет просматривать вложения в графическом виде. После открытия формы этот элемент получает с сервера URL картинки и отображает в указанном месте. 

По клику на картинку она открывается в оригинальном размере.

 Для создания Просмотра вложений на форме создаём с помощью кнопки Добавить с выпадающим меню элемент Просмотр вложений:

Добавленный элемент появится внизу списка. Переместите элемент Просмотр вложений в нужное Вам место.,

Пример. Добавим на форму Просмотр вложений и посмотрим полученный результат:

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

Пустое пространство

Пустое пространство – это разделитель на форме для более красивой формовки полей. Для создания пустого пространства на форме создаём с помощью кнопки Добавить с выпадающим меню элемент Пустое пространство:

Добавленный элемент появится внизу списка. Переместите элемент Пустое пространство в нужное Вам место. 

Пример. На левом рисунке нет пустого пространства, на правом рисунке пустое пространство расположено между Текстом и Просмотром вложений:

Иерархическое подчинение элементов


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

Пример:

В результате этого действия поля на форме примут такой вид:

*Внимание!*

(thumbs down) Старайтесь никогда не подчинять колонки строкам (помните, сама форма это неявный контейнер строк).
(thumbs up) Подчиняйте только строки колонкам. Иначе ухудшается производительность формы до 40%.
В остальном Вы ограничены только своей фантазией.

Рекомендации по увеличению производительности форм


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

1) Однотипные колонки размещать в ОДНОМ контейнере колонок с помощью контейнеров строк.

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

Как отрисовываются поля в контейнере колонок:

1 - Рисуется сам контейнер и рассчитывается его размер
2 - Рассчитывается размер колонок
3 - Рисуются поля

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

Если использовать контейнеры строк для полей, то рассчитываться размер контейнера колонок и самих колонок будет только один раз. Это существенно ускоряет производительность. Выглядит это так:

На рисунке видно, что сразу после определения размеров контейнера колонок и самих колонок рисуются все поля. Соответственно тратится меньше времени на отрисовку формы.

Таким образом, можно увеличить производительность на 40%.

2) По возможности размещать поля в панели табов или в СВЕРНУТОЙ группе полей.

Жизненный цикл поля на форме


Жизненный цикл поля на форме можно свести к трем состояниям:

1) Поле присутствует в объекте формы, но не отрисовано в HTML разметке

2) Поле отрисовано в HTML разметке (на это потрачено время), но оно невидимо (спрятано).

3) Поле отрисовано в HTML и видимо на форме.

Во всех трех состояниях работа всех механизмов формы с полем одинакова, единственное что изменяется - видимость самого поля как такового.

Наименьшее количество времени (практически 0) тратится на поле, которое присутствует в объекте формы, но отсутствует в разметке. В таком состоянии находится поле на вкладке таб панели, которая ещё не была раскрыта, или в свернутой группе полей (а группы полей изначально свернуты, если у них есть возможность сворачиваться).

Наибольшее количество времени тратится на отрисовку поля в HTML. Дополнительно к отрисовке самого элемента нужно рассчитать его размеры, что происходит, только если поле видимо. Таким образом, просто скрытые поля хоть и не загружают интерфейс, но тем не менее по времени отрисовываются примерно столько же, сколько и видимые.

Чтобы приблизительно посчитать, сколько времени будет отрисовываться форма, можно использовать следующие значения (в миллисекундах):

Время отрисовки:

– поля - 20 мс (реальные показатели разнятся от способа отображения, приведен усредненный показатель)
– таблицы - 150 мс.
– дополнительная константа - 100 мс (на панель инструментов самой формы).

Поэтому, если мы имеем форму с 10-ю полями и 2-мя таблицами, можно предположить что она будет отрисовываться 10*20 + 150*2 + 100 = 600 мс. Если цифра 600 не приемлема, то следует подумать над необходимостью пользователю видеть при открытии все данные сразу.

Как сказано выше размещение поля в панели вкладок, во вкладке, которая на момент открытия формы не открыта позволяет сэкономить время на её отрисовке. То есть, если разместить наши таблицы в панели вкладок, то отрисована будет только одна таблица (только одна вкладка может быть активна). Это сэкономит 150 мс. Итого получаем вместо 600 мс время открытия 450 мс.

Если 5 полей разместить в группе полей и сделать её сворачиваемой, то соответственно можно сэкономить 5*20 = 100мс на отрисовке этих полей.

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