Tip:
Highlight text to annotate it
X
In this video I am going to describe how to instantiate a custom pop-up window
and then show it using the PopUpManager class. I will be using the custom
component that I created in the previous exercise. There is also a completed
version of that exercise file in the windows folder of the project named
LoginWindowComplete.mxml. If you are starting on this video, you can use that
file instead and just rename it as LoginWindow.mxml. If you are following along
with the exercises, go to the project and then open the application file
UseCustomPopup.mxml and take a look at the existing code. This application is
going to display a login window upon application started.
So I have created a function named Init with returns void and then called that
function upon the applicationComplete event of the application component. There
is a label component at the bottom of the application that I will use later on
to display the results of the login. The first step to displaying a custom
pop-up window is to instantiate the component you are using. Typically you do
this outside of any functions, so that you can address the window from any
function in the application. Place the cursor in the Script section before the
Init function but inside the CDATA block. Then declare a new private variable
named loginWin and data type it as your custom component LoginWindow.
Notice that when I select the LoginWindow component from the list of available
classes, that an Import statement is created automatically for me. Now go to
the Init method. The next step is to instantiate the window. Upon application
startup, I will create an instance of the LoginWindow component and I will use
the predeclared LoginWin variable. I will use this code loginWin=new
LoginWindow. The next step is to use the PopUpManager and one of its static
methods to display the window. Start by typing PopupMan, then press Ctrl+Space
to see the list of available classes and select PopUpManager from the list.
Notice that Flex Builder automatically adds an Import statement for this class.
Now, type in dot(.) character and you will see a list of all of the static
methods of the class and select the first one addPopUp. The addPopUp method is
used to display an existing window on the screen. We have already instantiated
the window in memory. Now, we are going to say show it to the user. Add the
loginWin variable as the first argument. The next argument is the parent
window, that is the window that will be use to calculate the position of the
pop-up. As I did in the Alert class demonstrations earlier I will type in this.
The next value is a Boolean property named modal, which determines whether this
pop-up window will block access to the rest of the application. As with the
Alert pop-up, you can display custom pop-ups either modally or non-modally. A
modal window blocks access to the rest of the application, while a non-modal
window allows the user to continue interacting with other elements. Because we
want the user to have to login before they continue with the rest of the
application, I will pass in a value of true. That's all I need. I will run the
application and let's take a look at the result. As the application starts up,
the LoginWindow appears in the top left corner. This is the default position of the LoginWindow,
the user can click and drag the LoginWindow around the screen and when
they release the mouse button, its position will be retained on the screen. Close
the application and I will show you a couple of ideas about how to position
the window on screen. One approach is to use X and Y properties just like you
would with components that are placed in an absolute positioned container.
I will set LoginWin.x to a vale of 100 and LoginWin.y to a value of 100. I will
save the changes and run the application again and notice that as the application
starts up, the dialog appears in a specific position relative to
the top-left corner of the application.
Here is another approach though. Rather than using X and Y properties, you
might want to center a custom pop-up window in the direct center of its
containing window, the application. The PopUpManager class has a static method
for this purpose to call this code. PopUpManager.centrePopUp and then pass in
the reference to the pop-up window which I have called loginWin. Run the
application again and this time as the application starts up, you will see the
pop-up window appear in the direct center of the application and after user
resizes the browser, you will notice that the pop-up window doesn't
automatically reset its position. That's because this is not like constrained
properties where the position is being continually recalculated.
The centering of the pop-up window only happens upon the explicit call to the
PopUpManagers centerPopUp method. So, that's a look at how to display a pop-up
window. Now, in the next video I will show you have to remove the pop-up
programmatically using another method of the PopUpManager class.