Flex sample application - The Photo Viewer

Additional Requirements

Sample Files

To download and view the source code for this sample, browse the application, right-click the sample, and select view source. You will find detailed instructions for implementing and deploying the application in the ReadMe for the application.

Note: This article was created based on Flex 2. Minor changes in the description and code may be necessary before it can be applied to Flex 3.

The Photo Viewer application is a straightforward photo-viewing application. The first screen shows thumbnails of each photo in the gallery. When you click those thumbnails, the selected image shows in the main part of the screen. The next screen is a different list view, which uses a component that simulates a carousel. If you press the Next and Previous buttons, the carousel rotates so that the selected image is centered. The final view is a slide show. The image shows full-screen, but if you hold the mouse over it, control bars appear that show the details. You can also pause the slide show, move to another image, or change back to other views.

Experience the application

To download and view the full source, right-click the Flex application and select View Source from the context menu.

Flex framework features

The thumbnail view shows how you can use a HorizontalList component to display images, especially when you use a custom itemRenderer that controls its own highlighting and states, based on the user's selection. The Carousel is a custom component that moves and resizes the images by using effects. This component is simple, but you could create more complex animations. Notice how easy it is to add the corner decorations by using the Graphics class in the CarouselImage component. The slide show is also straightforward, but demonstrates how sometimes you must customize the mouse event handling to accurately show and hide the control bars.

This application is keyboard accessible. All content and buttons can come into focus without the use of a mouse; you can control the navigation bar in the slideshow view using the up and down arrow keys. Note that the slideshow keyboard behavior is not based on a standard interaction paradigm, which means that it is important to document similar usage in your own applications.

This application also shows how to use resource bundles to internationalize and localize your application. The build scripts (available when you download the source) show how you can change the locale of the application, which compiles in a different resource bundle. Bundles for the application are provided for English, Japanese, French, and German.