스파크 내부에 검색 아이콘 추가 플렉스의 TextInput

Question

스파크 TextInput 컨트롤 안에 검색 아이콘을 추가하고 싶습니다. TextInput 컨트롤을 확장하고 자식을 추가 할 수있는 방법이 있습니까?

덕분에

Answer 1

당신은 TextInput 자체를 확장해서는 안된다. Spark 아키텍처의 주력은 스키닝 가능성입니다. 표준 TextInputSkin을 기반으로 자신 만의 스킨을 만들고 아이콘을 배치 할 수 있습니다. 나는 아무 문제도 없을 것이라고 생각한다.

Answer 2

스파크 TextInput에서 검색 아이콘을 얻으려는 것과 동일한 문제에 직면했습니다. 기존 스파크 스킨을 복사하고 아이콘을 추가하는 것은 매우 간단했습니다. 방법은 다음과 같습니다

1. 이미 하나
2. 후 바로 클릭 FlashBuilder에서 해당 폴더를 선택하지 않은 경우 작업 공간에 스킨 폴더를 생성하고 새> MXML 스킨을 선택 나타나는 메뉴에서
3. 아직 선택하지 않은 경우 나타나는 창의 "복사본으로 만들기"를 선택하십시오.
4. 호스트 구성 요소 필드에 TextInput을 입력하면 spark.skins.spark.TextInputSkin을 선택하는 옵션이 나타납니다.
5. 구성 요소의 이름 (예 : TextInputSkinWithPromptIcon)을 입력하고 마침을 클릭하십시오.
6. 이제 스킨 폴더에 표시 될이 파일을 엽니 다.

7. 스킨 파일의 마지막 섹션은 <!-- text -->입니다. 이 섹션 후 다음이 포함 <!-- search icon -->에 대한 새로운 섹션을 만들 (참고 :이 피부의 마지막 부분이 될 것입니다) :

   <s:Image id="iconDisplay" source="@Embed('path/to/image/file/MY_SEARCH_IMAGE.png')" mouseEnabled="false" mouseChildren="false" visible.normal="false" visible.normalWithPrompt="true"/>

8. 그것 때문에 이전에 파일에 나타나는 제외 배열을 수정 다음과 같이 나타납니다 (참고 : 다음 코드는 이미 같이 단지에 iconDisplay을 추가 파일에 존재) :

   /* Define the skin elements that should not be colorized. */ static private const exclusions:Array = ["background", "textDisplay", "promptDisplay", "iconDisplay", "border"];

   /* exclusions before Flex 4.5 for backwards-compatibility purposes */ static private const exclusions_4_0:Array = ["background", "textDisplay", "promptDisplay", "iconDisplay",];

9. 는 TextInput 구성 요소를 응용 프로그램 코드를 이동하여 사용하여 피부에 연결 : <s:TextInput ... skinClass="path.to.skins.TextInputSkinWithPromptIcon" prompt=" "/>

10. 당신이 그림과 같이 프롬프트가 9 단계에서 TextInput 구성 요소에 포함되어 있는지 확인하십시오. 나는 거기에 텍스트를 원하지 않았기 때문에 빈 공간 인 프롬프트를 간단히 포함 시켰습니다. 원하는 것을 사용할 수 있지만 프롬프트 필드에 SOMETHING이 있어야합니다 (그렇지 않으면 아이콘이 표시되지 않습니다).
11. 그게 전부 야! 실행 해 ...