1 Reply Latest reply on Mar 20, 2011 4:20 PM by jfillman

    Re-size Container Children when AIR App Re-sizes

    jfillman Level 1

      I have component panels witin a dataGroup. The dataGroup re-sizes when the AIR application is resized, but the panels do not re-size along with the dataGroup. I'm using TileLayout for the dataGroup. The goal is, of course, to fill the entire dataGroup container, regardless the size of the application. Application source is below. What happens is if I resize the application after the comPanelClick event, the panel containers do not re-size with the container.

       

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

      <s:WindowedApplication

       

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

      xmlns:s="

      library://ns.adobe.com/flex/spark"

      xmlns:mx="

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

      xmlns:components="

      components.*"

      width="

      1200" height="720" backgroundColor="#6D6666" creationComplete="maximize()">

       

      <fx:Declarations>

       

      <s:ArrayCollection id="panelsAC">

       

      <components:comInformation click="comPanelClick(event, 0);" id="pnlInformation" height="100%" width="100%"/>

       

      <components:comDocuments click="comPanelClick(event, 1);" id="pnlDocuments" height="100%" width="100%"/>

       

      <components:comCommunications click="comPanelClick(event, 2);" id="pnlCommunications" height="100%" width="100%"/>

       

      <components:comNotes click="comPanelClick(event, 3);" id="pnlNotes" height="100%" width="100%"/>

       

      </s:ArrayCollection>

       

      </fx:Declarations>

       

      <fx:Script>

      <![CDATA[

       

       

      private var tLayout:TileLayout = new TileLayout();

       

      private var selectedPanelId:String;

       

      private function comPanelClick(event:MouseEvent, target:Number):void {

       

      if (event.target.toString().indexOf('btnComShow') > 0) {

      selectedPanelId = panelsAC.getItemAt(target).id;

      panelsAC.getItemAt(target).currentState =

      'ViewState';

      panelsAC.filterFunction = panelACFilter;

      panelsAC.refresh();

      tLayout.horizontalGap = 10;

      tLayout.horizontalAlign =

      'center';

      tLayout.columnWidth = (grpContent.width - 20);

      tLayout.requestedColumnCount = 1;

      tLayout.requestedRowCount = 1;

      tLayout.verticalAlign =

      'middle';

      tLayout.rowHeight = (grpContent.height - 20);

      tLayout.verticalGap = 10;

      grpContent.layout = tLayout;

      }

       

      else if (event.target.toString().indexOf('btnComHide') > 0) {

      panelsAC.getItemAt(0).currentState =

      'StartState';

      panelsAC.filterFunction =

      null;

      panelsAC.refresh();

      tLayout.horizontalGap = 10;

      tLayout.horizontalAlign =

      'center';

      tLayout.columnWidth = ((grpContent.width - 20) / 2);

      tLayout.requestedColumnCount = 2;

      tLayout.requestedRowCount = 2;

      tLayout.verticalAlign =

      'middle';

      tLayout.rowHeight = ((grpContent.height - 30) / 2);

      tLayout.verticalGap = 10;

      grpContent.layout = tLayout;

      }

      }

       

       

      private function panelACFilter(item:Object):Boolean {

       

      return item.id == selectedPanelId;

      }

      ]]>

       

      </fx:Script>

       

      <s:DataGroup id="grpContent" left="20" right="20" top="50" bottom="135"

      contentBackgroundAlpha="

      1.0" contentBackgroundColor="#FFFFFF"

      dataProvider="

      {panelsAC}">

       

      <s:layout>

       

      <s:TileLayout horizontalAlign="center" horizontalGap="10" orientation="rows" columnWidth="{((grpContent.width - 20) / 2)}"

      requestedColumnCount="

      2" requestedRowCount="2" verticalAlign="middle" rowHeight="{((grpContent.height - 30) / 2)}"

      verticalGap="

      10" useVirtualLayout="true"/>

       

      </s:layout>

       

      </s:DataGroup>

      </s:WindowedApplication>

        • 1. Re: Re-size Container Children when AIR App Re-sizes
          jfillman Level 1

          I just created a custom layout script to deal with it.

           

          package

           

           

           

           

           

          scripts

          {

          import

           

           

          import

           

           

          import

           

           

          public

           

           

          override public function updateDisplayList(containerWidth:Number,

          containerHeight:Number):

          void

          {

           

          // The position for the current element

           

          var x:Number = 0;

           

          var y:Number = 0;

           

           

          // loop through the elements

           

          var layoutTarget:GroupBase = target;

           

          var count:int = layoutTarget.numElements;

           

          var element:ILayoutElement;

           

          var elementWidth:Number;

           

          var elementHeight:Number;

           

          if (count == 1) {

          element = layoutTarget.getElementAt(0)

          element.setLayoutBoundsSize(NaN, NaN);

          elementHeight = (containerHeight - 10);

          elementWidth = (containerWidth - 10);

          element.setLayoutBoundsPosition(x, y);

          element.setLayoutBoundsSize(elementWidth, elementHeight);

          }

           

          else {

           

          for (var i:int = 0; i < count; i++)

          {

           

          // get the current element, we're going to work with the

           

          // ILayoutElement interface

          element = layoutTarget.getElementAt(i);

           

           

          // Resize the element to its preferred size by passing

           

          // NaN for the width and height constraints

          element.setLayoutBoundsSize(NaN, NaN);

           

           

          // Find out the element's dimensions sizes.

           

          // We do this after the element has been already resized

           

          // to its preferred size.

          elementWidth = ((containerWidth - 30) / 3);

          elementHeight = ((containerHeight - 20) / 2);

           

           

          // Would the element fit on this line, or should we move

           

          // to the next line?

           

          if (x + elementWidth > containerWidth)

          {

           

          // Start from the left side

          x = 0;

           

           

          // Move down by elementHeight, we're assuming all

           

          // elements are of equal height

          y += elementHeight + 10;

          }

           

           

          // Position the element

          element.setLayoutBoundsPosition(x, y);

           

           

          // Update the current position, add a gap of 10

          element.setLayoutBoundsPosition(x, y);

          element.setLayoutBoundsSize(elementWidth, elementHeight);

          x += elementWidth + 10;

          }

          }

          }

          }

          }

          class PanelLayout extends LayoutBase

          {

           

          spark.layouts.supportClasses.LayoutBase;

           

          spark.components.supportClasses.GroupBase;
          mx.core.ILayoutElement;