Dear Group,
Somewhat of a newbie and trying to do something that I think should be
possible. I have my application below, that when I press a button in the
viewstack it changes the Skinnable container "stuff" within the given
navigation container to my custom component defined. So that works well. What I
want to be able to do is within my custom component, I want to change the
"stuff" again in the navigation container based on a button within the custom
component to another custom component. To clarify I want to swap out custom
component A with custom component B.
Is there a way so that I can define a variable that is used instead of naming
the component as in this snippet:
<s:NavigatorContent label="Clients"
icon="@Embed(source='/assets/png/32x32/globe.png')" width="100%" height="100%"
id="Information">
<s:SkinnableContainer width="100%" height="100%">
<MyComps1:ClientsMain/>
</s:SkinnableContainer>
</s:NavigatorContent>
Rather do this:
<s:NavigatorContent label="Clients"
icon="@Embed(source='/assets/png/32x32/globe.png')" width="100%" height="100%"
id="Information">
<s:SkinnableContainer width="100%" height="100%">
<MyComps1:somekindavariabledefined/>
</s:SkinnableContainer>
</s:NavigatorContent>
Then based on the click of another button it changes the value of the variable?
<s:Button x="105" y="111" label="Main Configuration" width="148"
height="31" click="changecomponentvariableA" />
<s:Button x="106" y="206" label="Main Reports" width="148" height="29"
click="changecomponentvariableB" />
################Full Main Application#################
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009";
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo"
minWidth="1024" minHeight="768" currentState="Base"
xmlns:MyComps1="com.One.Views.*"
xmlns:MyComps2="com.Two.Views.*"
xmlns:MyComps3="com.Three.Views.*"
xmlns:MyComps4="com.Four.Views.*"
initialize="initCollections()"
xmlns:mx2="library://ns.adobe.com/flex/mx">
<s:states>
<s:State name="Base"/>
</s:states>
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/halo";
.buttonBarButtonStyles {
skin: ClassReference("skins.SkinMainButtonBar");
}
</fx:Style>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects)
here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import skins.SkinMainButtonBar;
import mx.events.MenuEvent;
import mx.controls.Alert;
import mx.collections.*;
import mx.managers.PopUpManager;
import mx.controls.Alert;
[Bindable]
public var menuBarCollection:XMLListCollection;
private var menubarXML:XMLList =
<>
<menuitem label="Menu1" data="top">
<menuitem label="MenuItem 1-A"
data="1A"/>
<menuitem label="MenuItem 1-B"
data="1B"/>
</menuitem>
<menuitem label="Menu2" data="top">
<menuitem label="MenuItem 2-A"
type="check" data="2A"/>
<menuitem type="separator"/>
<menuitem label="MenuItem 2-B" >
<menuitem
label="SubMenuItem 3-A" type="radio"
groupName="one"
data="3A"/>
<menuitem
label="SubMenuItem 3-B" type="radio"
groupName="one"
data="3B"/>
</menuitem>
</menuitem>
<menuitem label="Menu3" data="top"/>
</>;
// Event handler to initialize the MenuBar control.
private function initCollections():void {
menuBarCollection = new
XMLListCollection(menubarXML);
}
]]>
</fx:Script>
<s:SkinnableContainer x="0" y="0" width="100%" height="100" left="10"
right="10" top="10">
<s:Rect id="background" left="0" top="0" right="0" bottom="0"
alpha="1" radiusX="1" radiusY="1">
<s:fill>
<s:BitmapFill
source="@Embed(source='/assets/logo_src_icon_slice.png')"/>
</s:fill>
</s:Rect>
<mx2:Image source="@Embed(source='/assets/Logo.png')" x="1"
top="1"/>
<mx2:ButtonBar height="50" horizontalGap="10"
dataProvider="{viewstack1}" paddingBottom="5" paddingTop="2" paddingLeft="5"
paddingRight="5" styleName="buttonBarButtonStyles"
buttonStyleName="buttonBarButtonStyles"
firstButtonStyleName="buttonBarButtonStyles"
lastButtonStyleName="buttonBarButtonStyles" x="224" y="5" width="100%"/>
<s:SkinnableContainer x="80" y="73" width="100%" height="27">
<mx2:Image
source="@Embed(source='/assets/Edition.png')" x="286" height="25" right="5"
top="2"/>
<mx2:MenuBar left="1" x="19" y="5" dataProvider="{
menuBarCollection }" labelField="@label"></mx2:MenuBar>
</s:SkinnableContainer>
</s:SkinnableContainer>
<s:SkinnableContainer y="110" width="100%" height="100%">
<mx2:ViewStack id="viewstack1" paddingLeft="10" paddingRight="10" width="100%"
height="100%">
<s:NavigatorContent label="Clients"
icon="@Embed(source='/assets/png/32x32/globe.png')" width="100%" height="100%"
id="Information">
<s:SkinnableContainer width="100%" height="100%">
<MyComps1:ClientsMain/>
</s:SkinnableContainer>
</s:NavigatorContent>
<s:NavigatorContent label="Users"
icon="@Embed(source='/assets/png/32x32/user.png')" width="100%" height="100%"
id="Auto">
<s:SkinnableContainer width="100%" height="100%">
<MyComps2:UsersMain/>
</s:SkinnableContainer>
</s:NavigatorContent>
<s:NavigatorContent label="Numbers"
icon="@Embed(source='/assets/png/32x32/numbers.png')" width="100%"
height="100%" id="SystemWide">
<s:SkinnableContainer width="100%" height="100%">
<MyComps3:NumbersMain/>
</s:SkinnableContainer>
</s:NavigatorContent>
<s:NavigatorContent label="Reports"
icon="@Embed(source='/assets/png/32x32/report.png')" width="100%" height="100%"
id="Center" includeInLayout="true">
<s:SkinnableContainer width="100%" height="100%">
<MyComps4:ReportsMain/>
</s:SkinnableContainer>
</s:NavigatorContent>
</mx2:ViewStack>
###########MyComp ClientsMain Component########3
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009";
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo" width="100%"
height="100%">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects)
here -->
</fx:Declarations>
<s:Button x="105" y="111" label="Main Configuration" width="148"
height="31" click="changecomponentvariableA" />
<s:Button x="106" y="206" label="Main Reports" width="148" height="29"
click="changecomponentvariableB" />
<s:Button x="106" y="161" label="Main Maintenance" width="148"
height="29" click="changecomponentvariableC" />
</s:Group>
