MXML과 순전히 레이아웃을 순전히 Skin의 Skin에서 유지하는 방법?

Question

Flex 4에서 일부 MVC 스타일 UI 구성 요소를 구현하려고합니다. 각 요소의 시각적 설정 (및 이후 런타임 수정)을 더 분리하고 싶습니다.

<s:Group id="container"> 
    <s:VGroup> 
     <s:HGroup id="titleGroup"> 
      <s:Label id="titleText" /> 
      <s:Button id="closeButton" /> 
     </s:HGroup> 
     <s:HGroup id="contentGroup"> 
      <s:VGroup id="interactionGroup"> 
       <s:VGroup id="messageGroup" /> 
       <s:HGroup id="actionGroup" /> 
      </s:VGroup> 
     </s:HGroup> 
    </s:VGroup> 
</s:Group> 

그리고 스킨 파일에

, 내가 ID와 설정 속성을 참조 할 수 있도록하려면 : 주로, 나는 피부를 사용하는 MXML 파일 등과 같은 데이터의 전체 레이아웃을 유지하려면 ("컨테이너"그룹의 폭과 높이와 같은) 컨테이너 안에 그래픽 요소 (예 : "컨테이너"그룹 안에 채워진 직사각형)를 포함 할 수 있어야합니다. 프로그래밍 방식으로 선언하지 않고 선언적으로하고 싶습니다. 왜 MXML을 사용해야합니까? 이것은 HTML/CSS가 나뉘는 방식입니다. HTML은 데이터가 다른 데이터와 관련되어 있다는 것을 포함하며 CSS는 모든 속성과 시각적 스타일을 포함합니다. 그것은 지금처럼

는, 내 피부는 다음과 같습니다

<s:Group id="container" verticalCenter="0" horizontalCenter="0"> 
    <s:Rect id="background" width="100%" height="100%" radiusX="10" radiusY="10"> 
     <s:filters> 
      <s:DropShadowFilter blurX="20" blurY="20" alpha="0.32" distance="5" angle="90" /> 
     </s:filters> 
     <s:fill> 
      <s:SolidColor color="#ffffff" /> 
     </s:fill> 
    </s:Rect> 

    <s:VGroup width="100%" height="100%" gap="3" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"> 
     <s:HGroup id="titleGroup" width="100%" verticalAlign="middle"> 
      <s:Label id="titleText" width="100%" /> 
      <s:Button id="closeButton" /> 
     </s:HGroup> 
     <s:HGroup id="contentGroup" width="100%"> 
      <s:VGroup id="interactionGroup" width="100%"> 
       <s:VGroup id="messageGroup" width="100%" /> 
       <s:HGroup id="actionGroup" width="100%" /> 
      </s:VGroup> 
     </s:HGroup> 
    </s:VGroup> 
</s:Group> 

그리고이 피부 SkinPart 선언에 불과하다 사용하는 실제 구성 요소를 :

<fx:Script> 
    <![CDATA[ 
     import spark.components.Label; 
     import spark.components.Button; 
     import spark.components.Group; 

     [SkinPart(required="true")] 
     public var titleText:Label; 

     [SkinPart(required="true")] 
     public var closeButton:Button 

     [SkinPart(required="true")] 
     public var messageGroup:Group; 

     [SkinPart(required="true")] 
     public var actionGroup:Group; 
    ]]> 
</fx:Script> 

당신은 볼 수 있듯이 스킨에는 스타일과 콘텐츠를 구분하는 제 감각을 침해하여 구성 요소에 대한 모든 것이 들어 있습니다. using 요소에는 프로그래밍 방식 변경을 위해 스킨에 대한 인터페이스를 제외하고는 아무 것도 없습니다. 필자의 현재 솔루션은 스킨을 사용하지 않는 것보다 아무런 이점도 없지만 스킨을 전환하는 약간 더 쉬운 프로세스는 예외입니다.

내가 Flex 4에서 제안한 것을 할 수있는 방법이 있습니까?

Answer 1

답변은 Flex가 이러한 방식으로 작동하지 않는다는 것입니다. 레이아웃과 비주얼 스타일은 불가분의 관계에있는 것처럼 보입니다. 이 질문을 마무리하십시오.