2 Replies Latest reply on Aug 21, 2006 4:12 PM by Dr._Goomba

    Divide application into multiple manageable files?

    Dr._Goomba
      I have an application using states and it is getting rather large, fast. I still have more to put in it. Managing one file with all these states and over 1000 lines of code is difficult to read and find what i need. How can i breakup these states into their own file and then have my main application reference them?

      The only method i know of is importing them is something like <myComponents.thisComponent/>. This doesnt work well because it has to be imported outside of the states.

      Thanks!
        • 1. Re: Divide application into multiple manageable files?
          peterent Level 2
          It sounds like you have a single MXML file with the states and all of the components that you are adding to and removing from those states.

          You need to break your application into customer components which are nothing more than MXML file with root tags such as Canvas and VBox (and even ComboBox and DataGrid, but I don't think you are at that stage yet).

          If you look at your MXML file you'll see that the root tag is Application. This means your MXML file is a class which is extending the Application class.

          Now look for other container classes, like Canvas and VBox, which have children of their own. Make a new MXML file and instead of Application as its root tag, use another Container. Then copy the children from the main MXML file and put them into the new MXML file, replacing the Container and its children with the name of your new MXML file.

          Here's an example. I left out a lot of properties so focus on the process, not the details of the tags.

          Let's say you have this state:

          <mx:state name="testState">
          <mx:AddChild>
          <mx:VBox>
          <mx:Label text="Click here:" />
          <mx:Button label="Goto Adobe" />
          </mx:VBox>
          </mx:AddChild>
          </mx:VBox>

          You can reduce that state to a more managable size by creating a custom component for that VBox and its children. Create a new file and give it name, say MyGotoBox.mxml. Copy the VBox and its children into the file so it looks like this:

          <?xml version="1.0" ?>
          <mx:VBox xmlns:mx=...>
          <mx:Label text="Click here:" />
          <mx:Button label="Goto Adobe" />
          </mx:VBox>

          Notice that its root tag is VBox and in fact, is a copy of what is in the state. Now you can replace the VBox and its children in the state with the custom component:

          <mx:state name="testState">
          <mx:AddChild>
          <MyGotoBox />
          </mx:AddChild>
          </mx:state>

          Hope this gives you some direction.
          • 2. Re: Divide application into multiple manageable files?
            Dr._Goomba Level 1
            Ah.., so thats how its done. Before i was trying to take everything within the <state>, but i would get array errors. This works flawlessly. Thanks!!