Конструктор Форм

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

Все последующие пояснения описывают Конструктор Форм в виде отдельного приложения. Если Вы пользуетесь расширением Nitisa и, соответственно, Конструктором Форм интегрированным в Visual Studio, все пояснения остаются такими же за исключением того, что кнопки New(новая форма), Open(открыть), Save(сохранить) и Save as(сохранить как) в интегрированном Кострукторе Форм недоступны и нужно использовать стандартные возможности Visual Studio.

Общие

Посмотрите на Конструктор Форм. Его окно состоит из нескольких частей

  • Actions bar(Панель действий). Позволяет создавать новые формы, сохранять Вашу работу, открывать ранее сохраненные формы и открывать окно конфигурации.
  • Layouts switcher(переключатель шкурки) позволяет изменять шкурку формы в редакторе.
  • Секция Controls and components(Элементы управления и компоненты)(или просто виджеты) содержит все доступные элементы управления и компоненты из установленных пакетов.
  • Hierarchy editor(Редактор Иерархии) содержит иерархическое представление формы. Он также позволяет редактировать элементы управления и их порядок.
  • Секция Property and event editors(Редакторы свойств и событий) содержит два похожих инструмента. Редактор свойств позволяет редактировать свойства объектов, а редактор событий - их события.
  • Form editor(Редактор Формы) - это часть, в которой происходит редактирование Вашей формы.
Конструктор Форм

Между редактором формы и секцией слева, содержащей редакторы иерархии, свойств и событий, находится разделитель. Вы можете перемещаеть его с помощью мышы и менять размер части занимающей редактором формы и секции слева. Аналогичный разделитель расположен между редактором иерархии и редакторами свойств/событий. Давайте теперь поговорим обо всех частях и посмотрим как они могут быть использованы.

Панель действий

На панели действий расположены 5 кнопок для различных действий. Это(слева на право) New(новая форма), Open(открыть форму), Save(сохранить форму), Save as(сохранить форму как), Configure(настройки).

  • Кнопка New(новая форма) создает новую пустую форму. Если Вы уже сделали какие-либо изменения Вас сначала спросят не желаете ли Вы их сохранить перед созданием новой формы.
  • Кнопка Open(открыть) показывает окно выбора файла в котором Вы можете найти файл формы которую Вы хотите открыть в Конструкторе Форм. Если Вы уже сделали какие-либо изменения, то Вас вначале спросят не хотите ли Вы их сохранить перед открытием новой формы.
  • Кнопка Save сохраняет Вашу форму в файл и генерирует заголовочный файл с прототипом формы. Если Вы ранее еще не сохраняли форму, то Вам будет предложено выбрать куда ее сохранить и как назвать. Мы рекомендуем называть файл тем же именем, которое Вы даете Вашей форме в редакторе свойств.
  • Кнопка Save as работает так же как и кнопка Save только в этом случае всегда будет предлагаться выбрать куда сохранять файл формы.
  • Кнопка Configure(конфигурация) открывает окно настроек Конструктора Форм. Вы можете прочесть об этом окне далее в этой статье.

Панель действий Конструктора Форм

В Конструкторе Форм, интегрированном в Visual Studio, доступна только последняя кнопа(настройка). Создавайте новые формы, открывайте и сохраняйте их обычным образом, так же как Вы создаете, открываете и сохраняете любые файлы в Visual Studio.

Шкурка

Переключатель шкурок представляет собой простой выпадающий список. В нем перечислены все доступные шкурки. Выбирая элемент в этом выпадающем списке Вы измените внешний вид формы. Одна из шкурок показана на картинке ниже. Будте осторожны при переключении шкурок. Размер формы может поменятся.

Горизонтальная шкурка телефона в Конструкторе Форм

По умолчанию существует несколько шкурок. Они предстваляют собой форму наподобие как у ОС Windows, телефон(как портретная так горизонтальная ориентация) и планшет(так же как портретная так и горизонтальная ориентация). Вы можете также создавать свои собственные шкурки. Конструктор Форм загружает шкурки из специфического места. Это должна быть папка называющаяся FormLayouts и находящаяся либо в той же папке где и приложение Конструктор Форм или на один или два уровня выше. В этой папке можно создавать подпапки для своих шкурок. По умолчанию там есть папка с названием Standard. Создать шкурку достаточно просто. Все что для этого нужно это набор картинок для представления границ формы и конфигурационный файл в формате json.

