1. Switch back to the Design view, and select
the Image component. If you are in the
Category view, you will see a variety of
component properties. The most important
of these is the Source property, under
the Common heading at the top. This
property defines which image will be
placed into the component.
2. Type {imageRepeater.currentItem} into
the Source for the Image component.
3. Test how your Thumbnails panel looks like
by choosing Run ?¤ Run PhotoGallery. Your
panel should look like Figure 8-22.
You may want to tinker with the size of the panel
to get the right effect. Notice that as soon as a
Tile component runs out of space to show the
images, it creates a scrollbar to allow the user to
see the entire set of images. Also notice that we
never told the repeater exactly how many images
there are. It took this information on its own
from the number of entries in the XML file. This
means that if we want to add an image, we can
just add the entry to the XML. No MXML needs to
be changed. This makes updating a breeze.
Figure 8-22. Thumbnails panel showing the scrollbar
167
FLEX PHOTO GALLERY
Creating the View panel
When a user clicks a thumbnail image, we want a larger version of that image to appear in a panel next
to the Thumbnails panel. Let??™s call this panel View Panel and place it to the right of the first panel we
created.
1. Drag a new panel to the right of the original panel. We want this panel to be the same height
as the first panel, but we??™ll make it wider as it will hold a large version of the image.
Pages:
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130