14 Replies Latest reply on Jun 9, 2010 11:59 AM by fosrias

    Flex 4 Modules and Stylesheets

    fosrias

      I am having trouble using stylesheets in a module, in particular with class styles (i.e. ".myStyle"). They are not loading at compile time. My module is:

       

      <?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/mx"
                 xmlns:views="com.fosrias.portal.views.*"
                 xmlns:maps="com.fosrias.portal.maps.control.*"
                 layout="absolute">
         
          <fx:Style source="../assets/styles/main.css"/>     
         
          <views:PortalUI left="0" top="0" right="0" bottom="0"/>
         
      </mx:Module>

       

      Any my main.css contains

       

      mx|SomeComponent {

           etc.

      }

       

      .myStyle {

           etc.

      }

       

      The type style mx|Component loads, but the class style .myStyle does not. Should this work, or do I have to compile my styles to a swf and load them a runtime? Thanks

        • 1. Re: Flex 4 Modules and Stylesheets
          Darrell Loverin Level 4

          It should work.

           

          Trying adding some code to your module to verify:

           

               styleManager.getStyleDeclaration(".myStyle");

           

           

          The below 3.0 style code (deprecated) will most likely not work:

           

                    StyleManager.getStyleDelcaration(".myStyle");

           

           

           

          -Darrell

          • 2. Re: Flex 4 Modules and Stylesheets
            fosrias Level 1

            Already there.

             

              styleManager.getStyleDeclaration(".myStyle");

             

            returns null.

            • 3. Re: Flex 4 Modules and Stylesheets
              Darrell Loverin Level 4

              Look at the generated code for the module, it will end with _Styles.as. See if a style declaration is created for ".myStyle".

              • 4. Re: Flex 4 Modules and Stylesheets
                fosrias Level 1

                So, in PortalModule_Styles.as I searched for .myStyle and it was not there.

                 

                I have a test application in the project called Controller.mxml and use it to load styles and it works fine when I run it.

                 

                I looked in Controller_Styles.as as well and the style was not in that file either was not there either.

                 

                When I say not in it (I searched on 'myStyle'). Thanks.

                • 5. Re: Flex 4 Modules and Stylesheets
                  Darrell Loverin Level 4

                  The _Styles.as files are for default styles, sorry for the goose chase. You should actually look in PortalModule-generated.as for the style. I just ran a simple test with style in a module and it works for me.

                   

                   

                  -Darrell

                  • 6. Re: Flex 4 Modules and Stylesheets
                    fosrias Level 1

                    Yes. The styles are there, but they are not being loaded into the application that uses the module. Did they load in your test (presume they would show up in styleManager.selectors if they did).

                     

                    Thanks.

                     

                    Mark

                    • 7. Re: Flex 4 Modules and Stylesheets
                      Darrell Loverin Level 4

                      Styles loaded by the module are only available to the module and its children. Styles created for the module are not seen by the application. If you want the application to see the style you could put the fx:Style element in the application or load a style module from the module using the main application's styleManager.

                       

                       

                      -Darrell

                      • 8. Re: Flex 4 Modules and Stylesheets
                        fosrias Level 1

                        Ok.

                         

                        So, I think my problem is that I am calling styleManager.getStyleDeclaration in several of my classes.

                         

                        One of the classes is not a UIComponent so I am getting the styleManager via StyleManager.getStyleManager(null). Thus, I suspect is an application style manager and not the module style manager. Would that be correct?

                         

                        However, I also call styleManager.getStyleDeclaration in a UIComponent and it chokes as well. So, I suspect that you cannot access styles using a styleManager instance at all in a module in actionscript since that instance would always be on the application level?

                         

                        Doesn't seem to make sense if the module has its own stylemanager? Is this the case though?

                         

                        Thoughts?

                         

                        Mark

                        • 9. Re: Flex 4 Modules and Stylesheets
                          Darrell Loverin Level 4

                          If the class is not a UIComponent, where is the styleManager property coming from? StyleManager.getStyleManager(null) returns the styleManager for the top-level application.

                           

                          >>styleManager.getStyleDeclaration in a UIComponent and it chokes as well

                           

                          Is the UIComponent in the module or application. What do you mean it chokes? What is the value of the moduleFactory property?

                           

                           

                          -Darrell

                          • 10. Re: Flex 4 Modules and Stylesheets
                            fosrias Level 1

                            So, the component's (which is a UIComponent subclass in the module) styleManager.ModuleFactory is the top-level application (ii.e. app embedding the module) system manager. Not, the local modul's systemManager.

                             

                            Chokes, means returns null on the getStyleDeclaration call.

                             

                            However, per the documentation here :

                             

                            http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-799a.html

                             

                            Using styles with modules

                             

                            When you set styles on modules, the style properties are set on the local StyleManager. Each module has its own instance of the IStyleManager2 class. This means that each module can load its own set of styles, and its styles do not necessarily affect the styles of other modules.

                             

                            After an application finishes loading a module, the module’s styles are merged with the styles of the application. The module’s StyleManager walks the chain of parent modules and applications, up to the top-level StyleManager, and merges its styles with those set on the StyleManagers above it.

                             

                             

                            Thus, it seems the styles should merge and thus be accessible by the top-level system manager, no?

                             

                            That being said, if not, how do you actually locate the the local system manager instance to use it? Or can't you?

                             

                            Thanks.

                             

                            Mark

                            • 11. Re: Flex 4 Modules and Stylesheets
                              Darrell Loverin Level 4

                              (which is a UIComponent subclass in the module) styleManager.ModuleFactory is the top-level application

                              So you are saying the components in the module have their UIComponent.moduleFactory set the main application's system manager?

                               

                              A local styleManager is determined from the moduleFactory property on UIComponent. Take a look at the code for the UIComponent.styleManager property. The moduleFactory of the module and its children will be the loaded module. The moduleFactory of the main application will be the system manager of the main application. So when you get the styleManager for a UIComponent in the main application you will get the top-level styleManager. The styleManager for UIComponents in the module will be the module's styleManager.

                               

                              Styles are only merged as needed at the local style manager level. This is only to merge the child with its parents styles. A child style manager never merges its styles upward into its parent and a parent never styles to access its child style managers. It's not a good idea for an application to try to locate child style managers and use them. Instead put the style declarations in the main application.

                               

                               

                              -Darrell

                              1 person found this helpful
                              • 12. Re: Flex 4 Modules and Stylesheets
                                fosrias Level 1

                                Actually, what I am finding is that the styleManager being accessed in a component in the module is not the local manager, but rather the system manager. The module factory is the systemManager, not the local manager. I am doing this in the constructor of my custom component (which is a UIComponent) to set some initial styles.

                                 

                                All that being said, the simple solution is to put the styles in the parent app and everything is happy. Just thought it would be nice with Flex 4 changes with respect to styles and modules to actually store the relevant styles in the module if I could. Will probably still do that and just load the stylesheets with the appropriate path. Just seems a little less than SRP and DRY.

                                 

                                Thanks for the help.

                                • 13. Re: Flex 4 Modules and Stylesheets
                                  Darrell Loverin Level 4

                                  A moduleFactory is not available in a constructor (unless you pass it in). You would need to defer getting styles from within a component until a moduleFactory is set on it.

                                   

                                   

                                   

                                  -Darrell

                                  • 14. Re: Flex 4 Modules and Stylesheets
                                    fosrias Level 1

                                    Hi Darrell:

                                     

                                    Somewhat different, but related question. I am noticing that if I define a global style (in my case font size and type) in stylesheet in the main application, it is not being applied to module components. Should it be and if so what might I be missing? Thanks.