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.
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 has been made keyboard accessible. All content and buttons are focusable without a mouse and the navigation bar in the slideshow view can be controlled 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 would be 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 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.
The "run" links in this Readme file point to an HTML wrapper that is located in the same directory as the Readme, which in turn must be in the same directory as the compiled SWF file. If you are running this application in Flex Builder, the compiled SWF file and its matching HTML wrapper may be in the bin directory.
To change the language of the application from U.S. English, select Project > Properties. Select the Flex Compiler page, in the Additional compiler arguments box, change the -locale setting to the language of your choice. All localized properties files are in the locale directory.
If you download the photoviewer source from adobe.com and have created a new project for this application, be sure that this application compiles with the necessary arguments. select Project > Properties. Select the Flex Compiler page, in the Additional compiler arguments box, change the value to: -use-network=false -library-path+=locale/{locale} -source-path+=locale/{locale} -locale=en_US. Otherwise, you will get an error that says, "Unable to resolve a class for ResourceBundle: strings".
The build script for the Photo Viewer application assumes that you run the application from the local
file system (file:/// in your browser). If you plan to run the application from a web
server (http:// in your browser), change the -use-network setting in
the build script to true.
To change the language of the application from U.S. English, edit the appropriate build script, and change the -locale setting to the language of your choice. All localized properties files are in the locale directory.