2009-04-07 13 views
1

How does one define a default style for a custom Flex component?은 좋은 시작 이었지만 다른 구성 요소가 포함 된 내 맞춤 구성 요소에 대한 맞춤 스타일을 만들고 싶습니다.하위 구성 요소의 스타일을 관리하는 방법은 무엇입니까?

사용자 지정 구성 요소는 Canvas입니다. 그것은 다른 Canvases, Buttons, Lists 등을 포함합니다. 자식 컴포넌트가 부모 컴포넌트와 동일한 값을 사용하는 것을 원하지 않으며, 일부 스타일 값을 부모 컴포넌트로 점프하고 특정 자식에만 영향을 주길 원합니다 (그들 모두는 아닙니다).

부모와 하위 구성 요소 각각에 대해 별도의 스타일이 아닌 단일 CSS 정의가 있어야합니다.

CSS 파일에 실제로 표준 CSS가 아닌 스타일 값을 지정할 수 있습니까 (예 : buttonCornerRadius, mainPaneBackgroundColor, actionBitmap)?

어디에서 스타일을 하위 구성 요소로 전파해야합니까? this.updateDisplayList()?

setStyle을 통해 값이 변경되거나 새 CSS 파일을로드하는 경우 StyleManager에 이벤트가 없는지 어떻게 알 수 있습니까?

감사

+0

내가 예라는 아주 좋은 어도비 도움말 페이지 http://127.0.0.1:56870/help/nftopic/com.adobe.flexbuilder.help/html/skinstyle_3.html#184113를 발견했습니다 만들기 스타일 속성. –

답변

2

더 세부적인 방법은 각 자녀에 CSS를 추가하는 것입니다, 그러나 이것은 유지 보수 및 가독성 악몽이다.

<mx:List dataProvider="{companies}" dropShadowEnabled="true" paddingTop="10" paddingBottom="10" paddingRight="5" paddingLeft="15" backgroundColor="0xDFE8FF"/> 

덜 세분화 된 방법은 클래스로 각각의 아이를 만들고 각 클래스 파일에 CSS를 추가하는 것입니다, 그러나 이것은 여전히 ​​멋진 없습니다.

사용자 수 또한 마스터 CSS의 하위 구성 요소 (목록, 콤보 상자, 단추 등)의 각 유형의 스타일을 설정 : 동일한 유형의 다른 스타일을 사용할 경우에,

List { 
    dropShadowEnabled: true; 
    paddingTop: 10; 
} 

그러나 구성 요소 중 몇 가지 옵션이 있습니다.

마스터 CSS에 스타일을 설정 한 후 각 자녀에게는, styleName을주고, 수

:

CustomerSelectionForm.mxml: 

<?xml version="1.0" encoding="utf-8"?> 
<mx:Form xmlns:mx="http://www.adobe.com/2006/mxml"> 
    <mx:List styleName="customerList" dataProvider="{customers}" /> 
</mx:Form> 


CompanySelectionForm.mxml: 

<?xml version="1.0" encoding="utf-8"?> 
<mx:Form xmlns:mx="http://www.adobe.com/2006/mxml"> 
    <mx:List styleName="companyList" dataProvider="{companies}" /> 
</mx:Form> 

styles.css: 

.customerList { 
    backgroundColor: "0xDFE8FF"; 
} 

.companyList { 
    backgroundColor: "0x74ADE7"; 
} 

또는 사용자 정의 클래스 각 아이를 만들 수 있습니다, 다음 마스터 CSS에서 클래스를 참조 .

CustomerList.mxml: 

<?xml version="1.0" encoding="utf-8"?> 
<mx:List xmlns:mx="http://www.adobe.com/2006/mxml"> 
</mx:List> 

CompanyList.mxml: 

<?xml version="1.0" encoding="utf-8"?> 
<mx:List xmlns:mx="http://www.adobe.com/2006/mxml"> 
</mx:List> 

styles.css: 

CustomerList { 
    backgroundColor: "0xDFE8FF"; 
} 

CompanyList { 
    backgroundColor: "0x74ADE7"; 
} 

이 방법은 구성 요소를 동적으로 작성하거나 특정 유형의 구성 요소를 다시 사용할 때 특히 유용합니다. 이 커스텀 클래스는 또한 클래스 - 특정 비지니스 로직을 포함 할 수 있기 때문에 나는이 메소드를 많이 사용한다.

+0

각 하위 구성 요소에 유형 선택기를 사용하기로 결정했습니다. 감사합니다. –

0

플렉스 구성 요소 개발자로서 프레임 워크에서 플렉스 팀이 수행하는 작업을 시도합니다. 개별적으로 스타일을 지정하려는 각 어린이에 styleName 스타일을 표시합니다. 함께 연결할 수도 있습니다. 프레임 워크에서 직접 한 예로, ComboBox은 드롭 다운 목록에 대해 dropdownStyleName 스타일을 가지고 있으며 List은 세로 스크롤 막대에 대해 verticalScrollBarStyleName을 갖습니다.

ComboBox 
{ 
    dropdownStyleName: myComboDropdownStyles; 
} 

.myComboDropdownStyles 
{ 
    backgroundColor: #c4c4ff; 
    verticalScrollBarStyleName: myVScrollBarStyles; 
} 

.myVScrollBarStyles 
{ 
    borderColor: #8686a4; 
} 
관련 문제