19 Replies Latest reply on Nov 20, 2009 11:17 AM by Flex harUI

    Flex 4: Module issues

    Cường Trần

      Hi everybody.

      My company using flex 3 and now upgrade to flex 4. I have the problem when using module in flex 4.

      I create module in Flash Builder, and the default, Flash Builder create module by extend mx:Module. In this module i creaate ComboBox(mx) and Button(spark) for example.

       

      In the main application, the first, if i using ModuleLoader tag and specify url of ModuleLoader than application load module ok. But the project is too large, and main application can not load static module. So i define module in xml file. If i using ModulerManager.getModule(url).load() then error occur. Or if i loaded completly, when module init it throw error that skin for control that i create in module has not skin.The problem occur when i do not set skin class style. And it not occur if i set skin class style.

       

      So, what i need do before add module into main application, i do not want specify skinclass for all control in my module(i think the default skin load, but not).

      Anyone please help me.

      Thanks.

        • 1. Re: Flex 4: Module issues
          Flex harUI Adobe Employee

          Are you defining the module in .AS or .MXML?  You should be using .MXML to define a module with styleable components.  The styles are not linked in if the module is defined in .AS

           

          Alex Harui

          Flex SDK Developer

          Adobe Systems Inc.

          Blog: http://blogs.adobe.com/aharui

          • 2. Re: Flex 4: Module issues
            Cường Trần Level 1

            Many thanks Flex harUI.

            I have created module in mxml file. You can see the Test folder in attach file. The problem do not occur in flex 3(may be flex 3 do not using skin).

            Please point that the problem occur when you load module using Loader or ModuleLoader in script tag. It does not occur if you using ModuleLoader tag.

            Because i need load module difference server, so i can not use ModuleLoader tag.

            Please check in attach file!

            • 3. Re: Flex 4: Module issues
              Flex harUI Adobe Employee

              I am unable to open the zip file.  Sometimes it takes a while before the server will serve it.  If you can paste in code snippets it might help.

               

              Remember that Flex 4 uses CSS namespaces so maybe you haven't fixed up the namespaces properly.

               

              Alex Harui

              Flex SDK Developer

              Adobe Systems Inc.

              Blog: http://blogs.adobe.com/aharui

              • 4. Re: Flex 4: Module issues
                Cường Trần Level 1

                Here is my module:

                <?xml version="1.0" encoding="utf-8"?>
                <mx:Module
                    xmlns:fx="http://ns.adobe.com/mxml/2009"
                    xmlns:s="library://ns.adobe.com/flex/spark"
                    xmlns:mx="library://ns.adobe.com/flex/halo"
                    layout="vertical" width="100%" height="100%">
                       
                    <mx:ComboBox borderColor="0xFF00FF" borderThickness="3">
                        <mx:dataProvider>
                            <fx:Array>
                                <fx:String>Item 1</fx:String>
                                <fx:String>Item 2</fx:String>
                                <fx:String>Item 3</fx:String>
                            </fx:Array>
                        </mx:dataProvider>
                    </mx:ComboBox>
                   
                    <s:Button label="Button">
                   
                </mx:Module>

                 

                The main application:

                <?xml version="1.0" encoding="utf-8"?>
                <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                    xmlns:s="library://ns.adobe.com/flex/spark"
                    xmlns:mx="library://ns.adobe.com/flex/halo"
                    minWidth="1024" minHeight="768"
                    creationComplete="application1_creationCompleteHandler(event)">
                   
                    <fx:Style>
                        @namespace mx "library://ns.adobe.com/flex/halo";
                        @namespace s "library://ns.adobe.com/flex/spark";
                       
                        mx|ComboBox {
                            color: "0xFF00FF";
                        }
                       
                        s|Button {           
                            skin-class: "spark.skins.default.ButtonSkin";
                        }
                           
                    </fx:Style>
                   
                    <fx:Script>
                        <![CDATA[
                            import mx.modules.ModuleLoader;
                            import mx.modules.IModuleInfo;
                            import mx.modules.ModuleManager;
                            import mx.modules.Module;
                            import mx.core.IFlexModuleFactory;
                            import mx.events.ModuleEvent;
                            import mx.events.FlexEvent;
                           
                            private var module:IModuleInfo;
                           
                           
                           
                            protected function application1_creationCompleteHandler(event:FlexEvent):void {
                                var ldr:Loader = new Loader();
                                ldr.contentLoaderInfo.addEventListener(Event.COMPLETE, onCompleteHandler);
                                ldr.load(new URLRequest('MyModule.swf'));
                               
                                //var moduleLoader:ModuleLoader = new ModuleLoader();
                                //moduleLoader.url = "MyModule.swf";
                                //moduleLoader.addEventListener(ModuleEvent.READY, onReadyHandler);
                                //moduleLoader.loadModule();
                            }
                           
                            private function onCompleteHandler(evt:Event):void {
                                (evt.currentTarget as LoaderInfo).content.addEventListener(ModuleEvent.READY, onReadyHandler);
                            }
                           
                            private function onReadyHandler(evt:ModuleEvent):void {               
                               
                                //var moduleLoader:ModuleLoader = (evt.currentTarget as ModuleLoader);
                                //var module:Module = moduleLoader.moduleFactory.create() as Module;
                               
                                var module: Module = (evt.currentTarget as IFlexModuleFactory).create() as Module;
                                this.addElement(module);                               
                            }
                           
                        ]]>
                    </fx:Script>   
                   
                    <!--ModuleLoader url="MyModule.swf"/-->
                   
                </s:Application>

                 

                Please test with Loader as code and ModuleLoader tag. Also change skinclass of button in MyModule for test.

                Thanks much.

                • 5. Re: Flex 4: Module issues
                  Flex harUI Adobe Employee

                  When I run your code, I get problems whether I use moduleLoader or not.  Modules containing spark components are not fully supported at this time.  I thought you were still using Flex 3 components.

                   

                  Alex Harui

                  Flex SDK Developer

                  Adobe Systems Inc.

                  Blog: http://blogs.adobe.com/aharui

                  • 6. Re: Flex 4: Module issues
                    Cường Trần Level 1

                    Maybe i will continue using flex 3 module and component and wait utils adobe has released flex 4. I hope with new released version of flex, it supported all module and components.

                    Thank Flex HarUI for reply my question. Good luck.

                    • 7. Re: Flex 4: Module issues
                      Flex harUI Adobe Employee

                      It will.  You can use -keep-all-type-selectors on the main app to try to get styles to work across modules as a workaround for now.

                       

                      Alex Harui

                      Flex SDK Developer

                      Adobe Systems Inc.

                      Blog: http://blogs.adobe.com/aharui

                      • 8. Re: Flex 4: Module issues
                        Cường Trần Level 1

                        I have tried to use keep-all-type-selectors option compiler by add it to additional args compiler. All components in spark pagekage load and render ok with both Loader and ModuleLoader. But the halo component for example combobox not render, i can not see combobox when i use Loader. And when i use ModuleLoader, all things are ok. So what should i do when i use Loader by actionscript code.

                        Please note that when add this additional option compiler, the size of main app increase(my example is 1.3Mb, it is too large), the module size is 258kb.

                        Thank for your solution, Flex harUI.

                        • 9. Re: Flex 4: Module issues
                          Flex harUI Adobe Employee

                          First, do not use Loader, use ModuleManager.  Your example had some errors in the CSS.  You have to use ClassReference compiler directives for skins and other classes.

                           

                          Alex Harui

                          Flex SDK Developer

                          Adobe Systems Inc.

                          Blog: http://blogs.adobe.com/aharui

                          • 10. Re: Flex 4: Module issues
                            Cường Trần Level 1

                            Here is my updated code:

                            MyModule.mxml

                            <?xml version="1.0" encoding="utf-8"?>
                            <mx:Module
                                xmlns:fx="http://ns.adobe.com/mxml/2009"
                                xmlns:s="library://ns.adobe.com/flex/spark"
                                xmlns:mx="library://ns.adobe.com/flex/halo"
                                layout="absolute" width="100%" height="100%">
                               
                                <mx:ComboBox x="241" y="83">
                                    <mx:dataProvider>
                                        <fx:Array>
                                            <fx:String>Item 1</fx:String>
                                            <fx:String>Item 2</fx:String>
                                            <fx:String>Item 3</fx:String>
                                        </fx:Array>
                                    </mx:dataProvider>
                                </mx:ComboBox>
                               
                                <s:Button label="Button" x="243" y="132"/>
                                   
                                <s:HScrollBar x="246" y="191" width="280"></s:HScrollBar>       
                                   
                            </mx:Module>

                             

                            Main.mxml

                            <?xml version="1.0" encoding="utf-8"?>
                            <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                                xmlns:s="library://ns.adobe.com/flex/spark"
                                xmlns:mx="library://ns.adobe.com/flex/halo"
                                minWidth="1024" minHeight="768"
                                creationComplete="application1_creationCompleteHandler(event)">
                               
                                <fx:Script>
                                    <![CDATA[
                                        import mx.modules.ModuleLoader;
                                        import mx.modules.IModuleInfo;
                                        import mx.modules.ModuleManager;
                                        import mx.modules.Module;
                                        import mx.core.IFlexModuleFactory;
                                        import mx.events.ModuleEvent;
                                        import mx.events.FlexEvent;
                                       
                                        private var info:IModuleInfo;
                                       
                                       
                                        protected function application1_creationCompleteHandler(event:FlexEvent):void {
                                            info = ModuleManager.getModule('MyModule.swf');
                                            info.addEventListener(ModuleEvent.READY, onModuleReadyHandler);
                                            info.load();               
                                        }
                                       
                                        private function onModuleReadyHandler(evt:ModuleEvent):void {
                                            this.addChild(info.factory.create() as DisplayObject);
                                        }
                                       
                                    ]]>
                                </fx:Script>
                                   
                            </s:Application>

                             

                            Beside, i add previouse additional option compiler argument for main app.

                             

                            Here is my result when run app:

                            VerifyError: Error #1014: Class mx.modules::Module could not be found.

                             

                                at flash.display::MovieClip/nextFrame()
                                at mx.core::FlexModuleFactory/deferredNextFrame()[E:\dev\beta1\frameworks\projects\framework \src\mx\core\FlexModuleFactory.as:530]
                                at mx.core::FlexModuleFactory/update()[E:\dev\beta1\frameworks\projects\framework\src\mx\cor e\FlexModuleFactory.as:358]
                                at mx.core::FlexModuleFactory/moduleCompleteHandler()[E:\dev\beta1\frameworks\projects\frame work\src\mx\core\FlexModuleFactory.as:605]

                             

                            By using ModuleManager at link:


                            Beside when i go to page http://livedocs.adobe.com/flex/gumbo/html/WS2db454920e96a9e51e63e3d11c0bf64277-7ffd.html(F lex 4 Help Online) all demo occur the same error.
                            I do not know where i am wrong in my code.I have never met that error in flex 3.
                            (I always use Loader to load Module in Flex 3 for modules from difference server and all things are ok before. Because i think my mind the module is swf file that build by flex sdk and it must be extends or implements some interface or class, or when using ModuleMager or ModuleLoader, it need setup something before or after module is loaded. So i can use Loader to load this module swf file. Please tell me my way is wrong or not.)



                            • 11. Re: Flex 4: Module issues
                              Flex harUI Adobe Employee

                              Make sure you use -static-rsls when compiling modules.

                               

                              Alex Harui

                              Flex SDK Developer

                              Adobe Systems Inc.

                              Blog: http://blogs.adobe.com/aharui

                              • 12. Re: Flex 4: Module issues
                                Darrell Loverin Level 4

                                I was able to compile and run your application by changing one line of the application. I changed

                                 

                                 

                                this.addChild(info.factory.create() as DisplayObject);

                                to

                                 

                                 

                                this.contentGroup.addElement(info.factory.create() as IVisualElement);

                                 

                                Compiling modules to load RSLs is not necessary, assuming the main application is loading all the RSLs the module needs. But you should not need to compile your application with -static-rsls=true to avoid errors. If your errors go away when using -static-rsls=true it means there was an error loading the RSLs. Check your Flash Player log to see if there are other errors.

                                • 13. Re: Flex 4: Module issues
                                  Darrell Loverin Level 4

                                  I should have said I didn't get the same VerifyError that you did. I compiled the application and module within Flash Builder. My guess is you are compiling the module with framework.swc on the external library path but the main application is not loading the framework RSL. Try removing any extra libraries you have on the external library path when compiling your module.

                                   

                                  One improvement to my change. You don't need to specify this.contentGroup. The application knows the content group to add the module to so the line could have been written like this:

                                   

                                   

                                   

                                   

                                  this

                                   

                                   

                                  .addElement(info.factory.create() as IVisualElement);

                                   

                                   

                                   

                                  • 14. Re: Flex 4: Module issues
                                    Cường Trần Level 1

                                    I have built module and application inside Flash Builder by select Project -> Build Project. Not use command line or other task before.

                                    Here is my last result and i will use one of them:

                                    Using ModuleManager:

                                         Remove all except default -locale en_US at Additional Compiler Arguments at Properties of Project -> Build and Run OK.

                                    Using Loader:

                                         Add to Additional Compiler Arguments: -keep-all-type-selectors=true

                                         Change Flex Builder Path -> Library Path -> Runtime share library(RSL)

                                         - Build and run OK

                                         (Using this way, flash builder auto generate some rsl file(swf), but the size of app and module  are smaller than).

                                    Manty thank Flex haRui and Darrell Loverin for your helps.

                                     

                                     

                                    • 15. Re: Flex 4: Module issues
                                      ThinkLOOP Level 1

                                      I am about to start developing some complex modules. From what I am understanding, by the time gumbo is released modules will be radically different from how they are now? Do you imagine big fundamental changes, or minor ones that may not even need re-coding?

                                       

                                      Cheers,

                                      Baz

                                      • 16. Re: Flex 4: Module issues
                                        KenichiM

                                        Are spark controls in modules now supported with Gumbo Beta 2 (or any nightly sdk)?

                                        • 17. Re: Flex 4: Module issues
                                          Baz (thinkLOOP) Level 1

                                          Since my last post I built an entire spark application as a module of a bigger spark application, and everything is working perfectly well. The only difference I see (which is expected) is that it takes the app longer to load with a module, probably because the module is being loaded using a separate http call. Over-all it was smooth sailing using modules with spark and halo.

                                          • 18. Re: Flex 4: Module issues
                                            Kirk_Holbrook

                                            Alex,

                                             

                                            Is there any more information posted somewhere on the limitations of Spark components within Modules?

                                             

                                            I tried searching the bugbase, and the version filtering is not very intuitive to say the least (the drop down selections do not seem to match what is displayed as the version in the results).

                                             

                                            We're having trouble with setting the layout to "absolute" in an essentially Spark module (of course, the module is Halo, but all of the children are Spark components). I should probably note that the module is sub-classed (actually a couple of levels) and the children are added dynamically.

                                             

                                            In the constructor (of the module sub-class), when the layout is set to "absolute" the module is not renderer on the stage. If we remove that layout = "absolute" everything displays as it should.

                                             

                                            Any thoughts?

                                             

                                            Thanks!

                                            Kirk

                                            • 19. Re: Flex 4: Module issues
                                              Flex harUI Adobe Employee

                                              Recent nightly builds should not have functional limitations.  That said, I'm sure there are some that we don't know about or I'm not remembering, so if you run into one, file a bug or post a simple test case in the forums.

                                               

                                              But for sure, use -static-rsls when compiling modules if you are using rsl-linkage for the main app (which is the default).

                                               

                                              Alex Harui

                                              Flex SDK Developer

                                              Adobe Systems Inc.

                                              Blog: http://blogs.adobe.com/aharui