Добавить значок поиска внутри искривленного TextInput во Flex - PullRequest
Новая
       18

Добавить значок поиска внутри искривленного TextInput во Flex

3 голосов
/ 11 мая 2011

Я хочу добавить значок поиска в искровой элемент управления TextInput. Есть ли способ, с помощью которого я могу расширить элемент управления TextInput и добавить к нему дочерний элемент.

Спасибо

Ответы [ 2 ]

5 голосов
/ 11 мая 2011

Вы не должны расширять TextInput.Главная сила архитектуры Spark - возможность снятия шкур.Вы можете создать свой собственный скин на основе стандартного TextInputSkin и разместить иконку там.Я думаю, что не будет никаких проблем.

3 голосов
/ 12 апреля 2013

Я столкнулся с той же проблемой, желая получить значок поиска в искровом 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. Убедитесь, что у вас есть приглашение, включенное в компонент TextInput на шаге 9, как показано. Я не хотел, чтобы текст там, поэтому я просто включил приглашение, которое является пустым пространством. Вы можете использовать все, что захотите, но в поле приглашения должно быть ЧТО-ТО (в противном случае значок не отображается).
  11. Вот и все! Запустите его ...
...