MACROMEDIA FLEX-GETTING STARTED WITH FLEX Bedienungsanleitung PDF herunterladen (Seite 48)

</mx:itemRenderer>

</mx:TileList>

8. Save and then run the application. You should see a

form. In the form, submit a search term and you should

see the application display the relevant image(s).

At this point, you should be ready to separate the thumbnail

display into a custom component:

1. Create a new component by selecting

File→New→MXML Component. The filename for this is

FlickrThumbnail and the component should be based on

VBox. Set the width to 125 and the height to 125.

2. Using the Outline view, locate the TileList component.

3. Cut the Image and Text components from the VBox com-

ponent in TileList, and paste them into FlickrThumb

nail.mxml. This starting code is shown in Example 3-18.

Example 3-18. The new FlickrThumbnail.mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"

width="125" height="125">

<mx:Image width="75" height="75"

source="{data.thumbnail.url}"/>

<mx:Text text="{data.credit}"/>

</mx:VBox>

4. Add the following attributes to the VBox component:

paddingBottom, paddingTop, paddingRight, and paddin

gLeft, each with a value of 5; horizontalScrollPolicy

and verticalScrollPolicy, both with a value of off; and

horizontalAlign with a value of center. The updated

code is shown in Example 3-19.

Example 3-19. Updating the VBox component source

<?xml version="1.0" encoding="utf-8"?>

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"

width="125" height="125"

paddingBottom="5” paddingLeft="5” paddingTop="5”

paddingRight="5”

horizontalScrollPolicy="off” verticalScrollPolicy=

32 | Chapter 3: Flex 101: Step by Step

1 2 ... 43 44 45 46 47 48 49 50 51 52 53 ... 147 148

Keine Kommentare

MACROMEDIA FLEX-GETTING STARTED WITH FLEX Bedienungsanleitung Seite 48