6 Replies Latest reply on Jul 15, 2010 1:38 AM by Matt Le Fevre

    Noob or not this LAYOUT stuff is BROKEN !

    VirtualCoder Level 1

      If you run this simple example, you will see that the Canvas is kept centered only until the MAX width and height are reached and then it is no longer kept in the center of the window?  How come and why is it that even these SO SIMPLE things are SO TOUGH to achieve ???

       

      <?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"
                  backgroundColor="#CCCCCC"
                  maxWidth="640" maxHeight="480"
                  >
           <mx:Canvas id="mainCanvas" x="0" y="0" 
                   height="{(this.width / (4/3))}" 
                width="{(this.height * (4/3))}" 
                backgroundColor="white"
                horizontalCenter="0" verticalCenter="0"
                />
      </s:Application>
      

        • 1. Re: Noob or not this LAYOUT stuff is BROKEN !
          John Hall Level 4

          No matter what I do, your math tries to force the width to greater than the max. That would be confusing to any language. Or am I reading it wrong. Put the following in the canvas tag

           

          initialize="trace(('Height = ' + this.width / (4/3)).toString() + '  Width: ' + (this.height * (4/3)).toString())"

           

          Doesn't the width always come out greater than 640?

           

          That may have nothing to do with the centering problem, but I'm curious about the intent on the math. Of course, that would be weak point.

          1 person found this helpful
          • 2. Re: Noob or not this LAYOUT stuff is BROKEN !
            VirtualCoder Level 1

            Thanks John,

             

            If you set the window so that it is not maximized then you will see that it works properly. Yes the confusion is most likely once it reaches the max width/height.  But that is just the point, if we are given an ability to set maxWidth/Height then I would expect those max settings to be respected.  Otherwise, we are forced to do a manual "max" implementation.

            • 3. Re: Noob or not this LAYOUT stuff is BROKEN !
              John Hall Level 4

              Am I wrong that the width will never drop  below your specified max width? Just curious, actually trying to understand what might be useful to me in the future. In the meantime, I'm interested in your centering issue and will experiment along with you.

              1 person found this helpful
              • 5. Re: Noob or not this LAYOUT stuff is BROKEN !
                VirtualCoder Level 1

                Please note that it is the Application that has maxWidth/Height settings.  So, as the window is being resized, the application will resize from very small and up to but not above the set maximums.  The Canvas dimensions are then being calculated (in a 4:3 ratio) based on the Application size.  All of that is working fine.

                 

                However, in the process of trying to clearly answer your question, I just realize what the problem is.

                 

                I am erroneously expecting the Canvas to be centered in the browser window while in reality it is being centered in the Application - which itself is not centered in the Application window, even though it takes horizontal/verticalCenter attributes but seems to do nothing with.  That is if maxWidth/Height are specified then one would assume that centering information would apply when the Application sizes are smaller than those of the browser window.

                 

                All of this is confusing me to no end.  While we can limit the max sizes of the Application, we are not able to center it and without being able to center the Application nothing else can be centered since everything else lives in the Application area.  Yikes !

                 

                So, never mind any of that.  How do I center either the Application or the Canvas, so that it is in the center of the browser window ;?)

                 

                Whatever it is that I end up centering, it then needs to be split into 2 Groups (with horizontal layout) where the left group is 20% and the right one is 80% of the overall "centered" application or canvas width and height in both cases is 100%.

                • 6. Re: Noob or not this LAYOUT stuff is BROKEN !
                  Matt Le Fevre Level 4

                  you've already managed to center your canvas havn't you?

                   

                  this works fine for me

                   

                  <?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"
                                     backgroundColor="#CCCCCC"
                                     
                                     >
                          <fx:Declarations>
                              <!-- Place non-visual elements (e.g., services, value objects) here -->
                          </fx:Declarations>
                          <mx:Canvas id="mainCanvas"
                                     height="{(this.width / (4/3))}" 
                                     width="{(this.height * (4/3))}" 
                                     backgroundColor="white"
                                     horizontalCenter="0" verticalCenter="0"
                                     />
                  </s:Application>
                  
                  
                  

                   

                  or are you talking about centering it in the middle with a max res of 640x480?

                   

                  in which case why not set the app to w&h 100%, place a canvas in it with those max dimensions, and then place your scaling canvas within that.

                   

                  or if you don't want to use another canvas, you could trap the height&width so they cannot go beyond a certain size by monitoring the resize event

                   

                  <?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"
                                 backgroundColor="#CCCCCC"
                                 >
                      <fx:Declarations>
                          <!-- Place non-visual elements (e.g., services, value objects) here -->
                      </fx:Declarations>
                      
                      <fx:Script>
                          <![CDATA[
                              import mx.events.ResizeEvent;
                  
                              protected function mainCanvas_resizeHandler(event:ResizeEvent):void{
                                  if(mainCanvas.height > 480)
                                      mainCanvas.height = 480
                  
                                  if(mainCanvas.width > 640)
                                      mainCanvas.width = 640
                              }
                          ]]>
                      </fx:Script>
                  
                      <mx:Canvas id="mainCanvas"
                                 height="{(this.width / (4/3))}" 
                                 width="{(this.height * (4/3))}"
                                 resize="mainCanvas_resizeHandler(event)"
                                 backgroundColor="white"
                                 horizontalCenter="0" verticalCenter="0"
                                 />
                  
                  </s:Application>
                  

                   

                  you could even create your own custom canvas that performs this on the setter of the height and width, allowing you to reuse it in any project you want without having to recode it.