Figure 12-5 shows the Media Center before styling.
Figure 12-5. Media Center before styling
3. In the Design view of Flex Builder, drag out a Panel component.
This panel will hold the FileSystemTree so it needs to be large enough to show the files on your desktop.
4. For the panel specify Width as 310 and Height as 450. Setting the layout constraints along the
middle (as shown in Figure 12-6) keeps the panel stationary relative to the center when the size
of the window is adjusted.
241
FLEX AND AIR
Figure 12-6. Panel component showing layout
5. Set the ID of this panel to mediaPanel and the Label to Media Library.
6. Drag a FileSystemTree component onto the Panel.
The FileSystemTree component can be found in a folder in the Components navigator that was added
when you installed the AIR SDK (Figure 12-7). This folder holds the components that are specific to AIR
applications.
Figure 12-7. FileSystemTree in Components list
242
CHAPTER 12
7. Set the layout constraints for the FileSystemTree as shown in Figure 12-8. This will allow the
FileSystemTree to stay consistent with the Panel component, with a 10-pixel border. For the ID,
type tree.
Figure 12-8. FileSystemTree within the Panel component
Much of our interaction within this Media Center is focused on the FileSystemTree component, so it is
no surprise that much of the ActionScript is based on this component. Now is a good time for you to
enter the ActionScript if you are working from a new document or to examine the ActionScript if you
are working from the provided MediaCenter-Start.
Pages:
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170