Display Shelf Component

The DisplayShelf's original website is at http://www.quietlyscheming.com/blog/components/tutorial-displayshelf-component/ and this is a quote from that website.

The DisplayShelf component demonstrates using a number of flex and flash concepts to provide a rich, templatable control to display a faux-3d view of a list of items. Its behavior is similar to the CoverFlow visualization added to iTunes in version 7.

The sample is broken into two pieces. The first, the TiltingPane component, takes any content and wraps it in a faux ‘3d’ effect, allowing you to tilt it from side to side. The second, the DisplayShelf component, uses the TiltingPane component to render a list of items along a virtual shelf, with the selected item pulled out for display.

Some of the concepts this sample illustrates: * matrix transformations * graphics API * masking * bitmap manipulation * templating * item renderers * the IList interface * implementing dataProviders * effective animation

This sample was the centerpiece from my MAX 2006 presentation, “Flex under the hood: A tour through the Flex architecture.”

I was contracted to implement the following modifications on the component: - Dynamic loading of images through a remote xml photos.xml file with the following schema <Images><Image title="title" shortdesc="foo bar" longdesc="bla bla" javacall="somefunction(id)" linkto="url">PHOTO_URL</Image></Images> The schema has the following definition:

• Title: The items title (Title Text)
• Shortdesc : A short overview/headline of the item
• Longdesc : A longer text area to give bigger drill down description of the item. Optional.
• Javacall : Specifies a Javascript call to make on focus of item. Optional.
• LinkTo : Specifies a URL to link the “VISIT PAGE” hyperlink/button to. Optional.

- An info overlay appears above the displayshelf, appearing after 1 second of the item being in focus. The overlay will include:

• Title Text
• Short Description
• A ‘Visit Page’ Link if the "linkto" attribute is defined in the xml file. When this link is clicked, the url is opened in the browser.
• A ‘Read More’ Link if the "longdesc" attribute is defined in the xml file. When this link is clicked, the read more overlay is shown.

- A read more overlay that is optional. If the "longdesc" attribute is provided in the xml file, this overlay will show this information when "Read More" is clicked. The overlay will include:

• Title Text
• Long Description
• A ‘Visit Page’ Link if the "linkto" attribute is defined in the xml file. When this link is clicked, the url is opened in the browser.
• A ‘Go Back’ link. When this link is clicked, this overlay fades away.

- Both of the overlays are fade tweened in their animation. - The javacall function has to be in the form function(param1, param2....). And if it exists in the xml, upon focus, the function will subsequently be called with a parameter array. This functionality can be turned on and off through the boolean "calljs" variable passed through flashVars - Some small additional modifications to the code which don't fall under any specific functionality as well as skinning.

To run it, you just need to compile the swf. And then define the location of the photos.xml file(you can name it something else if you want) and pass it in photosurl var in the flashvars in the html page. The photos.xml will need to reflect your environment. A sample of the xml file as well as the html page is provided in the archive. The tarball also includes an ant build file to make things easier.

The modifications are released under the same license as the original component.