Как добавить несколько значков в элемент управления Spark TabBar? - PullRequest
0 голосов
/ 15 декабря 2010

В компоненте MX TabBar свойство iconField позволяет нам отображать разные значки на каждой вкладке.В Spark, похоже, не существует способа добавить значки в TabBar.У кого-нибудь есть пример реализации поддержки значков для Spark TabBar?Есть ли способ сделать это без расширения компонента?

Большое спасибо!

Ответы [ 4 ]

2 голосов
/ 24 марта 2011

Эй, потратив неделю на попытки пойти по нескольким направлениям (ваш список занимает первое место в списке), я обнаружил более простой и эффективный способ добавления значков на панель вкладок или любой другой компонент с использованием скининга.

Вам не нужно создавать пользовательский компонент, просто передавая значок и метку через данные.

http://cookbooks.adobe.com/post_Tutorials_for_skinning_Spark_ButtonBar_component_w-16722.html

Как лично я использовал навигатор контента с моей вкладкой/ viewstack, я передал значок как значок вместо изображения.Вы можете внести изменения соответственно.

0 голосов
/ 16 декабря 2010

Я полагаю, что нашел решение, которое я публикую ниже для потомков. Если у кого-то есть способ получше, я очень ценю это предложение.

<!-- main app: TabBar implementation -->

<s:TabBar
    dataProvider="{contentTabBarPrimaryDP}"
    skinClass="skins.ContentTabBarSkin"/>

<!-- skins.ContentTabBarSkin: ItemRenderer implementation -->

<s:DataGroup id="dataGroup" width="100%" height="100%">
    <s:layout>
        <s:HorizontalLayout/>
    </s:layout>

    <s:itemRenderer>
        <fx:Component>
            <custom:IconButtonBarButton
                label="{data.label}"
                icon="{data.icon}"
                skinClass="skins.ContentTabBarButtonSkin"/>
        </fx:Component>
    </s:itemRenderer>
</s:DataGroup>

<!-- skins.ContentTabBarButtonSkin: icon implementation -->

<s:HGroup       
    gap="3"
    paddingBottom="3"
    paddingLeft="3"
    paddingRight="3"
    paddingTop="3"
    verticalAlign="middle">

    <!--- layer 2: icon -->
    <s:BitmapImage id="iconDisplay"
        left="5"
        verticalCenter="0" />       

    <!--- layer 3: label -->
    <s:Label id="labelDisplay"
        textAlign="center"
        verticalAlign="middle"
        maxDisplayedLines="1"
        horizontalCenter="0" verticalCenter="1"
        left="10"
        right="10"
        top="2"
        bottom="2">
    </s:Label>

</s:HGroup>

Это решение использует собственный объект DTO для TabPar dataProvider, который хранит текст метки, а также внедренное изображение значка в виде класса. Мне также пришлось расширить компонент ButtonBarButton, чтобы добавить iconDisplay SkinPart, который выглядит следующим образом:

[SkinPart(required="false")]
public var iconDisplay:BitmapImage;

Этот класс также имеет методы получения / установки для свойства класса значков и задает источник значков следующим образом:

public function set icon(value:Class):void {

    _icon = value;

    if (iconDisplay != null)
        iconDisplay.source = _icon;

}

override protected function partAdded(partName:String, instance:Object):void {

    super.partAdded(partName, instance);

    if (icon !== null && instance == iconDisplay)
        iconDisplay.source = icon;      

}
0 голосов
/ 27 января 2011

Кажется, это ошибка / пропущенная функциональность вашей версии SDK:
http://forums.adobe.com/thread/552543
http://bugs.adobe.com/jira/browse/SDK-24331

В любом случае, спасибо за решение со скинами - очень полезно

0 голосов
/ 15 декабря 2010

Вам нужно будет создать скин для добавления иконок в компоненты Spark;это не так просто (IMHO), как компоненты MX Flex 3, но гораздо более расширяемый.

Вот несколько ссылок, которые могут помочь вам начать:

...