Architecting an Application With MXML Components

Question

I have an application that has gotten lengthy and I want to
simplify it by architecting the Main Application with custom MXML
Components. The application as it is currently architected works
perfectly.
Currently, the application consists of "Canvas" containers
along Top and Left Side holding Navigation Buttons. The main
(changing) sections of the application will consist of a
"ViewStack" container holding a number of "Canvas" containers
stacked on top of one another. The navigation buttons along the top
and left side, when clicked, display in turn the content of each of
the several stacked "Canvas" containers. Because of the number of
stacked "Canvas" containers within the "ViewStack" and the content
of each, the main Application source code has become very long and
unwieldy, thus the need to use custom components for each of the
"Canvas" containers in the "Stack" and referencing them in the main
Application page.
I have tried several times to get this to work and I need to
clarify a couple of things.
1) After setting up custom components for the several
"Canvas" containers that are now in the "ViewStack" container, do I
first need to set up a custom component for the "ViewStack"
container with its own name space?
2) If the answer to 1) above is Yes then do I then reference
each of the custom components for the "Canvas" container with their
own name space designation within the "ViewStack" reference within
the main Application?
In the event I am completely off base then I would appreciate
any suggestions. If you wish I would be happy to email you the
current application page.
Thanks,
Joe
joe k

Answer 1

Here is some code for an app built with components. You can
see how the pieces talk to each other a bit.
------------------------- 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>