В начале давайте обсудим картики шкурки формы. У каждой формы есть 4 границы: левая, верхняя, правая, нижняя. Вам необходимо создать картинки для этих границ. Или как минимум для тех из них, которые Вы хотите чтобы были видны в Конструкторе Форм. Картинки границы могут иметь следующие части.

Части границ шкурки
  • Start(начальная) часть. Представляет левую часть верхней храницы показанной на картинке выше. Показывается как есть в Конструкторе Форм.
  • Filler часть. Эта часть показывается в виде повторения в направлении X или Y оси в зависимости от границы. Если есть средняя часть, то заполнитель показывается перед и после ней. Если нет средней части, то заполнитель показывается между начальной и конечной частями или после начальной части если нет конечной, или перед конечной частью если нет начальной, или на всей границе если нет других частей.
  • Middle(средняя) часть показывается в середине границы и никак не трансформируется.
  • End часть показывается в конце границы. В примере конечная часть - это самая правая.

Каждая граница может иметь все или только некоторые из этих частей. Когда у границы есть нетрансформируемые части, такие как start(начальная), end(конечная) и middle(средняя), минимальный размер формы вычисляется с использованием размеров этих картинок. Так же одни и те же картинки можно использовать на разных границах. Картинки левой границы поворачиваются против часовой стрелки на 90o перед отображением. Картинки правой границы поворачиваются на тот же угол, но по часовой стрелке. Обратите на этот факт внимание при создании картинок для границ. Все картинки должны быть размещены в папке, которую Вы создали для Вашей шкурки.

Когда у Вас есть картинки границ Вашей шкурки, Вам нужно создать файл конфигурации. Его нужно поместить в ту же самую папку. Ему можно дать любое имя, но расширение должно быть json. Это должен быть файл в формате JSON и кодировке UTF-8. В нем могут быть указаны следующие свойства.

  • title - строка с названием шкурки, которая отображается в списке выбора шкурок в Конструкторе Форм. Это свойство обязательно.
  • landscape - булевское значение, указывающее эта шкурка представляет портретную или горизонтальную ориентацию. false по умолчанию если не указано.
  • size - объект указывающий размеры формы по умолчанию. Размер формы не будет менятся при активации этой шкурки если это значение не указано. У него есть следующие свойства
    • width - ширина формы по умолчанию
    • height - высота формы по умолчанию
  • caption - информация о том где и как отображать заголовок на шкурке. Если не указан, то принимается что заголовок не будет отображаться. У него есть следующие свойства
    • padding - массив из четырех целых чисел представляющих собой расстояние до заголовка от границ. В порядке: слева, сверху, справа, снизу.
    • border - строка указывающая на какой границе отображать заголовок. Может быть left - левая, top - верхняя, right - правая, или bottom - нижняя.
  • left - объект с информацией о картинках левой границы. При отсутствии левая граница не будет отображаться. У него есть следующие свойства
    • start - имя файла начальной картики границы. Не обязательно.
    • middle - имя файла средней картинки границы. Не обязательно.
    • end - имя файла картинки для конца границы. Не обязательно.
    • fill - имя файла картинки заполнителя границы. Не обязательно.
  • top - объект с информацией о картинках верхней границы. При отсутствии верхняя граница не будет отображаться. Имеет тот же набор свойств что и left(левая) граница.
  • right - объект с информацией о картинках правой границы. При отсутствии правая граница не будет отображаться. Имеет такой же набор свойств как и left(левая) граница.
  • bottom - объект с информацией о картинках нижней границы. Если отсутствует, нижней границы не будет. Содержит такой же набор свойств как и left(левая) граница.

Вот пример файла конфигурации шкурки. 

