Создание компонентов
Оформление графических компонентов веб-приложений
Можно было бы просто накидывать элементы на пустое пространство холста, но лучше сразу постараемся сделать все аккуратно и упорядоченно. Поэтому для начала оформим рабочую область. Добавим на холст контейнер (Container) в котором и будем размещать все остальные элементы. После добавления стоит сразу нажать на иконку шестеренки и перейти к настройке данного контейнера.
Настройки контейнера
Пройдемся по доступным настройкам.
- Name - имя под которым мы сможем обращаться к данному контейнеру в бизнес-процессах приложения. Например, если захотим создать БП для изменения каких-то настроек данного контейнера.
- Direction - направление, в котором будут располагаться элементы внутри данного контейнера. Горизонтально, если требуется расставлять их в ряд, один за другим, либо наоборот, вертикально, когда элементы идут друг под другом.
- Wrap - настройка вывода элементов. Должны ли они располагаться в одной строке (nowrap) или можно осуществлять перенос (wrap).
- Alignment - каким образом должно быть произведено выравнивание элементов в контейнере (отдельно по горизонтали и вертикали).
- Size - размер контейнера. Может задаваться как в процентах от доступного пространства, так и иметь строго фиксированный размер в пикселях.
- Max Width - максимально допустимая ширина (на тот случай, если она не задана жестко и меняется в зависимости от наполнения).
- Margin/Padding - отступ от границ контейнера. Внешний или внутренний соответственно.
- Image, Gradient or Overlay (Background color) - возможность задать необходимый фон. Для этого можно выбрать определенный цвет (или сочетание различных цветов с градиентом) или установить фоновое изображение.
- Border - выбор рамки и ее внешнего вида (цвет, толщина, радиус скругления)
- Visible - видимость элемента (а также всех вложенных элементов)
Выбранные настройки можно увидеть на скриншоте. Разумеется вы в полном праве экспериментировать и менять их, подбирая свой уникальный дизайн.
В созданный контейнер добавим еще один. В него мы добавим необходимые поля для ввода. Установим для него вертикальное расположение элементов с выравниванием по центру, 40% ширины и внутренний отступ слева (padding left 20px).
Компоненты приложения
Дальше добавим в контейнер сами компоненты. Наш бизнес процесс принимает два числа типа float. Значит для их ввода необходимо добавить два компонента Input (float), кнопку (Button), которая запустит процесс вычисления, а также произвести небольшую визуальную настройку и подписать их Label.
Добавим еще один блок, в котором подпишем, что мы вообще планируем вычислять (суммирование, вычитание и т.д.). Зададим ширину 30% с вертикальным расположением элементов, с выравниванием по центру и правому краю (end/center). В сам контейнер добавим 5 компонентов Label и сразу же изменим их текст на нужный.
Последний шаг визуального оформления - добавление еще одного контейнера для отображения результата вычислений. Добавляем его по аналогии с предыдущим контейнером, но задаем выравнивание по правому краю с небольшим внутренним отступом слева. Особенностью этого контейнера является то, что изначально он будет невидим (переключатель Visible выключен). Включим его в тот момент, когда у нас появится результат вычислений. Добавим в него 5 компонентов Label и можем даже не менять их текст, ведь блок все равно невидимый (главное дать им название Name, чтобы можно было опознать необходимый элемент при создании бизнес-процессов).
Если все было сделано правильно, то увидим такой результат в веб-дизайнере:
И такой в опубликованном приложении:
