§ 5.5. От дерева к скетчу и обратно

Можно — и это главный навык главы. Дерево элементов и экран — два взгляда на одну форму: дерево говорит, что в чём лежит и в каком порядке, экран показывает, как это легло. Кто умеет переводить одно в другое, тот читает форму, не открывая Предприятие, и собирает её, не гадая в редакторе.

1. Два описания одной формы

У нас уже есть оба способа записи, и оба встречались в книге не раз.

Скетч — не рисунок ради красоты. Это набросок прямоугольниками: поле — строка с подписью, группа — рамка, закладки — ряд надписей сверху. Линейки и точные размеры не нужны: размеры в управляемой форме задают не точками, а свойствами — шириной-пожеланием и растягиванием, — и раскладывает их под окно платформа.

2. Правила перевода

Перевод держится на нескольких правилах, и все они уже встречались по отдельности.

Ещё одно правило — отрицательное: элемент со снятой видимостью на скетч не попадает. Его место в дереве, а не на экране.

Дерево читают сверху вниз, и каждая группа говорит, как разложить то, что в ней лежит. Больше для скетча ничего не нужно.

3. Из дерева в скетч

Возьмём форму товара в том виде, в каком она стала к этому параграфу.

Форма                      ← вертикальная
├── Наименование
├── Учёт                   ← горизонтальная,
│   ├── Артикул               с заголовком
│   ├── ЕдиницаИзмерения
│   └── надпись-пояснение
├── ПоказыватьПодробности
└── ОстаткиПоСкладам       ← таблица

Переводим построчно: форма вертикальная — значит, всё идёт столбиком; группа «Учёт» горизонтальная и с заголовком — значит, рамка, а в ней поля в строку.

┌─ Товар ─────────────────────────────┐
│ Наименование: [                   ] │
│ ┌ Учёт ───────────────────────────┐ │
│ │ Артикул: [    ] Ед.: [    ] …   │ │
│ └─────────────────────────────────┘ │
│ [✓] Показывать подробности          │
│ ┌ Склад ───────┬ Количество ──────┐ │
│ │              │                  │ │
│ └──────────────┴──────────────────┘ │
└─────────────────────────────────────┘

Надпись-пояснение в скетче обозначена многоточием в строке: горизонтальная группа пытается положить её туда же, а влезет ли — зависит от ширины. Если на экране она окажется ниже — значит, не хватило ширины, и это повод подумать о группировке «если возможно».

4. Из скетча в дерево

Обратный ход полезнее прямого: так собирают форму. Начинают со скетча на бумаге, а дерево выводят из него.

┌─ Контрагент ────────────────────────┐
│ Наименование: [                   ] │
│ ИНН: [          ]                   │
│ ┌ Контакты ───────────────────────┐ │
│ │ Телефон: [      ] Лицо: [     ] │ │
│ └─────────────────────────────────┘ │
└─────────────────────────────────────┘

Читаем скетч, как дерево: сверху вниз, находя рамки и строки.

5. Где скетч расходится с экраном

Скетч, нарисованный до сборки, — замысел, экран — результат. Расходиться они будут, и каждое расхождение что-то говорит; то же верно и для скетча, нарисованного по дереву чужой формы.

Поэтому скетч проверяют на экране, а экран — по дереву. Каждое молчит о своём: скетч не знает про ширину окна, экран не показывает скрытого.

6. Зачем это нужно при чтении

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

Последняя строка — рабочая привычка: обсуждать форму с пользователем удобнее скетчем, а не деревом. Дерево — то, на чём говорит редактор; скетч — то, что можно показать любому.

7. В Конфигураторе и в Предприятии

Опыт в обе стороны.

1. Откройте форму элемента «Товаров» и, не заглядывая в Предприятие, нарисуйте на бумаге скетч по дереву элементов.

2. Откройте карточку товара и сверьте. Каждое расхождение объясните по таблице расхождений.

3. Нарисуйте скетч формы элемента «Контрагентов» так, как хотели бы её видеть, и выведите из него дерево: группы, их направление, заголовки.

4. Соберите это дерево в редакторе и сверьте результат со своим скетчем.

Главное в одном абзаце

Дерево элементов и экран описывают одну форму разными средствами: дерево — вложенность и порядок, экран — прямоугольники и соседство, и скетч на бумаге переносит второе туда, где его удобно читать и обсуждать. Перевод держится на нескольких правилах — вертикальная группа кладёт друг под другом, горизонтальная — в строку, выделение рисует рамку, заголовок — надпись у неё, группа «Страницы» — закладки, надпись-декорация — строку текста — и на одном отрицательном: скрытое на скетч не попадает. Из дерева в скетч переводят, чтобы увидеть чужую форму без запуска; из скетча в дерево — чтобы собрать свою. Расхождения скетча с экраном говорят о ширине, выделении, порядке и видимости, поэтому скетч проверяют экраном, а экран — деревом. Дерево — то, на чём говорит редактор; скетч — то, что можно показать тому, кто с формой работает.

Инструмент готов: дерево читается как экран, экран — как дерево. Осталось применить его к форме, которую собирали не мы. Хватит ли одного скетча, чтобы понять, как её автор думал о работе?

Контрольные вопросы

1. Чем дерево элементов отличается от скетча экрана по тому, что в них видно?
2. Назовите правила перевода из дерева в скетч.
3. Какой элемент на скетч не попадает и почему?
4. Как по скетчу понять, какая группировка у группы?
5. Почему скетч и экран расходятся? Назовите два случая.
6. Зачем обсуждать форму с пользователем скетчем, а не деревом?
7. Какой ход полезнее при сборке формы — из дерева в скетч или обратно?

Упражнения

По образцу. Нарисуйте скетч формы поступления, которую вы собрали на закладках: номер и дата, закладки «Шапка» и «Товары».

Своё: выведите дерево. Представьте, что у склада появились реквизиты «Адрес» и «Ответственный». Нарисуйте скетч его карточки — наименование, адрес, ответственный в рамке «Кто отвечает» — и выведите из него дерево.

Ловушка: «на скетче было не так». Разработчик собрал форму по скетчу, а на ноутбуке пользователя два поля из одной строки оказались одно под другим. Он считает, что ошибся в дереве. Прав ли он?

Обратный ход. На экране — рамка «Оплата» с тремя полями в строку, а под ней комментарий во всю ширину. Запишите дерево, которое могло это дать.

На чтение. В дереве чужой формы есть группа «Служебное» со снятой видимостью и пятью полями внутри. Что будет на вашем скетче и что это говорит о форме?

Ответы — в конце части.