Flex Capacitor

We can set the style of the Link component a few different ways. The first is by setting the style on the component itself.

	<controls:TextLink text="About" color="#FF0000" rollOverColor="#0000FF" underlineOnHover="true" />

Here we are setting the text color to red with the color property. We are setting the color that appears when the mouse is over the link using the rollOverColor. We are also showing an underline when the mouse is over the link.

If we have a lot of Link components we can apply styles through CSS (Cascading Style Sheets). CSS cascades a style's value into the components it contains.

We can apply CSS a variety of different ways. The first is to define a style for a specific component type. For example, if we define a style for "TextLink" and set the text color to blue then every occurance of a TextLink will have blue text. We can override that on an individual basis by setting a components styleName.

	<!-- STYLES -->
	<mx:Style>
		TextLink {
			rollOverColor:#185fc0;
			underlineOnRollOver:true;
		}
	</mx:Style>

We can apply a group of styles to any component regardless of type, by defining those styles in a "class". For example, if we define a class called, "headerStyle" that specifies red, underlined, 16pt text, then any component that has it's styleName set to "headerStyle" will have red, underlined, 16pt text. Note that adding a "." period in front of the name indicates that it is a class and has to be applied like a class.

	<!-- STYLES -->
	<mx:Style>
		.headerStyle {
			font-weight:bold;
			font-size:36;
			underlineOnRollOver:false;
		}
	</mx:Style>

	<controls:TextLink text="About" styleName="headerStyle" />

We can also use the special reserved keyword, "global" to specify styles that get applied through the whole project, where applicable. So we can specify the font and font color once and it will be inherited as default to all the components in the project.

	<!-- STYLES -->
	<mx:Style>
		global {
			font-size:11;
			font-family:Arial;
			linkColor:#185fc0;
		}
	</mx:Style>

Example of a styled project:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
	xmlns:mx="http://www.adobe.com/2006/mxml"
	layout="absolute"
	color="#333333"
	backgroundColor="#ffffff"
	backgroundGradientColors="[#ffffff, #ffffff]"
	backgroundGradientAlphas="[1, 1]" 
	themeColor="#CCCCCC"
	xmlns:managers="com.flexcapacitor.managers.*" 
	xmlns:controls="com.flexcapacitor.controls.*" 
	xmlns:vo="com.flexcapacitor.vo.*">
	
	<!-- STYLES -->
	<mx:Style>
	
		global {
			font-size:11;
			linkColor:#185fc0;
		}
		VScrollBar {
			trackColors: #F5F5F5, #F5F5F5;
			themeColor: #AAAAAA;
		}
		Alert {
			backgroundColor: #bbbbbb;
			borderColor: #bbbbbb;
			color: #000000;
		}
		TextAutoSize {
			linkColor:#185fc0;
		}
		TextLink {
			rollOverColor:#185fc0;
			underlineOnRollOver:true;
		}
		
		.headerStyle {
			font-weight:bold;
			font-size:36;
			underlineOnRollOver:false;
		}
		
	</mx:Style>
	
	<managers:LinkManager debug="true" projectName="ACME Inc." defaultFragment="start" isTitleBeforeProjectName="true">
		<managers:stateOptions>
			<vo:StateOption stateName="about" displayName="About"/>
			<vo:StateOption stateName="contact" displayName="Contact Us"/>
			<vo:StateOption stateName="products" displayName="Our Products"/>
			<vo:StateOption stateName="services" displayName="Our Services"/>
		</managers:stateOptions>
	</managers:LinkManager>
	
	<managers:ContextMenuManager/>
	
	<managers:MouseWheelManager />
	
	<controls:TextLink x="10" y="10" text="ACME Inc." styleName="headerStyle" hyperlink="start"/>
	<mx:HBox x="10" y="68" id="hbox1">
		<controls:TextLink text="Home" id="homeLink1" hyperlink="start"/>
		<controls:TextLink text="Products" id="productsLink1" hyperlink="products"/>
		<controls:TextLink text="Services" id="servicesLink1" hyperlink="services"/>
		<controls:TextLink text="Contact Us" id="contactUsLink1" hyperlink="contact"/>
		<controls:TextLink text="About" id="aboutLink1" hyperlink="about"/>
	</mx:HBox>
	<mx:Text y="100" id="text1" fontWeight="bold" text="base" left="10"/>
	<mx:VBox y="130" id="vbox1" left="10" right="20">
		<mx:HBox width="100%" id="contentBox1">
		</mx:HBox>
		<mx:HBox width="100%" horizontalAlign="center">
			<mx:Text text="Copyright 2009 Flex Capacitor" fontWeight="bold" fontSize="10" fontFamily="Arial"/>
		</mx:HBox>
	</mx:VBox>
	
	<mx:states>
		<mx:State name="about">
			<mx:SetProperty target="{text1}" name="text" value="About"/>
			<mx:AddChild relativeTo="{contentBox1}" position="lastChild">
				<controls:TextAutoSize width="100%" source="content/about.txt"/>
			</mx:AddChild>
		</mx:State>
		<mx:State name="contact">
			<mx:SetProperty target="{text1}" name="text" value="Contact"/>
			<mx:AddChild relativeTo="{contentBox1}" position="lastChild">
				<controls:TextAutoSize width="100%" source="content/contact.txt"/>
			</mx:AddChild>
		</mx:State>
		<mx:State name="products">
			<mx:SetProperty target="{text1}" name="text" value="Products"/>
			<mx:AddChild relativeTo="{contentBox1}" position="lastChild">
				<controls:TextAutoSize width="100%" source="content/products.xml"/>
			</mx:AddChild>
		</mx:State>
		<mx:State name="services">
			<mx:SetProperty target="{text1}" name="text" value="Services"/>
			<mx:AddChild relativeTo="{contentBox1}" position="lastChild">
				<controls:TextAutoSize width="100%" source="content/services.txt"/>
			</mx:AddChild>
		</mx:State>
		<mx:State name="start">
			<mx:SetProperty target="{text1}" name="text" value="Home"/>
			<mx:AddChild relativeTo="{contentBox1}" position="lastChild">
				<controls:TextAutoSize width="100%" source="content/welcome.txt"/>
			</mx:AddChild>
		</mx:State>
	</mx:states>
	
</mx:Application>