| |
Menu.xml
Aston2 has several widgets based on menu. They all use skin layout from file "Menu.xml".
This file is big enough. It contains objects for all menu-based widgets.
The section object[name="Menu"] contains default skin layout.
Any menu-based widget will using this one if object with custom name is missed.
More than that, if any of skins will be missed in object with custom name,
than it will be took from default menu (object[name="Menu"]).
Default menu
Example:
...
<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 | - the font for the item text |
| highlight_font | - the font for the highlighted item text |
| normal_text_color | - the text color |
| normal_text_shadow | - the shadow of the item text color |
| disabled_text_color | - the disabled item text color |
| highlight_text_shadow | - the shadow of the highlited item text color |
| drop_target_color | - drag'n'drop auxiliary pointer color |
| item_height | - menu item height (for non-splitter items) |
| item_additional_width | - additional width reserve for an item (summed up as icon/text offsets) |
| item_text_x_offset, item_text_y_offset | - item text offset |
| item_icon_x_offset, item_icon_y_offset | - item icon offset |
| splitter_width | - width of the vertical splitter |
| splitter_height | - height of the horizontal splitter |
| submenu_tag_size | - width of the sub-menu tag (for the items that indicate popups) |
| column_margin_top | - top menu margin |
| column_margin_bottom | - bottom menu margin |
| high_bar_animation | - "1" if enable, "0" if disable |
Menu support three modes: scrollerless, horizontal scrolling and vertical scrolling.
If menu has enough room for all items, than scrollers turning off.
If no room for all items, than two scrollers will be shown: up/down or left/right depend of the place mode
("single column", "multi column", "single row" or "multi row").
Some widgets can use the button more instead of a scroll mode.
In common case, the place mode isn't a skin option.
Thus, each of section scroll_left, scroll_right, scroll_top and scroll_bottom
contains two components of rectangle for corresponding scroll button.
To define the menu items area for each scroll mode use following sections (with pixel component only):
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 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" | - whole widget area background |
| "foreground" | - whole widget area foreground (for example, glass) |
| "fixed background" | - item area background, it doesn't depend from scrolling |
| "movable background" | - alternate item area background, it moves with items on scrolling |
| "multi selector" | - if menu supports items selection |
| "column background" |
- can be useful in multi column mode (or with horizontal splitters) |
| "item background" | - for each menu item |
| "item foreground" | - for each menu item |
| "highlight background" |
- the highlighting bar background |
| "horizontal splitter" | - if present in menu |
| "vertical splitter" |
- for multi column modes |
| "scroll left" | - left scroll button skin |
| "scroll right" | - right scroll button skin |
| "scroll up" | - up scroll button skin |
| "scroll down" | - down scroll button skin |
| "button more" | - button more skin |
| "submenu tag" |
- submenu symbol (icon?). Usually, it looks as an arrow to right |
| "active submenu tag" | - submenu symbol for highlighted item
(looks great with "anim_Highlight" animation, it starts on each highlighting change) |
| "header left" | - left part of menu header (if header is present) |
| "header center" | - middle part of header (width depends on header text) |
| "header right" |
- right part of header |
There is no reason to use all skins (you can skip some like "column background" or "item background").
Standard supported animation names are:
| "anim_Spawn" | - animation on the first time when menu appearing |
| "anim_Normal" | - on normal scroll state (used to stop scroll buttons animation) |
| "anim_Scroll_Left" | - to animate left scroll button |
| "anim_Scroll_Right" | - to animate right scroll button |
| "anim_Scroll_Up" | - to animate up scroll button |
| "anim_Scroll_Down" | - to animate down scroll button |
| "anim_Highlight" | - when highlighting switched on other item. |
| "anim_Press_On" | - on left mouse button down |
| "anim_Press_Off" | - on left mouse button up |
| "anim_Activate" | - if menu item activated (by mouse or keyboard) |
Sound events set desponds from widget, but these two are standard: "sound_Highlight", "sound_Click".
The default menu supports standard suffices in name.
Desktop icons
This menu used to operate with shortcuts on the desktop. The custom name is "Desktop Icons"
(standard suffices in name are supported).
Desktop turns button "More" on, if no room for all shortcuts (no scroll modes).
Shortcuts use special method of placing. They can be multi-selected for group drag/drop operations.
Shortcut can be marked with color tag. It can be animated with 3D effects on mouse hover (skin defined).
User can change shortcut size by "Ctrl" + mouse wheel.
The additional skins are:
| "item background" | - whole shortcut background |
| "icon quad background" | - background around shortcut icon (always quad) |
| "icon quad foreground" | - foreground around shortcut icon |
| "icon fx" | - replaces icon on the highlighted shortcut. It's useful to create
great 3D effects with the icons. Just skip diffuse_image attribute in material declaration,
and icon image will be used as texture. You can use model="*QUAD*" as mesh. |
| "color tag" | - whole shortcut skin. Used when color tag was being assigned. |
| "text background" | - shortcut text background (can use shader="colorize") |
| "text color tag" | - shortcut text skin. Used when color tag was being assigned.
Use shader="colorize" to paint. |
| "icon select mark" | - can replace selection-marker bar (if present) |
| "icon cut mark" | - can replace cut-marker bar (if present) |
Supported animation names are:
| "anim_Spawn" | - animation on the first time when menu appearing |
| "anim_Normal" | - on normal scroll state (used to stop scroll buttons animation) |
| "anim_Scroll_Left" | - to animate left scroll button |
| "anim_Scroll_Right" | - to animate right scroll button |
| "anim_Scroll_Up" | - to animate up scroll button |
| "anim_Scroll_Down" | - to animate down scroll button |
| "anim_Highlight" | - when highlighting switched on other item. |
| "anim_Press_On" | - on left mouse button down |
| "anim_Press_Off" | - on left mouse button up |
| "anim_Activate" | - if menu item activated (by mouse or keyboard) |
| "anim_Button_Highlight_On" | - highlight button more on |
| "anim_Button_Highlight_Off" | - highlight button more off |
| "anim_Button_Press_On" | - press button more on |
| "anim_Button_Press_Off | - press button more off |
Icon bar menu
This menu opening by button more in such widget as "Quick Launch" and "Desktop Icons".
The custom name is "Icon Bar Menu" (standard suffices in name are supported).
The scroll mode is vertical. See default menu description as example.
Aston menu and Programs menu
This two widgets are the main parts of system start panel (that opened by "Start" button on task bar).
Aston menu gives the basic system menu (Recent Documents, My Documents, My Music, My Pictures, etc.).
This widget has internal PROGID="A2.KAstonMenuWidget.1".
In some cases, item "Programs" should be placed separately (for example under Top List part).
In this case, the widget use theme option enable_programs="0", and additional widget should be added
(with item "Programs" only). This additional widget has internal PROGID="A2.KAstonProgramsWidget.1").
Thus, you can define menu object with custom name is "Aston Menu" for basic system menu.
And, you can define menu object with custom name is "Programs" for "Programs" only menu.
Scroll mode would depend from user choice via widget property dialog (single column or multi column).
So, designer should define all scroll modes (exclude the button "more" of course).
Standard suffices in skin object name are supported.
File menu
This widget used in popup with a folder content (opened from Aston menu, Programs menu, Disk widget etc.)
Custom name of object is "File Menu". The object supports standard suffices in name.
The scroll mode is user optional (in common case). See default menu description as example.
Top programs
Usually, this widget used as a part of system start menu.
Custom name of the object is "Top List". The object supports standard suffices in name.
The widget can use header with string "Top Programs" translated to user language.
No scroll modes. No button "More" (cause the widget used for quick access to top files).
See default menu description as example.
Disks
Widget used to manage files and folders on the disks.
Custom name of the object is "Disks". The object supports standard suffices in name.
The scroll mode is vertical.
...
<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>
...
|
Additional object attributes are:
| width | - the minimal width of the disk-info bar |
| height | - the minimal height of the disk-info bar |
The widget looks like a menu of disk-info bars.
Each disk-info bar defines some rectangles for disk-name and disk-info.
The diskinfo section should be defined the same way as diskname.
The additional skin names are "icon" and "indicator".
Also, the animation supports indicator with "progress" name.
Power control
Usually, this widget used as a part of system start menu.
Custom name of the object is "Power Control". The object supports standard suffices in name.
The scroll mode is user optional (in common case).
...
<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>
...
|
This widget looks like a tool bar of buttons.
Each button has an icon and some text.
Object attributes:
| mode | - "0" - icon is docked to the left, text is docked to the right.
- "1" - icon is docked to the top and center, text is docked to the bottom and center. |
| icon_size | - icon width and height |
| item_additional_width | - additional width of the buttons (added to the auto-detcted width) |
| item_additional_height | - additional height of the buttons (added to the auto-detcted height) |
| item_icon_x_offset, item_icon_y_offset | - icon offset |
| item_text_x_offset, item_text_y_offset | - text offset |
The reserved skin names for the icons are "Log Off", "Turn off", "Restart", "Switch User", "Stand By", "Hibernate".
Quick launch
Widget used to quick launch programs.
Custom name of the object is "Quick Launch". The object supports standard suffices in name.
The widget can use header with folder name.
Widget uses button "More" instead of a scroll mode.
Example (for attributes only):
...
<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>
...
|
See default menu description as example.
Task list
Widget used to manage tasks.
Custom name of the object is "Task List". The object supports standard suffices in name.
The scroll mode is vertical.
Example:
...
<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>
...
|
Column margins in this case means whole item area.
Main feature of the task list widget is the tasks visualization.
The task can be highlighted (on mouse hover).
It can be minimized.
Only one of tasks can be active in any time.
At least, the task can flash (to disturb the user with something important for him).
All this features implementation was being shown in example above.
The normal_font section contains standard font settings for case when all states is off.
The sections highlight_font, minimize_font, active_font and flash_font
filled same manner as normal_font.
Take a look on the skin[name="task background"].
This skin use four paint sections. Each of them shows one of task status with corresponding animation
("anim1", "anim2", "anim3" or "anim4").
Additional animation to visualize task status are:
"anim_Highlight_On", "anim_Highlight_Off",
"anim_Minimize_On", "anim_Minimize_Off",
"anim_Active_On", "anim_Active_Off",
"anim_Flash_On", "anim_Flash_Off".
Other task feature is progress indicator (some applications can show process progress in percent for example).
There are four special skins for this: skin name="back indicator", skin name="back indicator bar",
skin name="front indicator", skin name="front indicator bar".
All of these skins use two components of rectangle that defined in indicator section.
Skin with name "back indicator" used as background under task caption (if progress percent isn't zero).
Skin with name "front indicator" used as foreground over task caption (if progress percent isn't zero).
Skins with names "back indicator bar" and "front indicator bar" used to paint bar of percent indicator
(define it as 100% filled, Aston2 engine will clip it self).
Other way to paint task progress is to use animation "anim_Progress" to animate an indicator.
Don't forget scroll mode (see default menu description as example).
You can download our utility (7Kb) to debug task skinning in your theme.
Notification area (tray)
Widget used to manage notification area icons.
Custom name of the object is "Tray". The object supports standard suffices in name.
The scroll mode is horizontal.
This widget has optional extra button to hide/show redundant icons from tray.
In other words, this button minimize/maximize icon list.
Example:
...
<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>
...
|
The skin with name "widget background" paints whole widget area.
The section expand_mode used for expand button mode.
User can turn it on in the notification area property dialog (option "Show expand button").
This button require some place in widget,
that is why area for icons (with possible scrollers) should be reduced a little.
This rectangle defined in tray_frame section as pixel component (reserve 20 pixels at left in example above).
The sub-section button contains two component of rectangle and skin for expand button.
Take a look on additional animation for this:
| "anim_Min_Highlight_Off" | - on mouse out in minimize button state |
| "anim_Min_Highlight_On" | - on mouse hover in minimize button state |
| "anim_Min_Press_On" | - on press left mouse button down. There is no animation on press off,
cause button will be switched to maximize state |
| "anim_Max_Highlight_Off" | - on mouse out in maximize button state |
| "anim_Max_Highlight_On" | - on mouse hover in maximize button state |
| "anim_Max_Press_On | - on press left mouse button down. There is no animation on press off,
cause button will be switched to minimize state |
Search results
This object used in the search widget popup to view/open search results.
Custom name of the object is "Search Menu". The object supports standard suffices in name.
The scroll mode is vertical.
The popup window with this menu opening on search process start.
New items will be adding to result list on the fly.
That is why this object supports additional animation "anim_Search" and "anim_Search_Done".
For example, you can use this animation on the background or foreground skin.
See default menu description as example.
| |
