O'Reilly logo

Learning Flex 4 by Elijah Robison, Alaric Cole

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

External CSS

In this section, we apply what you’ve learned about stylesheets to the PhotoGallery application; only this time, we’ll work with an external stylesheet.

First, let’s get a cut of the application code. We left this project back in Chapter 12 when we discussed navigation, but since then we’ve discussed effects. As such, note a few lines of emphasis in Example 15-5 where we added both a drop shadow and a simple fade on the Image component.

Example 15-5. The PhotoGallery application mostly as we left it in Chapter 12

<?xml version="1.0" encoding="utf-8"?>
<s:Application
 xmlns:fx="http://ns.adobe.com/mxml/2009"
 xmlns:s="library://ns.adobe.com/flex/spark"
 xmlns:mx="library://ns.adobe.com/flex/mx"
 applicationComplete="photoService.send()">
<s:layout><s:BasicLayout/></s:layout>
<fx:Declarations>
<s:HTTPService id="photoService" url="photos.xml" resultFormat="e4x"
 result="photoList.selectedIndex=0"/>
<s:XMLListCollection id="photoXMLList"
 source="{photoService.lastResult.photo}"/>
</fx:Declarations>
<s:XMLListCollection id="photoXMLList"
 source="{photoService.lastResult.photo}"/>
<!-- drop shadow added -->
<s:DropShadowFilter id="dropShadow"/>
</fx:Declarations>
<mx:TabNavigator left="10" top="10" bottom="10" width="200"
 creationPolicy="all">
<s:NavigatorContent label="Photo List" width="100%" height="100%">
<s:List id="photoList" height="100%" width="100%"
 dataProvider="{photoXMLList}" labelField="@title"
 change="{thumbList.selectedIndex =
 photoList.selectedIndex}"/>
</s:NavigatorContent> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required