Back in the track of blogging after a month of hiatus. I am not been able to move my work and blogging and other stuffs simultaneously. I was busy with my office work most of the time this month trying to get things done. I have been working hard to prove myself amid the professionals of my new office. I am trying my best to keep up with the highly experienced professionals who has been mentoring me since the day i joined the office. I am really grateful to them as i learned a lot about how to cope with this fast track world professionally and i still think there is a lot to learn in order to get into the rhythm.

Amid all these efforts, i lost my new blogging habit and its time to make it an integral part of of my life.

There might be the cases when you want to show a popup around your mouse on events such as mouseDown, dropDrop, mouseClick. The problem one can face while doing that is the popup can get clipped off at the edge of the screen if you simply position the popup based on the coordinates of the mouse without any extra measures. Have a look at the following code:

PopUp.mxml

<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="vertical"
    width="300" height="50"
    styleName="customPopUp"
    showCloseButton="true"
    close="handleClose(event)"
    headerHeight="4"
    >

    <mx:Text width="100%" height="100%" text="This is a test popup"/>

    <mx:Script>
        <![CDATA[
            import mx.managers.PopUpManager;
            import mx.events.CloseEvent;

            private function handleClose(evt:CloseEvent):void {
                PopUpManager.removePopUp(this);

            }
        ]]>
    </mx:Script>
</mx:TitleWindow>

main.mxml

<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute" click="showDetail(event)">
    <mx:Script>
        <![CDATA[
            import mx.managers.PopUpManager;

            private const POPUP_OFFSET:int = 10;

            private function showDetail(evt:MouseEvent):void {
            	
                var popup:PopUp = PopUp(PopUpManager.createPopUp(this, PopUp,false));
				
		var tempX:Number = evt.currentTarget.mouseX + POPUP_OFFSET;
		var tempY:Number = evt.currentTarget.mouseY;
				
				
                popup.x = tempX;
                popup.y = tempY;
            }
        ]]>
    </mx:Script>
</mx:Application>

Demo showing the problem:

What you can notice here is whenever you click at the edge of the screen especially on the right side, the title window gets clipped off. Its because i simply get the mouse coordinates and place the popup at that coordinates with some offset in the x direction. To adjust the coordinates of the popup such that it will appear in the screen no matter where you click the mouse, you have to keep into consideration the application screen width and height. How? Have a look at the code snipped below:

var applicationWidth:Number = application.width;
var applicationHeight:Number = application.height;
				
var popupWidth:Number = popup.width;
var popupHeight:Number = popup.height;
				
if((tempX + popupWidth) > applicationWidth){
     tempX = tempX - POPUP_OFFSET - popupWidth;
}
				
if((tempY + popupHeight) > applicationHeight){
	tempY = tempY - popupHeight;
}

Here i have added coordinates of mouse on which click occurs with the width and height of the popup and see they are greater than the width and height of the application screen which i can get from the expressions application.width and application.height. If any or both of them are greater, then i adjust the position of the popup such that it will all be in the screen. Suppose x coordinate of mouse on which click occur together with the width of the popup as well as offset value is greater than width of the application screen, then it means your popup will gonna clipped off on the right side of the screen. So what i did was i moved the x positon of the screen left by the width of the popup plus the offset from the x coordinate of the mouse where click occured.

Well, you can adjust the code to localize the popup within any container of your screen taking into account the width and height of the container along with the widht and height of the popup as well as the coordinates.

Demo :

Recently i had a problem of making mouseDown and click work on the same component as i was having difficulty to separate those two events. The problem was whenever i click it triggers the mouseDown first which i didn't want to happen. I was searching for a way to somehow distinguish between mouse down and click. As a click consists of mouse down and mouse up with very short time interval in general, i thought of deferring the action to be taken for mouseDown for an interval of time and see if mouseUp happens or not during that interval. If during that interval mouseUp occurs, then it was regarded as a click and click operation can be carried out. If not, then mouseDown's deferred action will come into act. So i used a timer to defer the action carried out in mouseDown for certain time say 300 ms. The code snippet is shown below:

private var interval:Number = 0;

private function mouseDownHandler(event:MouseEvent) : void {
	//one can store the event variable for later use in the deferred handler
	
	clearInterval(interval);
	interval = setInterval(deferredMouseDownHandler, 300);
}

private function deferredMouseDownHandler() : void {
	clearInterval(interval);
	//carry out the required actions
}

private function clickHandler(event:MouseEvent) : void {
	clearInterval(interval);
	//carry out the required action
}

setInterval is used to execute specified function at time interval specified. So one must be careful to use clearInterval in the deferred handler as well as the click handler so that the function is not re-executed. Here all the actions required to be performed in mouseDownHandler are moved to deferredMouseDownHandler. Now whenever mouseDown occurs then the system will wait for 300 ms as specified in here before deferredMouseDownHandler is executed and during that interval if click occurs then clickHandler will use clearInterval to stop the execution of deferredMouseDownHandler. If click does not occur withing 300 ms, then deferredMouseDownHandler will come into act.

What is achieved so far is whenever click occurs such that interval between mouse down and mouseup is less than 300 ms, mouseDownHandler will not be triggered first. However, When the mouse is down for more than 300 ms, then deferredMouseDownHandler will be executed and if whenever mouse is up, clickHandler will still come into act. So if you don't want to trigger the click after deferredMouseDownHandler is executed, few more efforts will be required. The whole working code is given below:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" layout="vertical" verticalGap="5" horizontalAlign="center" verticalAlign="middle">
	<mx:Script>
		<![CDATA[
			private var interval:Number = 0;
			private var isMouseDown:Boolean = false;
			
			private function mouseDownHandler(event:MouseEvent) : void {
				clearInterval(interval);
				interval = setInterval(deferredMouseDownHandler, 300);
			}
			
			private function deferredMouseDownHandler() : void {
				clearInterval(interval);
				isMouseDown = true;
				actionStatus.text += "\nmouse down";
			}
			
			private function clickHandler(event:MouseEvent) : void {
				if(!isMouseDown){
					clearInterval(interval);
					actionStatus.text += "\nmouse click";
				}
				isMouseDown = false;
			}
		]]>
	</mx:Script>
	<mx:Label text="Click or Mouse Down on me" color="#000405" fontSize="12" mouseDown="mouseDownHandler(event)" click="clickHandler(event)" />
	<mx:Text width="147" id = "actionStatus"/>
</mx:Application>

I have used a flag isMouseDown which i set to true whenever the deferredMouseDownHandler is executed. Now when clickHandler is executed,it first checks this flag before carrying out its actions. This will help in completely isolating click actions from mouseDown actions.

This technique assumes that during click, the time interval between mouse up and mouse down is less than 300 ms. The interval can be adjusted as per the requirement.

Demo: