| By Flex News Desk | Article Rating: |
|
| May 23, 2007 10:00 PM EDT | Reads: |
36,767 |
In playing around with the ColdFusion/Flex wizards, I found that Adobe includes a really nice resizeable closeable window. When I get more time, I'll integrate this with my MaximizeRestorePanel class.
package com.adobe.ColdFusion.components
{
import mx.containers.TitleWindow;
import mx.managers.CursorManager;
import mx.managers.ISystemManager;
import mx.controls.Alert;
import mx.logging.Log;
import mx.utils.ObjectUtil;
import mx.controls.Button;
import flash.events.MouseEvent;
import flash.events.Event;
import flash.system.System;
import flash.geom.Rectangle;
public class SizeableTitleWindow extends TitleWindow
{
private const dragThreshold:int = 2;
// sanity constraints.
private const minSizeWidth:int = 180;
private const minSizeHeight:int = 220;
public const cursorSizeNone:int = -1;
public const cursorSizeNE:int = 0;
public const cursorSizeN:int = 1;
public const cursorSizeNW:int = 2;
public const cursorSizeW:int = 3;
public const cursorSizeSW:int = 4;
public const cursorSizeS:int = 5;
public const cursorSizeSE:int = 6;
public const cursorSizeE:int = 7;
public const cursorSizeAll:int = 8;
[Embed(source="cursorImages/sizeNS.gif")]
public static var sizeNSCursorSymbol:Class;
[Embed(source="cursorImages/sizeNESW.gif")]
public static var sizeNESWCursorSymbol:Class;
[Embed(source="cursorImages/sizeWE.gif")]
public static var sizeWECursorSymbol:Class;
[Embed(source="cursorImages/sizeNWSE.gif")]
public static var sizeNWSECursorSymbol:Class;
[Embed(source="cursorImages/sizeAll.gif")]
public static var sizeAllCursorSymbol:Class;
private var downX:int;
private var downY:int;
private var startLeft:int;
private var startTop:int;
private var startHeight:int;
private var startWidth:int;
private var resizeCursor:int;
private var currentCursorID:int;
private var prevCursor:int;
private var isResizing:Boolean;
public function SizeableTitleWindow()
{
super();
isResizing = false;
currentCursorID = CursorManager.NO_CURSOR;
prevCursor = cursorSizeNone;
}
override protected function createChildren():void
{
super.createChildren();
// make the cursor change to the resize cursor
this.titleBar.addEventListener(MouseEvent.MOUSE_MOVE, titleBar_resizeMoveListener);
this.addEventListener(MouseEvent.MOUSE_MOVE, resizeMoveListener);
this.addEventListener(MouseEvent.MOUSE_OUT, cursorMouseOutListener);
// since the titlebar mousedown listener calls startDragging, but the listener is private
// we will do our checking in the overridden startDragging event for the titlebar
this.addEventListener(MouseEvent.MOUSE_DOWN, resizeDownListener);
}
protected function getCursorStyle(x:int, y:int, isTitleBar:Boolean):int
{
if (isResizing)
return resizeCursor;
// the NW corner has to be done in a seperate section because this
// corner is twitchy and we add a 1 pix buffer
if (x >= 0 && x <= dragThreshold + 1 && y >= 0 && y <= dragThreshold + 1)
{
return cursorSizeNW;
} else if (x >= 0 && x <= dragThreshold)
{
if (y >= this.height - dragThreshold)
{
return cursorSizeSW;
} else {
return cursorSizeW;
}
} else if (x >= this.width - dragThreshold)
{
if (y >= 0 && y <= dragThreshold)
{
return cursorSizeNE;
} else if (y >= this.height - dragThreshold)
{
return cursorSizeSE;
} else {
return cursorSizeE;
}
} else if (y >= 0 && y <= dragThreshold)
{
return cursorSizeN;
} else if (y >= this.height - dragThreshold)
{
return cursorSizeS;
// if you want to have the "move" style cursor when over the title bar, uncomment the next three lines
// } else if (isTitleBar)
// {
// return cursorSizeAll;
}
return cursorSizeNone;
}
protected function clearCursor():void
{
if (currentCursorID != CursorManager.NO_CURSOR)
{
CursorManager.removeCursor(currentCursorID);
currentCursorID = CursorManager.NO_CURSOR;
}
prevCursor = cursorSizeNone;
}
/**
* @protected
* Returns the height of the header.
*/
protected function getHeaderHeight():Number
{
var headerHeight:Number = getStyle("headerHeight");
if (isNaN(headerHeight))
headerHeight = measureHeaderText().height + HEADER_PADDING;
return headerHeight;
}
/**
* @protected. Returns a Rectangle containing the largest piece of header
* text (can be either the title or status, whichever is bigger).
*/
protected function measureHeaderText():Rectangle
{
var textWidth:Number = 20;
var textHeight:Number = 14;
if (titleTextField && titleTextField.text)
{
titleTextField.validateNow();
textWidth = titleTextField.textWidth;
textHeight = titleTextField.textHeight;
}
if (statusTextField)
{
statusTextField.validateNow();
textWidth = Math.max(textWidth, statusTextField.textWidth);
textHeight = Math.max(textHeight, statusTextField.textHeight);
}
return new Rectangle(0, 0, textWidth, textHeight);
}
protected function adjustCursor(event:MouseEvent, isTitleBar:Boolean):void
{
var c:int;
// we only want the move event from the title bar itself, not from it's children
// otherwise you get weird cursor behavior in the middle of the titlebar
if (isTitleBar && event.target != titleBar)
{
c = cursorSizeAll;
} else {
c = getCursorStyle(event.localX, event.localY, isTitleBar);
}
// don't switch stuff around if we don't have to
if (c == prevCursor)
{
return;
}
prevCursor = c;
clearCursor();
switch (c)
{
// if you want to have the "move" style cursor when over the title bar, uncomment the next three lines
// case cursorSizeAll:
// currentCursorID = CursorManager.setCursor(sizeAllCursorSymbol, 2, -10, -10);
// break;
case cursorSizeE:
case cursorSizeW:
currentCursorID = CursorManager.setCursor(sizeWECursorSymbol, 2, -10, -11);
break;
case cursorSizeNW:
case cursorSizeSE:
currentCursorID = CursorManager.setCursor(sizeNWSECursorSymbol, 2, -11, -11);
break;
case cursorSizeNE:
case cursorSizeSW:
currentCursorID = CursorManager.setCursor(sizeNESWCursorSymbol, 2, -11, -10);
break;
case cursorSizeN:
case cursorSizeS:
currentCursorID = CursorManager.setCursor(sizeNSCursorSymbol, 2, -10, -10);
break;
}
}
protected function titleBar_resizeMoveListener(event:MouseEvent):void
{
if (event.target is Button)
{
//the base class doesn't give me access to "closeButton", so this
//is the only way to check if we are over the button
clearCursor();
return;
}
adjustCursor(event, true);
}
protected function resizeMoveListener(event:MouseEvent):void
{
if (event.localY > getHeaderHeight()) //don't do it twice, the title bar takes care of it
{
adjustCursor(event, false);
}
}
override protected function startDragging(event:MouseEvent):void
{
// check for the threshholds first,
// if we are within the threshold do our stuff, else call super
var cursorStyle:int = getCursorStyle(event.localX, event.localY, true);
if (cursorStyle != cursorSizeNone && cursorStyle != cursorSizeAll )
{
startSizing(cursorStyle, event.stageX, event.stageY);
} else {
super.startDragging(event);
}
}
protected function resizeDownListener(event:MouseEvent):void
{
// check for the threshholds first,
// if we are within the threshold do our stuff, else call super
var cursorStyle:int = getCursorStyle(event.localX, event.localY, false);
if (cursorStyle != cursorSizeNone && cursorStyle != cursorSizeAll)
{
startSizing(cursorStyle, event.stageX, event.stageY);
}
}
protected function startSizing(cursor:int, x:int, y:int):void
{
downX = x;
downY = y;
startHeight = this.height;
startWidth = this.width;
startLeft = this.x;
startTop = this.y;
resizeCursor = cursor;
isResizing = true;
systemManager.addEventListener(
MouseEvent.MOUSE_MOVE, systemManager_resizeMouseMoveHandler, true);
systemManager.addEventListener(
MouseEvent.MOUSE_UP, systemManager_resizeMouseUpHandler, true);
stage.addEventListener(
Event.MOUSE_LEAVE, stage_resizeMouseLeaveHandler);
}
protected function stopSizing():void
{
isResizing = false;
systemManager.removeEventListener(
MouseEvent.MOUSE_MOVE, systemManager_resizeMouseMoveHandler, true);
systemManager.removeEventListener(
MouseEvent.MOUSE_UP, systemManager_resizeMouseUpHandler, true);
stage.removeEventListener(
Event.MOUSE_LEAVE, stage_resizeMouseLeaveHandler);
clearCursor();
}
private function sizeWidth(event:MouseEvent):void
{
var tmp:int;
tmp = startWidth + event.stageX - downX;
if (tmp >= minSizeWidth)
{
this.width = tmp;
}
}
private function sizeHeight(event:MouseEvent):void
{
var tmp:int;
tmp = startHeight + event.stageY - downY;
if (tmp >= minSizeHeight)
{
this.height = tmp;
}
}
private function sizeTop(event:MouseEvent):int
{
var tmp:int;
var delta:int = downY - event.stageY;
tmp = startHeight + delta;
if (tmp < minSizeHeight)
{
delta = minSizeHeight - startHeight;
tmp = startHeight + delta;
}
this.height = tmp;
return delta;
// return 0;
}
private function sizeLeft(event:MouseEvent):int
{
var tmp:int;
var delta:int = downX - event.stageX;
tmp = startWidth + delta;
if (tmp < minSizeWidth)
{
delta = minSizeWidth - startWidth;
tmp = startWidth + delta;
}
this.width = tmp;
return delta;
// return 0;
}
/**
* @private
*/
private function systemManager_resizeMouseMoveHandler(event:MouseEvent):void
{
var leftDelta:int=0;
var topDelta:int=0;
switch (resizeCursor)
{
case cursorSizeE:
sizeWidth(event);
break;
case cursorSizeSE:
sizeWidth(event);
sizeHeight(event);
break;
case cursorSizeS:
sizeHeight(event);
break;
case cursorSizeSW:
leftDelta = sizeLeft(event);
sizeHeight(event);
break;
case cursorSizeW:
leftDelta = sizeLeft(event);
break;
case cursorSizeNW:
topDelta = sizeTop(event);
leftDelta = sizeLeft(event);
break;
case cursorSizeN:
topDelta = sizeTop(event);
break;
case cursorSizeNE:
topDelta = sizeTop(event);
sizeWidth(event);
break;
}
// when sizing, we only want to do the move once (multiple moves cause ugly refresh problems)
// a move happens when dragging involves the left or top side
if (leftDelta != 0 || topDelta != 0)
{
move(startLeft - leftDelta, startTop - topDelta);
}
}
/**
* @private
*/
private function systemManager_resizeMouseUpHandler(event:MouseEvent):void
{
stopSizing();
}
/**
* @private
*/
private function stage_resizeMouseLeaveHandler(event:Event):void
{
stopSizing();
}
private function cursorMouseOutListener(event:MouseEvent):void
{
if (!isResizing)
{
clearCursor();
}
}
}
}
You can find the associated images for this class in the zip file here.
posted Friday, 9 June 2006
Published May 23, 2007 Reads 36,767
Copyright © 2007 SYS-CON Media, Inc. — All Rights Reserved.
Syndicated stories and blog feeds, all rights reserved by the author.
More Stories By Flex News Desk
Flex News Desk provides the very latest news on the cross-platform Flex development framework for creating rich Internet applications, and on Adobe's AIR/Flex/Flash product combination.
![]() |
Todd Cullen 05/22/07 01:19:48 AM EDT | |||
I realize that your trying to make one class to encompass the entire window's functionality but wouldn't you want to use the Decorator design pattern to seperate some of the functionality from the core class? Improving its reuseability in the long-run. Solid code, just a question regarding your design pattern. |
||||
![]() |
SYS-CON Italy News Desk 06/09/06 02:12:43 PM EDT | |||
In playing around with the ColdFusion/Flex wizards, I found that Adobe includes a really nice resizeable closeable window. When I get more time, I'll integrate this with my MaximizeRestorePanel class. |
||||
![]() |
Web Developer's & Designer's Journal 06/09/06 01:32:26 PM EDT | |||
In playing around with the ColdFusion/Flex wizards, I found that Adobe includes a really nice resizeable closeable window. When I get more time, I'll integrate this with my MaximizeRestorePanel class. |
||||
- My Thoughts on Ulitzer
- Ulitzer.com Named Exclusive "New Media" Sponsor of Cloud Computing Conference & Expo
- Adobe’s Aiming ColdFusion at Multiple Clouds
- Cloud Executives Feature on Cloud Computing Expo Power Panel
- Cloud Computing Journal: Adobe to Deliver ColdFusion in the Cloud
- Adobe Reader Sued
- Adobe Unveils LiveCycle Enterprise Suite 2 for Deployment in the Cloud
- Adobe May Cooperate with Apple to Transplant Flash Player to iPhone
- My Top Seven Wishes From Adobe MAX 2009
- Ph.D. in Twitter Anyone?
- Eolas Sues the Internet
- Adobe LiveCycle Enterprise Suite 2 for Cloud Computing
- Contrary Opinion: Why Silverlight is Good for Adobe
- My Thoughts on Ulitzer
- Ulitzer.com Named Exclusive "New Media" Sponsor of Cloud Computing Conference & Expo
- Ulitzer Live! New Media Conference & Expo
- Adobe’s Aiming ColdFusion at Multiple Clouds
- Analytics for Adobe Air Applications
- Eval JavaScript in a Global Context
- Fig Leaf Software to Exhibit at Government IT Conference & Expo
- Cloud Executives Feature on Cloud Computing Expo Power Panel
- Software Flexibility in the Cloud - Part 4 of 5
- Is Microsoft as Free as Open Source?
- Cloud Computing Journal: Adobe to Deliver ColdFusion in the Cloud
- Where Are RIA Technologies Headed in 2008?
- Cover Story: How to Increase the Frame Rates of Your Flash Movies
- AJAX World RIA Conference & Expo Kicks Off in New York City
- Your First Adobe Flex Application with a ColdFusion Backend
- Adobe Flex 2: Advanced DataGrid
- i-Technology Blog: Death-Knell For "Rich Media? Hardly!
- Adobe/Macromedia - Microsoft, Look Out!
- How To Create a Photo Slide Show ...
- Adobe Flex Interface Customization - Themes, Styles, Skins
- Personal Branding Checklist
- Has the Technology Bounceback Begun?
- "Real-World Flex" by Adobe's Christophe Coenraets































