7 Replies Latest reply on Jan 26, 2010 1:55 PM by rick@cat

    Separating mxml files for a large application

    Sohail1u

      Hi,

         I am new to flex. Plz tell me can we have separate mxml files for a very large application? If no, then how is it possible to write all the pages in a single mxml file. It would be hard to develop and maintain the application if the application is very big consisting of say 300 screens and we are stuffing all the views(for 300 screen) in a single mxml file. Can anyone explain please?

        • 1. Re: Separating mxml files for a large application
          msakrejda Level 4

          Yes, you can have separate files and reuse them as components (typically, these are called your views or pages). You can use them anywhere you use the standard Flex components you extend (the ones in the root of your MXML component definition).

          • 2. Re: Separating mxml files for a large application
            rick@cat

            I struggled with this when I started so I thought I pay-it-forward a bit. Here's an example of the design we use. We have about 25 "pages" (modules) where each module contains it's own script and also links to generic scripts and functions. The modules are loaded using the displayModule function below by passing in the xxx.swf file you want to load. In our case, we using a menubar and pass the values into displayModule.

             

            Open a new project and save this as index.mxml

             

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application
                xmlns:mx="http://www.adobe.com/2006/mxml"
                layout="absolute"
                creationComplete="displayModule('test.swf')">
                <mx:Script>
                    <![CDATA[
                    import mx.controls.Alert;
                    import mx.events.ModuleEvent;
                    import mx.modules.ModuleManager;
                    // load external module
                    public function displayModule(s:String):void {
                        contentArea.url = s;
                        contentArea.loadModule();
                    }
                    // handle ModuleEvent.READY
                    protected function handleModuleReady( moduleEvent:ModuleEvent ):void {
                          contentArea.visible = true;
                       }
                    // handle ModuleEvent.ERROR
                       protected function handleModuleError( moduleEvent:ModuleEvent ):void {
                        Alert.show("Module " + moduleEvent.module.url + " Cannot be found");
                    }
                    ]]>
                </mx:Script>
                <mx:VBox left="10" right="10" top="10" bottom="10"
                         verticalGap="2" backgroundColor="#666666">
                    <mx:Canvas width="100%" height="100" backgroundColor="#ffffff">
                        <mx:Label x="10" y="10" text="Header Area"
                                  fontSize="24" width="154" height="37"/>
                    </mx:Canvas>
                    <mx:Canvas width="100%" height="100%" backgroundColor="#ffffff">
                        <mx:ModuleLoader
                            id="contentArea"
                              ready="handleModuleReady(event);"
                              error="handleModuleError(event);"
                            left="0" right="0" bottom="0" top="0"/>
                    </mx:Canvas>
                </mx:VBox>
            </mx:Application>

             

            Here's the test.mxml that gets loaded on creationComplete in index.mxml

             

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%">
                <mx:Label x="75" y="49" text="This is in test.swf" width="178" height="22" fontSize="18"/>
                <mx:DataGrid x="75" y="96">
                    <mx:columns>
                        <mx:DataGridColumn headerText="Column 1" dataField="col1"/>
                        <mx:DataGridColumn headerText="Column 2" dataField="col2"/>
                        <mx:DataGridColumn headerText="Column 3" dataField="col3"/>
                    </mx:columns>
                </mx:DataGrid>
            </mx:Module>

             

             

            One thing. In Flex Builder under Project/Properties, you need to select Flex Modules and add the test.mxml module to that list before you run it. I also set up the project to use RSL. Just do a search on that to see how it's used. The modules load a lot faster that way.

             

            Rick

            • 3. Re: Separating mxml files for a large application
              aktell2007 Level 1

              Hi there,

               

              I’m working since nearly 18 month with modules only and always in the same way throughout and just a few weeks ago I have used for the first time over 120 modules in one Application.

              The amount of modules does not really matter in the end, but how you work them and as by your code supplied I would say it is far too complicated e.g. (creationComplete="displayModule('test.swf')") rather run this with ‘Init’, and include a getModule within the Init call!, and to change that just search in your Flex Help section and view how simple it could be done and go from there to spruce it up!

               

              My immediate impression is that in your code are different things are missing e.g. (Preload Module, Create Module, Remove Module) where as in the preload and Init call you run the module pathway making it a carrier module to all other modules which is displaying what ever and as many as within a ‘ViewStack’ there is no use of using ‘visible’ with at all!

              Most of what you need is already there in your code but as said unnecessary complicated

               

              I just noticed another thing that you Import (mx.modules.ModuleManager) but do not have it mentioned or are using it anywhere else in your code. Well I do think you have to rethink this whole code you got! maybe try to find out more about (mx.modules.IModuleInfo) as well and you get a whole new view towards modules !!!

               

              regards aktell

              • 4. Re: Separating mxml files for a large application
                rick@cat Level 1

                aktell,

                It was only a basic example, yes there are a few things that I show here that are not really needed but I have 100 more lines of code in the real file doing many more things. The displayModule function is just one way of doing it. I use the moduleManager for other things so you are right, it should not be in there. Again, it was a quick example of how we do it here. If you have a better way, by all means, show it to us?

                 

                Rick

                • 5. Re: Separating mxml files for a large application
                  rick@cat Level 1

                  Cleaned up version

                   

                  <?xml version="1.0" encoding="utf-8"?>
                  <mx:Application
                      xmlns:mx="http://www.adobe.com/2006/mxml"
                      layout="absolute" initialize="displayModule('test.swf')">
                      <mx:Script>
                          <![CDATA[
                          import mx.controls.Alert;
                          import mx.events.ModuleEvent;
                          // display external module
                          public function displayModule(s:String):void {
                              contentArea.url = s;
                              contentArea.loadModule();
                          }
                          // handle ModuleEvent.READY
                          protected function handleModuleReady( moduleEvent:ModuleEvent ):void {
                                Alert.show("Module " + moduleEvent.module.url + " Loaded");
                                // do what you need to here...
                             }
                          // handle ModuleEvent.ERROR
                             protected function handleModuleError( moduleEvent:ModuleEvent ):void {
                              Alert.show("Module Load Error: " + moduleEvent.errorText);
                          }
                          ]]>
                      </mx:Script>
                      <mx:VBox left="10" right="10" top="10" bottom="10"
                               verticalGap="2" backgroundColor="#666666">
                          <mx:Canvas width="100%" height="100" backgroundColor="#ffffff">
                              <mx:Label x="10" y="10" text="Header Area"
                                        fontSize="24" width="154" height="37"/>
                          </mx:Canvas>
                          <mx:Canvas width="100%" height="100%" backgroundColor="#ffffff">
                              <mx:ModuleLoader
                                  id="contentArea"
                                    ready="handleModuleReady(event);"
                                    error="handleModuleError(event);"
                                  left="0" right="0" bottom="0" top="0"/>
                          </mx:Canvas>
                      </mx:VBox>
                  </mx:Application>

                  • 6. Re: Separating mxml files for a large application
                    aktell2007 Level 1

                    Hi again,

                     

                    First up I like to mention that ‘Yes’ there are many more ways of doing this, and I have seen ways myself which I did not even understand at all, but they where the ways one or the other Flex Guru was using. We all have our own way in the end in using code but in your case I tried to point out that it is the basic ADOBE code used in a way complicated x10.

                    I’m talking here only about a way ‘Strait forward’ and as I mentioned it before it is written in your ADOBE Flex Software’s HELP files! Including the ModuleManager, and the ModuleInfo stuff etc. Now if you like me to send you the .Pdf file of it I’m quiet happy to do so! I have done this already before to help (Please Note: It would be very much highlighted from two years ago when I used it the first time) but otherwise it includes everything combined out of the HELP section on modules.

                    Everything else you mentioned in your last thread is already answered in my first thread, and as you seem to work for a company I’m sure somebody will know and use about ViewStacks.

                    If you want ‘Code’ well I could send it and you maybe would be surprised by its simplicity, but I could only send some of it (Not much different from the ADOBE  HELP file) as I write the code for my company and that would be counter productive for my company to see somebody else using the complete changed code.

                     

                    regards aktell

                    • 7. Re: Separating mxml files for a large application
                      rick@cat Level 1

                      aktell,

                      I am well aware of preloading modules, and viewstacks. In my case, i simply did not choose to use viewstacks. I also added the displayModule function SIMPLY as an EXAMPLE of a way to pass it a filename to load. If YOU have a better example for the folks on the forum, then post it. I'm done with this. Was only trying to help...

                       

                      Rick