가로 레이아웃 : mx vs spark - 하위 크기 조정

Question

Flex 3에서는 HBox에서 100 % 너비 설정으로 2 개의 패널을 배치 할 수있었습니다. 첫 번째 패널의 너비 속성을 더 작게 변경하면 20 %라고 가정 해 봅시다. 두 번째 패널은 자동으로 업데이트되고 첫 번째 패널에서 차지하는 데 사용 된 공간을 처음으로 크기를 줄인대로 채 웁니다.

나는 불꽃이 있음을 알았지 만, 이것은 발생하지 않습니다. HorizontalLayout 및 크기 조정이 가능한 패널 컨트롤이있는 왼쪽 패널과 오른쪽 패널의 width = "100 %"인 앱이 있습니다. 왼쪽 패널의 크기를 조정하면 오른쪽 패널에서 아무 것도하지 않습니다. 그래서 나는 크기를 재조정 할 수있는 깨끗한 패널, 낭비 된 공간, 그리고 거기에 앉아있는 오른쪽 패널을 가지고 끝납니다.

오른쪽 패널의 너비가 "100 %"이므로 왼쪽 패널의 크기가 조정되면 오른쪽 패널에 해당하는 값이 채워집니다.

효과없이 속성 및 크기에 대한 유효성 검사를 수동으로 트리거하려고했습니다. HorizontalLayout에서 무엇이 바뀌 었는지 궁금합니다. HorizontalLayout은이 기술이 더 이상 작동하지 않게합니다. 또한 어떤 솔루션을 사용할 수 있는지 알고 싶습니다.

<mx:Application> 

    <mx:Script> 
     <![CDATA[ 

     protected function resizeClick(event:MouseEvent):void 
     { 
      pnl1.percentWidth = 10; // When this would execute, pnl2 would automatically 
            // fill in the space previously held by pnl1. 
     } 

     ]]> 
    </mx:Script> 
    <mx:HBox width="100%" height="100%"> 
     <mx:Panel id="pnl1" width="40%" height="100%"> // Uses 40% 
     <mx:Button id="resizeButton" click="resizeClick(event)"/> 
     </mx:Panel> 
     <mx:Panel id="pnl2" width="100%" height="100%"/> // Fills in the rest of the available space 
    </mx:HBox> 
</mx:Application> 

플렉스 4.5은 자동으로 pnl2의 크기를 업데이트하지 않는 경우 pnl1의 크기가 변경 :

는 여기에 몇 가지 씹는의 씹는입니다. 나는 HorizontalLayout이 사용되고 있기 때문에 둘 중 하나의 너비가 바뀌면 두 자식이 모두 업데이트 될 것이라고 생각합니다. 그러나 그것은 단지 그럴 것 같지 않습니다. 나는 이것을 달성하기 위해 두 가지 상태를 만들 수 있지만, 나는 그렇게 사소한 것을 위해선 안된다고 생각했다.

Answer 1

합니다. 필자는 패널 1이 실제로 헤더 버튼을 클릭 할 때마다 자체 크기를 수정하는 "접을 수있는"패널이라는 것을 설명하기 위해 게시물에 좀 더 구체적으로 설명해야했습니다. 위의 예제는 작동하지만 panel.percentWidth 속성을 변경하는 데 "보기"하는 숫자 컨트롤이 없기 때문에 접을 수있는 패널을 래퍼가 처리하는 사용자 지정 이벤트를 전달하도록 설정합니다. 사용자 지정 이벤트는 기본적으로 접을 수있는 패널에 어떤 일이 발생했는지 나타냅니다. 거기에서 이벤트를 따로 처리하고 패널 2의 크기를 제어 할 수 있습니다.

솔루션은 실제로는 비교적 간단하며 좀 더 "무대 뒤에서"뭔가를 기대했지만 실제로는 제대로 작동합니다.

<s:Application initialize="initApp(event)"> 

    <fx:Script> 
     <![CDATA[ 

     protected function initApp(event:FlexEvent):void 
     { 
       this.addEventListener("PanelCollapse", panelHandler); 
       this.addEventListener("PanelNormal", panelHandler); 
     }  

     protected function panelHandler(event:Event):void 
     { 
      switch(event.type) 
      { 
       case "PanelCollapse": 
        pnl2.percentWidth = 100; 
        break; 
       case "PanelNormal": 
        pnl2.percentWidth = 60; 
        break; 
      } 
     } 
     ]]> 
    </fx:Script> 

     <comp:CollapsiblePanel id="pnl1" width="40%" height="100%"> 

     </mx:Panel> 
     <s:Panel id="pnl2" width="100%" height="100%"/> // Fills in the rest of the available space 

</s:Application> 

Answer 2

이 샘플은 잘 작동과 크기의 올바른 변화 보여 그래서 나는 결국이 문제를 해결하는 방법입니다

<?xml version="1.0" encoding="utf-8"?> 
<s:Application minHeight="600" minWidth="955" xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark"> 
    <s:VGroup height="100%" width="100%"> 
     <s:HSlider change="firstPanel.percentWidth = event.currentTarget.value" maximum="100" minimum="0" 
      value="{firstPanel.percentWidth}" /> 
     <s:HGroup height="100%" width="100%"> 
      <s:Panel height="100%" id="firstPanel" minWidth="0" width="40%" /> 
      <s:Panel height="100%" width="100%" /> 
     </s:HGroup> 
    </s:VGroup> 
</s:Application>