AfflictionNetworks/nenya
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- Added Scrollable menus, written by Doug McCune, aka Some Guy. This

Browse Source 
is the first time I've felt a real benefit to using flex. It's standard!
  People are fixing the deficiencies!
- Have CommandMenu extend that, and Bob's your uncle!


git-svn-id: svn+ssh://src.earth.threerings.net/nenya/trunk@128 ed5b42cb-e716-0410-a449-f6a68f950b19
This commit is contained in:
Ray Greenwell
2007-01-31 03:18:22 +00:00
parent 06f7f75fde
commit 5ed0513644
4 changed files with 531 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/as/com/dougmccune/controls/ScrollableArrowMenu.as
+288
View File
@@ -0,0 +1,288 @@
package com.dougmccune.controls
{
import flash.display.DisplayObjectContainer;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.events.TimerEvent;
import flash.utils.Timer;
import mx.controls.Button;
import mx.controls.List;
import mx.controls.Menu;
import mx.controls.listClasses.IListItemRenderer;
import mx.controls.listClasses.ListBase;
import mx.controls.menuClasses.IMenuItemRenderer;
import mx.controls.scrollClasses.ScrollBar;
import mx.core.Application;
import mx.core.ScrollControlBase;
import mx.core.ScrollPolicy;
import mx.core.mx_internal;
import mx.events.ScrollEvent;
import mx.managers.PopUpManager;
use namespace mx_internal;
public class ScrollableArrowMenu extends ScrollableMenu
{
//The buttons that are used for the scrolling up and down
private var upButton:Button;
private var downButton:Button;
//We use a timer to control the scrolling while the mouse is over the buttons
private var timer:Timer;
//scrollSpeed is the delay between scrolling the list, so a smaller number
//here will increase the speed of the scrolling. This is in ms.
public var scrollSpeed:Number = 80;
//scrollJump specifies how many rows to scroll each time. Leaving it at 1 makes
//for the smoothest scrolling
public var scrollJump:Number = 1;
/**
* We are adding a new property called arrowScrollPolicy. This is just like
* verticalScrollPolicy, except it controls how we display the up and down arrows
* for scrolling. If this is set to ScrollPolicy.OFF we never show the arrows.
* If it's ScrollPolicy.ON we always show the arrows. And if it's ScrollPolicy.AUTO
* then we show the arrows if they are needed. OFF and AUTO are the only ones
* that should probably be used, since ON gets in the way of the first menu item
* in the list.
*/
private var _arrowScrollPolicy:String = ScrollPolicy.AUTO;
public function get arrowScrollPolicy():String {
return _arrowScrollPolicy;
}
public function set arrowScrollPolicy(value:String):void {
this._arrowScrollPolicy = value;
invalidateDisplayList();
}
/* A few icons that we'll use for the up and down buttons */
[Embed("../skins/menu_assets.swf#up_arrow")]
public var up_icon:Class;
[Embed("../skins/menu_assets.swf#down_arrow")]
public var down_icon:Class;
[Embed("../skins/menu_assets.swf#up_arrow_disabled")]
public var up_icon_disabled:Class;
[Embed("../skins/menu_assets.swf#down_arrow_disabled")]
public var down_icon_disabled:Class;
/**
* We have to override the static function createMenu so that we create a
* ScrollableMenu instead of a normal Menu.
*/
public static function createMenu(parent:DisplayObjectContainer, mdp:Object, showRoot:Boolean=true):ScrollableArrowMenu
{
var menu:ScrollableArrowMenu = new ScrollableArrowMenu();
menu.tabEnabled = false;
menu.owner = DisplayObjectContainer(Application.application);
menu.showRoot = showRoot;
popUpMenu(menu, parent, mdp);
return menu;
}
public function ScrollableArrowMenu()
{
super();
}
/**
* We override createChildren so we can instantiate our up and down buttons
* and add them as children.
*/
override protected function createChildren():void {
super.createChildren();
upButton = new Button();
upButton.setStyle("cornerRadius", 0);
upButton.setStyle("fillAlphas", [1,1,1,1]);
downButton = new Button();
downButton.setStyle("cornerRadius", 0);
downButton.setStyle("fillAlphas", [1,1,1,1]);
upButton.setStyle("icon", up_icon);
downButton.setStyle("icon", down_icon);
upButton.setStyle("disabledIcon", up_icon_disabled);
downButton.setStyle("disabledIcon", down_icon_disabled);
addChild(upButton);
addChild(downButton);
upButton.addEventListener(MouseEvent.ROLL_OVER, startScrollingUp);
upButton.addEventListener(MouseEvent.ROLL_OUT, stopScrolling);
downButton.addEventListener(MouseEvent.ROLL_OVER, startScrollingDown);
downButton.addEventListener(MouseEvent.ROLL_OUT, stopScrolling);
//we're using an event listener to check if we should still be showing the
//up and down buttons. This checks every time the list is scrolled at all.
this.addEventListener(ScrollEvent.SCROLL, checkButtons);
}
/**
* We need to override openSubMenu as well, so that any subMenus opened by this Menu controls
* will also be ScrollableMenus and will have the same maxHeight set
*/
override mx_internal function openSubMenu(row:IListItemRenderer):void
{
supposedToLoseFocus = true;
var r:Menu = getRootMenu();
var menu:ScrollableArrowMenu;
// check to see if the menu exists, if not create it
if (!IMenuItemRenderer(row).menu)
{
/* The only differences between this method and the original method in mx.controls.Menu
* are these four lines.
*/
menu = new ScrollableArrowMenu();
menu.maxHeight = this.maxHeight;
menu.verticalScrollPolicy = this.verticalScrollPolicy;
menu.arrowScrollPolicy = this.arrowScrollPolicy;
menu.parentMenu = this;
menu.owner = this;
menu.showRoot = showRoot;
menu.dataDescriptor = r.dataDescriptor;
menu.styleName = r;
menu.labelField = r.labelField;
menu.labelFunction = r.labelFunction;
menu.iconField = r.iconField;
menu.iconFunction = r.iconFunction;
menu.itemRenderer = r.itemRenderer;
menu.rowHeight = r.rowHeight;
menu.scaleY = r.scaleY;
menu.scaleX = r.scaleX;
// if there's data and it has children then add the items
if (row.data &&
_dataDescriptor.isBranch(row.data) &&
_dataDescriptor.hasChildren(row.data))
{
menu.dataProvider = _dataDescriptor.getChildren(row.data);
}
menu.sourceMenuBar = sourceMenuBar;
menu.sourceMenuBarItem = sourceMenuBarItem;
IMenuItemRenderer(row).menu = menu;
PopUpManager.addPopUp(menu, r, false);
}
super.openSubMenu(row);
}
/**
* We've got to layout the up and down buttons now. They are overlaid on the list
* at the very top and bottom.
*/
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
measure();
super.updateDisplayList(unscaledWidth, unscaledHeight);
var w:Number = unscaledWidth;
if(verticalScrollBar) {
w = unscaledWidth - ScrollBar.THICKNESS;
}
upButton.setActualSize(w, 15);
downButton.setActualSize(w, 15);
upButton.move(0, 0);
downButton.move(0, measuredHeight - downButton.height);
checkButtons(null);
}
/**
* This method is used to hide or show the up and down buttons, depending on where we
* are scrolled in the list and what the setting of arrowScrollPolicy is
*/
private function checkButtons(event:Event):void {
if(this.arrowScrollPolicy == ScrollPolicy.AUTO) {
upButton.visible = upButton.enabled = (this.verticalScrollPosition != 0);
downButton.visible = downButton.enabled = (this.verticalScrollPosition != this.maxVerticalScrollPosition);
}
else if(this.arrowScrollPolicy == ScrollPolicy.ON) {
upButton.visible = downButton.visible = true;
upButton.enabled = (this.verticalScrollPosition != 0);
downButton.enabled = (this.verticalScrollPosition != this.maxVerticalScrollPosition);
}
else {
upButton.visible = upButton.enabled = downButton.visible = downButton.enabled = false;
}
}
/**
* We start a timer that updates the verticalScrollPosition at a regular interval
* until the mouse rolls off the button.
*/
private function startScrollingUp(event:Event):void {
if(timer && timer.running) {
timer.stop();
}
timer = new Timer(this.scrollSpeed);
timer.addEventListener(TimerEvent.TIMER, scrollUp);
timer.start();
}
private function startScrollingDown(event:Event):void {
if(timer && timer.running) {
timer.stop();
}
timer = new Timer(this.scrollSpeed);
timer.addEventListener(TimerEvent.TIMER, scrollDown);
timer.start();
}
private function stopScrolling(event:Event):void {
stage.removeEventListener(MouseEvent.MOUSE_UP, stopScrolling);
if(timer && timer.running) {
timer.stop();
}
}
private function scrollUp(event:TimerEvent):void {
if(this.verticalScrollPosition - scrollJump > 0) {
this.verticalScrollPosition -= scrollJump;
}
else {
this.verticalScrollPosition = 0;
}
checkButtons(null);
}
private function scrollDown(event:TimerEvent):void {
if(this.verticalScrollPosition + scrollJump < this.maxVerticalScrollPosition) {
this.verticalScrollPosition += scrollJump;
}
else {
this.verticalScrollPosition = this.maxVerticalScrollPosition;
}
checkButtons(null);
}
}
}
src/as/com/dougmccune/controls/ScrollableMenu.as
+240
View File
@@ -0,0 +1,240 @@
////////////////////////////////////////////////////////////////////////////////
//
// Code written by Doug McCune.
// http://dougmccune.com/blog
//
// You can use this code for whatever you want. Just don't go and try to sell
// it as your own. If you use it to make something better and want to sell that
// then go for it.
//
// Let's all play nice and be happy.
//
////////////////////////////////////////////////////////////////////////////////
package com.dougmccune.controls
{
import flash.display.DisplayObject;
import flash.display.DisplayObjectContainer;
import flash.events.Event;
import flash.geom.Point;
import mx.controls.Menu;
import mx.controls.listClasses.IListItemRenderer;
import mx.controls.menuClasses.IMenuBarItemRenderer;
import mx.controls.menuClasses.IMenuItemRenderer;
import mx.controls.scrollClasses.ScrollBar;
import mx.core.Application;
import mx.core.EdgeMetrics;
import mx.core.ScrollPolicy;
import mx.core.mx_internal;
import mx.managers.PopUpManager;
use namespace mx_internal;
public class ScrollableMenu extends Menu
{
public function ScrollableMenu()
{
super();
}
/**
* We have to override the static function createMenu so that we create a
* ScrollableMenu instead of a normal Menu.
*/
public static function createMenu(parent:DisplayObjectContainer, mdp:Object, showRoot:Boolean=true):ScrollableMenu
{
var menu:ScrollableMenu = new ScrollableMenu();
menu.tabEnabled = false;
menu.owner = DisplayObjectContainer(Application.application);
menu.showRoot = showRoot;
popUpMenu(menu, parent, mdp);
return menu;
}
/**
* The mx.controls.Menu class overrides setting and getting the verticalScrollPolicy
* Basically setting the verticalScrollPolicy did nothing, and getting it always
* returned ScrollPolicy.OFF. So that's not going to work if we want the menu to scroll.
* Here we reinstate the verticalScrollPolicy setter, and keep a local copy of the value
* in a private variable _verticalScrollPolicy.
*
* This setter is basically a copy of what ScrollControlBase and ListBase do.
* */
override public function set verticalScrollPolicy(value:String):void {
var newPolicy:String = value.toLowerCase();
itemsSizeChanged = true;
if (_verticalScrollPolicy != newPolicy)
{
_verticalScrollPolicy = newPolicy;
dispatchEvent(new Event("verticalScrollPolicyChanged"));
}
invalidateDisplayList();
}
/** Again, the Menu class just returned ScrollPolicy.OFF every time.
* Now we actually return the value that we stored with the setter.
* */
override public function get verticalScrollPolicy():String {
return this._verticalScrollPolicy;
}
/**
* The Menu class overrode configureScrollBars() and made the function
* do nothing. That means the scrollbars don't know how to draw themselves,
* so here we reinstate configureScrollBars. This is basically a copy of the
* same method from the mx.controls.List class. It would have been nice if
* we could have called this method from down in a subclass of Menu, but AS
* doesn't let us do something like super.super, so instead we have to recreate
* the class here.
* */
override protected function configureScrollBars():void
{
var rowCount:int = listItems.length;
if (rowCount == 0) return;
// if there is more than one row and it is a partial row we dont count it
if (rowCount > 1 && rowInfo[rowCount - 1].y + rowInfo[rowCount-1].height > listContent.height)
rowCount--;
// offset, when added to rowCount, is the index of the dataProvider
// item for that row. IOW, row 10 in listItems is showing dataProvider
// item 10 + verticalScrollPosition - lockedRowCount - 1;
var offset:int = verticalScrollPosition - lockedRowCount - 1;
// don't count filler rows at the bottom either.
var fillerRows:int = 0;
// don't count filler rows at the bottom either.
while (rowCount && listItems[rowCount - 1].length == 0)
{
if (collection && rowCount + offset >= collection.length)
{
rowCount--;
++fillerRows;
}
else
break;
}
/**
* This part needs further functions from mx.controls.List that we don't have
* access to. What to do? Whatever, I'll just comment it out and cross my fingers
* */
// we have to scroll up. We can't have filler rows unless the scrollPosition is 0
/*
if (verticalScrollPosition > 0 && fillerRows > 0)
{
if (adjustVerticalScrollPositionDownward(Math.max(rowCount, 1)))
return;
}*/
var colCount:int = listItems[0].length;
var oldHorizontalScrollBar:Object = horizontalScrollBar;
var oldVerticalScrollBar:Object = verticalScrollBar;
var roundedWidth:int = Math.round(unscaledWidth);
var length:int = collection ? collection.length - lockedRowCount: 0;
var numRows:int = rowCount - lockedRowCount;
/* This call is slightly modified from mx.controls.List, but not by much */
setScrollBarProperties(
Math.round(listContent.width) ,
roundedWidth, length, numRows);
maxVerticalScrollPosition = Math.max(length - numRows, 0);
}
/**
* We need to override openSubMenu as well, so that any subMenus opened by this Menu controls
* will also be ScrollableMenus and will have the same maxHeight set
*/
override mx_internal function openSubMenu(row:IListItemRenderer):void
{
supposedToLoseFocus = true;
var r:Menu = getRootMenu();
var menu:Menu;
// check to see if the menu exists, if not create it
if (!IMenuItemRenderer(row).menu)
{
/* The only differences between this method and the original method in mx.controls.Menu
* are these two lines.
*/
menu = new ScrollableMenu();
menu.maxHeight = this.maxHeight;
menu.verticalScrollPolicy = this.verticalScrollPolicy;
menu.parentMenu = this;
menu.owner = this;
menu.showRoot = showRoot;
menu.dataDescriptor = r.dataDescriptor;
menu.styleName = r;
menu.labelField = r.labelField;
menu.labelFunction = r.labelFunction;
menu.iconField = r.iconField;
menu.iconFunction = r.iconFunction;
menu.itemRenderer = r.itemRenderer;
menu.rowHeight = r.rowHeight;
menu.scaleY = r.scaleY;
menu.scaleX = r.scaleX;
// if there's data and it has children then add the items
if (row.data &&
_dataDescriptor.isBranch(row.data) &&
_dataDescriptor.hasChildren(row.data))
{
menu.dataProvider = _dataDescriptor.getChildren(row.data);
}
menu.sourceMenuBar = sourceMenuBar;
menu.sourceMenuBarItem = sourceMenuBarItem;
IMenuItemRenderer(row).menu = menu;
PopUpManager.addPopUp(menu, r, false);
}
super.openSubMenu(row);
}
/**
* We overide the measure() method because we need to check if the menu is going off
* the stage. If it's going to be too high, then we make it smaller to keep it from
* going off. I also stuck in a buffer of 10 pixels from the bottom of the stage.
*
* We also check if we're showing the vertical scrollbar, and if so we adjust the
* width to account for that.
*/
override protected function measure():void
{
super.measure();
if(measuredHeight > this.maxHeight) {
measuredHeight = this.maxHeight;
}
if(verticalScrollPolicy == ScrollPolicy.ON || verticalScrollPolicy == ScrollPolicy.AUTO) {
if(verticalScrollBar) {
measuredMinWidth = measuredWidth = measuredWidth + verticalScrollBar.minWidth;
}
}
var pt:Point = new Point(0, 0);
pt = this.localToGlobal(pt);
var stageHeightAvailable:Number = screen.y + screen.height - pt.y - 10;
if(stageHeightAvailable < measuredHeight) {
measuredHeight = stageHeightAvailable;
invalidateSize();
}
commitProperties();
}
}
}
src/as/com/dougmccune/skins/menu_assets.swf
BIN
View File
Binary file not shown.
src/as/com/threerings/flex/CommandMenu.as
+3 -1
View File
@@ -10,6 +10,8 @@ import mx.core.mx_internal;
import mx.core.ScrollPolicy; import mx.core.ScrollPolicy;
import mx.events.MenuEvent; import mx.events.MenuEvent;
import com.dougmccune.controls.ScrollableArrowMenu;
import com.threerings.util.CommandEvent; import com.threerings.util.CommandEvent;
/** /**
@@ -30,7 +32,7 @@ import com.threerings.util.CommandEvent;
* See "Defining menu structure and data" in the Flex manual for the * See "Defining menu structure and data" in the Flex manual for the
* full list. * full list.
*/ */
public class CommandMenu extends Menu public class CommandMenu extends ScrollableArrowMenu
{ {
public function CommandMenu () public function CommandMenu ()
{ {