ich, dass ich mit einer Lösung zu kommen haben glauben, was ich Ich poste unten für die Nachwelt. Wenn jemand einen besseren Weg hat, würde ich den Vorschlag sehr schätzen.
<!-- 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>
Diese Lösung verwendet ein benutzerdefiniertes DTO-Objekt für den TabBar Datenprovider, die den Beschriftungstext sowie das eingebetteten Symbolbild als eine Klasse speichert. Ich hatte auch die ButtonBarButton Komponente erweitern ein iconDisplay SkinPart, die wie folgt aussieht hinzuzufügen:
[SkinPart(required="false")]
public var iconDisplay:BitmapImage;
Diese Klasse hat auch Getter/Setter für das Symbol Klasse Eigenschaft und setzt das Symbol Quelle, wie zum Beispiel:
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;
}
Vielen Dank für die Links. Ich sehe immer noch keinen Weg, wie die ButtonBarButton-Skin in die TabBar-Komponente übertragen werden kann, um ein anderes Symbol für jede Registerkarte darzustellen. Das Tour de Flex-Beispiel verwendet ein fest codiertes Bild. Alles deutet darauf hin, TabBar zu erweitern, um Icon-Unterstützung hinzuzufügen. Hat jemand das getan? Ich denke immer noch an die Skinning-Architektur für Spark, aber im Moment scheint es, dass, um echte Wiederverwendbarkeit zu erreichen, benutzerdefinierte CSS-Stile implementiert werden müssen oder die Komponente selbst erweitert werden muss. Kann mich jemand sonst aufklären? – BatFlexUser