Элементы данной вкладки предназначены для создания GUI будущего приложения и настройки его отображения с помощью CSS стилей. Для редактирования положения и размеров элементов можно использовать визуальный Редактор форм.

   Для того, чтобы посмотреть на большую часть элементов этой вкладки достаточно открыть пример из папки webapp/Tabs/WinControls/Demo.sha или запустить по данной ссылке.

   В этом же разделе мы рассмотрим создание простейшего приложения, которое позволяет ввести пользователю некоторую строку и добавить ее в список по нажатию кнопки. Для этого нам понадобятся всего три элемента: Button, Edit и ListBox. Добавим их в проект и соединим следующим образом:

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

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

   Для выполнения этой задачи будем использовать следующий алгоритм: после добавления основных элементов (кнопки и поля ввода), добавим в проект элемент Loader(Лоадер) и с помощью Редактор форм разместим его так, чтобы он полностью перекрывал собой поле ввода:



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


   После нажатия кнопки "Load" появится индикатор ожидания, который провисит 2с и исчезнет, а текст будет загружен в поле ввода. При этом во время отображения индикатора ожидания пользователь не сможет нажать на поле ввода.

   Не все GUI элементы могут быть вставлены внутрь других GUI элементов. Этим свойством обладают только элементы контейнеры, которыми являются MainForm, Panel, ScrollBox и им подобные. В этом разделе рассмотрим простейший пример того, как можно вставить две кнопки внутрь панели.

   Вставка GUI элементов друг друга предполагает и их вставку в схеме. А это можно сделать с помощью стандартных элементов контейнеров. Для примера мы будем использовать контейнер MultiElementEx как рекомендуемый. Для этого вытащим его с вкладки Инструменты в редактор схемы, выделим и войдем внутрь (двойным кликом). Теперь находясь внутри контейнера первым делом мы должны добавить элемент, в который будут вставляться другие элементы. Внимание! Очень важно, чтобы элемент родитель был вставлен в схему первым, т.к. именно по типу первого элемента в контейнере среда определяет можно ли в него добавить другие GUI элементы или нет. Вставляем панель, а затем две кнопки. В редакторе форм выравниваем размеры и положение кнопок:



   После этого возвращаемся обратно на форму и выравниваем уже положение самой панели:



   В дальнейшем из контейнера можно вывести любые событие и данные (например, события нажатия кнопок) и тем самым разбить элементы GUI на отдельные изолированные группы.