Welcome!

Adobe Flex Authors: Matthew Lobas, PR.com Newswire, Shelly Palmer, Kevin Benedict

Related Topics: Adobe Flex, FlexSeminar.com

Adobe Flex: Article

Freely Available "SizeableTitleWindow" With Adobe's ColdFusion/Flex Connectivity

I found that Adobe includes a really nice resizeable closeable window

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

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.

Comments (3) View Comments

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


Most Recent Comments
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.

@ThingsExpo Stories
DX World EXPO, LLC., a Lighthouse Point, Florida-based startup trade show producer and the creator of "DXWorldEXPO® - Digital Transformation Conference & Expo" has announced its executive management team. The team is headed by Levent Selamoglu, who has been named CEO. "Now is the time for a truly global DX event, to bring together the leading minds from the technology world in a conversation about Digital Transformation," he said in making the announcement.
"We've been engaging with a lot of customers including Panasonic, we've been involved with Cisco and now we're working with the U.S. government - the Department of Homeland Security," explained Peter Jung, Chief Product Officer at Pulzze Systems, in this SYS-CON.tv interview at @ThingsExpo, held June 6-8, 2017, at the Javits Center in New York City, NY.
"We are focused on SAP running in the clouds, to make this super easy because we believe in the tremendous value of those powerful worlds - SAP and the cloud," explained Frank Stienhans, CTO of Ocean9, Inc., in this SYS-CON.tv interview at 20th Cloud Expo, held June 6-8, 2017, at the Javits Center in New York City, NY.
While the focus and objectives of IoT initiatives are many and diverse, they all share a few common attributes, and one of those is the network. Commonly, that network includes the Internet, over which there isn't any real control for performance and availability. Or is there? The current state of the art for Big Data analytics, as applied to network telemetry, offers new opportunities for improving and assuring operational integrity. In his session at @ThingsExpo, Jim Frey, Vice President of S...
The financial services market is one of the most data-driven industries in the world, yet it’s bogged down by legacy CPU technologies that simply can’t keep up with the task of querying and visualizing billions of records. In his session at 20th Cloud Expo, Karthik Lalithraj, a Principal Solutions Architect at Kinetica, discussed how the advent of advanced in-database analytics on the GPU makes it possible to run sophisticated data science workloads on the same database that is housing the rich...
Internet of @ThingsExpo, taking place October 31 - November 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA, is co-located with 21st Cloud Expo and will feature technical sessions from a rock star conference faculty and the leading industry players in the world. The Internet of Things (IoT) is the most profound change in personal and enterprise IT since the creation of the Worldwide Web more than 20 years ago. All major researchers estimate there will be tens of billions devic...
"The Striim platform is a full end-to-end streaming integration and analytics platform that is middleware that covers a lot of different use cases," explained Steve Wilkes, Founder and CTO at Striim, in this SYS-CON.tv interview at 20th Cloud Expo, held June 6-8, 2017, at the Javits Center in New York City, NY.
SYS-CON Events announced today that Calligo, an innovative cloud service provider offering mid-sized companies the highest levels of data privacy and security, has been named "Bronze Sponsor" of SYS-CON's 21st International Cloud Expo ®, which will take place on Oct 31 - Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Calligo offers unparalleled application performance guarantees, commercial flexibility and a personalised support service from its globally located cloud plat...
SYS-CON Events announced today that DXWorldExpo has been named “Global Sponsor” of SYS-CON's 21st International Cloud Expo, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Digital Transformation is the key issue driving the global enterprise IT business. Digital Transformation is most prominent among Global 2000 enterprises and government institutions.
SYS-CON Events announced today that Datera, that offers a radically new data management architecture, has been named "Exhibitor" of SYS-CON's 21st International Cloud Expo ®, which will take place on Oct 31 - Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Datera is transforming the traditional datacenter model through modern cloud simplicity. The technology industry is at another major inflection point. The rise of mobile, the Internet of Things, data storage and Big...
"We provide IoT solutions. We provide the most compatible solutions for many applications. Our solutions are industry agnostic and also protocol agnostic," explained Richard Han, Head of Sales and Marketing and Engineering at Systena America, in this SYS-CON.tv interview at @ThingsExpo, held June 6-8, 2017, at the Javits Center in New York City, NY.
"MobiDev is a Ukraine-based software development company. We do mobile development, and we're specialists in that. But we do full stack software development for entrepreneurs, for emerging companies, and for enterprise ventures," explained Alan Winters, U.S. Head of Business Development at MobiDev, in this SYS-CON.tv interview at 20th Cloud Expo, held June 6-8, 2017, at the Javits Center in New York City, NY.
SYS-CON Events announced today that DXWorldExpo has been named “Global Sponsor” of SYS-CON's 21st International Cloud Expo, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Digital Transformation is the key issue driving the global enterprise IT business. Digital Transformation is most prominent among Global 2000 enterprises and government institutions.
In his opening keynote at 20th Cloud Expo, Michael Maximilien, Research Scientist, Architect, and Engineer at IBM, discussed the full potential of the cloud and social data requires artificial intelligence. By mixing Cloud Foundry and the rich set of Watson services, IBM's Bluemix is the best cloud operating system for enterprises today, providing rapid development and deployment of applications that can take advantage of the rich catalog of Watson services to help drive insights from the vast t...
SYS-CON Events announced today that EnterpriseTech has been named “Media Sponsor” of SYS-CON's 21st International Cloud Expo, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. EnterpriseTech is a professional resource for news and intelligence covering the migration of high-end technologies into the enterprise and business-IT industry, with a special focus on high-tech solutions in new product development, workload management, increased effic...
SYS-CON Events announced today that Massive Networks, that helps your business operate seamlessly with fast, reliable, and secure internet and network solutions, has been named "Exhibitor" of SYS-CON's 21st International Cloud Expo ®, which will take place on Oct 31 - Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. As a premier telecommunications provider, Massive Networks is headquartered out of Louisville, Colorado. With years of experience under their belt, their team of...
SYS-CON Events announced today that Cloud Academy named "Bronze Sponsor" of 21st International Cloud Expo which will take place October 31 - November 2, 2017 at the Santa Clara Convention Center in Santa Clara, CA. Cloud Academy is the industry’s most innovative, vendor-neutral cloud technology training platform. Cloud Academy provides continuous learning solutions for individuals and enterprise teams for Amazon Web Services, Microsoft Azure, Google Cloud Platform, and the most popular cloud com...
SYS-CON Events announced today that Cloudistics, an on-premises cloud computing company, has been named “Bronze Sponsor” of SYS-CON's 21st International Cloud Expo, which will take place on Oct 31 - Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Cloudistics delivers a complete public cloud experience with composable on-premises infrastructures to medium and large enterprises. Its software-defined technology natively converges network, storage, compute, virtualization, and ...
SYS-CON Events announced today that CHEETAH Training & Innovation will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on Oct. 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. CHEETAH Training & Innovation is a cloud consulting and IT training firm specializing in improving clients cloud strategies and infrastructures for medium to large companies.
SYS-CON Events announced today that Datanami has been named “Media Sponsor” of SYS-CON's 21st International Cloud Expo, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Datanami is a communication channel dedicated to providing insight, analysis and up-to-the-minute information about emerging trends and solutions in Big Data. The publication sheds light on all cutting-edge technologies including networking, storage and applications, and thei...