{
    "title": "Phone",
    "landscape" : false,
    "left": {
        "fill": "phone-leftright-fill.png"
    },
    "top": {
        "start": "phone-top-start.png",
        "middle": "phone-top-middle.png",
        "end": "phone-top-end.png",
        "fill": "phone-top-fill.png"
    },
    "right": {
        "fill": "phone-leftright-fill.png"
    },
    "bottom": {
        "start": "phone-bottom-start.png",
        "middle": "phone-bottom-middle.png",
        "end": "phone-bottom-end.png",
        "fill": "phone-bottom-fill.png"
    },
    "size": {
        "width": "670",
        "height": "1280"
    },
    "caption": {
        "border": "top",
        "padding": [8, 0, 0, 0]
    }
}

Элементы управления и компоненты

Эта секция содержит все элементы управления и компоненты(также называемые виджетами) доступные для добавления на форму. У нее может быть несколько вкладок. Чтобы добавить элемент управления на форму, просто кликните на кнопке нужного элемента управления или компонента в этой секции на любой вкладке и дальше кликните на форме в том месте, где нужно добавить выбранный элемент управления/компонент. Если Вы кликнули не на том элементе управления, просто кликните на нужном и потом добавьте его на форму. При наведении мышы на кнопки в этой секции, через пару секунд появляется всплывающая подсказка с именем(и иногда другой информацией об элементе управления, что зависит от самого элемента управления) элемента управления. Если на табке не хватает места для отображения всех элементов управления, присутствующих на ней, как можно увидеть на картинке ниже, появляется возможность прокрутки. Можно прокручивать зажав кнопку мышы на левой или правой стрелке для прокрутки табки или используя колесико мыши, когда указатель мышы находится над этими частями.

Панель элементов управления и компонентов(или просто виджетов)

Конфигурация

Вы можете открыть форму настройки Конструктора Форм соответствующей кнопкой в панеле действий. На этой форме Вы можете изменить настройки Конструктора Форм, касающиеся сетки формы, выделения и генерирования заголовочного файла прототипа формы. После изменений Вы можете кликнуть по любой кнопке Apply или использовать комбинацию клавиш Ctrl+Return чтобы применить изменения глобально, а так же кликнуть по кнопке Cancel или нажать Escape для отмены изменений. Форма настроек выглядит как на картинке ниже.

Конфигурация Конструктора Форм

И вот список с описаниями всех опций.

  • Секция Grid Settings описывает настройки сетки формы
    • X-Axis checkbox определяет будет ли перемещение и изменение размера прилеплено к сетке в направлении оси X.
    • Y-Axis checkbox определяет будет ли перемещение и изменение размера прилеплено к сетке в направлении оси Y.
    • Состояние Rotate checkbox(чекбокс "вращение") определяет будет ли вращение элементов управления привязано к сетке или нет.
    • X-Axis input хранит размера шага сетки в направлении оси X.
    • Y-Axis input хранит размер шага сетки в направлении оси Y.
    • В Rotate input(поле ввода для вращения) хранится информация о размере сетки для вращения(в градусах).
    • Point Color(цвет точки) хранит цвет точек сетки на форме.
    • Point Size(размер точки) хранит размер точки сетки отображающейся на форме.
    • Shift(смещение) хранит смещение по оси X вспомогательного маркера для вращения выделенного элемента управления.
  • Секция Selection описывает внешний вид интерфейса выделения
    • Point Size(размер точки) - это размер маркеров помощников трансформаций отображающихся у выбранного виджета.
    • Border Width(ширина границы) определяет ширину границ прямоугольника отображающегося при выделении мыщью.
    • Border Color(цвет границ) определяет цвет границ прямоугольника отображающегося при выделении мышью.
    • Background Color(цвет фона) определяет цвет фона у прямоугольника отображающегося при выделении мышкой.
  • Секция Form Editor highlight содержит информацию о подсветке Редактора Формы, когда он активен
    • Left - ширина и цвет левой границы Редактора Формы, когда он активен.
    • Top - ширина и цвет верхней границы Редактора Формы, когда он активен.
    • Right - ширина и цвет правой границы Редактора Формы, когда он активен.
    • Bottom - ширина и цвет нижней границы Редактора Формы, когда он активен.
    • *Замечание: Вы можете установить всем границам значение ноль, если Вам не нужна эта подсветка совсем.
  • Секции Overwrite includes(Перезапись подключения заголовочных файлов) и Overwrite namespaces(Перезапись пространств имен) позволяют немного изменить прототип формы, генерируемый Конструктором Форм для Вашей формы. Первая настройка позволяет изменить начало подключаемых заголовочных файлов, а вторая - изменить префиксы пространств имен виджетов и аргументов.

    Когда это может быть полезным? Предположим Вы создаете Ваши собственные виджеты в пакете с названием SuperWidgets. В этом случаю, если Вы следуете соглашениям по структуре фреймверка, Ваш пакет будет находится в папке SuperWidgets и весь его код(включая все виджеты) будет находится в пространстве имен superwidgets. Если в Вашем пакете есть формы, Вы без сомнения будете использовать Конструктор Форм для их создания. Предположим, что Вы поместили один или несколько виджетов из Вашего пакета на такую форму. В этом случае Конструктор Форм сгенерирует прототип формы стандартным способом, добавляя #include в том виде, в котором Вы указали в пакетных сущностях и аналогично добавляя соответствующее пространство имен к виджетам. Пусть в Вашем пакете есть виджет с названием SuperGrid. Этот виджет описан стандартным способом и код, сгенерированный для него, будет таким как следующий. 

    ...
