In the Popup component, find and add the closePopup event, noticing that Flex Builder is aware of it because of the metadata that was set for our component, and call as its handler the onClosePopup function.
To find that function, which was prewritten for us here in the Natural Experiences Application, Ctrl+click that name, and it will jump us to that point within the Script Block.
When the button is pressed we want the Popup component to disappear. So in this event handler, set the visible property of our component to false. Run the application. When our Popup component has its button clicked, it broadcasts a closePopup event, causing the event handler in the application surrounding that component to render that component instance invisible.
Now, we also want the counter-effect to occur. When we click on an image in the Gallery, we want the popup to appear, and that's not happening yet. Let's go back to the code.
In the application, recall that we also have a custom component called Gallery. Let's take a look inside that; I will Ctrl+Click on my Gallery component, and in the Gallery Custom Component there is also a Custom Event defined. Again, recall, we learned this in the last series; here though it's slightly different from the Popup component. The name of the event will be showPopup, but this event object is not going to be the default event object, its going to be a custom object, an instance of the custom PopupEvent class.
Scroll down in your code, and at the moment you will see we simply have a Thumbnail here in the Gallery Component, an instance of our Thumbnail Component. That component we looked at earlier. When it is clicked, this createPopupData function will run, which here creates a data object holding information about this particular image. At the moment the values are all hard coded.
Then that data object is returned, and so that data object returned from this function call is being passed as the argument to the Click event handler called popupHandler. So here that data object is received as an argument, and then a new instance of this custom PopupEvent class is created. The type of event is passed, but then a second argument; the data object about the particular image, is also passed. Then that new event object called Popup is dispatched from this component.
So let's return to the main application, Natural Experiences, and we will see that a showPopup event is being handled already by a function called onDisplayPopup, which is also being passed the event object.
Scroll up to onDisplayPopup or Ctrl+Click if you prefer, and at the moment all we want to do here is to make our popup visible.
Run the application again, and now we can broadcast a closePopup event causing the main application to render the popup invisible, and if we click the image in the gallery a showPopup event is broadcast, and the main application renders the popup visible.
The last thing we want to do is for the sake of application flow make the popup initially not visible. So I will go to my Popup component and use code hinting to set its visible property initially to false. Run one last time. We see no popup. Click the image, we have a popup, press the Close button, and the popup disappears.
As we move on from here we will be passing custom information about each image; we will have a whole series of images, and ultimately as we saw in the first lesson, the popup will come fading and flying onto screen.
Close the browser, and then right click over one of the tabs and select Close All to close all the currently open files.
Transcription by:
Scribe4you Transcription Services