MACROMEDIA FLEX-GETTING STARTED WITH FLEX Manuale Utente Scaricare il pdf (Pagina 78)

Example 4-19. CSS.mxml

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

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

layout="absolute">

<mx:Style>

Application { font-size: 30; }

TextInput { color: #0000ff; }

.important { color: #ff0000; }

</mx:Style>

<mx:Form>

<mx:FormItem label="First Name">

<mx:TextInput id="first" width="300" />

</mx:FormItem>

<mx:FormItem label="Last Name">

<mx:TextInput id="last" width="300" />

</mx:FormItem>

<mx:FormItem label="Email">

<mx:TextInput id="email" styleName="important"

width="300" />

</mx:FormItem>

<mx:FormItem>

<mx:Button label="Subscribe" />

</mx:FormItem>

</mx:Form>

</mx:Application>

The

CSS styles are defined in the mx:Styles tag. I’ve defined

three classes. The Application class, which controls all of the

content within the Application tag, increases the font size. For

the TextInput colors I specify that the text should be blue. For

any control of the class important, the color should be red.

When I launch this in Flex Builder I see Figure 4-19 in my

browser.

In this example, I’ve defined the CSS inline, but you can refer-

ence an external CSS file if you want to maintain styles across

several applications. In addition, Flex Builder can help you

manage your classes in Design mode.

62 | Chapter 4: Flex Controls and Layout

1 2 ... 73 74 75 76 77 78 79 80 81 82 83 ... 147 148

Nessun commento

MACROMEDIA FLEX-GETTING STARTED WITH FLEX Manuale Utente Pagina 78