Help me in developing an application

Question

hi frnds,
I have to develop an application similar to flexstore.But i
am confused with "states" and how to integrate other mxml to the
main mxml.Will you help me in this.Pls give a tutorial.
regards

Answer 1

Usually you use view states for cases where a rather smaller
portion of your application needs to change appearance for some
specific purpose, and then often use ViewStack for app navigation
between components:
Here is a sample app I created to show using ViewStack for an
entire website:
------------------------- ViewStack1.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
xmlns:comp="components.*"
layout="vertical" width="100%" height="100%" >
<comp:TopBar />
<mx:HBox width="100%" height="100%">
<comp:LeftBar />
<mx:VBox width="100%" height="100%">
<mx:ViewStack id="myViewStack" borderStyle="none"
width="100%" height="100%">
<mx:VBox id="home" width="100%">
<comp:MainIntroText />
<mx:HRule width="50%" height="3"
strokeColor="0xCC3333"/>
<comp:MainSecondaryText />
<mx:HRule width="50%" height="3"
strokeColor="0xCC3333"/>
<comp:MainFinalText />
</mx:VBox>
<mx:VBox id="about" width="100%">
<comp:About />
</mx:VBox>
<mx:VBox id="contact" width="100%">
<comp:Contact />
</mx:VBox>
</mx:ViewStack>
</mx:VBox>
</mx:HBox>
</mx:Application>
------------------------------- About.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="
http://www.adobe.com/2006/mxml"
width="100%">
<mx:VBox width="65%">
<mx:Text fontSize="14" width="100%" text="This page tells
you about us." />
</mx:VBox>
</mx:HBox>
----------------------------------- Contact.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="
http://www.adobe.com/2006/mxml"
width="100%">
<mx:VBox width="65%">
<mx:Text fontSize="14" width="100%" text="This page tells
you how to contact us." />
</mx:VBox>
</mx:HBox>
------------------- LeftBar.mxml -------------------------
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="
http://www.adobe.com/2006/mxml"
width="200" height="100%">
<mx:LinkButton label="Adobe Labs - Flex"
click="navigateToURL(new URLRequest('
http://labs.adobe.com/technologies/flex'),
'_blank');"/>
<mx:Spacer height="20"/>
<mx:Label fontSize="16" text="Flex Blogs"/>
<mx:LinkBar direction="vertical" width="90%"
itemClick="navigateToURL(new URLRequest(event.item.data),
'_blank');">
<mx:Object label="Adobe Flex Team Blog" data="
http://weblogs.macromedia.com/flexteam/"/>
<mx:Object label="Flex Blog Aggregator" data="
http://www.allyourflexarebelongtous.com/"/>
<mx:Object label="Adobe Flex Blog Aggregator" data="
http://weblogs.macromedia.com/mxna/index.cfm?query=byCategory&#38;categoryId=5&#38;categor yName=Flex"/>
</mx:LinkBar>
<mx:Spacer height="20"/>
<mx:Label fontSize="16" text="Example Flex Apps"/>
<mx:LinkBar direction="vertical" id="addlRscList"
width="90%" itemClick="navigateToURL(new
URLRequest(event.item.data), '_blank');">
<mx:Object label="Adobe Flex Store" data="
http://www.adobe.com/devnet/flex/samples/flex_store_v2/"/>
<mx:Object label="Adobe Dashboard Example" data="
http://examples.adobe.com/flex2/inproduct/sdk/dashboard/dashboard.html"/>
<mx:Object label="Buzzword Word Processor" data="
http://preview.getbuzzword.com/?s=true"/>
<mx:Object label="Adobe Style Explorer" data="
http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html"/>
<mx:Object label="Adobe Component Explorer" data="
http://examples.adobe.com/flex2/inproduct/sdk/explorer/explorer.html"/>
</mx:LinkBar>
</mx:VBox>
----------------------- MainFinalText.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="
http://www.adobe.com/2006/mxml"
width="100%">
<mx:Text width="100%" fontSize="12"
text="Here is the final text I want to show you." />
</mx:VBox>
--------------------------- MainIntroText.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="
http://www.adobe.com/2006/mxml"
width="100%">
<mx:Text width="100%" fontSize="12"
text="Here is the main text I want to show you." />
</mx:VBox>
----------------------- MainSecondaryText.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="
http://www.adobe.com/2006/mxml"
width="100%">
<mx:Text width="100%" fontSize="12"
text="Here is the secondary text I want to show you." />
</mx:VBox>
--------------- TopBar.mxml --------------------------------
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="
http://www.adobe.com/2006/mxml"
width="100%">
<mx:Script>
<![CDATA[
private function goToViews(view:String):void {
if(view == "home"){
this.parentApplication.myViewStack.selectedChild=this.parentApplication.home;
if(view == "about"){
this.parentApplication.myViewStack.selectedChild=this.parentApplication.about;
if(view == "contact"){
this.parentApplication.myViewStack.selectedChild=this.parentApplication.contact;
]]>
</mx:Script>
<mx:LinkButton label="MySnazzyLogo" fontSize="20"
click="goToViews('home');" />
<mx:VBox width="100%">
<mx:HBox width="100%">
<mx:Spacer width="100%" />
<mx:LinkBar fontSize="14"
itemClick="goToViews(String(event.item.data));">
<mx:Array>
<mx:Object label="About Us" data="about"/>
<mx:Object label="Contact Us" data="contact"/>
</mx:Array>
</mx:LinkBar>
</mx:HBox>
<mx:HBox width="100%">
<mx:Spacer width="150" />
<mx:Label fontSize="25" text="Here is Some Additional
Text" />
</mx:HBox>
</mx:VBox>
</mx:HBox>