<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:mccune="com.dougmccune.controls.*" creationComplete="initCollections(); "
viewSourceURL="http://dougmccune.com/flex/scrollable_menus2/srcview/index.html">
<mx:Style>
Panel {
headerHeight: 17;
borderThickness: 0;
roundedBottomCorners: true;
backgroundAlpha: 1;
borderAlpha: 1;
highlightAlphas: 0.73, 0;
headerColors: #000000, #000000;
footerColors: #000000, #000000;
borderColor: #000000;
titleStyleName: ;
}
.myTitleStyle {
color: #ffffff;
}
</mx:Style>
<mx:Script>
<![CDATA[
import mx.core.ScrollPolicy;
import com.dougmccune.controls.ScrollableArrowMenu;
import com.dougmccune.controls.ScrollableMenu;
import mx.events.MenuEvent;
import mx.controls.Alert;
import mx.collections.*;
[Bindable]
public var arrowScrollPolicy:String = ScrollPolicy.AUTO;
[Bindable]
public var vertScrollPolicy:String = ScrollPolicy.OFF;
[Bindable]
public var menuBarCollection:XMLListCollection;
private var menubarXML:XMLList =
<>
<menuitem label="Short Menu" data="top">
<menuitem label="MenuItem A" data="1A"/>
<menuitem label="MenuItem B" data="1B"/>
</menuitem>
<menuitem label="Long Menu" data="top">
<menuitem label="Long Submenu" >
<menuitem label="MenuItem A" type="check" data="2A"/>
<menuitem label="MenuItem B" type="check" data="2A"/>
<menuitem label="MenuItem C" type="check" data="2A"/>
<menuitem label="MenuItem D" type="check" data="2A"/>
<menuitem label="MenuItem E" type="check" data="2A"/>
<menuitem label="MenuItem F" type="check" data="2A"/>
<menuitem label="MenuItem G" type="check" data="2A"/>
<menuitem label="MenuItem H" type="check" data="2A"/>
<menuitem label="MenuItem I" type="check" data="2A"/>
<menuitem label="MenuItem J" type="check" data="2A"/>
<menuitem label="MenuItem K" type="check" data="2A"/>
<menuitem label="MenuItem L" type="check" data="2A"/>
<menuitem label="MenuItem M" type="check" data="2A"/>
<menuitem label="MenuItem N" type="check" data="2A"/>
<menuitem label="MenuItem O" type="check" data="2A"/>
<menuitem label="MenuItem P" type="check" data="2A"/>
<menuitem label="MenuItem Q" type="check" data="2A"/>
<menuitem label="MenuItem R" type="check" data="2A"/>
<menuitem label="MenuItem S" type="check" data="2A"/>
<menuitem label="MenuItem T" type="check" data="2A"/>
<menuitem label="MenuItem U" type="check" data="2A"/>
<menuitem label="MenuItem V" type="check" data="2A"/>
<menuitem label="MenuItem W" type="check" data="2A"/>
<menuitem label="MenuItem X" type="check" data="2A"/>
<menuitem label="MenuItem Y" type="check" data="2A"/>
<menuitem label="MenuItem Z" type="check" data="2A"/>
<menuitem label="MenuItem A" type="check" data="2A"/>
<menuitem label="MenuItem B" type="check" data="2A"/>
<menuitem label="MenuItem C" type="check" data="2A"/>
<menuitem label="MenuItem D" type="check" data="2A"/>
<menuitem label="MenuItem E" type="check" data="2A"/>
<menuitem label="MenuItem F" type="check" data="2A"/>
<menuitem label="MenuItem G" type="check" data="2A"/>
<menuitem label="MenuItem H" type="check" data="2A"/>
<menuitem label="MenuItem I" type="check" data="2A"/>
<menuitem label="MenuItem J" type="check" data="2A"/>
<menuitem label="MenuItem K" type="check" data="2A"/>
<menuitem label="MenuItem L" type="check" data="2A"/>
<menuitem label="MenuItem M" type="check" data="2A"/>
<menuitem label="MenuItem N" type="check" data="2A"/>
<menuitem label="MenuItem O" type="check" data="2A"/>
<menuitem label="MenuItem P" type="check" data="2A"/>
<menuitem label="MenuItem Q" type="check" data="2A"/>
<menuitem label="MenuItem R" type="check" data="2A"/>
<menuitem label="MenuItem S" type="check" data="2A"/>
<menuitem label="MenuItem T" type="check" data="2A"/>
<menuitem label="MenuItem U" type="check" data="2A"/>
<menuitem label="MenuItem V" type="check" data="2A"/>
<menuitem label="MenuItem W" type="check" data="2A"/>
<menuitem label="MenuItem X" type="check" data="2A"/>
<menuitem label="MenuItem Y" type="check" data="2A"/>
<menuitem label="MenuItem Z" type="check" data="2A"/>
</menuitem>
</menuitem>
</>;
private function initCollections():void {
menuBarCollection = new XMLListCollection(menubarXML);
}
private function menuHandler(event:MenuEvent):void {
if (event.item.@data != "top") {
Alert.show("Label: " + event.item.@label + "\n" +
"Data: " + event.item.@data, "Clicked menu item");
}
}
private function addStraightMenu():void {
var menu:ScrollableArrowMenu = ScrollableArrowMenu.createMenu(null, menubarXML, false);
menu.labelField="@label";
if(specify.selected) {
menu.maxHeight = step.value;
}
menu.verticalScrollPolicy = vertScrollPolicy;
menu.arrowScrollPolicy = arrowScrollPolicy;
var pt:Point = new Point(25, 65);
pt = straightPanel.localToGlobal(pt);
menu.show(pt.x, pt.y);
}
private function setVerticalPolicy(event:Event):void {
var combo:ComboBox = event.currentTarget as ComboBox;
switch(combo.selectedIndex) {
case 0:
this.vertScrollPolicy = ScrollPolicy.AUTO;
break;
case 1:
this.vertScrollPolicy = ScrollPolicy.ON;
break;
case 2:
this.vertScrollPolicy = ScrollPolicy.OFF;
break;
}
}
private function setArrowPolicy(event:Event):void {
var combo:ComboBox = event.currentTarget as ComboBox;
switch(combo.selectedIndex) {
case 0:
this.arrowScrollPolicy = ScrollPolicy.AUTO;
break;
case 1:
this.arrowScrollPolicy = ScrollPolicy.ON;
break;
case 2:
this.arrowScrollPolicy = ScrollPolicy.OFF;
break;
}
}
]]>
</mx:Script>
<mx:XMLList id="treeDP2">
<node label="Inbox"/>
<node label="Calendar"/>
<node label="Deleted Items"/>
<node label="Inbox"/>
<node label="Calendar"/>
<node label="Deleted Items"/>
<node label="Inbox"/>
<node label="Calendar"/>
<node label="Deleted Items"/>
<node label="Inbox"/>
<node label="Calendar"/>
<node label="Deleted Items"/>
<node label="Inbox"/>
<node label="Calendar"/>
<node label="Deleted Items"/>
<node label="Inbox"/>
<node label="Calendar"/>
<node label="Deleted Items"/>
</mx:XMLList>
<mx:VBox width="100%" horizontalAlign="left">
<mx:Panel title="Options" paddingTop="10" paddingLeft="10" paddingBottom="10" paddingRight="10" >
<mx:HBox>
<mx:CheckBox id="specify" label="Specify Max Menu Height:" />
<mx:NumericStepper enabled="{specify.selected}" id="step" stepSize="10" minimum="60" maximum="500" value="100" />
</mx:HBox>
<mx:HBox>
<mx:Label text="VerticalScrollPolicy:" />
<mx:ComboBox change="setVerticalPolicy(event)" selectedIndex="2">
<mx:dataProvider>
<mx:String>AUTO</mx:String>
<mx:String>ON</mx:String>
<mx:String>OFF</mx:String>
</mx:dataProvider>
</mx:ComboBox>
</mx:HBox>
<mx:HBox>
<mx:Label text="ArrowScrollPolicy:" width="110"/>
<mx:ComboBox change="setArrowPolicy(event)" selectedIndex="0">
<mx:dataProvider>
<mx:String>AUTO</mx:String>
<mx:String>ON</mx:String>
<mx:String>OFF</mx:String>
</mx:dataProvider>
</mx:ComboBox>
</mx:HBox>
</mx:Panel>
<mx:HBox width="450" height="150">
<mx:Panel title="Scrollable MenuBar"
height="100%" width="100%">
<mccune:ScrollableMenuBar id="bar" maxHeight="{specify.selected ? step.value : undefined}" width="100%" labelField="@label" itemClick="menuHandler(event);"
verticalScrollPolicy="{vertScrollPolicy}" arrowScrollPolicy="{arrowScrollPolicy}" dataProvider="{menuBarCollection}" />
</mx:Panel>
<mx:Panel title="Scrollable PopUpMenuButton"
paddingTop="10" paddingLeft="10" height="100%" width="100%">
<mccune:ScrollablePopUpMenuButton id="popup" maxHeight="{specify.selected ? step.value : undefined}"
dataProvider="{treeDP2}" verticalScrollPolicy="{vertScrollPolicy}" arrowScrollPolicy="{arrowScrollPolicy}"
labelField="@label"
/>
</mx:Panel>
</mx:HBox>
<mx:HBox width="448" height="150">
<mx:Panel title="Scrollable Menu" id="straightPanel"
paddingTop="10" paddingLeft="10" height="100%" width="50%">
<mx:Button label="Show Menu" click="this.addStraightMenu()" />
</mx:Panel>
</mx:HBox>
</mx:VBox>
</mx:Application>