14 Replies Latest reply on Nov 20, 2011 8:04 AM by Yozef0

    ★ Earn $100 and Solve this Flex Scaling Issue!

    Yozef0 Level 1

      Solve This Scaling Problem ☞ http://forums.adobe.com/thread/925951

        • 1. Re: ★ Earn $100 and Solve this Flex Scaling Issue!
          Yozef0 Level 1

          Through Paypal. The Challenge is still open :)

          • 2. Re: ★ Earn $100 and Solve this Flex Scaling Issue!
            UbuntuPenguin Level 4

            I'm sure you will get some replies for this later tonight, most of us are still at work  ( at least on the coast that matters ).  But one warning, Flex developers are known for their ability to collect ...

            • 3. Re: ★ Earn $100 and Solve this Flex Scaling Issue!
              Yozef0 Level 1

              If this http://forums.adobe.com/message/4032905 is solved, I will make sure the developer will get their reward. No one will be happier than I

               

              Been on it for a week

               

              I've also provided an fxp.

              • 4. Re: ★ Earn $100 and Solve this Flex Scaling Issue!
                Flex harUI Adobe Employee

                Hi Yozef0,

                 

                It has been a busy couple of weeks and I finally got some time to look at your code.  I think the approach you have taken is incorrect.  But first, I think you need to decide on whether you would prefer making the font bigger vs scaling the whole grid.  Keep in mind if you scale the whole grid, all of it scales including border thickness, column and row lines, graphics and icons, etc, but I don’t think it will have round-off issues like you will if you compute a fontSize.  If you change fontSize the last row’s size might keep changing by a few pixels as you resize.

                 

                If you want to scale, I would first try wrapping the DataGrid in a Group with a custom layout that scaled the DataGrid.

                 

                If you want to change font size, I’m pretty sure you want to override updateDisplayList and compute the fontSize before calling super.updateDisplayList.  Then the trick is to get the DG’s container to stretch the DG without recomputing the number of rows it wants to display.  I would guess you can just set height=100% as well and if you change fontSize before the DG tries to recompute the number of rows, you will be ok.  You might need to override measure() as well.  UpdateDisplayList and measure are two of the lifecycle methods that control how the component lays out.  RESIZE is sort of a notification event and mucking with fontSize there changes the measurements and therefore the layout which can then cause another RESIZE event.

                 

                Give that a shot, and if you have trouble, post a new project.

                 

                -Alex

                • 5. Re: ★ Earn $100 and Solve this Flex Scaling Issue!
                  Yozef0 Level 1

                  I cannot set the height to 100% if I have a requestedRowCount.

                  I think the best solution is to keep the requestedRowCount (to display just the rows needed), and figure out (this is the problem I'm having)...

                   

                  As the parent resizes, the grids (please see fxp file http://www.yozef.com/files/DataGridScaler.fxp.zip) ought to scale (scaleX & scaleY) to make sure all rows & columns are visible. Even if the resize gets too small and unreadable its fine, as long as it scales as the parent resizes to keep all rows & columns in view.

                  • 6. Re: ★ Earn $100 and Solve this Flex Scaling Issue!
                    Flex harUI Adobe Employee

                    OK, if you want to scale, I would wrap in a group with a custom layout.  The group would have height=100% and resize its one child (the DataGrid by scaling it).

                    • 7. Re: ★ Earn $100 and Solve this Flex Scaling Issue!
                      Yozef0 Level 1

                      Precisely Alex :)

                       

                      This is the problem I am having... what code would you put in the VGroup (ExpandableVGroup) to scale it's children that are DataGrids:

                       

                      I guess this is the Group you mentioned. If I uncomment the two lines... I get a bank screen. (with traces of width & height)

                       

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

                      <s:VGroup xmlns:fx="http://ns.adobe.com/mxml/2009"

                                            xmlns:s="library://ns.adobe.com/flex/spark"

                                            xmlns:mx="library://ns.adobe.com/flex/mx"

                                            resize="vgroup1_resizeHandler(event)"

                                            width="100%"

                                            height="100%">

                        <fx:Script>

                           <![CDATA[


                                import mx.events.ResizeEvent;

                       

                                import spark.components.DataGrid;

                       

                        // Check if has been resized as it's 100% width & height

                        protected function vgroup1_resizeHandler(event:ResizeEvent):void

                        {

                           for (var i:int = 0; i<this.numElements; i++) {

                                if ( getElementAt(i) is DataGrid) {

                                     trace( (getElementAt(i) as DataGrid).name );

                                     //(getElementAt(i) as DataGrid).scaleX = this.width - event.oldWidth / this.width;

                                     //(getElementAt(i) as DataGrid).scaleY = this.height - event.oldHeight / this.height;

                       

                                     trace((getElementAt(i) as DataGrid).name + ' - Current Width:' + this.width + ' oldWidth:' + event.oldWidth + ' | Current height:' + this.height + ' oldHeight:' + event.oldHeight);

                                 }

                             }

                      }

                       

                      ]]>

                        </fx:Script>

                        <fx:Declarations>

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

                        </fx:Declarations>

                      </s:VGroup>

                      • 8. Re: ★ Earn $100 and Solve this Flex Scaling Issue!
                        Flex harUI Adobe Employee

                        It seems there are multiple threads going on this topic so I cannot keep track.  Did you post a test case that attempts to wrap the datagrid in a group and scale it?  I certainly wouldn’t use Vgroup or modify the group.  I would modify a Layout class.

                        • 9. Re: ★ Earn $100 and Solve this Flex Scaling Issue!
                          Yozef0 Level 1

                          Got an example to solve it?

                          • 10. Re: ★ Earn $100 and Solve this Flex Scaling Issue!
                            Flex harUI Adobe Employee

                            For a measly $100?

                             

                            Just kidding.  I’m not sure this is exactly what you want, but here’s a first attempt:

                             

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

                             

                            I also made the main tag for ExpandableDataGrid.mxml look like this:

                            <?xml version="1.0" encoding="utf-8"?>
                            <s:DataGrid xmlns:fx="http://ns.adobe.com/mxml/2009"
                                        xmlns:s="library://ns.adobe.com/flex/spark"
                                        xmlns:mx="library://ns.adobe.com/flex/mx"
                                        creationComplete="thisDatagrid_creationCompleteHandler(event)"
                                        horizontalScrollPolicy="off" verticalScrollPolicy="off"
                                        selectionMode="singleCell"
                                        variableRowHeight="false"
                                        requestedColumnCount="4"
                                        editable="false"
                                        fontSize="11"
                                        >
                            

                             

                            And it got used in DataGridScaler.mxml like this:

                             

                                <s:VGroup width="100%" top="0" left="0" bottom="0" gap="0">
                                   <s:Group width="100%" height="100%" minWidth="0" minHeight="0">
                                       <s:layout>
                                           <local:ScaleOneLayout></local:ScaleOneLayout>
                                       </s:layout>
                                       <!-- First DataGrid -->
                                       <components:ExpandableDataGrid id="dg"
                                                                       color="{TEXT_COLOR}"
                                                                       rollOverColor="{ROLL_OVER_COLOR}"
                                                                       alternatingRowColors="{ALTERNATING_GRID_COLOR}"
                                                                       selectionColor="{SELECTION_COLOR}"
                                                                       skinClass="skins.ResizableDataGridSkin"
                                                                       >
                                        ...
                                       </components:ExpandableDataGrid>
                                   </s:Group>
                                   <!-- Summary Totals -->
                                   <components:SummaryRow >
                                       <s:Label text="Summary Totals" width="100%" fontWeight="bold" color="{SUMMARY_TEXT_COLOR}"></s:Label>
                            
                                        <s:ButtonBar>
                                            <mx:ArrayCollection>
                                               <fx:String>BPS</fx:String>
                                                <fx:String>CPS</fx:String>
                                            </mx:ArrayCollection>
                                       </s:ButtonBar>
                            
                                        <s:ButtonBar>
                                            <mx:ArrayCollection>
                                               <fx:String>1 Day VWAP</fx:String>
                                                <fx:String>15% POV</fx:String>
                                            </mx:ArrayCollection>
                                       </s:ButtonBar>
                                   </components:SummaryRow>
                            
                                    <s:Group width="100%" height="100%" minWidth="0" minHeight="0">
                                       <s:layout>
                                           <local:ScaleOneLayout></local:ScaleOneLayout>
                                       </s:layout>
                                       <!-- Second Datagrid -->
                                       <components:ExpandableDataGrid id="dg2"
                                                                       color="{TEXT_COLOR}"
                                                                       rollOverColor="{ROLL_OVER_COLOR}"
                                                                       selectionColor="{SELECTION_COLOR}"
                                                                       alternatingRowColors="{ALTERNATING_GRID_COLOR}"
                                                                       skinClass="skins.HeadlessDataGridSkin">
                                        ...
                                       </components:ExpandableDataGrid>
                                   </s:Group>
                            
                                    <!-- Summary Totals - values -->
                                   <components:SummaryRow>
                                       <s:Label text="Summary Totals - Values" width="100%" fontWeight="bold" color="{SUMMARY_TEXT_COLOR}"></s:Label>
                                   </components:SummaryRow>
                            
                                    <s:Group width="100%" height="100%" minWidth="0" minHeight="0">
                                       <s:layout>
                                           <local:ScaleOneLayout></local:ScaleOneLayout>
                                       </s:layout>
                                       <!-- Third Datagrid -->
                                       <components:ExpandableDataGrid id="dg3"
                                                                       color="{TEXT_COLOR}"
                                                                       rollOverColor="{ROLL_OVER_COLOR}"
                                                                       selectionColor="{SELECTION_COLOR}"
                                                                       alternatingRowColors="{ALTERNATING_GRID_COLOR}"
                                                                       skinClass="skins.HeadlessDataGridSkin">
                                        ...
                                       </components:ExpandableDataGrid>
                                   </s:Group>
                                   <!-- Percent of Tops -->
                                   <components:SummaryRow>
                                       <s:Label text="Percent of Tops" color="{SUMMARY_TEXT_COLOR}" width="100%" fontWeight="bold"></s:Label>
                                   </components:SummaryRow>
                            
                                    <s:Group width="100%" height="100%" minWidth="0" minHeight="0">
                                       <s:layout>
                                           <local:ScaleOneLayout></local:ScaleOneLayout>
                                       </s:layout>
                                       <!-- Fourth DataGrid -->
                                       <components:ExpandableDataGrid id="dg4"
                                                                       color="{TEXT_COLOR}"
                                                                       rollOverColor="{ROLL_OVER_COLOR}"
                                                                       selectionColor="{SELECTION_COLOR}"
                                                                       alternatingRowColors="{ALTERNATING_GRID_COLOR}"
                                                                       skinClass="skins.HeadlessDataGridSkin">
                                       ...
                                       </components:ExpandableDataGrid>
                                   </s:Group>
                                   <!--<s:Spacer height="100%" id="SupposedlyTheBottomGraph" />-->
                            
                                </s:VGroup>
                            

                             

                            HTH,

                            • 11. Re: ★ Earn $100 and Solve this Flex Scaling Issue!
                              John Hall Level 4

                              Wow. You better send Alex the $100 just for effort. When was the last time you got that much personal attention from a Flex SDK team member? Besides, he deserves a lot more for all the help he's given us over the years.

                              • 12. Re: ★ Earn $100 and Solve this Flex Scaling Issue!
                                Yozef0 Level 1

                                Thanks Alex

                                Great Effort!

                                 

                                I changed the code as mentioned, and it's looking like the behavior intended this is what rendered (fixed the % height of the groups).

                                1.png2.png

                                Playing with the height % of the Group fixes things & I'll certanly play with that!

                                 

                                Please Alex (Flex harUI) send me a private message (with your paypal email), I will make sure you get that reward - You utterly deserve it!

                                 

                                I'll also update the other post onthe forum to make sure others will benefit.

                                 

                                @JohnHall I agree!

                                 

                                THANKS AGAIN GUYS!!!!

                                • 13. Re: ★ Earn $100 and Solve this Flex Scaling Issue!
                                  Flex harUI Adobe Employee

                                  Please donate the $100 to a non-profit that benefits the hungry.

                                  • 14. Re: ★ Earn $100 and Solve this Flex Scaling Issue!
                                    Yozef0 Level 1

                                    :) That's nice of you - I donate to the WFP (part of UN).

                                     

                                    The idea was to reward (and give incentive) to talented Flex developers :) Sorta of like Google's Prizes.org and so on ;)

                                    Thanks again Alex.