Container classes can be subclassed to create all kinds of rich custom controls. The PhotoBox, which we will build in this tutorial, is an example of how Panel can be subclassed and styled to create a basic popup photo viewer with back and forward navigational controls.
The first step to subclassing the Panel is writing the constructor for the new subclass (PhotoBox, in this case) and specifying its inheritance from the Panel class using YAHOO.extend:
Next, we will define a few constants for use by the PhotoBox class: "CSS_PHOTOBOX", which defines the CSS class to apply to the Panel, and "NAV_FOOTER_HTML", the HTML that will be used for the footer navigation.
Next, the initialization method for the PhotoBox is defined. The first step the initialization must perform is to call the superclass's init method so that the superclasses can initialize first. Then, we fire the beforeInitEvent and add the CSS class to the Panel, and apply the user's configuration properties. The rest of the method configures the footer navigation and fires the initEvent to indicate that the initialization is complete. The full init code is below:
The PhotoBox has a custom property called photos that accepts an array of object literals containing photo URLs and captions to use. The call to addProperty defines the handler that will be executed when the "photos" property is changed. In this case, that handler is the configPhotos method, which is discussed below. Also of note is the "suppressEvent" property, which prevents configPhotos from being fired until a value is set.
The configPhotos handler, which is fired when the "photos" property is changed, iterates through the list of photo object literals and preloads the image for each photo. At the end of this process, the PhotoBox is automatically set to display the first image in the set, through a call to setImage(0).