5 Replies Latest reply on Feb 13, 2008 12:20 PM by evware77

    Site Layout Help!

    evware77 Level 1

      Hello,

      I am putting together a catalog site of various items. I have set up MXML files for each category. I would like to setup a dashboard that will go to each of these when the button on the menubar in the dashboard is clicked. I am having trouble trying to get the dashboard menu buttons to go to each MXML file. Does anyone have any suggestions as to how I can accomplish this?

      Thanks
        • 1. Re: Site Layout Help!
          Gregory Lafrance Level 6
          I would use 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>
          • 2. Re: Site Layout Help!
            evware77 Level 1
            Thanks a lot! I am going to give this a try. It looks like it isn't very difficult. I really appreciate the response!
            • 3. Re: Site Layout Help!
              evware77 Level 1
              Well, I'm back - I need to direct the choices from a menubar that is populated by an XML file. I need the selected items to navigate to the MXML component in a components folder. Is there any further input or direction in how to accomplish this?
              • 4. Re: Site Layout Help!
                ntsiii Level 3
                You may be misunderstanding the Flex application architecture.

                The location of an mxml file has no bearing on how you navigate to and display it in the Flex application. You do NOT call mxml files from your application at run time.

                Instead, you declare the components (using xmlns to tell the compiler where the component files are) in a container, or in a navigator component, like ViewStack. Then your code makes the runtime component visible by using the navigator (ViewStack.selectedIndex).

                Look more closely at Greg's example above. Simply replace his example components with your own.

                Tracy
                • 5. Re: Site Layout Help!
                  evware77 Level 1
                  Thanks Tracy,

                  I was under another understanding - I think too much HTML, I guess. Now, I'm going to try this with the new understanding.

                  Thanks again to you and Greg!
                  Ellzie