#include "SuperWidgets/Controls/SuperGrid/SuperGrid.h
...
namespace nitisa
{
    ...
    m_pSuperGrid1 = new superwidgets::CSuperGrid();
    ...
}

    Это не правильно, так как Ваша форма тоже включена в Ваш пакет. Чтобы заставить Конструктор Форм генерировать прототип формы правильно, можно использовать функции переопределения. Итак, в этом случае просто добавьте переопределение включения заголовочного файла с SuperWidgets на ../..(предполагая что Ваша форма находится в папке SuperWidgets/Forms/[Name]/) и пространства имен с superwidgets на пустую строку. Если Вы это сделаете, то Конструктор Форм сгенерирует следующее вместо того что было ранее. 

    ...
#include "../../Controls/SuperGrid/SuperGrid.h
...
namespace nitisa
{
    ...
    m_pSuperGrid1 = new CSuperGrid();
    ...
}

  • Раздел Export содержит настройки генерации прототипа формы
    • Namespace(пространство имен) - это пространство имен в которое будет помещен код прототипа формы.
    • Widgets prefix - префикс для всех элементов управления и компонентов, который будет добавлен к их именам в классе прототипе формы.
    • Widgets section - указывает где разместить виджеты в классе прототипе формы.
    • Чекбокс Generate getter позволяет включать и выключать генерирование методов в публичной секции класса прототипа формы, которые возвращают указатели на виджеты. Эти методы имеют название get+[Widget name]. Например, если у Вас есть виджет кнопки из стандартного пакета с именем ButtonOk на Вашей форме, то сгенерированный метод в публичной части класса будет standard::CButton *getButtonOk();
    • Export as - определяет как будет генерироваться прототип формы. Это может быть либо обычная форма-окно, либо форма в режиме диалогового виджета. Выбирая опцию DialogBox, Вы так же должны выбрать какой диалоговый виджет нужно использовать в качестве базового класса. В зависимости от выбранной опции, сгенерированный заголовочный файл с прототипом формы будет содержать либо обычную форму либо диалоговый виджет. Может понадобиться, чтобы имя заголовочного файла с прототипом и имя формы различались в зависимости от выбранной опции и должно начинаться либо с Form либо с DialogBox, но нет необходимости создавать два файла формы для этого. Для такого случая можно использовать заместитель {type} в свойстве Name формы. Например, если указать в качестве имени формы в свойстве Name значение {type}Main и после этого сохранить ее с настройкой установленной в Form, Конструктор Форм создаст заголовочный файл с прототипом формы называющийся IFormMain.h с классом-прототипом формы внутри, называющимся IFormMain. Если переключить настройку в DialogBox и выбрать от какого диалогового виджета наследовать Ваш и сохранить форму снова, Вы получите файл с названием DialogBoxMain.h с прототипом диалогового виджета внутри с названием IDialogBoxMain.

