플렉스 - 양식 항목을 세로 및 가로로 모두 배열합니다.

Question

플렉스 (플래시 빌더 4)로 간단한 양식을 만들려고합니다. 양식 컨테이너와 FormItem을 내부에 배치했습니다. 양식 항목은 예를 들어 First, Last, Address, City, State, Zip과 같은 표준 "고객"필드입니다.

기본적으로이 필드는 필드를 세로로 배치하고 필드 레이블을 오른쪽 맞춤으로 만듭니다.

First __________ Last ___________ 
Address _____________________ 
    City ___________ St ___ Zip ____ 

은 내가 HGroup 컨테이너의 첫 번째/마지막 퍼팅 시도,하지만 잘 작동을하지 않습니다 - 예를 들어, 이런 일이 -

는 그러나, 나는 일부 필드는 수평 싶습니다 내가 레이블의 오른쪽 정당성을 잃어은 다음과 같이 보입니다 : 이것은 내가 처음이/마지막으로 수 평형 만들려고 노력하고 있어요 방법의 예입니다

First __________ Last ___________ 
Address _____________________ 
City ___________ St ___ Zip ____ 

을하지만, 추천과 오른쪽으로 정렬되지 않습니다 - 그러나 도시와 추천은 함께 정당화됩니다.

<mx:Form x="0" y="307" width="100%"> 
<s:HGroup> 
     <mx:FormItem label="First"> <s:TextInput/></mx:FormItem> 
     <mx:FormItem label="Last"><s:TextInput/></mx:FormItem> 
</s:HGroup> 
<mx:FormItem label="Referral"><s:TextInput/></mx:FormItem><mx:FormItem label="City"> 
    <s:TextInput/> 
</mx:FormItem> 
</mx:Form> 

colSpan 기능이있는 테이블 레이아웃이 필요합니까?

이 사용자 지정 구성 요소는 적어도 http://cookbooks.adobe.com/post_Multi_Column_Form_Layout-9644.html 또한

, 그건 내가 할 수있는 플렉스의 사용자 인터페이스 디자인/양식 디자인 및 이와 유사한 논의 등 좋은 책/사이트 /가 유망 보였지만, FB4에서 작업 표시되지 않습니다 검색?

Answer 1

내가 달성 할 수있는 유일한 방법은 mx:Grid입니다. 주로 mx:GridItem에 colSpan 또는 rowSpan 속성이 있기 때문입니다. 또한 required 속성을 사용하여 필수 입력란에 (*)를 표시 할 수 있으므로 라벨 대신 빈 mx:FormItem을 사용합니다.

다음은 예입니다 :이 도움이

<?xml version="1.0" encoding="utf-8"?> 
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300"> 
    <mx:Form width="100%" height="100%"> 
    <mx:Grid width="100%" height="100%"> 
     <mx:GridRow> 
     <mx:GridItem> 
      <mx:FormItem label="First" required="true"/> 
     </mx:GridItem> 
     <mx:GridItem> 
      <s:TextInput/> 
     </mx:GridItem> 
     <mx:GridItem> 
      <mx:FormItem label="Last"/> 
     </mx:GridItem> 
     <mx:GridItem> 
      <s:TextInput/> 
     </mx:GridItem> 
     </mx:GridRow> 
     <mx:GridRow> 
     <mx:GridItem width="100%" height="100%"> 
      <mx:FormItem label="Last"/> 
     </mx:GridItem> 
     <mx:GridItem width="100%" height="100%" colSpan="3"> 
      <s:TextInput width="100%"/> 
     </mx:GridItem> 
     </mx:GridRow> 
    </mx:Grid> 
    </mx:Form> 
</s:Group> 

희망,

공원

Answer 2

는 대답은 단지 CSS를 사용하는 것입니다. textAlign을 'left'로 지정하는 CSS에 label style을 만듭니다. 그런 다음 해당 라벨 스타일을 적용하여 labelStyleName property on the formItem에 적용하십시오. 여기

수정 프로그램을 보여 전체 응용 프로그램입니다 :

<?xml version="1.0" encoding="utf-8"?> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:s="library://ns.adobe.com/flex/spark" 
       xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> 
    <fx:Declarations> 
     <!-- Place non-visual elements (e.g., services, value objects) here --> 
    </fx:Declarations> 
    <fx:Style> 
     @namespace s "library://ns.adobe.com/flex/spark"; 
     @namespace mx "library://ns.adobe.com/flex/mx"; 

     .labelStyleName { 
      textAlign:left; 
     } 
    </fx:Style> 

    <mx:Form x="0" y="307" width="100%"> 
     <s:HGroup> 
     <mx:FormItem label="First" horizontalAlign="left" labelStyleName="labelStyleName"> 
      <s:TextInput/> 
     </mx:FormItem> 
     <mx:FormItem label="Last" horizontalAlign="left" labelStyleName="labelStyleName"> 
      <s:TextInput/> 
     </mx:FormItem> 
     </s:HGroup> 
     <mx:FormItem label="Referral" horizontalAlign="left" labelStyleName="labelStyleName"> 
      <s:TextInput/> 
     </mx:FormItem> 
     <mx:FormItem label="City" horizontalAlign="left" labelStyleName="labelStyleName"> 
      <s:TextInput/> 
     </mx:FormItem> 
    </mx:Form> 

</s:Application> 

은 입력 항목의보다 구체적인 안감을 위로합니다; labelWidth 값을 지정해야 할 수도 있습니다.

Answer 3

열을 정렬하려면 여러 개의 HGroups를 사용하지 않아야합니다. 브라우저 창의 크기를 줄이면 모든 내용을 한 번에 표시 할 수 없기 때문에 쉽게 중단 될 수 있습니다. 콘텐츠가 넘쳐나는 논리로 인해 정렬 가능성이 가장 높습니다. 궁극적 인 해결책으로 mx : Grid를 사용하거나 매우 간단한 경우에는 s : Form을 사용하십시오.