alekkus

Flex tutorial: Resizable window

Often, a movable/draggable window is also resizable. The following will show you how to make your customized window resizable.

Demo:
Resizable Window (view source enabled)

Source Codes:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
	xmlns:mx="http://www.adobe.com/2006/mxml"
	layout="absolute"
	backgroundColor="#F8F8F8">

<mx:Script>
<![CDATA[
	import mx.events.FlexEvent;
	import mx.core.UIComponent;

	private var _window : UIComponent;
	private var _originalWidth : Number;
	private var _originalHeight : Number;
	private var _mouseDownPosition : Point;

	private function onResizeMouseDown( event : MouseEvent ) : void
	{
		// 1. set _window
		_window = UIComponent( UIComponent( event.currentTarget ).parent );

		// 2. add mouse move and mouse up event listeners
		this.systemManager.addEventListener( MouseEvent.MOUSE_MOVE, onResizeMouseMove, true );
		this.systemManager.addEventListener( MouseEvent.MOUSE_UP, onResizeMouseUp, true );									

		// 3. save original width, height, rotation
		_originalWidth = _window.width;
		_originalHeight = _window.height;	

		// 4. save mouse down position
		_mouseDownPosition = new Point( event.stageX, event.stageY );
	}

	private function onResizeMouseMove( event : MouseEvent ) : void
	{
		// 1. prevent any other mouse up events to happen
		event.stopImmediatePropagation();

		// 2. calculate new width, height
		var newWidth:Number = _originalWidth + ( event.stageX - _mouseDownPosition.x );
		var newHeight:Number = _originalHeight + ( event.stageY - _mouseDownPosition.y );			

		// 3. resize window
		_window.setActualSize( newWidth, newHeight );
	}

	private function onResizeMouseUp( event : MouseEvent ) : void
	{
		// 1. prevent any other mouse up events to happen
		event.stopImmediatePropagation();	

		// 2. remove event listeners
		this.systemManager.removeEventListener( MouseEvent.MOUSE_MOVE, onResizeMouseMove, true );
		this.systemManager.removeEventListener( MouseEvent.MOUSE_UP, onResizeMouseUp , true );
	}

	private function doDrawTriangle( event : FlexEvent ) : void
	{
		var uiComp : UIComponent = UIComponent( event.currentTarget );

		uiComp.graphics.clear();
		uiComp.graphics.beginFill( 0xB1DAFA );
		uiComp.graphics.moveTo( uiComp.width, 0 );
		uiComp.graphics.lineTo( uiComp.width, uiComp.height );
		uiComp.graphics.lineTo( 0, uiComp.height );
	}
]]>
</mx:Script>

	<mx:Canvas
		id="cvsMain"
		x="37" y="31" width="260" height="160"
		borderColor="#999999" backgroundColor="#FFFFFF" borderStyle="solid" dropShadowEnabled="true" borderThickness="2"
		horizontalScrollPolicy="off" verticalScrollPolicy="off">

		<!-- Resize triangle -->
		<mx:UIComponent
			x="{ cvsMain.width - 24 }" y="{ cvsMain.height - 24 }"
			width="20" height="20"
			creationComplete="doDrawTriangle( event )"
			mouseDown="onResizeMouseDown( event )" />

		<!-- Instruction -->
		<mx:Label x="16" y="59" text="Drag the blue triangle to resize" fontSize="14"/>
	</mx:Canvas>
</mx:Application>

No Comments yet »

TrackBack URI

Leave a comment