<?xml version="1.0" encoding="utf-8"?>
<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:menu="ardisia.components.menu.*"
xmlns:containers="containers.*"
xmlns:data="containers.data.*"
xmlns:separators="ardisia.components.separators.*"
xmlns:menuBar="ardisia.components.menuBar.*"
xmlns:colorPicker="ardisia.components.colorPicker.*"
frameRate="60"
width="100%" height="100%"
removedFromStage="removedFromStageHandler(event)">
<fx:Script>
<![CDATA[
import ardisia.components.menu.Menu;
public var menu:Menu;
public var menu2:Menu;
public function creationComplete():void
{
menu = Menu.createMenu(this, menuNoIcons, true, menuMinWidthSelect.value);
menu2 = Menu.createMenu(this, menuIcons, true, menuMinWidthSelect.value);
systemManager.addEventListener(MouseEvent.RIGHT_CLICK, nullHandler);
}
protected function updateStyles(menu:Menu):void
{
menu.minWidth = menuMinWidthSelect.value;
menu.variableRowHeight = menuVariableRowHeightSelect.selected;
menu.setStyle("subMenuHorizontalOffset", subMenuHorizontalOffsetSelect.value);
menu.setStyle("subMenuVerticalOffset", subMenuVerticalOffsetSelect.value);
menu.setStyle("textIndent", textIndentSelect.value);
menu.setStyle("rollOverColor", rollOverColor.selectedColor);
menu.setStyle("selectionColor", selectionColor.selectedColor);
menu.setStyle("paddingTop", menuPaddingTop.value);
menu.setStyle("paddingRight", menuPaddingRight.value);
menu.setStyle("paddingBottom", menuPaddingBottom.value);
menu.setStyle("paddingLeft", menuPaddingLeft.value);
menu.setStyle("horizontalGap", hGapSelect.value);
}
protected function nullHandler(event:Event):void
{
}
protected function removedFromStageHandler(event:Event):void
{
systemManager.removeEventListener(MouseEvent.RIGHT_CLICK, nullHandler);
}
]]>
</fx:Script>
<fx:Declarations>
<fx:Object id="copyIcon" icon="@Embed(source='icons/cross-red.png')" />
<fx:Object id="pasteIcon" icon="@Embed(source='icons/open-iconic-master/home-2x.png')" />
<fx:Object id="deleteIcon" icon="@Embed(source='icons/open-iconic-master/paperclip-2x.png')" />
<s:ArrayCollection id="menuNoIcons"
source="{[
{label: 'Folder'},
{label: 'New', children: [
{label: 'File', enabled: false},
{label: 'Folder', children: [
{label: 'Project'},
{type: 'separator'},
{label: 'Other'}
]},
{label: 'Project'},
{type: 'separator'},
{label: 'Other'}
]},
{label: 'Open', children: [
{label: 'Samples'},
{label: 'Projects'}
]},
{label: 'Go Into', enabled: false},
{type: 'separator'},
{label: 'Nested Menu Top', children: [
{label: 'Nested Menu Item A', enabled: false},
{label: 'Nested Menu Item B', type: 'check', toggled: true, enabled: false},
{label: 'Nested Menu Item C'},
{type: 'separator'},
{label: 'Nested Menu Item D', type: 'radio', groupName: 'g2', toggled: true, enabled: false},
]},
{type: 'separator'},
{label: 'Copy'},
{label: 'Paste'},
{label: 'Delete'},
{label: 'Move'},
{label: 'Rename'},
{type: 'separator'},
{label: 'Import', type: 'radio', groupName: 'g1', toggled: true},
{label: 'Export', type: 'radio', groupName: 'g1'},
{type: 'separator'},
{label: 'Refresh', type: 'check', toggled: true},
{type: 'separator'},
{label: 'Properties', enabled: false}
]}"/>
<s:ArrayCollection id="menuIcons"
source="{[
{label: 'New', children: [
{label: 'File', enabled: false},
{label: 'Folder'},
{label: 'Project'},
{type: 'separator'},
{label: 'Other'}
]},
{label: 'Go Into', enabled: false},
{type: 'separator'},
{label: 'Nested Menu Top', children: [
{label: 'Nested Menu Item A', enabled: false},
{label: 'Nested Menu Item B', type: 'check', toggled: true, enabled: false},
{label: 'Nested Menu Item C'},
{type: 'separator'},
{label: 'Nested Menu Item D', type: 'radio', groupName: 'g2', toggled: true, enabled: false},
{type: 'separator'},
{label: 'Nested Menu Item D'}
]},
{type: 'separator'},
{label: 'Copy', icon: copyIcon.icon},
{label: 'Paste', icon: pasteIcon.icon},
{label: 'Delete', icon: deleteIcon.icon},
{label: 'Move'},
{label: 'Rename'},
{type: 'separator'},
{label: 'Import', type: 'radio', groupName: 'g1', toggled: true},
{label: 'Export', type: 'radio', groupName: 'g1'},
{type: 'separator'},
{label: 'Refresh', type: 'check', toggled: true},
{type: 'separator'},
{label: 'Properties', enabled: false}
]}"/>
</fx:Declarations>
<s:states>
<s:State name="stockholm" />
<s:State name="london" />
<s:State name="spark" />
</s:states>
<containers:DemoApplicationWrapper id="demoAppWrapper"
width="100%" height="100%"
westRegionTitle="Menu & MenuBar Description"
description="Extended versions of the Halo Menu and MenuBar that have added visual customization options and fixes for z index, screen bounding, and other various bugs in the default Halo Menu and MenuBar."
currentState.stockholm="stockholm" currentState.london="london" currentState.spark="spark">
<containers:expandingContainerContent>
<!--- expanding container #1 -->
<data:ExpandingContainerData>
<data:label>Shared Styling</data:label>
<data:content>
<s:FormItem label="Min Width:">
<s:HSlider id="menuMinWidthSelect"
value="190" minimum="0" maximum="400"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The min width of the top level drop down menus. Does not apply to sub menus."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Variable Height:">
<s:CheckBox id="menuVariableRowHeightSelect"
selected="true"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Set whether menu row height is variable or fixed."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Sub V Offset:">
<s:HSlider id="subMenuVerticalOffsetSelect"
value="-5"
minimum="-10" maximum="100"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Vertical offset to apply to the sub menus' default positions when displayed."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Sub H Offset:">
<s:HSlider id="subMenuHorizontalOffsetSelect"
value="2"
minimum="-10" maximum="100"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Horizontal offset to apply to the sub menus' default positions when displayed."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Text Indent:">
<s:HSlider id="textIndentSelect"
minimum="-10" maximum="20" value="0"/>
</s:FormItem>
<s:FormItem label="Roll Over Color:">
<colorPicker:ColorPicker id="rollOverColor"
selectedColor="{getStyle('rollOverColor')}"/>
</s:FormItem>
<s:FormItem label="Selection Color:">
<colorPicker:ColorPicker id="selectionColor"
selectedColor="{getStyle('selectionColor')}"/>
</s:FormItem>
<separators:HSeparator width="100%"
paddingTop="5" paddingBottom="5"/>
<s:FormHeading label="Menu Item Padding"/>
<s:FormItem label="Top:">
<s:HSlider id="menuPaddingTop"
value="2" minimum="-10" maximum="30"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Top padding for the drop down menu items."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Right:">
<s:HSlider id="menuPaddingRight"
value="5" minimum="-10" maximum="30"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Right padding for the drop down menu items."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Bottom:">
<s:HSlider id="menuPaddingBottom"
value="2" minimum="-10" maximum="30"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Bottom padding for the drop down menu items."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Left:">
<s:HSlider id="menuPaddingLeft"
value="5" minimum="-10" maximum="30"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Left padding for the drop down menu items."/>
</s:helpContent>
</s:FormItem>
<separators:HSeparator width="100%"
paddingTop="5" paddingBottom="5"/>
<s:FormHeading label="Icons"/>
<s:FormItem label="Horizontal Gap">
<s:HSlider id="hGapSelect"
minimum="0" maximum="20" value="8"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Gap between icons/UI controls and text."/>
</s:helpContent>
</s:FormItem>
</data:content>
</data:ExpandingContainerData>
</containers:expandingContainerContent>
<containers:centerContent>
<!--- example #1 -->
<data:PrimaryContentData>
<data:tabLabel>Menu</data:tabLabel>
<data:exampleDescription>Click the containers below to display a menu.</data:exampleDescription>
<data:primaryContent>
<s:HGroup top="20" right="20" bottom="20" left="20"
verticalAlign="justify"
gap="20">
<s:BorderContainer width="50%"
click="updateStyles(menu);menu.show(event.stageX, event.stageY);">
<s:Label top="20" right="20" left="20"
text="Click anywhere in this box to open a Menu (no icons)."
fontWeight="bold"/>
</s:BorderContainer>
<s:BorderContainer width="50%"
click="updateStyles(menu2);menu2.show(event.stageX, event.stageY);">
<s:Label top="20" right="20" left="20"
text="Click anywhere in this box to open a Menu (has icons)."
fontWeight="bold"/>
</s:BorderContainer>
</s:HGroup>
</data:primaryContent>
</data:PrimaryContentData>
<!--- example #2 -->
<data:PrimaryContentData>
<data:tabLabel>MenuBar Example</data:tabLabel>
<data:exampleDescription>Extended version of the Halo MenuBar that adds some useful visual customization options and fixes for z-index and screen bounding.</data:exampleDescription>
<data:toolbarContent>
<s:Form>
<s:FormHeading label="MenuBar Specific API" />
<s:FormItem label="MenuBar Gap:">
<s:HSlider id="hGap"
value="0"
minimum="-10" maximum="30"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Horizontal gap between the menu bar buttons. Does not affect the items in the popup menu."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Menu V Offset:">
<s:HSlider id="menuVerticalOffsetSelect"
minimum="-10" maximum="100"
value.spark="-1" value.stockholm="-1" value.london="0" />
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Vertical offset to apply to the top level menu when displayed. Only applies to the top level menu."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Menu H Offset:">
<s:HSlider id="menuHorizontalOffset"
value="0" minimum="-10" maximum="100"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Horizontal offset to apply to the top level menu when displayed. Only applies to the top level menu."/>
</s:helpContent>
</s:FormItem>
</s:Form>
</data:toolbarContent>
<data:primaryContent>
<s:BorderContainer top="150"
horizontalCenter="0"
backgroundColor="#E2E2E2">
<menuBar:MenuBar id="myMenuBar"
top="10" left="20" bottom="10" right="20"
menuMinWidth="{menuMinWidthSelect.value}"
menuVariableRowHeight="{menuVariableRowHeightSelect.selected}"
menuVerticalOffset="{menuVerticalOffsetSelect.value}"
menuHorizontalOffset="{menuHorizontalOffset.value}"
subMenuHorizontalOffset="{subMenuHorizontalOffsetSelect.value}"
subMenuVerticalOffset="{subMenuVerticalOffsetSelect.value}"
menuPaddingBottom="{menuPaddingBottom.value}"
menuPaddingLeft="{menuPaddingLeft.value}"
menuPaddingRight="{menuPaddingRight.value}"
menuPaddingTop="{menuPaddingTop.value}"
rollOverColor="{rollOverColor.selectedColor}"
selectionColor="{selectionColor.selectedColor}"
hGap="{hGap.value}"
labelField="@label">
<fx:XMLList>
<menuitem label="File">
<menuitem label="New"/>
<menuitem type="separator"/>
<menuitem label="Open">
<menuitem label="Samples"/>
<menuitem label="Upload Image">
<menuitem label="Export as PNG"/>
<menuitem label="Export as JPEG"/>
<menuitem type="separator"/>
<menuitem label="Close"/>
</menuitem>
</menuitem>
<menuitem label="Save"/>
<menuitem label="Import">
<menuitem label="Samples"/>
<menuitem label="Upload Image"/>
</menuitem>
<menuitem label="Export as PNG"/>
<menuitem label="Export as JPEG"/>
<menuitem type="separator"/>
<menuitem label="Close"/>
</menuitem>
<menuitem label="Edit">
<menuitem label="Undo"/>
<menuitem label="Redo"/>
<menuitem type="separator"/>
<menuitem label="Cut"/>
<menuitem label="Copy"/>
<menuitem label="Paste"/>
<menuitem type="separator"/>
<menuitem label="Select">
<menuitem label="All"/>
<menuitem label="None"/>
</menuitem>
<menuitem type="separator"/>
<menuitem label="Clone"/>
<menuitem label="Delete"/>
</menuitem>
<menuitem label="View">
<menuitem label="Zoom In"/>
<menuitem label="Zoom Out"/>
<menuitem label="Magnification">
<menuitem label="0%"/>
<menuitem label="100%"/>
<menuitem label="200%"/>
<menuitem label="300%"/>
</menuitem>
<menuitem type="separator"/>
<menuitem label="Fit Selection"/>
<menuitem label="Fit All"/>
<menuitem type="separator"/>
<menuitem type="check" label="Show Rulers"/>
<menuitem type="check" label="Show Grid"/>
<menuitem label="Smart Guides">
<menuitem type="check" label="Show Smart Guides"/>
<menuitem type="check" label="Snap To Smart Guides"/>
</menuitem>
</menuitem>
<menuitem label="Modify">
<menuitem label="Canvas Size"/>
<menuitem label="Canvas Color"/>
<menuitem label="Fit Canvas"/>
<menuitem type="separator"/>
<menuitem label="Group"/>
<menuitem label="Ungroup"/>
<menuitem label="Flatten Selection"/>
<menuitem type="separator"/>
<menuitem label="Rotate 90 CW"/>
<menuitem label="Rotate 90 CCW"/>
<menuitem label="Flip Horizontally"/>
<menuitem label="Flip Vertically"/>
</menuitem>
</fx:XMLList>
</menuBar:MenuBar>
</s:BorderContainer>
</data:primaryContent>
</data:PrimaryContentData>
</containers:centerContent>
</containers:DemoApplicationWrapper>
</s:Module>