Solved

display popup at a specific location

Posted on 2011-03-07
11
518 Views
Last Modified: 2012-05-11
hi guys
I have a situation where i am displaying a popup when user clicks on a button. My requirment is the pop-up window should pop-up right above the button. I can give x and y coordinates but that might not be the best way to do it since if the monitor size changes the x and y coordinates
change. Any idea how i can resolve this?

right now this is my code

when button is clicked i am calling this function

private function launchPopUp(e:MouseEvent):void {
var popupwindow : Window = new Window();                           
PopUpManager.addPopUp(popupwindow,this,true);            
PopUpManager.centerPopUp(popupwindow); //this needs to be removed because i dont want pop-up to be in center, instead i want it to display right above the button which is clicked.
}

and this is my  Window.mxml

<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical" width="286" height="292"
title="bla" horizontalAlign="center"
showCloseButton="true"                        
close="closeWindow(event);"  verticalAlign="top"
x, y      > -- dont want to give x and y coordinates
      
<mx:Script>
<![CDATA[

import com.ms.ewq.entity.project.ProjectDetailDTO;
import mx.core.IFlexDisplayObject;
import mx.events.CloseEvent;
import mx.managers.PopUpManager;
import mx.collections.ArrayCollection;      
private function closeWindow(e:CloseEvent):void {
PopUpManager.removePopUp(e.target as IFlexDisplayObject);
}
                  
                  
]]>
</mx:Script>      
 <mx:label text="data"/>  --show this in the pop-up
      
</mx:TitleWindow>

any help appreciated
thanks
0
Comment
Question by:royjayd
11 Comments
 
LVL 37

Accepted Solution

by:
zzynx earned 500 total points
ID: 35067052
Out of my head; try this:

private function launchPopUp(e:MouseEvent):void {
    var popupwindow : Window = new Window();                          

    var pt:Point = new Point(e.localX, e.localY);
    pt = e.target.localToGlobal(pt);
    popupwindow.x = pt.x - 286; // 286 = popupwindow.width;
    popupwindow.y = pt.y;

    PopUpManager.addPopUp(popupwindow,this,true);            
}
0
 
LVL 37

Expert Comment

by:zzynx
ID: 35067064
Some explanation to that code:

1. You take the coordinates of the point where the user clicked the button
2. You convert those local coordinates to global (cf. http://livedocs.adobe.com/flex/3/html/help.html?content=containers_intro_5.html)
3. You use those global ones to position your popup window
0
 
LVL 2

Expert Comment

by:sunsonmahesh
ID: 35069301
Hi,

You can get the x,y coordinates dynamically from mouse click event and use that for popup..

-mahe
function whileClick(event:MouseEvent):void
{
    //use event.localX , event.localY
    //or
    //event.stageX,event.stageY
}

Open in new window

0
NAS Cloud Backup Strategies

This article explains backup scenarios when using network storage. We review the so-called “3-2-1 strategy” and summarize the methods you can use to send NAS data to the cloud

 
LVL 37

Expert Comment

by:zzynx
ID: 35069412
sunsonmahesh, please don't repeat what I already said...
0
 

Author Comment

by:royjayd
ID: 35069679
zzynx:

thanks , that works. One more question i had was when button is clicked the pop-up window shows up but the background fades. how can i avoid that?

thanks.
0
 
LVL 37

Expert Comment

by:zzynx
ID: 35069890
>> the background fades
That's normal Flex behaviour. It indicates it is a model pop up window.

>> how can i avoid that?
Always think twice before changing standard behaviour. It could confuse the user who is used to such UI conventions.
Why would you want to avoid that?
0
 
LVL 37

Expert Comment

by:zzynx
ID: 35069951
But if - after having thought twice - you still want to avoid it, I think here's the answer:
http://mprami.wordpress.com/2008/04/22/alert_popup_modal_transparancy_color_blur_changes/
0
 
LVL 20

Expert Comment

by:ChristoferDutz
ID: 35070658
The third parameter to addPopup or createPopup controls modality. Per default you create non-modal dialogs (modal = false) ... if you set this to true you completely get rid of the gray background and can continue to access the background (If you are vreating something like Property views).
0
 

Author Comment

by:royjayd
ID: 35070779
Yeah, it actually does make sense, i dont want to avoid it.
thanks
Any help with my next question will be greatly appreciated.
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/Flex/Q_26871467.html
0
 

Author Comment

by:royjayd
ID: 35070801
oops, ChristoferDutz , just saw your solution. thanks.
0
 
LVL 37

Expert Comment

by:zzynx
ID: 35070878
Thanx 4 axxepting

>> It indicates it is a model pop up window.
in my comment should of course have been:

It indicates it is a modAl pop up window.

>> if you set this to true you completely get rid of the gray background
Setting the 3rd parameter to true is creating a modal pop up, so I don't think the above is right
0

Featured Post

Three Reasons Why Backup is Strategic

Backup is strategic to your business because your data is strategic to your business. Without backup, your business will fail. This white paper explains why it is vital for you to design and immediately execute a backup strategy to protect 100 percent of your data.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
LinkList not supported? 8 298
EditText on the DialogBox 1 380
Flex Mobile: Get Gps Coordinates 6 1,352
Flex Mobile - check current view 2 903
First things first - Preparation We need all the part for this install and it's much nicer to have them all on hand when you need them so here's what's required. Download Eclipse 3.5 32 bit (I like the Classic flavour) from here. (http://www.e…
This tutorial shows how to create a greeting card by combining two image layers and a text layer on a PC using a free image editing app.
Established in 1997, Technology Architects has become one of the most reputable technology solutions companies in the country. TA have been providing businesses with cost effective state-of-the-art solutions and unparalleled service that is designed…
Although Jacob Bernoulli (1654-1705) has been credited as the creator of "Binomial Distribution Table", Gottfried Leibniz (1646-1716) did his dissertation on the subject in 1666; Leibniz you may recall is the co-inventor of "Calculus" and beat Isaac…

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question