Урок 71. Разработка калькулятора: разработка интерфейса

Урок 71. Разработка калькулятора: разработка интерфейсаДобрый день, уважаемые любители цифр и кнопочек! Сегодня мы с вами окунемся в дивный мир разработки интерфейса калькулятора — того самого, который не просто вычисляет, а еще и красиво выглядит.

Если вы думаете, что калькулятор — это просто набор кнопок с цифрами и плюсиками, то вы глубоко заблуждаетесь. Как говорил один мой знакомый программист: «Калькулятор без интерфейса — как борщ без свеклы: вроде есть, но чего-то не хватает».

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

Если вдруг вы пропустили предыдущие уроки и теперь чувствуете себя как турист без карты в джунглях 1С, не беда! Просто возьмите и пролистайте их — там все разжевано до последней запятой.

Теперь добавим в наш калькулятор пару новых кнопочек — можно даже с красивыми иконками! Если у вас нет своих картинок — не беда, я прикрепил ссылку на набор милых пиктограмм. Главное, чтобы кнопки были живые и радовали глаз так же, как котики в интернете радуют душу.

После обновления интерфейс стал выглядеть чуть более нарядно; если бы это был костюм на выпускной, то точно с бабочкой.

Однако при запуске обработки в 1С: Предприятие форма может превратиться из стильного платья в мешковатую пижаму. Всё потому что формы пока что неадаптивные — они упираются рогом и делают всё по-своему. Представьте ситуацию: вы нарядились для вечеринки, а система решила устроить вам домашний дресс-код.

Знакомо? Вот-вот! Так что если хотите сделать мобильное приложение на базе этой обработки — там всё будет получше.

Но для больших экранов настоятельно рекомендую запускать обработку на компьютере и подгонять размеры вручную. Это примерно как настроить громкость телевизора: кто-то любит потише, кто-то погромче.

Пару слов о том, как подгонять интерфейс: используйте группировки, ориентацию элементов и элемент «Декорация-надпись» для сдвигов. Кстати говоря, «Декорация-надпись» звучит почти как название музыкальной группы из 90-х — «Декорация-надпись and the UI Fighters».

Но шутки в сторону — этот элемент действительно помогает делать форму красивее.

На этом этапе остановимся с дизайном — будем модернизировать его постепенно вместе с написанием функционала. И вот тут начинается самое интересное: создаём кнопку «Info».

По нажатию на неё должна появляться форма с информацией — иначе зачем она нужна? Но прежде чем показывать форму, её нужно создать (да-да, логично).

Нельзя просто взять да создать общую форму — она будет привязана к конфигурации (а нам нужна именно внешняя обработка). Поэтому создаём новую форму с гордым именем «Инфо».

Добавляем туда небольшой текстик через тот самый элемент «Декорация-надпись».

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

Он сказал жене: «Я написал программу для управления домом». Жена спрашивает: «И что она умеет?» Он отвечает: «Выключает свет… когда я захочу». Вот так же и у нас пока что простенько.

Далее возвращаемся к главной форме обработки и ищем нашу кнопку «Info».

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