Version 2, last updated by judah at September 10, 2009 03:29 UTC
Creating the States
Here is code. Read it and weep for joy.
<?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.*">
<managers:LinkManager projectName="My Project">
</managers:LinkManager>
<managers:ContextMenuManager/>
<managers:MouseWheelManager />
<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="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="9" fontFamily="Arial"/>
</mx:HBox>
</mx:VBox>
<!-- STATES -->
<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="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="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="products.txt"/>
</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="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="welcome.txt"/>
</mx:AddChild>
</mx:State>
</mx:states>
</mx:Application>
We set the default state by entering it's name in the defaultFragment property.
Each state defines the changes to apply when going to that state. In these examples we are changing the content.