Готовый перевод Documentation for CEGUI / Документация к CEGUI: Falagard skinning system. Introduction to Falagard ''looknfeel'' XML

Прежде, чем мы перейдем к делу, я бы хотел отметить, что данная статья (или, все таки, вся документация) не предназначена для обучения XML.

Подразумевается, что читатель немного знаком с XML и его правильным применением.

Перед началом: Пустой шаблон

Прежде чем начнем добавлять шаблоны объектов, или WidgetLook, так называется тег в скрипте, нам нужно начальное описание файла.

Это очень просто и выглядит вот так:

Мы будем вставлять определения WidgetLook между парой <Falagard></Falagard>.

Заключать элементов между этими тегами разрешается сколько угодно, так что все нам необходимое можно засунуть в один файл (в большинстве случаев это заканчивается ОЧЕНЬ большим файлом).

Начнем с простого: Кнопка

Без сомнения можно сказать, что скромная кнопочка является наиболее распространенным объектом. Без нее любой Пользовательский Интерфейс был бы практически бесполезным.

Так что с нее и начнем.

Для того чтобы создать шаблон любого объекта, нужно использовать тег WidgetLook и указать имя для типа объекта, который вы определяете, используя атрибут name.

Поэтому мы начнем с добавления к нашему исходному файлу пустого тега WidgetLook:

Как вы можете увидеть из справки для окна Falagard/Button, мы можем указать вид кнопки для многочисленных состояний, а именно: Normal, Hover, Pushed, Disabled.

Поскольку теперь мы знаем какие состояния поддерживает объект, то было бы неплохо добавить для них каркас.

Фактически это дополнит WidgetLook и сделает его самодостаточным, хотя вполне очевидно, что на данном этапе, пока мы не описали виды, ничего отображаться не будет.

Давайте покончим с этим, и добавим пустые теги StateImagery для необходимых состояний:

Чтобы описать, как объект должен выглядеть, используется тег ImagerySection.

Каждому сегменту дается имя.

Имя используется позже, для подключения сегмента внутрь слоев, которые определяются для каждого состояния.

Для нашей кнопки, мы создадим сегменты для каждого состояния кнопки.

Мы можем добавить наброски в наш WidgetLook, который находится в стадии разработки:

Теперь мы можем определить ImageryComponent для каждого сегмента.

Он скажет системе, как наша кнопка должна выглядеть.

Есть много различных способов применить эти сегменты.

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

Все это звучит довольно просто, но есть одна проблема.

Размер изображения в пикселях может быть разный.

Для того, чтобы указать какое изображение нужно использовать, мы применяем тег ImageryComponent.

Он должен быть добавлен внутрь тега ImagerySection.

Добавим пустой ImageyComponent в normal_imagery:

Первое, что нужно сделать - добавить в ImageryComponent определение области, которое скажет системе, где изображение должно быть отображено:

Внимание! Этот перевод, возможно, ещё не готов.
Его статус: идёт перевод

Переведено на Нотабеноиде
http://notabenoid.org/book/30113/102723

Переводчики: proVIDec