Вы можете изменить цвета кликнув на соответствующей панели. Появится диалоговое окно выбора цвета.

Кнопка Apply to form only закрывает окно конфигурации и применяет настройки только к Вашей форме. Это означает, что когда Вы закроете Конструктор Форм и откроете его заново, будут применены старые настройки. Однако каждый раз, когда Вы загружаете эту конкретную форму, новые настройки будут загружены из ее *.nfr файла и применены в Конструкторе Форм.

Apply globally кнопка закрывает окно настроек и применяет их глобально, а так же удаляет настройки из формы, если они там были. Так же можно использовать комбинацию клавиш Ctrl+Enter.

Кнопка Cancel закрывает окно настроек и отменяет сделанные изменения. Так же можно использовать клавишу Esc.

Настройки

Некоторые настройки в настоящий момент не представлены в окне конфигурации Конструктора Форм. Эти настройки относятся к пакетам и элементам управления и могут быть изменены редактированием специального конфигурационного файла packages.json, который должен находится в той же папке где и исполняемые файлы Конструктора Форм. По умолчания такой файл отсутствует и используются настройки по умолчанию. Это значит что все доступные пакеты будут загружаться и все доступные в них сущности будут использоваться Конструктором Форм. Если Вы желаете скрыть некоторые виджеты или целые пакеты, Вам нужно создать файл packages.json с содержимым в следующем формате. Он должен быть в кодировке UTF-8. Следующие свойства могут быть помещены в него.

  • packages - массив с настройками для всех установленных пакетов. Каждый объект массива имет следующую структуру
    • filename - строка с именем файла(dll) пакета. Название пакетов имеет формат Package.*.dll. Здесь * - это имя пакета. Должно быть в том же регистре что и имя скомпилированного файла пакета.
    • hidden - опциональное булевское значение, указывающее будет ли пакет полностью скрыт.
    • components - массив компонентов(имена классов), которые должны быть скрыты в Конструкторе Форм.
    • controls - массив элементов управления(имена классов), которые должны быть скрыты в Конструкторе Форм.
    • forms - массив имен форм(точнее названий их классов), которые не должны быть доступны в Конструкторе Форм. Зарезервировано для будущего использования.
    • renderers - массив имен рендеров, которые должны быть недоступны в Конструкторе Форм. Зарезервировано для будущего использования.
    • styles - массив имен стилей, которые дожны быть скрыты в Конструкторе Форм.
    • handlers - массив имен редакторов свойств, которые дожны быть недоступны в Конструкторе Форм.

Вот пример файла конфигурации. Два элемента из Стандартного пакета называющиеся Container и ValueListEditor скрыты в Конструкторе Форм. 

{
    "packages": [
        {
            "filename": "Package.Standard.dll",
            "hidden" : false,
            "controls": ["Container", "ValueListEditor"]
        }
    ]
}

Редактор формы

Редактор формы - это часть Конструктора Форм, в которой происходит создание внешнего вида форм для приложений. Чтобы разместить элемент управление на нем, просто выберите нужный улемент управления в секции с элементами управления и компонентами кликнув на нужном и дальше кликните в нужном месте редактора формы. Чтобы выбрать элемент управления в редакторе формы просто щелкните левой кнопкой мышы на нем. Чтобы выбрать несколько элементов управления, кликайте на всех нужных элементах управления зажав клавишу Shift на клавиатуре. Если кликнуть еще раз на выбранном элементе управления пока нажата клавиша Shift, то элемент управления перестанет быть выбранным. Чтобы выбрать все элементы управления и компоненты на форме, используйте сочетание клавиш Ctrl+A. Так же можно выделять нажав левую кнопку мыши где-нибудь на форме и протянув курсор так, чтобы нужные элементы управления попали в выбранный прямоугольник. После этого отпустите кнопку мышы.

