5 Replies Latest reply on Nov 19, 2011 5:50 AM by Yozef0

    Scale Component on Resize

    Yozef0 Level 1

      m6Asf.png

      [Image Above] This is scaling by stage.scaleMode = StageScaleMode.SHOW_ALL; // No Good cause I just want to scale is the component not the whole stage.

       

       

      I am trying to find a way to Scale (either font or scaleX&Y) a DataGrid (with requestedMinRowCount = requestedMaxRowCount = requestedRowCount = dataProviderLength), so that it would Always show all the Rows (so no scrollers).

      A Solution I came up with for Scaling is:

      protected function thisDatagrid_resizeHandler(event:ResizeEvent):void
      {
        
      if (event.oldWidth < this.width) {
          
      this.setStyle('fontSize', this.getStyle('fontSize') + 0.5);
        
      } else if (event.oldWidth > this.width) {
           
      this.setStyle('fontSize', this.getStyle('fontSize') - 0.5);
        
      }
        
      this.minWidth = this.measuredMinWidth;
      }

      While the code above actually does resize the text (hence the cell, column and grid) on Resize, the problem I am getting is when the rescale happens vertically.

      For the requestedRowCount to work, there should not be a fixed height set on the Datagrid. So I am wondering what is the way to get the grid to constantly show all it's rows & columns as it scales (even if resized vertically)?

      Another Option would be overriding updateDisplayList, though not straight forward for resizing.

      override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {

          
      //super.updateDisplayList(unscaledWidth, unscaledHeight);             
           trace
      ('oldWidth: ' + oldWidth + '  | unscaledWidth: ' + unscaledWidth + '  | parentWidth: ' + this.parent.width);
           trace
      ('oldHeight: ' + oldHeight + '  | unscaledHeight: ' + unscaledHeight + '  | parentHeight: ' + this.parent.height);
           trace
      ('Potential ScaleX: ' + (unscaledWidth - oldWidth)/unscaledWidth);
           trace
      ('Potential ScaleY: ' + (unscaledHeight - oldHeight)/unscaledHeight);
           trace
      ('----------------------------------------------------');
          
      /* scaleX = (unscaledWidth - oldWidth)/unscaledWidth;
           scaleY = (unscaledHeight - oldHeight)/unscaledHeight; */


          
      //super.updateDisplayList(unscaledWidth, unscaledHeight);
      }

      The problem with the code above: if I uncomment scaleX & scaleY, it'll loop forever...

       

      I have attached an fxp project [ http://www.yozef.com/files/DataGridScaler.fxp.zip ] (just rename without .zip) which has 3 DataGrids in a VGroup. The DataGrid here scales by font size, though not always good, as it may pass the viewport of the browser (the grid gets larger than the browser pushing rows outside the view).

       

      The Objective: is to have it scale, so all the rows & columns stay in view (without scrollers) once resize the window. The Datagrid would scale with the window (if I scale bigger) the Grid would scale with it, possibly the grid would get bigger (font as well), and the same is true is I scale smaller. All Rows & Columns must stay in view without scrollers.

        • 1. Re: Scale Component on Resize
          kevinklin Adobe Employee

          Try requestedMinRowCount. Make sure you do not set requestedRowCount and the datagrid's height.

          • 2. Re: Scale Component on Resize
            Yozef0 Level 1

            Thanks for your rely Kevin,

             

            In the Code (Project fxp provided [ http://www.yozef.com/files/DataGridScaler.fxp.zip ] (just rename without .zip) You will see that the ExpandableDataGrid.mxml you will see on ceration complete the requestedMinRowCount is set. I have removed requestedRowCount.

             

            The Problem is on Scaling the Grids, as mentioned in the question above. I figured the Image above would help also in showing the desired effect.

             

            I'm assuming the usage of scaleX and scaleY would come into play, as seen in one of  ExpandabledataGrid examples.

            • 3. Re: Scale Component on Resize
              kevinklin Adobe Employee

              With your code, the DataGrid indeed does stay in view. So, you want it to completely fill the screen too?

              • 4. Re: Scale Component on Resize
                Yozef0 Level 1

                In the Code provided, if I resize just vertically for example... it dosen't rescale (fonts reduce).

                I am thinking the best way is to actually use scaleX & scaleY.

                Though thats where I'm having trouble and need to find the solution. As the Parent resizes, the grids scale (inward or outward) so as to keep all rows & columns in view.

                • 5. Re: Scale Component on Resize
                  Yozef0 Level 1

                  This was solved by Flex harUI by adding the Daragrids into a Layout of a Group.

                   

                  The Layout class:

                   

                  ScaleOneLayout.as
                     import mx.core.UIComponent;

                      import spark.layouts.BasicLayout;

                      public class ScaleOneLayout extends BasicLayout
                      {
                          public function ScaleOneLayout()
                          {
                              super();
                          }

                          override public function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
                         {
                              var child:UIComponent;
                              child = target.getElementAt(0) as UIComponent;
                              child.setLayoutBoundsSize(child.getPreferredBoundsWidth(), child.getPreferredBoundsHeight());
                              child.scaleX = unscaledWidth / child.width;
                              child.scaleY = unscaledHeight / child.height;
                          }
                      }