21 Replies Latest reply on Oct 4, 2011 11:39 AM by Jerry62712

    Panel sizes

    Jerry62712 Level 1

      Using the spark panel you seem to have three choices for vertical size.  Hard coded size, "100%" (or a percentage) or nothing.  If I chose 100% it grows enormous.  It is double the content size in some cases and well over it in others.  If I chose nothing, it is only 1 1/2 times too big in some cases to almost double in others.  If I chose a hard coded size, then the user will face the content spilling out of the panel.

       

      This happens when either the font grows too large causing word wrap or the window is made smaller causing word wrap or the language changes to the more verbose Spanish causing word wrap.

       

      It is a bad practice to force the users to a specific width of their browser.  It's not a good practice to have contents spilling out of their containers.

       

      How is this addressed in spark?

       

      Here one of the four panels in the component:

       

       

      
      <!-- ****************************************************** -->
      
      
      <!-- ** Standard Utility Expense Block ******************** -->
      
      
      <s:Panel 
      
      
      
      id="standardUtilityExpensePanel"
      
      
      
      title="{getLabels.utlPanelLabel}"
      
      
      
      styleName="panelTitle"
      
      
      
      width="100%" 
      
      
      
      cornerRadius="15">
      
      
      
      
      
      <s:layout>
      
      
      
      
      <s:VerticalLayout />
      
      
      
      </s:layout>
      
      
      
      
      
      <DHSclasses:AutoResizableTextArea 
      
      
      
      
      id="standardUtilityExpenseLabel"
      
      
      
      
      text="{getLabels.utlUtilityLabel}"
      
      
      
      
      autoResize="true" 
      
      
      
      
      editable="false" 
      
      
      
      
      tabEnabled="false"
      
      
      
      
      textAlign="right" 
      
      
      
      
      wordWrap="true"
      
      
      
      left="5" 
      
      
      
      
      width="89%"/>
      
      
      
      
      
      <mx:ComboBox 
      
      
      
      
      id="standardUtilityExpenseData"
      
      
      
      
      change="storeData('su')"
      
      
      
      
      right="5"
      
      
      
      
      alternatingItemColors="#fdfde0"
      
      
      
      
      dataProvider="{getArrays.utilityArray}" 
      
      
      
      
      toolTip="{getLabels.utlUtilityLabelTT}"
      
      
      
      
      paddingBottom="3" 
      
      
      
      
      cornerRadius="6"
      
      
      
      
      tabIndex="80" 
      
      
      
      
      bottom="12" width="99%"/> 
      
      
      </s:Panel>
      
      
      

       

      The resizable area control is designed to allow word wrap.  Here it is:

      <?xml version="1.0" encoding="utf-8"?>
      <mx:TextArea xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">
          <mx:Script>
              <![CDATA[
                  import mx.events.FlexEvent;
      
                  // auto resize setting
                  private var _autoResizable:Boolean = false;
      
                  // getter
                  [Bindable(event="changeAutoResize")]
      
                  public function get autoResize():Boolean
                  {
                      return _autoResizable;
                  }
      
                  private function init():void
                  {
                      this.addEventListener(FlexEvent.UPDATE_COMPLETE,callresize);
                  }
      
                  // setter
                  public function set autoResize(b:Boolean):void
                  {
                      _autoResizable = b;
      
                      // if the text field component is created
                      // and is auto resizable
                      // we call the resize method
                      if (this.mx_internal::getTextField() != null && 
                          _autoResizable == true)
                          resizeTextArea();
      
                      // dispatch event to make the autoResize 
                      // property bindable
                      dispatchEvent(new Event("changeAutoResize"));
                  }
      
                  // setter override
                  override public function set text(value:String):void
                  {
                      // calling super method 
                      super.text = value;
      
                      // if is auto resizable we call 
                      // the resize method
                      if (_autoResizable)
                          resizeTextArea();
                  }
      
                  private function callresize(event:Event):void
                  {
                      this.validateNow();
                      resizeTextArea();
                  }
      
                  // resize function for the text area
                  private function resizeTextArea():void
                  {
                      // initial height value
                      // if set to 0 scroll bars will 
                      // appear to the resized text area 
                      var totalHeight:uint = 10;
      
                      // validating the object
                      this.validateNow();
      
                      // find the total number of text lines 
                      // in the text area
                      var noOfLines:int = this.mx_internal::getTextField().numLines;
                      this.mx_internal::getTextField().autoSize = TextFieldAutoSize.LEFT;
      
                      // iterating through all lines of 
                      // text in the text area
                      for (var i:int = 0; i < noOfLines; i++) 
                      {
                          // getting the height of one text line
                          var textLineHeight:int = 
                          this.mx_internal::getTextField().getLineMetrics(i).height + 1;
      
                          // adding the height to the total height
                          totalHeight += textLineHeight;
                      }
      
                      // setting the new calculated height
                      this.height = totalHeight;
                      this.validateNow();
                  }
              ]]>
          </mx:Script>
      </mx:TextArea>
      
        • 1. Re: Panel sizes
          Flex harUI Adobe Employee

          Clipping is not on by default in Spark components.  You can turn on clipping or add a Scroller to the content.  This makes Spark container more lightweight since the vast majority of containers never need to clip or show scrollbars.

           

          Are you saying that mx:Panel works better? Yes, it will clip and show scrollbars automatically, but does it choose a good default size?  Or that s:Panel has these problems when not using custom components?  Otherwise, it might be your custom component.  It appears to be changing its size without changing its reported measurements, and that will likely mess up the layout logic.  The documentation on custom components describes how to override the various lifecycle methods like measure() and updateDisplayList().

          • 2. Re: Panel sizes
            Jerry62712 Level 1

            What I'm after is the panel to size itself to the content.  I don't want scroll bars or clipping or controlls spilling over the bottom of the panel.  Before the user has resized the browser or they have converted to Spanish the panel is the wrong size.

             

            I got that control so the field would word wrap and that worked find in Halo and it will word wrap in spark.  It is also possible we got it because of accessibility (JAWS).  As I can't believe Flex has such a comment control with such a major problem I well believe it isn't getting the correct size from either the initial size or the potential size.

             

            As I said the reason we went with that all those years ago was for the word wrapping or accessibility.  Does the current spark control do those better than the old one?

             

            [edit]

            I just changed the controls in the first panel to textarea and got even worse results.  When I tried to bring in the size of the controls, the panel just kept going with the original sizes.

            • 3. Re: Panel sizes
              Flex harUI Adobe Employee

              Both MX and Spark TextAreas have accessibility implementations and perform wordwrapping.  If there is a specific bug, please reference it.

               

              Honestly, I’m surprised the resizeable text area works in mx:Panel.  The Spark layout code caches some values so it might be more sensitive to the component not returning correct measurements.  I strongly recommend using a component that uses the lifecycle methods properly.

              • 4. Re: Panel sizes
                Jerry62712 Level 1

                I"m pretty sure AutoResizableTextArea was written by Adobe for us.  But I then changed it to halo Text (there isn't a spark equal) and the same problem happens.  Do you know if this is a known Flex bug?

                 

                I tried changing the panel to "height='100%'" and it still had a TON of empty space below the two control lines (each with a Text and a TextInput control).  I tried changing to by elimination of any height reference and the same doubling of the size needed.

                 

                Here is a 67 line application that duplicates the problem.  Bound stuff is converted to literals to save some lines as I'm already well over your limit of 20 lines.

                <?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/mx" minWidth="955" minHeight="600">

                    <fx:Declarations>

                        <!-- Place non-visual elements (e.g., services, value objects) here -->

                    </fx:Declarations>

                 

                    <s:Panel

                        id="householdInformationPanel"

                        title="getLabels.resPanelLabel"

                        styleName="panelTitle"

                        width="100%"

                        cornerRadius="15">

                 

                        <s:layout>

                            <s:VerticalLayout

                                gap="2"

                                variableRowHeight="true"/>

                        </s:layout>

                 

                        <s:HGroup

                            width="100%">

                            <mx:Text

                                id="residenceSizeLabel"

                                text="getLabels.resCountLabel"

                                tabEnabled="false"

                                textAlign="right"

                                left="5"

                                width="89%" height="20%"/>

                 

                            <mx:TextInput

                                id="residenceSizeData"

                                text=""

                                toolTip="getLabels.resCountLabelTT"

                                maxChars="5"

                                focusRoundedCorners="tl tr"

                                borderStyle="solid"

                                styleName="labelStyle"

                                right="5"

                                width="10%"

                                tabIndex="25"/>

                        </s:HGroup>

                 

                        <s:HGroup

                            width="100%">

                            <mx:Text

                                id="householdExceptionsLabel"

                                text="getLabels.resExemptLabel"

                                tabEnabled="false"

                                textAlign="right"

                                left="5"

                                width="89%" height="20%" />

                 

                            <mx:ComboBox

                                id="householdExceptionsData"

                                alternatingItemColors="#dfdfe0"

                                dataProvider="getArrays.yesNoArray"

                                toolTip="getLabels.resExemptLabelTT"

                                borderThickness="2"

                                cornerRadius="6"

                                right="5"

                                width="10%"

                                tabIndex="30"/>

                        </s:HGroup>

                    </s:Panel>

                </s:Application>

                • 5. Re: Panel sizes
                  Jerry62712 Level 1

                  Making the Text controls a fixed width makes the panel resize correctly.  But then you have a fixed width which is not a good way to code as most of you already know.  It will word wrap which is a requirement.

                   

                  The ideal solution would be for the panel to resize correctly to fit the contents.  Does anyone know of a way to force a control (panel) to resize?

                  • 6. Re: Panel sizes
                    Flex harUI Adobe Employee

                    Jerry,

                     

                    I’m backlogged on some other stuff and won’t be able to look at the test case right away.  I skimmed and noticed that the mx:Text’s width is not constrained.  Since flowing text can really be just about any size, it will just pick a size and the container will then attempt to follow.   Is there a natural size for the text because it has linebreaks in it?  Otherwise, how will you know it is “right”?

                    • 7. Re: Panel sizes
                      Jerry62712 Level 1

                      The Text's width is constrained to 89% of the container's width.  The input text field takes up the balance so the form is alignedl.  Nothing looks worse than a form with the text ragged and not uniform to the input fields.

                       

                      I use the percentage because it's considered bad form to force the user into a specific size.

                       

                      The length of the Text field is dependent on the language being used.  Spanish gets pretty verbose - at least the specific words our lawyers require us to use.  Sometimes it seems they want a novel instead of a field description.  IAC, there are no breaks in the data.  It breaks because the use makes the browsers "X" width using "Y" fontsize and "Z" when they want to sleep.

                       

                      Is there anyway to edit the first post?  All those extra line breaks that appeared are quite annoying.

                      • 8. Re: Panel sizes
                        Flex harUI Adobe Employee

                        Using a % width on mx:Text won’t really work because what happens is that the text is asked for its size first in order to determine the Panel’s size, and then once the Panel is sized, the Text gets its percentage of the Panel’s width.  Sort of a chicken-egg problem.  If the mx:Text is the key factor in the size computation of the Panel, you will need to choose a size for it.  You could watch for RESIZE on the app and set the Text’s size to 30% of the app’s size if that’s what is going to look good to you.

                        • 9. Re: Panel sizes
                          Jerry62712 Level 1

                          We probably got the custom control to address that problem.  Is there any other control that will work with Panels on the sizing front and allow multiple lines dynamically?

                           

                          BTW, when I give hard coded sized to both the text and input fields for both lines in the panel it still won't resize correctly.

                          • 10. Re: Panel sizes
                            Flex harUI Adobe Employee

                            Any control that can wordwrap will probably have this problem.  You will need to pick a different way of fixing the width or height.   I wouldn’t just code in a number, but make it relative to something outside the panel.

                            • 11. Re: Panel sizes
                              Jerry62712 Level 1

                              I don't know how to do that.  Are you saying making the Text control size contingent or making the Panel size?

                              • 12. Re: Panel sizes
                                Flex harUI Adobe Employee

                                Either one.  I would try to find some way to pin down the width of the Text or the Panel relative to the screen size or something else that is fixed.  Then the results will look better and be predictable.  Again, because flowing text can truly be one long line or one tall column of single letters or anything in between, measuring word-wrapping text to determine the size of something is “indeterminate”.

                                 

                                Web sites all over the world basically do something like this.    Screens have gotten so wide that reading text that extends all the way across the screen has become less usable.  Lots of websites now pick some width at around 900 pixels and float the content within a background.  Go to http://www.adobe.com, for example.  Then beyond that, graphic designers decide on good proportions for things.  If you look at the http://get.adobe.com/flashplayer page the last sentence about “clicking the download now button” wraps at a point chosen by the designer.  There’s no reason it couldn’t have been a single line that extends out beyond the other text above.  The designer saw that it looked better to be constrained in width to some size wide enough to keep  the “learn more...” line from also wrapping.  So, if I had to create this screen in Flex, I would tie the mx:Text for the last sentence to the width of the text of the “learn more...” line.

                                • 13. Re: Panel sizes
                                  Jerry62712 Level 1

                                  I made the width and height specific (not percent) and the panel still sizes itself to over double the size of its content.

                                   

                                  As I understand it, a container first has the internal controls created then determines its own boundary from the content.  I must be understanding it wrong as the panel is not doing that.

                                   

                                  Just incase the panel thought Text was only kidding when its size was set to "20", I also tried changing it to Label which doesn't have multiple line possibilities.  It made no difference.  Over double the needed size.

                                   

                                  Here is a test case (62 lines) showing the panel way too big:

                                  <?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/mx" >

                                      <s:Panel

                                          id="householdInformationPanel"

                                          title="getLabels.resPanelLabel"

                                          styleName="panelTitle"

                                          width="100%"

                                          cornerRadius="15">

                                   

                                          <s:layout>

                                              <s:VerticalLayout

                                                  gap="2" />

                                          </s:layout>

                                   

                                          <s:HGroup

                                              width="100%">

                                              <s:Label

                                                  id="residenceSizeLabel"

                                                  text="getLabels .resCountLabel getLabels .resCountLabel "

                                                  tabEnabled="false"

                                                  textAlign="right"

                                                  left="5"

                                                  width="300" />

                                   

                                              <mx:TextInput

                                                  id="residenceSizeData"

                                                  text=""

                                                  toolTip="getLabels .resCountLabelTT"

                                                  maxChars="5"

                                                  focusRoundedCorners="tl tr"

                                                  borderStyle="solid"

                                                  styleName="labelStyle"

                                                  right="5"

                                                  width="10%"

                                                  tabIndex="25"/>

                                          </s:HGroup>

                                   

                                          <s:HGroup

                                              width="100%">

                                              <s:Label

                                                  id="householdExceptionsLabel"

                                                  text="getLabels .resExemptLabel"

                                                  tabEnabled="false"

                                                  textAlign="right"

                                                  left="5"

                                                  width="300" />

                                   

                                              <mx:ComboBox

                                                  id="householdExceptionsData"

                                                  alternatingItemColors="#dfdfe0"

                                                  dataProvider="getArrays.yesNoArray"

                                                  toolTip="getLabels .resExemptLabelTT"

                                                  borderThickness="2"

                                                  cornerRadius="6"

                                                  right="5"

                                                  width="10%"

                                                  tabIndex="30"/>

                                          </s:HGroup>

                                      </s:Panel>

                                  </s:Application>

                                  • 14. Re: Panel sizes
                                    Flex harUI Adobe Employee

                                    Jerry,

                                     

                                    I don’t see mx:Text in the test case.  Also, can you swap out the calls to getLabels with the actual strings so it will really compile and run?

                                    • 15. Re: Panel sizes
                                      Jerry62712 Level 1

                                      There are no calls to anything outside of the 62 lines provided other than an inadvertant CSS class.  If it doesn't compile then there is another reason for that and one I'd like to know about.  Look closer at what I have and you will see there are ONLY literals in the various display fields.  Given CSS is not longer a known with Flex (somethings don't work, others may or may not) I'm not sure it matters.  No CSS file was in the test case on my computer.

                                       

                                      Because "Text" can be multiline and because you had said there could be a problem with a container (panel in this case) correctly sizing due to it having a potentially multiline control I switched it with a single line control that exhibits the same error in sizing.  If we can fix it for the most basic of controls then I'll see if it works for a more complex control such as Text.

                                       

                                      Frankly, I can't believe this simplest of controls can't help panels size correctly.  Therefore, I have to assume I'm doing something wrong in the control.  Given the only thing you can do in a control is change a property or method I have to also assume it might be some property that is preventing Panel from working correctly.

                                       

                                      Finally, I'm assuming that any container such as a Panel will size to the content.

                                      • 16. Re: Panel sizes
                                        Flex harUI Adobe Employee

                                        Having dot-expressions in the strings fooled me.

                                         

                                        Anyway, I ran this code.  The Panel skin has a minHeight of 120 or so and that’s what is causing the panel to appear too tall.  If you have lines that wrap, I would’ve expected you to need more than 120 pixels anyway, so there might be yet some other issue when dealing with word wrap.

                                        1 person found this helpful
                                        • 17. Re: Panel sizes
                                          Jerry62712 Level 1

                                          I changed the property to minHeight 0 and the controls to labels and indeed the panel became the right height (just enough for the contained controls).  When I switched to the Text control in the little test case it also was not over double what was needed to contain the two rows of controls.

                                           

                                          Then I tried it in the real world and it didn't work.  So I copied the real code to the test case and made all the changes required to keep the test case at "20" lines.  Mostly this consisted of changing the bindings to literals and the changing the change event references to an empty string.  This also worked now in the test case.

                                           

                                          Then I ran it in the real world again and found "Text", with all the defaults, won't work correctly.  When the contents are changed programmatically, it doesn't resize the container to hold the content.  This is why we went with the custom control in the first place to get around this limitation.

                                           

                                          So I restored the original condition with the custom controls, but I still had the minHeight on the panel.  This time it seemed to work.  This doesn't give me the warm and fuzzies when something seems to work at random.  Hopefully, someone can tell me why it now works (adding minHeight to one of the other panels didn't work for it) when it didn't work before.  And that it will keep working tomorrow.

                                          • 18. Re: Panel sizes
                                            Flex harUI Adobe Employee

                                            Well, you might be getting lucky with the custom component if the panel no longer needs it to compute its size.  The way it was coded didn’t follow the rules, so some problem could crop up later.

                                             

                                            mx:Text definitely has some resizing issues, but usually if you lock down its width to a non-% value it will resize properly.  You might also just want to use Spark Label as it can display multiple lines.

                                            • 19. Re: Panel sizes
                                              Jerry62712 Level 1

                                              I think we got the custom component from Adobe so I'm surprised it isn't following some convention.  We got it because Text doesn't (by default) resize when the contents go from single to multi-lines.

                                               

                                              I hate it when something works, doesn't work and then does work without explanation.  I'll bet you do too.

                                               

                                              I guess until it decides to not work again we can mark it closed for now.

                                              • 20. Re: Panel sizes
                                                Flex harUI Adobe Employee

                                                mx:Text is pretty good at going from single line to wordwrap if you can tie down the explicitWidth.  The custom component does that, but could forces a second refresh of the layout.  Theoretically, the recommended practice is to use mx:Text with a pinned down explicitWidth, but if you’re headed to Spark, then use s:Label again with a pinned down explicitWidth.

                                                • 21. Re: Panel sizes
                                                  Jerry62712 Level 1

                                                  Thanks!  I'll check out S:Label.  As long as it is multiline and will correctly size itself when the contents change I have no problem with that.  I like the idea that it is light weight.  A future goal of mine is to make this an app.  Of course, I would have to convince management to buy 4.5 and in the days of people being laidoff that isn't an easy sell.

                                                   

                                                  [edit]

                                                  I just tried it and it didn't adjust to fit the data.  When I shrank the browser enough that the word stream should have wrapped to a second line, it didn't happen.  If It were initialized at that point (just a refresh), it did.  Same problem with Text. Sigh.