3 Replies Latest reply on Aug 7, 2006 9:36 AM by peterent

    Organizing innumerous States

    PGzinho
      Hello there!

      I'm creating a site administrator application, with too manys inputs, classes, views, so on...

      The MXML code is too large and its getting very complicated to find/search through the code to edit/add States. Is there any way to stop using states to switch views, and/or create a new file for new States? Or maybe an easier way to organize them without having to write all states in one file?

      Here's what I have now...

      -------------------
      <mx:states>
      <mx:State name="home">
      <mx:AddChild position="lastChild">
      <mx:Panel y="100" width="730" height="600" layout="absolute" title="Área de Manutenção" horizontalCenter="-5" id="painelHome">
      <mx:Panel y="10" width="165" height="225" layout="absolute" title="Dicas da Vovó Lydia" x="10">
      <mx:Image y="10" source="images/manut/lampada.png" horizontalCenter="0"/>
      <mx:LinkButton y="66" label="Adicionar" width="100%" horizontalCenter="0" click="currentState = 'dicas_adicionar';"/>
      <mx:LinkButton y="96" label="Editar" width="100%" horizontalCenter="0"/>
      <mx:LinkButton y="126" label="Estatísticas" width="100%" horizontalCenter="0"/>
      </mx:Panel>
      <mx:Panel y="10" width="165" height="225" layout="absolute" title="Concurso de Receitas" x="185">
      <mx:Image y="10" source="images/manut/caixapapeis.png" horizontalCenter="0"/>
      <mx:LinkButton y="66" label="Aprovar" width="100%" horizontalCenter="0"/>
      <mx:LinkButton y="96" label="Editar" width="100%" horizontalCenter="0"/>
      <mx:LinkButton y="126" label="Estatísticas" width="100%" horizontalCenter="0"/>
      </mx:Panel>
      <mx:Panel y="250" width="165" height="225" layout="absolute" title="Livro de Receitas" x="185">
      <mx:Image y="10" source="images/manut/livroaberto.png" horizontalCenter="0"/>
      <mx:LinkButton y="66" label="Adicionar" width="100%" horizontalCenter="0"/>
      <mx:LinkButton y="96" label="Editar" width="100%" horizontalCenter="0"/>
      <mx:LinkButton y="156" label="LinkButton" width="100%" horizontalCenter="0"/>
      <mx:LinkButton y="126" label="Estatísticas" width="100%" horizontalCenter="0"/>
      </mx:Panel>
      <mx:Panel y="10" width="165" height="225" layout="absolute" title="Viva Melhor" x="535">
      <mx:Image y="10" source="images/manut/pessoabrilho.png" horizontalCenter="0"/>
      <mx:LinkButton y="66" label="Adicionar" width="100%" horizontalCenter="0"/>
      <mx:LinkButton y="96" label="Editar" width="100%" horizontalCenter="0"/>
      <mx:LinkButton y="126" label="Estatísticas" width="100%" horizontalCenter="0"/>
      </mx:Panel>
      <mx:Panel y="250" width="165" height="225" layout="absolute" title="Chamadas" x="10">
      <mx:Image y="10" source="images/manut/speaker.png" horizontalCenter="0"/>
      <mx:LinkButton y="66" label="Página Inicial" width="100%" horizontalCenter="0"/>
      <mx:LinkButton y="96" label="Viva Melhor" width="100%" horizontalCenter="0"/>
      <mx:LinkButton y="126" label="Livro de Receitas" width="100%" horizontalCenter="0"/>
      <mx:LinkButton y="156" label="Receitas do Concurso" width="100%" horizontalCenter="0"/>
      </mx:Panel>
      <mx:Panel y="10" width="165" height="225" layout="absolute" title="ABC dos Alimentos" x="360">
      <mx:Image y="10" source="images/manut/potelupa.png" horizontalCenter="0"/>
      <mx:LinkButton y="66" label="Adicionar" width="100%" horizontalCenter="0"/>
      <mx:LinkButton y="96" label="Editar" width="100%" horizontalCenter="0"/>
      <mx:LinkButton y="126" label="Estatísticas" width="100%" horizontalCenter="0"/>
      </mx:Panel>
      </mx:Panel>
      </mx:AddChild>
      </mx:State>
      -------------------


      You see? This is just for the States... then there is the scripts, styles, transitions and everything else. Its gonna get massive!!

      I could create various mxml and switch between them with "getURL", but this way dont sounds good as it will refresh the page loading another. There is any other way?

      Thanks in advance!
        • 1. Re: Organizing innumerous States
          peterent Level 2
          Put those Panel + LinkButtons into their own MXML files. This is go a long way to making the states section easier to read and your code will be easier to maintain.

          If the states section is part of a larger MXML file, you can put that into an external ActionScript and include it:

          <mx:Script source="states_for_app.as" />

          this will act as if the content were actually in the file (do not make this into a class, just cut the <mx:states> .. </mx:states> and paste it into the external file.
          • 2. Re: Organizing innumerous States
            PGzinho Level 1
            I see...

            But you want me to create components or there is another way to switch between MXML files withou using a getURL or something similar that refreshes the page?
            • 3. Re: Organizing innumerous States
              peterent Level 2
              You know how you have a main application file, the one with a root tag of <mx:Application> and it might be called Main.mxml? Do the same for your panels. For example, place this tag: <mx:Panel y="100" width="730" height="600" layout="absolute" title="Área de Manutenção" horizontalCenter="-5" id="painelHome"> and its children into its own file. Suppose you call it Home.mxml so it starts off like:

              <mx:Panel xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" title="Área de Manutenção" >
              <!-- put the children here as you have them -->
              </mx:Panel>

              All of that becomes Home.mxml. Now you can reduce the <mx:states> like this:

              <mx:states>
              <mx:State name="home">
              <mx:AddChild position="lastChild">
              <local:Home y="100" width="730" height="600" horizontalCenter="-5" id="painelHome" />
              </mx:State>

              On your <mx:Application> tag add the namespace xmlns:local="*" if your Home.mxml file is stored in the same directory as your main application file.

              Note: the id property cannot be on the root tag of a file. While the y, width, and height properties can be on the root tag, it generally makes more sense to use them from the container file as I've done in the example above.

              Right now you are finding it difficult to work with the file because it is getting too complex. Breaking your application into component MXML and AS files ultimately makes it easier to maintain.