1 Reply Latest reply on Feb 20, 2008 6:54 PM by Gregory Lafrance

    Adding Custom Component Dynamically

    eodC
      I need to a custom component which I created in the Flex Builder to my main Application. Can any one please help me to get thru this issue.

      In Detail: I have a some custom components (MyFlexComponent1.mxml, MyFlexComponent2.mxml,....etc) and my main application(MainApplication.mxml). Now from the main application, I want to load this MyFlexComponent#.mxml depending upon user selection.

      Code
        • 1. Re: Adding Custom Component Dynamically
          Gregory Lafrance Level 6
          Try a ViewStack:

          ------------------------------ ViewStack.mxml -------------------------------
          <?xml version="1.0"?>
          <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" xmlns:comp="components.*">
          <mx:Script>
          <![CDATA[
          private function selectPortal(event:Event):void {
          if(cmbx.selectedItem.data == "home"){
          portals.selectedChild = home;
          }
          if(cmbx.selectedItem.data == "hr_portal"){
          portals.selectedChild = hr_portal;
          }
          if(cmbx.selectedItem.data == "is_portal"){
          portals.selectedChild = is_portal;
          }
          if(cmbx.selectedItem.data == "pay_portal"){
          portals.selectedChild = pay_portal;
          }
          }
          ]]>
          </mx:Script>

          <mx:ApplicationControlBar width="100%">
          <mx:Label text="Select an intranet portal: " fontSize="12"/>
          <mx:ComboBox id="cmbx" change="selectPortal(event)">
          <mx:Object label="XYZ Intranet Home Page" data="home"/>
          <mx:Object label="Human Resources Portal" data="hr_portal"/>
          <mx:Object label="Information Services Portal" data="is_portal"/>
          <mx:Object label="Payroll Portal" data="pay_portal"/>
          </mx:ComboBox>
          </mx:ApplicationControlBar>
          <mx:ViewStack id="portals" width="100%" height="100%">
          <mx:Panel width="100%" height="100%" horizontalAlign="center"
          backgroundColor="#ccffcc" id="home">
          <mx:Text text="Welcome to the XYZ Corporate Intanet" fontSize="20"
          color="blue"/>
          </mx:Panel>
          <comp:HumanResources id="hr_portal"/>
          <comp:InformationServices id="is_portal"/>
          <comp:Payroll id="pay_portal"/>
          </mx:ViewStack>
          </mx:Application>
          ------------------------------------------------------------------------------------
          ---------- components/HumanResources.mxml ------------------
          <?xml version="1.0" encoding="utf-8"?>
          <mx:Panel xmlns="*" xmlns:mx=" http://www.adobe.com/2006/mxml"
          width="100%" height="100%" horizontalAlign="center" backgroundColor="red">
          <mx:Text text="Human Resources Portal" fontSize="20"
          color="blue"/>
          </mx:Panel>
          ------------------------------------------------------------------------------------
          ---------- components/InformationServices.mxml ------------------
          <?xml version="1.0" encoding="utf-8"?>
          <mx:Panel xmlns="*" xmlns:mx=" http://www.adobe.com/2006/mxml"
          width="100%" height="100%" horizontalAlign="center" backgroundColor="purple">
          <mx:Text text="Information Services Portal" fontSize="20"
          color="blue"/>
          </mx:Panel>
          ------------------------------------------------------------------------------------
          ---------- components/Payroll.mxml ------------------
          <?xml version="1.0" encoding="utf-8"?>
          <mx:Panel xmlns="*" xmlns:mx=" http://www.adobe.com/2006/mxml"
          width="100%" height="100%" horizontalAlign="center" backgroundColor="gray">
          <mx:Text text="Payroll Portal" fontSize="20"
          color="blue"/>
          </mx:Panel>