A good
width for this panel is 580 pixels and the height is 460 pixels. Add an ID of viewerPanel and a
Title of View Panel, as shown in Figure 8-23.
Figure 8-23. Name the new panel View Panel.
168
CHAPTER 8
2. Give this panel a similar layout to the first panel, with an absolute layout anchored to the center
(Figure 8-24).
Figure 8-24. Use these layout settings to align our panel.
3. In the panel, place an Image component and stretch it out to take up most of the content area
of the panel.
4. Give this Image component an ID of previewImg.
We will create some code that displays the same image that??™s on the thumbnail the user presses, but
right now the image is empty. To avoid having a blank area in our design, we??™ll include an image location
directly in the Source property of the Image component (Figure 8-25).
5. Click the browse icon to the right of the Source field and find the image firstImage.png in the
assets folder.
169
FLEX PHOTO GALLERY
Figure 8-25. View Panel with image
Connecting the Thumbnails and View panels
We need a small piece of ActionScript to send the image from the Thumbnails panel to the View Panel.
You can find this piece of code in the file code.txt in the code download for this book at www.
friendsofed.com. You can copy this code directly below the HTTPService in your MXML (Figure 8-26).
Figure 8-26. ActionScript connecting Thumbnails to View Panel
This code pulls from the repeater to get the correct image. Now that we have created this function, we
need to call it when the thumbnail is clicked.
Pages:
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131