| |
Menu.xml
У Aston есть несколько виджетов, основанных на меню. Все они используют разметку скинов из файла "Menu.xml".
Этот файл достаточно большой. Он содержит объекты для всех основанных на меню виджетов.
Раздел object[name="Menu"] содержит разметку скинов по умолчанию.
Любой основанный на меню виджет будет использовать именно его при отсутствии объекта со специальным для виджета именем.
Более того, при отсутствии любого скина в объекте со специальным именем,
он будет взят из меню по умолчанию (object[name="Menu"]).
Меню по умолчанию.
Пример:
...
<object name="Menu"
normal_font="Arial, size=16, style=B"
highlight_font="Arial, size=16, style=B"
normal_text_color ="0xFF000000"
normal_text_shadow ="0x0"
disabled_text_color ="0xFF999999"
highlight_text_color ="0xFFEFFFFF"
highlight_text_shadow ="0xFF000000"
drop_target_color ="0xC0802020"
item_height="48"
item_additional_width="10"
item_text_x_offset ="10"
item_text_y_offset ="2"
item_icon_x_offset ="6"
item_icon_y_offset ="0"
splitter_width="4"
splitter_height="4"
submenu_tag_size="32"
column_margin_top="8"
column_margin_bottom="8"
high_bar_animation="0">
<scroll_left>
<percent_rect x="0" y="0" x2="0" y2="100"/>
<pixel_rect x="0" x2="24" y="0" y2="0"/>
</scroll_left>
<scroll_right/>
<scroll_up/>
<scroll_down/>
<menu_frame name="default"/>
<menu_frame name="horizontal scroll"/>
<menu_frame name="vertical scroll"/>
<menu_frame name="button more"/>
<header_font color="0xFFc0c0cf"
shadow_color="0xFF000000"
font="Microsoft Sans Serif, size=8, style=B"
align_u = "left"
align_v = "center"/>
<header align_x="50" align_y="50">
<percent_rect x="0" x2="100" y="0" y2="0"/>
<pixel_rect x="12" x2="-12" y="0" y2="16"/>
</header>
<skin name="background"/>
<skin name="foreground"/>
<skin name="fixed background"/>
<skin name="movable background"/>
<skin name="multi selector"/>
<skin name="column background"/>
<skin name="item background"/>
<skin name="item foreground"/>
<skin name="highlight background"/>
<skin name="horizontal splitter"/>
<skin name="vertical splitter"/>
<skin name="scroll left"/>
<skin name="scroll right"/>
<skin name="scroll up"/>
<skin name="scroll down"/>
<skin name="button more"/>
<skin name="submenu tag"/>
<skin name="active submenu tag"/>
<skin name="header left"/>
<skin name="header center"/>
<skin name="header right"/>
<sounds>
<sound event="sound_Highlight" file="test1.wav">
<sound event="sound_Click" file="test2.wav">
</sounds>
</object>
...
|
Object attributes. Аттрибуты объектов:
| normal_font | - шрифт текста элемента |
| highlight_font | - шрифт текста подсвеченного элемента |
| normal_text_color | - цвет текста |
| normal_text_shadow | - цвет тени текста элемента |
| disabled_text_color | - цвет текста отключенного элемента |
| highlight_text_shadow | - цвет тени текста подсвеченного элемента |
| drop_target_color | - цвет дополнительного курсора при операции перетаскивания |
| item_height | - высота элемента меню (для не-разделенных элементов) |
| item_additional_width | - дополнительный резерв ширины элемента (суммированные смещения иконок/текста) |
| item_text_x_offset, item_text_y_offset | - смещение текста элемента |
| item_icon_x_offset, item_icon_y_offset | - смещение иконки элемента |
| splitter_width | - ширина вертикальной разделительной линии |
| splitter_height | - высота горизонтальной разделительной линии |
| submenu_tag_size | - ширина указателя под-меню (для элементов, указывающих всплывающие области) |
| column_margin_top | - верхняя граница меню |
| column_margin_bottom | - нижняя граница меню |
| high_bar_animation | - "1" если подключено, "0" если отключено |
Меню поддерживают три режима: без прокрутки, с горизонтальной прокруткой и с вертикальной прокруткой.
Если в меню достаточно места для всех элементов, прокрутка отключается.
Если места недостаточно, тогда будут отображаться два скроллера: вверх/вниз либо влево/вправо
в зависимости от режима размещения ("один столбец", "много столбцов", "один ряд"или "много рядов").
В некоторых виджетах может использоваться специальная кнопка (button more) вместо режима прокрутки.
В общем случае, режим размещения не является опцией скина.
Таким образом, каждый раздел scroll_left, scroll_right, scroll_top and scroll_bottom
содержит два компонента прямоугольника (позиции) для соответствующей кнопки прокрутки.
Для задания области элементов меню для каждого режима прокрутки используйте следующие разделы (только с пиксельным компонентом):
menu_frame[name="default"],
menu_frame[name="horizontal scroll"],
menu_frame[name="vertical scroll"]
or menu_frame[name="button more"].
In case when menu has a header (like in "Top List"), you can define font in header_font section and two components of rectangle of header in header section.
The reserved skin names are:
| "background" | - фон всей области виджета |
| "foreground" | - фон всего переднего плана виджета (например, стекло) |
| "fixed background" | - фон области элемента меню, не зависит от прокрутки |
| "movable background" | - альтернативный фон области элемента меню, он перемещается вместе с элементами при прокрутке |
| "multi selector" | - если меню поддерживает выбор элементов |
| "column background" | - может быть полезно в режиме множества столбцов |
| "item background" | - для каждого элемента меню |
| "item foreground" | - для каждого элемента меню |
| "highlight background" | - фон подсветки (подсвечивающего маркера) |
| "horizontal splitter" | - если есть в меню |
| "vertical splitter" | - для много-столбцовых режимов |
| "scroll left" | - скин левой кнопки прокрутки |
| "scroll right" | - скин правой кнопки прокрутки |
| "scroll up" | - скин верхней кнопки прокрутки |
| "scroll down" | - скин нижней кнопки прокрутки |
| "button more" | - скин кнопки "еще" |
| "submenu tag" |
- иконка под-меню. Обычно она выглядит как стрелка справа от элемента. |
| "active submenu tag" | - иконка субменю для выделенного элемента (замечательно выглядит с анимацией "anim_Highlight", запускается при каждой смене выделения) |
| "header left" | - левая часть заголовка меню (если таковая присутствует) |
| "header center" | - средняя часть заголовка меню (ширина зависит от текста заголовка) |
| "header right" | - правая часть заголовка меню |
Нет смысла использовать все скины (можно пропустить такие как "column background" or "item background").
Стандартные имена поддерживаемой анимации таковы:
| "anim_Spawn" | - анимация при первом открытии меню |
| "anim_Normal" | - в нормальном состоянии прокрутки (используется для остановки анимации кнопок прокрутки) |
| "anim_Scroll_Left" | - для анимации левой кнопки прокрутки |
| "anim_Scroll_Right" | - для анимации правой кнопки прокрутки |
| "anim_Scroll_Up" | - для анимации верхней кнопки прокрутки |
| "anim_Scroll_Down" | - для анимации нижней кнопки прокрутки |
| "anim_Highlight" | - когда подсветка включена на другом элементе |
| "anim_Press_On" | - при нажатии левой кнопки мыши |
| "anim_Press_Off" | - при отжатии левой кнопки мыши |
| "anim_Activate" | - при активации элемента меню (мышью либо клавиатурой) |
Звуковые события зависят от виджета, но эти два стандартны: "sound_Highlight", "sound_Click".
Меню по умолчанию поддерживает стандартные суффиксы в имени.
Иконки рабочего стола.
Данное меню используется для работы с ярлыками рабочего стола. Специальное имя "Desktop Icons"
(поддерживаются стандартные суффиксы в имени).
Рабочий стол включает кнопку "Еще", если недостаточно места для всех ярлыков (нет режимов прокрутки).
Ярлыки используют специальный метод размещения. Можно выделять их несколько сразу для групповых операций перетаскивания.
Ярлыки можно подсвечивать Цветовыми метками. Они могут быть анимированы с использованием 3D эффектов при наведении курсора (в зависимости от шкурки).
Пользователь может изменять размер иконок удерживая клавишу "Ctrl" и поворачивая колесико мыши.
Дополнительные шкурки:
| "item background" | - весь фон ярлыка |
| "icon quad background" | - фон вокруг иконки (всегда квадратный) |
| "icon quad foreground" | - передний план вокруг иконки |
| "icon fx" | - заменяет иконку на выделенном ярлыке. полезен для создания отличных 3D эффектов с иконками. просто пропустите атрибут diffuse_image в объявлении материалов и изображение иконки будет использовано в качестве текстуры. вы можете использовать model="*QUAD*" в качестве встроенной модели квадрата |
| "color tag" | - скин всего ярлыка. используется при указанной цветовой метке |
| "text background" | - фон текста ярлыка (может использовать shader="colorize") |
| "text color tag" | - скин текста ярлыка. используется при указанной цветовой метке.
Для рисования используйте shader="colorize" |
| "icon select mark" | - может заменять маркер "выбрать" (если задан) |
| "icon cut mark" | - может заменять маркер "вырезать" (если задан) |
Поддерживаемые имена анимации:
| "anim_Spawn" | - анимация при первом открытии меню |
| "anim_Normal" | - в нормальном состоянии прокрутки (используется для остановки анимации кнопок прокрутки) |
| "anim_Scroll_Left" | - для анимации левой кнопки прокрутки |
| "anim_Scroll_Right" | - для анимации правой кнопки прокрутки |
| "anim_Scroll_Up" | - для анимации верхней кнопки прокрутки |
| "anim_Scroll_Down" | - для анимации нижней кнопки прокрутки. |
| "anim_Highlight" | - когда подсветка включена на другом элементе |
| "anim_Press_On" | - при нажатии левой кнопки мыши |
| "anim_Press_Off" | - при отжатии левой кнопки мыши |
| "anim_Activate" | - при активном элементе меню (мышью либо клавиатурой) |
| "anim_Button_Highlight_On" | - включена подсветка кнопки "Еще" |
| "anim_Button_Highlight_Off" | - выключена подсветка кнопки "Еще" |
| "anim_Button_Press_On" | - нажата кнопка "Еще" |
| "anim_Button_Press_Off | - отпущена кнопки "Еще" |
Меню пенели иконок.
Это меню открывается кнопкой "Еще" в таком виджете как "Быстрый запуск" и "Иконки рабочего стола".
Мы назвали его "Icon Bar Menu" (Меню с иконками) (поддерживаются стандартные суффиксы в имени).
Режим прокрутки - вертикальный. См. описание меню по умолчанию в качестве примера.
Меню Aston и меню Программы.
Два данных виджета являются основными частями системной панели запуска (которая открывается кнопкой Пуск на панели задач).
Aston меню предоставляет основное системное меню (Недавние документы, Мои документы, Моя музыка, Мои картинки и т.д.)
У данного виджета есть внутренний PROGID="A2.KAstonMenuWidget.1".
В некоторых случаях элемент "Программы" должен быть размещен отдельно (например, под частью Популярные программы).
В этом случае, виджет использует опцию темы enable_programs="0", и должен быть добавлен дополнительный виджет (лишь с элементом "Программы"). У данного виджета есть внутренний PROGID="A2.KAstonProgramsWidget.1".
Таким образом вы можете задавать объект меню со специальным именем "Aston Menu" для основного системного меню.
И вы также можете задавать объект меню со специальным именем "Programs" только для меню Программы.
Режим прокрутки зависит от выбора пользователя через диалог свойств виджета (в один столбец или несколько).
Дизайнеры должны задавать все режимы прокрутки (конечно, кроме кнопки "Еще").
Поддерживаются стандартные суффиксы в имени скиненного объекта.
Файловое меню.
Данный виджет используется во всплывающем окне с содержимым папки (открываемом из Aston меню, меню Программы, виджет Диски и т.д.). Специальное имя объекта - "File Menu". Объект поддерживает стандартные суффиксы в имени.
Режим прокрутки задается пользователем (в общем случае). См. описание меню по умолчанию в качестве примера.
Популярные программы.
Обычно, этот виджет используется как часть системного меню Пуск.
Специальное имя объекта - "Top List". Поддерживаются стандартные суффиксы в имени объекта.
Виджет может использовать заголовок со строкой "Top Programs", который может быть переведен на язык пользователя.
Нет режимов прокрутки. Нет кнопки "Еще" (потому что виджет используется для быстрого доступа к часто используемым файлам).
См. описание меню по умолчанию в качестве примера.
Диски.
Виджет используется для работы с файлами и папками на дисках.
Специальное имя объекта - "Top List". Объект поддерживает стандартные суффиксы в имени.
Режим прокрутки - вертикальный.
...
<object name="Disks" height="64" width="255">
<diskname
align_u = "left"
align_v = "center"
normal_font="Century Gothic, size=12, style=B"
highlight_font="Century Gothic, size=12, style=B"
normal_text_color ="0xFF000000"
normal_text_shadow ="0xFFe8e8ef"
highlight_text_color ="0xFFfff0c0"
highlight_text_shadow ="0xFF8080c0">
<percent_rect x="0" x2="100" y="0" y2="0"/>
<pixel_rect x="55" x2="0" y="6" y2="38"/>
</diskname>
<diskinfo/>
<skin name="icon"/>
<skin name="indicator"/>
</object>
...
|
Дополнительные атрибуты объекта:
| width | - минимальная ширина панели информации о дисках |
| height | - минимальная высота панели информации о дисках |
Виджет выглядит как меню элементов с информацией о дисках.
Для каждой панели информации о дисках задается несколько прямоугольников для имени диска и информации о диске.
Раздел diskinfo должен задаваться так же как и diskinfo.
Дополнительные имена скинов: "icon" и "indicator".
Также, анимация поддерживает индикатор с именем "progress".
Контроль питания.
Обычно этот виджет используется как часть системного меню Пуск.
Произвольное имя объекта - "Power Control". Объект поддерживает стандартные суффиксы в имени.
Режим прокрутки - задается пользователем (в общем случае).
...
<object name="Power control"
mode="1"
icon_size="33"
item_additional_width="8"
item_additional_height="12"
item_icon_x_offset="4"
item_icon_y_offset="0"
item_text_x_offset="0"
item_text_y_offset="8">
<skin name="Log Off"/>
<skin name="Turn off"/>
<skin name="Restart"/>
<skin name="Switch User"/>
<skin name="Stand By"/>
<skin name="Hibernate"/>
</object>
...
|
Виджет выглядит как панель кнопок.
У каждой кнопки есть иконка и текст.
Атрибуты объекта:
| mode | - "0" - иконка выровнена по левому краю, текст - по правому.
- "1" - иконка выровнена по середине сверху, текст - по середине снизу.
|
| icon_size | - ширина и высота иконки |
| item_additional_width | - дополнительная ширина кнопок (добавляется к автоматически определяемой ширине). |
| item_additional_height | - дополнительная высота кнопок (добавляется к автоматически определяемой высоте). |
| item_icon_x_offset, item_icon_y_offset | - смещение иконки |
| item_text_x_offset, item_text_y_offset | - смещение текста |
Зарезервированные имена скинов для иконок: "Log Off", "Turn off", "Restart", "Switch User", "Stand By", "Hibernate".
Быстрый запуск.
Виджет используется для быстрого запуска программ.
Специальное имя объекта - "Quick Launch". Объект поддерживает стандартные суффиксы в имени.
Виджет может использовать заголовок с именем папки.
Виджет использует кнопку "Еще" вместо режимов прокрутки.
Пример (только для атрибутов):
...
<object name="Quick Launch"
drop_target_color ="0xC0802020"
item_height="16"
item_additional_width="5"
item_additional_height="0"
item_text_x_offset ="1"
item_text_y_offset ="1"
item_icon_x_offset ="0"
item_icon_y_offset ="0"
column_margin_left="4"
column_margin_right="4"
column_margin_top="11"
column_margin_bottom="0"
min_width="55"
min_height="36" >
</object>
...
|
См. описание меню по умолчанию в качестве примера.
Список задач.
Виджет используется для управления задачами.
Специальное имя объекта - "Task List". Объект поддерживает стандартные суффиксы в имени.
Режим прокрутки - вертикальный.
Пример:
...
<object name="Task List"
item_height="32"
item_margin_left ="0"
item_margin_top ="0"
item_margin_right ="4"
item_margin_bottom="0"
item_text_x_offset ="10"
item_text_y_offset ="0"
item_icon_x_offset ="10"
item_icon_y_offset ="0"
column_margin_left ="4"
column_margin_right ="0"
column_margin_top ="11"
column_margin_bottom="0" >
<normal_font color="0xffffffff"
shadow_color="0x88000000"
font="Microsoft Sans Serif, size=10, style=B"
align_u = "left"
align_v = "center"/>
<highlight_font/>
<minimize_font/>
<active_font/>
<flash_font/>
<indicator>
<percent_rect x="0" x2="100" y="100" y2="100"/>
<pixel_rect x="20" x2="-20" y="-4" y2="-2"/>
</indicator>
<skin name="background"/>
<skin name="foreground"/>
<skin name="highlight background"/>
<skin name="back indicator"/>
<skin name="back indicator bar"/>
<skin name="front indicator"/>
<skin name="front indicator bar"/>
<skin name="task background">
<animation name="anim1">
<render image="test.png" u="0" v="550"/>
<render image="test.png" u="0" v="510"/>
<sequence name="anim_Highlight_On">
<frame render="0"/>
</sequence>
<sequence name="anim_Highlight_Off">
<frame render="-1"/>
</sequence>
</animation>
<animation name="anim2">
<render image="test.png" u="0" v="510"/>
<render image="test.png" u="0" v="510"/>
<sequence name="anim_Minimize_On">
<frame render="0"/>
</sequence>
<sequence name="anim_Minimize_Off">
<frame render="-1"/>
</sequence>
</animation>
<animation name="anim3">
<render image="test.png" u="0" v="590"/>
<render image="test.png" u="0" v="510"/>
<sequence name="anim_Active_On">
<frame render="0"/>
</sequence>
<sequence name="anim_Active_Off">
<frame render="1"/>
</sequence>
</animation>
<animation name="anim4">
<render image="test.png" u="0" v="510"/>
<render image="test.png" u="0" v="510"/>
<sequence name="anim_Flash_On">
<loop/>
<frame render="0"/>
</sequence>
<sequence name="anim_Flash_Off">
<frame render="-1"/>
</sequence>
</animation>
<paint shader="blend" animation="anim3">
<smart_tiles x="40:8:40"/>
</paint>
<paint shader="blend" animation="anim4">
<smart_tiles x="40:8:40"/>
</paint>
<paint shader="blend" animation="anim2">
<smart_tiles x="40:8:40"/>
</paint>
<paint shader="blend" animation="anim1">
<smart_tiles x="40:8:40"/>
</paint>
</skin>
</object>
...
|
Границы столбцов здесь означают всю область элемента.
Главной функцией Списка задач является визуализация задач.
Задача может быть подсвечена при наведении курсора.
Задача может быть минимизирована.
Одновременно может быть активна только одна задача.
Плюс ко всему, задача может мерцать (чтобы предупредить пользователя о чем-то важном).
Воплощение всех этих функций было показано в примере выше.
Раздел normal_font содержит стандартные настройки шрифта для случая, когда все состояния выключены.
Разделы highlight_font, minimize_font, active_font and flash_font заполняются так же, как и normal_font
Взгляните на skin[name="task background"].
Этот скин использует четыре секции paint. Каждая из них показывает один из статусов задач с соответствующей анимацией ("anim1", "anim2", "anim3" or "anim4").
Дополнительная анимация для визуализации статуса задачи:
"anim_Highlight_On", "anim_Highlight_Off",
"anim_Minimize_On", "anim_Minimize_Off",
"anim_Active_On", "anim_Active_Off",
"anim_Flash_On", "anim_Flash_Off".
Другая особенность задачи - индикатор прогресса выполнения (progress indicator) (например, некоторые приложения могут отображать процесс выполнения задачи в процентах).
Для этого предусмотрены четыре специальных скина: skin name="back indicator", skin name="back indicator bar",
skin name="front indicator", skin name="front indicator bar".
Все они используют два компонента прямоугольника, заданных в разделе indicator.
Скин с именем "back indicator" используется как фон под заголовком задачи (если процент прогресса не равен нулю).
Скин с именем "front indicator" используется как передний план над заголовком задачи (если процент прогресса не равен нулю).
Скины с именами "back indicator bar" и "front indicator bar" используются для прорисовки панели процентного индикатора (задайте его как 100% заполненный, двигатель Aston сам его обрежет).
Также прогресс выполнения задачи можно нарисовать при помощи анимации "anim_Progress" для анимирования индикатора.
Не забудьте про режим прокрутки (см. описание меню по умолчанию в качестве примера).
Вы можете скачать нашу утилиту (7кб) для отладки скинов задач в вашей теме.
Область уведомлений (трей).
Виджет используется для управления иконками области уведомлений.
Специальное имя объекта "Tray". Объект поддерживает стандартные суффиксы в имени.
Режим прокрутки - горизонтальный.
Данный виджет опционально показывает кнопку для отображения/скрытия определенных пользователем иконок в трее.
Другими словами, эта кнопка миминизирует/максимизирует список иконок.
Пример:
...
<object name="Tray"
item_height="32"
icon_x_interval ="4"
icon_y_interval ="4"
item_icon_x_offset ="0"
item_icon_y_offset ="0"
column_margin_left ="0"
column_margin_right ="0"
column_margin_top ="10"
column_margin_bottom="0">
<expand_mode>
<button>
<percent_rect x="0" x2="0" y="50" y2="50"/>
<pixel_rect x="0" x2="16" y="-16" y2="16"/>
<skin name="expand button">
<animation name="exb_anim">
<render image="tray_button.png" u="469" v="412"/>
<render image="tray_button.png" u="479" v="412"/>
<render image="tray_button.png" u="489" v="412"/>
<render image="tray_button.png" u="489" v="412"/>
<render image="tray_button.png" u="469" v="442"/>
<render image="tray_button.png" u="479" v="442"/>
<sequence name="anim_Spawn">
<frame render="0"/>
</sequence>
<sequence name="anim_Max_Highlight_Off">
<frame render="0"/>
</sequence>
<sequence name="anim_Max_Highlight_On">
<frame render="1"/>
</sequence>
<sequence name="anim_Max_Press_On">
<frame render="2" fps="20"/>
</sequence>
<sequence name="anim_Min_Highlight_Off">
<frame render="3"/>
</sequence>
<sequence name="anim_Min_Highlight_On">
<frame render="4"/>
</sequence>
<sequence name="anim_Min_Press_On">
<frame render="5" fps="20"/>
</sequence>
</animation>
<paint shader="blend" animation="exb_anim"/>
</skin>
</button>
<tray_frame>
<pixel_rect x="20"/>
</tray_frame>
</expand_mode>
<skin name="widget background"/>
</object>
...
|
Скин с именем "widget background" закрашивает всю область виджета.
Раздел expand_mode используется для режима с кнопкой "развернуть".
Пользователь может включить этот режим в диалоге настроек Области уведомлений (опция "Свернуть/развернуть по клику").
Эта кнопка требует некоторого пространства в виджете, поэтому область для иконок (с возможными скроллерами) должна быть немного уменьшена.
Прямоугольник, заданный в разделе tray_frame как пиксельный компонент (удерживаются 20 пикселей слева в примере выше).
Под-раздел button содержит два компонента прямоугольника и скин для кнопки "развернуть".
Взгляните на дополнительную анимацию для этого:
| "anim_Min_Highlight_Off" | - при выводе мыши за пределы кнопки в свернутом состоянии
|
| "anim_Min_Highlight_On" | - при наведении мыши на кнопку в свернутом состоянии
|
| "anim_Min_Press_On" | - при нажатии левой кнопки мыши. Нет анимации на отпускание кнопки мыши, потому что кнопка переходит в развернутое состояние
|
| "anim_Max_Highlight_Off" | - при выведении мыши в максимизированном состоянии
|
| "anim_Max_Highlight_On" | - при наведении мыши на кнопку в развернутом состоянии
|
| "anim_Max_Press_On | - при нажатии левой кнопки мыши. Нет анимации на отпускание кнопки мыши, потому что кнопка переходит в свернутое состояние
|
Результаты поиска.
Этот объект используется в виджете Поиск во всплывающей области отображения результатов поиска.
Специальное имя объекта "Search Menu". Объект поддерживает стандартные суффиксы в имени.
Режим прокрутки - вертикальный.
Всплывающее окно с этим меню открывается при запуске поиска.
Новые элементы добавляются в список результатов по ходу поиска.
Вот почему этот оюъект поддерживает дополнительную анимацию "anim_Search" и "anim_Search_Done".
Например, вы можете использовать эту анимацию на скине фона или переднего плана.
См. пример описания меню по умолчанию.
| |
