Creating the design layout
We are going to create the design in the base state and other states will be based on this state. We do this so that if we have to change the design we only have to change the base state and the changes are inherited into all states based on this state.
Let's look at the example and code and then describe what is going on:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
color="#333333"
backgroundColor="#ffffff"
backgroundGradientColors="[#eeeeee, #eeeeee]"
backgroundGradientAlphas="[.5, .5]"
themeColor="#CCCCCC"
xmlns:managers="com.flexcapacitor.managers.*"
xmlns:controls="com.flexcapacitor.controls.*">
<managers:LinkManager projectName="My Project">
</managers:LinkManager>
<managers:ContextMenuManager/>
<managers:MouseWheelManager />
<!-- DESIGN -->
<controls:TextLink x="10" y="10" text="ACME Inc." fontWeight="bold" fontSize="36" 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="services"/>
<controls:TextLink text="Services" id="servicesLink1" hyperlink="services"/>
<controls:TextLink text="Contact Us" hyperlink="contact" id="contactUsLink1"/>
<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="9" fontFamily="Arial"/>
</mx:HBox>
</mx:VBox>
</mx:Application>
As you see we use the TextLink component to add a link to a text content. We could use an anchor container around any element but using the TextLink (based on the Text component) we can easily see familiar up, over and selected styles.
In the hyperlink property we are implying what state we want to navigate to. We say implying because the hyperlink property is multipurpose. Using the hyperlinkTarget we can indicate what type of value is in the hyperlink property. Note that we haven't created the states we are pointing to yet.