15 Replies Latest reply on Aug 9, 2010 9:56 AM by ssardar

    Module component sizing

    ssardar Level 1

      Hi,

       

        I started moving all my application code into modules.  so I have like 10 panels each loding their own set of UI components and each with their own webservice call to fetch data.

       

      From the main app  I load these modules into Panels.

       

      How do I get the UI components in the module to size to the panel size by default?  Because they don't.

       

      Currently in the Module I have height and width set to "100%"  at the Module tag. (When I hard code these values it looks fine, but I would like them to size to the containing panel on their own, because the Panels themselves are resizeable)

       

      What am I doing wrong?

       

       

      Thanks in advance.

        • 1. Re: Module component sizing
          Flex harUI Adobe Employee

          Try using percentWidth="100" percentHeight="100" instead.

          1 person found this helpful
          • 2. Re: Module component sizing
            ssardar Level 1

            Tried it just now with the percentHeight and percentWidth

            , and it did not change the behavior.

            • 3. Re: Module component sizing
              saisri2k2 Level 4

              try

              height = parent.height;

              width = parent.width;

              1 person found this helpful
              • 4. Re: Module component sizing
                ssardar Level 1

                That gave me a warning about "width and height not being able to have bindable values...."  and did not work.  But it got me trying some other stuff.

                 

                I put this at the outermost UI component Tag.  And removed sizing altogether from the Module tag.

                 

                 

                width="

                 

                {this.parentApplication.adgPanel.width-20}" height="{this.parentApplication.adgPanel.height-40}"

                 

                 

                This works exactly like I needed it to.  But I am not sure if it is the correct way to do this, so if someone knows a better one please do let me know.  

                 

                Explicitly naming this is not a problem for me, as the module will always be loaded into the same panel or at least the panel name will be persisted with the module info if I decide to get more dynamic with it's creation.

                 

                the -20 and -40 are offsets and it seems like different components have different ones.  Trial and error got the right offset.

                 

                 

                Now to I'm off to figure out the offsets for all the other components I am using.  

                 

                 

                Thanks for responding guys, really appreciate it.

                • 5. Re: Module component sizing
                  Flex harUI Adobe Employee

                  Not specifying any width/height and using percentWidth/percentHeight

                  normally works for most folks.  If you have a simple test case where it

                  doesn't, I might have time to look.

                   

                  The sizes of borders are usually stored in a viewMetrics object for MX

                  containers.

                  • 6. Re: Module component sizing
                    ssardar Level 1

                    Just a very simplified version so as not too take up too much of your time.  I removed the resizeable panels

                    code as it seems to be the same problem with or without that.  Basically I'm trying to get Module 1 and 2 to size automatically to their respective Panels.

                     

                     

                    Main App

                     

                     

                    <?xml version="1.0"?>

                    <mx:Application

                     

                     

                    xmlns:mx="http://www.adobe.com/2006/mxml" width="1024" height="768"

                     

                    >

                     

                      

                     

                     

                    <mx:Panel id="p1" title="Calendar" width="800" height="322" layout="absolute" visible="true" x="0" y="0">

                     

                     

                    <mx:ModuleLoader id="ml1" url="mod1.swf">

                     

                     

                    </mx:ModuleLoader>

                     

                     

                     

                    </mx:Panel>

                     

                     

                    <mx:Panel id="p2" title="Grid" width="500" height="500" layout="absolute" visible="true" x="0" y="400">

                     

                     

                    <mx:ModuleLoader id="ml2" url="mod2.swf">

                     

                     

                    </mx:ModuleLoader>

                     

                     

                    </mx:Panel>

                     

                    </mx:Application>

                     

                     

                     

                     

                     

                    Module 1

                     

                     

                    <?xml version="1.0" encoding="utf-8"?>

                    <mx:Module

                     

                    xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

                     

                     

                    <mx:DateChooser x="35" y="24" percentWidth="100" percentHeight="100"/>

                     

                    </mx:Module>

                     

                     

                     

                    Module 2

                     

                    <?xml version="1.0" encoding="utf-8"?>

                    <mx:Module

                     

                     

                    xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" >

                     

                     

                    <mx:DataGrid x="10" y="10" percentWidth="100" percentHeight="100">

                     

                     

                    <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>

                    • 7. Re: Module component sizing
                      grenvoy

                      Here is what I do and it fills the application

                       

                      <core:MainModule xmlns:mx="http://www.adobe.com/2006/mxml"
                                                  xmlns:stgdir_core="com.core.*"
                                                  layout="absolute" width="100%" height="100%"
                                                  horizontalScrollPolicy="off" verticalScrollPolicy="off"
                                                  initialize="onInit()" visible="false"
                                                  mModuleAutoRefreshes="true" >

                      • 8. Re: Module component sizing
                        ssardar Level 1

                        grenvoy

                         

                         

                        If you mean adding the following line to my module tag

                         

                         

                          layout="absolute" width="100%" height="100%"

                         

                        I have tried this and it does not work for me.  Not sure why, Harui's suggestion should have worked (and imho he's never wrong , not about Flex ), and it should have worked in theory as well.   I'm guessing my environment has something slightly different?  It's a basic install of Flex Builder Pro 3.

                         

                         

                        Is mModuleAutoRefreshes=true  some custom property? (I'm curious what this does)

                         

                         

                        also I have noticed sizing the module tag actually does not resize the UI component in the module it just cuts it off if the UIcomponent's size is bigger than that of the module.  This is what made me decide to size the component instead.

                         

                         

                         

                        Thanks for your response.

                        • 9. Re: Module component sizing
                          grenvoy Level 1

                          Yeah, those were the tags I figured you would need.  Layout, width, height.  Do you have different sizes set in the application?

                           

                          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

                                          layout="absolute" width="100%" height="100%"

                                          horizontalScrollPolicy="off" verticalScrollPolicy="off"

                                          layoutDirection="ltr" direction="ltr"               

                                          creationComplete="onCreationComplete()"

                                          pageTitle="Our App"

                                          implements="com.us.CustomIF" >

                           

                           

                           

                           

                          mModuleAutoRefreshes is a custom tag, we use it to determine when the module is created if it auto refreshes.  Just sets up a timer that re-reads the data at a specified interval.

                          • 10. Re: Module component sizing
                            Flex harUI Adobe Employee

                            I haven't had time to try it, but I'm pretty sure <mx:Module width="100%"

                            height="100%" does not work, and I was suggesting you try this:

                             

                            Module 1

                             

                             

                            <?xml version="1.0" encoding="utf-8"?>

                            <mx:Module percentWidth="100" percentHeight="100"

                             

                            xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

                             

                             

                            <mx:DateChooser x="35" y="24" width="100%" height="100%" />

                             

                            </mx:Module>

                             

                             

                             

                            Module 2

                             

                            <?xml version="1.0" encoding="utf-8"?>

                            <mx:Module percentWidth="100" percentHeight="100"

                             

                             

                            xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" >

                             

                             

                            <mx:DataGrid x="10" y="10" width="100%" height="100%">

                             

                             

                            <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

                            • 11. Re: Module component sizing
                              ssardar Level 1

                                just tried it like this

                               

                               

                              <?xml version="1.0" encoding="utf-8"?>

                              <mx:Module

                               

                               

                              xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" percentWidth="100" percentHeight="100">

                               

                               

                              <mx:DateChooser x="35" y="24" width="100%" height="100%"/>

                               

                              </mx:Module>

                               

                               

                               

                              but the DateChooser is still not sizing to the panel in the main app.

                              • 12. Re: Module component sizing
                                ssardar Level 1

                                "Do you have different sizes set in the application?"

                                 

                                 

                                 

                                Do you mean the container panels?  They are resizeable, so yes while it defaults to a start state, beyond that it will always be randomly what the user selects to set them to.

                                • 13. Re: Module component sizing
                                  Flex harUI Adobe Employee

                                  I finally got around to running the code.  You have to set width="100%"

                                  height="100%" on the ModuleLoader as well.

                                  • 14. Re: Module component sizing
                                    ssardar Level 1

                                    harui

                                     

                                    This works like I had intended, without explicitly sizing the way I have it.  However, I may size it explicitly(like I did above) as it allows me to remove the extra buffer space and size exactly to the panel.  Just looks better.

                                    If I run into problems I can always fall back to this.  Thanks.

                                    • 15. Re: Module component sizing
                                      ssardar Level 1

                                      on second check:

                                       

                                      It works for everything but the AdvancedDataGrid.  That for some reason with the ModuleLoader set to 100% and the UI Component set to 100% still only shows the header and cuts off all the rows.

                                       

                                      No worries though, I am explicitly sizing these for now, using the parentApplication.panelName.height & Width.