Give this panel the ID of thumbsPanel so that we can identify it in the MXML code. Also,
give it the Title of Thumbnails to reinforce for the user what this panel contains (Figure 8-8).
2. Since this panel is to hold three columns and six rows of thumbnails, we should give it a size of
about 250 pixels wide and 460 pixels tall. This gives us enough room to lay out all the images and
have some space between them for a scaling effect that we??™ll be creating later in this chapter.
Since we want this panel to stay roughly in the middle of the screen regardless of the resolution
size, let??™s give it an absolute location based on the center of the screen. You specify this by setting
both the top and side layout handles to center. The distance from the center of the application
is defined by the layout constraints that appear when you set the layout handles to center,
as shown in Figure 8-9. Set the Horizontal Center to ??“325 and the Vertical Center to ??“95.
157
FLEX PHOTO GALLERY
Figure 8-8. Creating our Thumbnails panel
Figure 8-9. Aligning the thumbnails
158
CHAPTER 8
The Tile component
As we create this panel, we??™ll attempt to reduce repetition for a couple of reasons. One is to avoid
repetitive work, and the other is to include scalability. Instead of creating 18 different thumbnail pictures
and laying them out manually, we??™ll create one and use the tools in Flex Builder to lay out and
repeat the Image component.
The first of these tools is the Tile component.
Pages:
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125