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>

Flex tutorial: Movable/Draggable window

My very first assignment as a Flex developer back in 2007 was to create a UI for a web-based instant messaging application. Since a user can open multiple chat windows, I needed to make those windows movable. After Googling I can’t find any hints, but after some trial and errors, I manage to get it worked.

Recently, someone was asking me about similar issue, so I though I’d post it here and share with anyone that need this.

Demo:
Movable 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.core.UIComponent;

	private var _window : UIComponent;
	private var _originalPosition : Point;
	private var _mouseDownPosition : Point;

	private function onTitleBarMouseDown( 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, doMoving, true );
		this.systemManager.addEventListener( MouseEvent.MOUSE_UP, doCommitMove, true );									

		// 3. save offsets
		_originalPosition = new Point( _window.x, _window.y );
		_mouseDownPosition = new Point( event.stageX, event.stageY );
	}

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

		// 2. calculate new position
		var positionToMove : Point = new Point( _originalPosition.x + ( event.stageX - _mouseDownPosition.x ),
								  		   		_originalPosition.y + ( event.stageY - _mouseDownPosition.y ) );
		// 3. move window
		_window.move( positionToMove.x, positionToMove.y );
	}

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

		// 2. remove event listeners
		this.systemManager.removeEventListener( MouseEvent.MOUSE_MOVE, doMoving, true );
		this.systemManager.removeEventListener( MouseEvent.MOUSE_UP, doCommitMove , true );
	}
]]>
</mx:Script>

	<mx:Canvas
		x="37" y="31" width="245" height="156"
		borderColor="#999999" backgroundColor="#FFFFFF" borderStyle="solid" dropShadowEnabled="true" borderThickness="2">

		<!-- Title Bar-->
		<mx:Canvas
			x="0" y="0" width="100%" height="35"
			backgroundColor="#B1DAFA"
			mouseDown="onTitleBarMouseDown( event )">

			<mx:Label x="10" y="7" text="Title" fontSize="14"/>
		</mx:Canvas>

		<!-- Instruction -->
		<mx:Label x="27" y="73" text="Drag the title bar to move" fontSize="14"/>
	</mx:Canvas>
</mx:Application>