Процесс выделения в Конструкторе Форм

Для удаления выделенных элементов управления и компонентов можно нажать клавишу Delete на клавиатуре. Заметьте, клавиши и их комбинации на клавиатуре работают только когда редактор формы активен. Он становится не активным, когда Вы кликаете на других частях Констуктора Форм, таких как кнопки элементов управления или редактор свойств. Для активации редактора формы нужно кликнуть на нем(левой или правой кнопкой мышы; в случае клика правой кнопкой выделение останется незатронутым). Когда выделено несколько элементов управления, только их перемещения остается доступным. Вы можете заметить это по изменившемуся цвету маркеров трансформаций. Так же, компоненты нельзя ни вращать ни менять их размер. По умолчанию все операции, как перемещение, изменение размера и вращение, привязаны к сетке. Сетку можно отключить в окне настроек Конструктора Форм. Можно перемещать выделенные элементы управления и компоненты с помощью стрелок на клавиатуре. Если при этом держать нажатой клавишу Shift, то будет менятся их размер вместо перемещения. Операции производимые с помощью стрелок на клавиатуре не привязаны к сетке, однако, если Вы хотите чтобы они все же были привязаны, просто зажмите клавишу Ctrl.

Если текущая выбранная шкурка разрешает изменения размера формы, это можно сделать перетаскивая правую или нижнюю границу формы или ее правый нижний угол.

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

Активный Редактор Формы

Редактор иерархии

Редактор иерархии представляет Вашу форму в иерархическом виде и позволяет делать некоторые операции недоступные в редакторе формы. Когда Вы выделяете элемент управления или снимаете выделение с него в редакторе формы, тоже самое автоматически происходит в редакторе иерархии и аналогично наоборот. Чтобы выбрать элемент управления в редакторе иерархии достаточно кликнуть по нему. Чтобы добавить элемент управления к уже выделенным(или исключить из выделенных) зажмите клавишу Ctrl при клике. И хотя несколько элементов могут быть выбраны одновременно, только один из них может быть активным. Вы можете видеть это по подсвеченной красным границе, если элемент так же выделен, или черной границе, если он активен но не выделен. Некоторые действия происходят только с активным элементом управления. Так же можно использовать стрелки на клавиатуре, кнопки Home и End, для выбора и активации первого, последнего, предидущего и следующего элемента управления, а так же навигации внутрь и наружу по иерархии. Вы можете переключать видимость дочерних элементов в иерархии кнопками выглядящими как "+" и "-" в квадратике. Кнопки с верхней и нижней стрелкой нужны для изменения порядка создания элементов управления. Если нажать на клавишу Delete, все выбранные элементы управления, компоненты и другие объекты будут удалены. Тоже самое произойдет если нажать на кнопку выглядящую как кружек с "-" внутри. Некоторые элементы управления и компоненты позволяют добавлять дочерние элементы управления или другие сущности. Если активировать элемент управления/компонент/элемент списка, который позволяет это делать, то можно кликнуть на кнопке выглядящей как кружечек с "+" внутри и добавить дочерний элемент. Некоторые элементы управления позволяют добавлять элементы только первого уровня(например, ListBox). Так что, даже если кликнуть на одном из существующих элементов и после этого нажать на кнопку добавления, то новый элемент все равно будет добавлен к ListBox, а не к активному элементу. Некоторые другие элементы управления могут иметь многоуровневую структуру. Эта структура называется деревом. Для таких элементов управления, новые элементы будут добавлятся как дочерние элементы активного элемента. Некоторые элементы управления, такие как MainMenu показанный ниже, спрашивают какой тип элемента нужно добавить и дополнительные данные перед добавлением.

Редактор Иерархии

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

Редактор свойств

