Next we are going to create a Popup component instance that will appear when our user selects an image within the Gallery.
So in Flex Builder, I will scroll to the NaturalExperiences_wt5, and open that, and scroll down within it to just above the End Application tag.
Here we are going to place an instance of the Popup component from our Views namespace. Notice in your code hinting that Flex Builder is aware of the Views namespace which was declared in the Application tag. Complete the component, Save the changes, and run the application.
You will see the Popup component appears in what Flex would treat as its default position, which is the top left corner of the application itself, because no x and y position have been set for it so its treated as a 0x, 0y. Go back into Flex, and assign to your Popup component an id of popup, and then an x of 350, and a y of 150, then Save and test the application again, and you will now see the popup appears floating over the Scroll Window Panel.
Now, notice that the Popup has a button on it to close it, but nothing is happening as yet. Stop for a moment and consider, what type of Flex components must be part of this custom Popup component. We have got an image. We have got couple of text fields, and we have got a button, all positioned within this larger space.
Let's go back into our code. We will take a look at the Popup component, which in the Navigator View you will see is a file within that directory, but recall that you can also view that code by holding down the Ctrl key and mousing over the component.
When the Hyperlink appears, click it, and that will open up the Popup component, which we will see is a canvas component, which has an explicitly declared width and height as well as padding values, which you would have learned about in the last series.
Within itself notice that a custom event called closePopup is declared, which is going to be a basic event object, flash.events.Event. If you scroll down and find the button component, you will see that its click event calls an event handler called closeHandler. Scroll back up and you will see that the closeHandler function creates a new instance of the event class and event object, and passes closePopup to its constructor function to set its type.
So here we are creating an instance of the event class called closePopup, and dispatching the resulting event object from this component. So if we return to Natural Experiences that tells us that our Popup component can broadcast a closePopup event.
Transcription by:
Scribe4you Transcription Services