Редактор позволяет редактировать свойства элементов управления, компонентов, элементов списка и форм. Если ничего не выбрано, то редактор свойств содержит свойства формы. Когда Вы выделяете что-то на форме или в редакторе иерархии, его свойства появляются в редакторе свойств. При выделении нескольких объектов их общие свойства так же можно редактировать. Заметьте, в этом случае отображаются значения свойств только первого выбранного объекта однако, когда Вы отредактируете любое свойство, изменения применятся ко всем выделенным объектам. Можно пользоваться стрелками на клавиатуре и обычными кнопками, такими как Home, PageDown и так далее, для навигации по свойствам. Некоторые свойства, как Вы можете видеть, имеют несколько "подсвойств". Получить доступ к ним можно кликнув по иконке "+" слева от имени свойства. Эти "подсвойста" говорят о том, что свойство может иметь разные значения в зависимости от состояния элемента управления и эти значения можно изменять отдельно для каждого доступного состояния. Когда Вы кликаете на свойстве(то же самое происходит если Вы используете клавиатуру для перемещения к другому свойству в списке), оно становится активным и можно изменять его значение. Некоторые свойства можно редактировать непосредственно в редакторе свойств, другие же можно отредактировать в окне внешнего редактора. Обычно у таких свойств в активном состоянии присутствует небольшая кнопка справа с 3-мя точками указывающая на наличие внешнего редактора. Вы можете кликнуть на этой кнопке(или сделать двойной щелчек мышью по значению свойства), чтобы открыть окно редактора. Существует много типов внешних редакторов. Их внешний вид и поведение зависит от свойства и реализация предоставляется установленными пакетами.

Редактор Свойств

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

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

Цвет

Этот редактор позволяет выбирать цвет. Можно кликать на цветных секциях для выбора цвета визуально. Левая секция называется HSV-панель, а вторая HSV-полоса. Так же можно указывать точные значения в полях ввода либо в HSV либо в RGB форматах. Не забывайте указывать нужное значение "A", которое представляет собой прозрачность или альфа-канал. 0 - полностью прозрачный цвет, 255 - полностью непрозрачный цвет. Можно воспользоваться клавишами Enter и Esc на клавиатуре для применения изменений или их отмены.

Форма выбора цвета

Градиент

Этот редактор позволяет легко проектировать градиенты. Можно добавлять контрольные точки к градиенту кликая на его графическом представлении в верхней части формы редактора и удалять кликая правой кнопкой мышы на нужной точке. Можно кликнуть на точке, чтобы выделить ее и перетаскивать в нужное положение. Так же можно установить точное положение в поле ввода. Это значение должно быть в диапазоне 0..1. У выбранной точки можно поменять цвет кликнув на панель слева ниже градиента. Появится уже знакомый Вам редактор цвета. Используя кнопки со стрелками можно переключатся между точками градиента. Это полезно когда они находятся очень близко друг к другу и становится невозможным выбрать нужную точку кликая по ней. Так же можно выбрать тип градиента в выпадающем списке. При этом представление градиента на форме не изменится однако не волнуйтесь - нужный тип будет применен к редактируемому свойству. Так же можно применить изменения нажав Ctrl+Enter и отменить их нажав клавишу Esc.

Форма редактора градиентов

Горячая клавиша

Используется для указания комбинации клавиш. Просто активируйте поле ввода и нажмите любую комбинацию клавиш, которая Вам нужна. Укажите будет ли это комбинация на нажатие или отпускание клавиш(многие свойства работают в независимости от состояния этого флага) используя чекбокс справа. Если никакая комбинация клавиш больше не нужна, используйте кнопку No hotkey чтобы очистить поле ввода.

Форма редактора горячих клавиш

Список горячих клавиш

Этот редактор похож на предидущий, только он управляет списком горячих клавиш. Можно добавлять и удалять горячие главиши, очищать список и кликнув на OK применять изменения или на Cancel для их отмены.

Форма редактора списка горячих клавиш

Картинка

Редактор позволяет загружать и удалять картинку в свойство. После загрузки картинки, ее размер появится ниже кнопок. Избегайте использования свойств с большими картинками. Будет лучше иметь картинки отдельно от приложения и загружать их вручную. Картинки в свойствах хранятся без каких-либо оптимизаций и сжатий и, более того, они производят огромное количество исходного кода при генерации прототипа формы.

Форма загрузки картинки

Список картинок

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

Форма редактора списка картинок

Матрица

Редактор позволяет указывать матрицы непосредственно редактируя их элементы. Во фреймверке используются квадратные матрицы размером 4x4 для преобразования векторов. При преобразовании вектора матрица умножается на вектор (матрица * вектор). Помните это при задании элементов матрицы.

Форма редактора матриц

Memo

Этот редактор представляет простой текстовый редактор для многострочного текста. Он обладает общими свойствами и сочетаниями клавиш для подобных редакторов.

Форма редактора многострочного текста

Элемент списка меню

Это специфический редактор. Он разработан только для элементов управления типа меню Стандартного Пакета. Он позволяет выбирать какой тип элемента добавить к элементам управления MainMenu или PopupMenu.

Формы выбора элемента списка меню

Point/PointL/PointF/PointD

Эти четыре похожих редактора позволяют редактировать свойства, которые хранят 2 значения либо в виде целых чисел либо в виде чисел с плавающей точкой. У многих свойств значения хранятся в такой форме. Например, ShadowShift указвающее как далеко располагается тень относительно элемента управления в направлениях X и Y.

Форма редактора точки с данными типа число с плавающей точкой

PointB

Этот редактор позволяет редактировать свойства, которые представляют собой набор из 2 булевских значений.

Форма редактора точки булевского типа

Rect/RectL/RectF/RectD

Эти редакторы позволяют указывать значения свойств, которые представляют собой набор из 4 значений являющихся либо целыми числами либо числами с плавающей точкой. Например, свойство BorderWidth обычно хранит информацию о ширине всех четырех границ.

Форма редактирования целочисленного прямоугольника

RectB

Этот редактор позволяет редактировать свойства, которые представляют собой набор из 4 булевских значений.

Форма редактора прямоугольника булевского типа

BorderColor

Этот редактор используется для редактирования значений свойств, которые хранят набор из 4х значений цвета. Например, свойство BorderColor часто указывает цвета всех 4х возможных границ.

Форма редактора цвета границ

Трансформация

Этот редактор служит для редактирования трансформаций. Объект трансформация используется очень часто. Все элементы управления используют трансформации. Трансформация состоит из трех типов преобразований: трансляция или перемещение, вращение и масштабирование. Их значения можно указать в полях ввода. Значения вращений должны быть в радианах. Так же трансформация хранит информацию о том, как все эти преобразования должны сочетаться вместе. Можно указать порядок вращения и порядок применения преобразований. Рекомендуется использовать значения по умолчанию.

Форма редактора трансформаций

Маска

Этот редактор позволяет визуально редактировать двоичные маски. Двоичная маска представляет собой 32-битное беззнаковое целое число, в котором каждый бит используется как маска. Если значение бита равно нулю, то не будет ничего рисоваться в соответствующей позиции. Рисование с использованием масок обычно можно обнаружить в элементах управления использующих свойства "обводки". Например, StringGrid использует его для обозначения активной ячейки.

Форма редактора маски

BoolArray

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

Форма редактора BoolArray

IntegerArray

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

Форма редактора IntegerArray

FloatArray

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

Форма редактора FloatArray

ColorArray

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

Форма редактора ColorArray

SelectListItem

This editor allows to select which type of item is to be added to the Select widget and widgets like it having two types of items: regular and category.

SelectListItem editor form

Редактор событий

Редактор событий позволяет редактировать названия событий элементов управления. Эти названия будут в заголовочном файле прототипа формы в виде методов класса и должны быть реализованы в Вашем приложении. Если событие Вам более не нужно, просто очистите значение рядом с его именем. Если событию не назначено название Вы можете с помощью двойного клика сгенерировать для него название, которое собирается из имен элемента управления и события. Так же можно использовать выпадающий список чтобы выбрать уже существующее событие. Только совместимые события будут в этом выпадающем списке. Отметьте: когда вы назначаете одно и то же имя разным событиям, один и тот же метод будет вызываться для этих разных событий и Вам, скорее всего, придется каким-то образом принимать решение в Вашем C++ коде о том, какое действие предпринять.

Редактор Событий

 Начало работы

Принципы