|
Bei der SpinnerList-Komponente handelt es sich um eine spezialisierte Liste, mit der normalerweise Daten in Mobilanwendungen ausgewählt werden. Führt der Benutzer einen Bildlauf in den Listenelementen durch, werden die Elemente umgebrochen, nachdem der Benutzer das Ende der Liste erreicht hat. Das SpinnerList-Steuerelement wird häufig als NumericStepper-Komponente in Mobilanwendungen verwendet.
Die folgende Abbildung zeigt ein typisches SpinnerList-Steuerelement in einer Mobilanwendung:
 SpinnerList-Steuerelement Die SpinnerList verhält sich wie eine sich drehende zylindrische Trommel. Benutzer können die Liste bewegen, indem Sie sie nach oben oder unten schubsen oder ziehen und auf ein Element in der Liste klicken.
Sie schließen normalerweise ein SpinnerList-Steuerelement in ein SpinnerListContainer-Steuerelement ein. Diese Klasse stellt den Großteil des Chroms für die SpinnerList zur Verfügung und legt das Layout fest. Das Chrom enthält die Rahmen, Schatten und die Darstellung der Auswahlindikatoren.
Die Daten für eine SpinnerList werden in Form einer Liste gespeichert. Sie werden im Spinner mit einem SpinnerListItemRenderer dargestellt. Sie können den Elementrenderer überschreiben, um die Darstellung oder Inhalte der Listenelemente anzupassen.
Das DateSpinner-Steuerelement ist ein Beispiel für einen Satz von SpinnerList-Steuerelementen mit einem benutzerdefinierten Elementrenderer.
Sie können derzeit keine Elemente in einem SpinnerList-Steuerelement deaktivieren, ohne das gesamte Steuerelement zu deaktivieren. Die Einschränkung gilt nicht für die DateSpinner-Steuerung, die eine zusätzliche Logik zum Festlegen von Bereichen deaktivierter Daten bereitstellt.
Daten für eine Spinnerliste definierenFühren Sie einen der folgenden Schritte aus, um Daten für ein SpinnerList-Steuerelement zu definieren: Definieren Sie die Daten inline in der dataProvider-Eigenschaft des SpinnerList-Steuerelements.
Legen Sie Daten als untergeordnete Tags des <s:SpinnerList>-Tags fest.
Definieren Sie Daten in ActionScript oder MXML und binden Sie sie an das SpinnerList-Steuerelement. Diese Daten können aus einem externen Dienst, einer eingebetteten Ressource wie etwa einer XML-Datei oder einer anderen Datenquelle stammen.
Binden Sie das SpinnerList-Steuerelement mithilfe des Flash Builder-Dienstassistenten an einen Datendienstvorgang. Weitere Informationen zum Erstellen datenorientierter Anwendungen mit Flash Builder finden Sie unter Verbindung zu Datendiensten herstellen.
Das SpinnerList-Steuerelement kann jede beliebige Klasse als Datenprovider annehmen, die die IList-Schnittstelle implementiert. Diese Klassen umfassen die ArrayCollection-, ArrayList-, NumericDataProvider- und XMLListCollection-Klassen.
Definieren Sie keinen Datenprovider für das SpinnerList-Steuerelement, wenn es instanziiert wird, wird die SpinnerList mit einer leeren Zeile angezeigt. Nach dem Hinzufügen eines Datenproviders wird die Größe der SpinnerList geändert, um standardmäßig fünf Elemente in der Liste anzuzeigen.
Im folgenden Beispiel werden Daten für das SpinnerList-Steuerelement in untergeordneten Tags des <s:SpinnerList>-Tags definiert: <?xml version="1.0" encoding="utf-8"?>
<!-- mobile_spinnerlist/views/SpinnerListComplexDataProvider.mxml -->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
title="Complex Data Provider">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:layout>
<s:VerticalLayout paddingTop="10" paddingLeft="10"/>
</s:layout>
<s:Label text="Select a person:"/>
<s:SpinnerListContainer>
<s:SpinnerList id="peopleList" width="200" labelField="name">
<s:ArrayList>
<fx:Object name="Friedeman Friese" companyID="14266"/>
<fx:Object name="Stephen Glenn" companyID="14266"/>
<fx:Object name="Reiner Knizia" companyID="11233"/>
<fx:Object name="Alan Moon" companyID="11543"/>
<fx:Object name="Klaus Teuber" companyID="13455"/>
<fx:Object name="Dale Yu" companyID="14266"/>
</s:ArrayList>
</s:SpinnerList>
</s:SpinnerListContainer>
<s:Label text="Selected ID: {peopleList.selectedItem.companyID}"/>
</s:View>
Im folgenden Beispiel werden SpinnerList-Daten im <s:SpinnerList>-Tag definiert: <?xml version="1.0" encoding="utf-8"?>
<!-- mobile_spinnerlist/views/SpinnerListInlineDataProvider.mxml -->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
title="Inline Data Provider">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:layout>
<s:VerticalLayout paddingTop="10" paddingLeft="10"/>
</s:layout>
<fx:Script>
<![CDATA[
import mx.collections.ArrayList;
]]>
</fx:Script>
<s:SpinnerListContainer>
<!-- Create data provider inline. -->
<s:SpinnerList id="smallList" dataProvider="{new ArrayList([1,5,10,15,30])}"
wrapElements="false" typicalItem="44"/>
</s:SpinnerListContainer>
<s:Label text="Selected Item: {smallList.selectedItem}"/>
</s:View>
Im folgenden Beispiel werden SpinnerList-Daten in ActionScript definiert: <?xml version="1.0" encoding="utf-8"?>
<!-- mobile_spinnerlist/views/SpinnerListBasicDataProvider.mxml -->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
title="Basic Data Provider"
creationComplete="initApp()">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:layout>
<s:VerticalLayout paddingTop="10" paddingLeft="10"/>
</s:layout>
<fx:Script>
<![CDATA[
import mx.collections.ArrayList;
[Bindable]
public var daysOfWeek:ArrayList;
private function initApp():void {
daysOfWeek = new ArrayList(["Mon","Tue","Wed","Thu","Fri","Sat","Sun"]);
}
]]>
</fx:Script>
<s:SpinnerListContainer>
<s:SpinnerList id="daysList" width="100" dataProvider="{daysOfWeek}"/>
</s:SpinnerListContainer>
<s:Label text="Selected Day: {daysList.selectedItem}"/>
</s:View>
Handelt es sich bei den Daten in ActionScript um komplexe Objekte, geben Sie die labelField-Eigenschaft an, sodass die SpinnerList die richtigen Beschriftungen anzeigt, wie das folgende Beispiel veranschaulicht: <?xml version="1.0" encoding="utf-8"?>
<!-- mobile_spinnerlist/views/SpinnerListComplexASDP.mxml -->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
title="Complex Data Provider in AS" creationComplete="initApp()">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:layout>
<s:VerticalLayout paddingTop="10" paddingLeft="10"/>
</s:layout>
<fx:Script>
<![CDATA[
import mx.collections.ArrayList;
[Bindable]
private var myAC:ArrayList;
private function initApp():void {
myAC = new ArrayList([
{name:"Alan Moon",id:42},
{name:"Friedeman Friese",id:44},
{name:"Dale Yu",id:45},
{name:"Stephen Glenn",id:47},
{name:"Reiner Knizia",id:48},
{name:"Klaus Teuber",id:49}
]);
}
]]>
</fx:Script>
<s:SpinnerListContainer>
<s:SpinnerList id="peopleList" dataProvider="{myAC}"
width="200"
labelField="name"/>
</s:SpinnerListContainer>
<s:Label text="Selected ID: {peopleList.selectedItem.id}"/>
</s:View>
Sie können außerdem mithilfe einer Vereinfachungsklasse, NumericDataProvider, numerische Daten für ein SpinnerList-Steuerelement bereitstellen. Mit dieser Klasse können Sie einen Satz numerischer Daten mit einem Mindestwert, einem Höchstwert und einer Schrittgröße leicht definieren .
Im folgenden Beispiel wird die NumericDataProvider-Klasse als Datenquelle für das SpinnerList-Steuerelement verwendet: <?xml version="1.0" encoding="utf-8"?>
<!-- mobile_spinnerlist/views/MinMaxSpinnerList.mxml -->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
title="Min/Max SpinnerLists"
backgroundColor="0x000000">
<fx:Script>
<![CDATA[
import mx.collections.ArrayList;
]]>
</fx:Script>
<s:SpinnerListContainer top="10" left="10">
<s:SpinnerList typicalItem="100">
<s:dataProvider>
<s:NumericDataProvider minimum="0" maximum="23" stepSize="1"/>
</s:dataProvider>
</s:SpinnerList>
<s:SpinnerList typicalItem="100">
<s:dataProvider>
<s:NumericDataProvider minimum="0" maximum="59" stepSize="1"/>
</s:dataProvider>
</s:SpinnerList>
<s:SpinnerList typicalItem="100">
<s:dataProvider>
<s:NumericDataProvider minimum="0" maximum="59" stepSize="1"/>
</s:dataProvider>
</s:SpinnerList>
<s:SpinnerList typicalItem="100"
dataProvider="{new ArrayList(['AM','PM'])}"
wrapElements="false"/>
</s:SpinnerListContainer>
</s:View>
Der Wert der stepSize-Eigenschaft kann eine negative Zahl sein. In diesem Fall wird der Höchstwert zuerst angezeigt. Der Spinner beginnt mit dem Höchstwert und bewegt sich zum Mindestwert.
Elemente in einer Spinnerliste auswählenDas SpinnerList-Steuerelement unterstützt die Auswahl von nur jeweils einem Element. Das ausgewählte Element befindet sich immer in der Mitte der Komponente und wird standardmäßig unter dem Auswahlindikator angezeigt. Wenn sich die SpinnerList nicht bewegt, muss immer ein Element ausgewählt sein. Sie können weder ein deaktiviertes Element noch eine Zeile ohne Element auswählen.
Um das aktuell ausgewählte Element in einem SpinnerList-Steuerelement abzurufen, greifen Sie auf die selectedIndex- oder selectedItem-Eigenschaft des Steuerelements zu.
Um das aktuell ausgewählte Element in einem SpinnerList-Steuerelement festzulegen, legen Sie die selectedIndex- oder selectedItem-Eigenschaft des Steuerelements fest. Sie legen diese Eigenschaften normalerweise für das <s:SpinnerList>-Tag fest, sodass das Element ausgewählt wird, wenn die SpinnerList erstellt wird.
Legen Sie den Wert der selectedIndex- oder selectedItem-Eigenschaft der SpinnerList nicht explizit fest, wird standardmäßig das erste Element in der Liste ausgewählt.
Sie können mithilfe der selectedIndex- oder selectedItem-Eigenschaft das ausgewählte Element im Spinner programmgesteuert ändern. Legen Sie eine dieser Eigenschaften fest, springt das Steuerelement zu dem Element. Es animiert oder dreht den Spinner nicht zu dem Element.
Im folgenden Beispiel wird das SpinnerList-Steuerelement als Countdown-Timer verwendet. Das Timer-Objekt ändert das ausgewählte Element im Spinner, indem sich der Wert der selectedIndex-Eigenschaft jede Sekunde ändert: <?xml version="1.0" encoding="utf-8"?>
<!-- mobile_spinnerlist/views/SpinnerListCountdownTimer.mxml -->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
title="Countdown Timer"
creationComplete="initApp()">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
private var myTimer:Timer;
private function initApp():void {
myTimer = new Timer(1000, 0); // 1 second
myTimer.addEventListener(TimerEvent.TIMER, changeSpinner);
myTimer.start();
}
private function changeSpinner(e:Event):void {
secList.selectedIndex = secList.selectedIndex - 1;
}
]]>
</fx:Script>
<s:SpinnerListContainer left="50" top="50">
<s:SpinnerList id="secList" width="100" selectedIndex="60">
<s:dataProvider>
<s:NumericDataProvider minimum="0" maximum="60" stepSize="1"/>
</s:dataProvider>
</s:SpinnerList>
</s:SpinnerListContainer>
</s:View>
Benutzerinteraktionen und Ereignisse in einer SpinnerlisteÄndert sich das ausgewählte Element in einem SpinnerList-Steuerelement, löst das Steuerelement change- und valueCommit-Ereignisse aus. Dies geschieht als Folge einer Benutzerinteraktion wie etwa einer Fingerbewegung. Falls ein Benutzer ein Element auswählt, indem er es berührt, löst das Steuerelement sowohl ein click-Ereignis als auch change- und valueCommit-Ereignisse aus.
Wird das ausgewählte Element programmgesteuert geändert, löst das SpinnerList-Steuerelement nur ein valueCommit-Ereignis aus.
Bewegt sich das SpinnerList-Steuerelement, löst es nicht für jedes Element ein Ereignis aus, das es durchläuft. Es löst nur change oder valueCommit-Ereignisse aus, wenn es bei einem neuen Element anhält.
Nach erstmaliger Instanziierung des SpinnerList-Steuerelements mit einem Datenprovider löst es sowohl ein change- als auch ein valueCommit-Ereignis aus.
Das folgende Beispiel zeigt die üblichen bei Verwendung des SpinnerList-Steuerelements ausgelösten Ereignisse: <?xml version="1.0" encoding="utf-8"?>
<!-- mobile_spinnerlist/views/SpinnerListEvents.mxml -->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
title="SpinnerList Events"
creationComplete="initApp()">
<s:layout>
<s:VerticalLayout paddingTop="10" paddingLeft="10"
paddingRight="10" paddingBottom="10"/>
</s:layout>
<fx:Script>
<![CDATA[
import mx.collections.ArrayList;
[Bindable]
public var daysOfWeek:ArrayList;
private function initApp():void {
daysOfWeek = new ArrayList(["Mon","Tue","Wed","Thu","Fri","Sat","Sun"]);
}
private function eventHandler(e:Event):void {
ta1.text += "Event: " + e.type + " (selectedItem: " + e.currentTarget.selectedItem + ")\n";
}
]]>
</fx:Script>
<s:SpinnerListContainer>
<s:SpinnerList id="daysList" width="300"
dataProvider="{daysOfWeek}"
change="eventHandler(event)"
gestureSwipe="eventHandler(event)"
click="eventHandler(event)"
gestureZoom="eventHandler(event)"
/>
</s:SpinnerListContainer>
<s:TextArea id="ta1" width="100%" height="100%"/>
</s:View>
Die folgende Abbildung zeigt die Ausgabe nach Interaktion mit dem SpinnerList-Steuerelement:
 Ereignisse des SpinnerList-Steuerelements Umbruch in einer Spinnerliste festlegenWenn der Datenprovider des SpinnerList-Steuerelements weniger Elemente enthält als im Spinner angezeigt werden, wird der Spinner nicht umgebrochen, sondern hält beim letzten Element in der Liste an. Andernfalls springt der Spinner nach dem letzten Element automatisch wieder an den Anfang der Liste.
Standardmäßig werden in der Liste fünf Elemente angezeigt. Möchten Sie diese Anzahl ändern, erstellen Sie eine benutzerdefinierte Skin. Weitere Informationen finden Sie unter Benutzerdefinierte Skin für Spinnerliste erstellen.
Der Wert der wrapElements-Eigenschaft bestimmt, ob ein SpinnerList-Steuerelement erneut beim ersten Element beginnt, nachdem das letzte Element in der Liste erreicht wurde. Ist wrapElements auf false gesetzt, hält der Spinner am Ende der Liste an, unabhängig von der Anzahl der Elemente in der Liste und der angezeigten Elemente.
Ist die wrapElements-Eigenschaft auf true gesetzt, beginnt der Spinner erneut beim ersten Element, jedoch nur, wenn die Liste mindestens ein Element mehr enthält als Elemente angezeigt werden können. Falls die SpinnerList beispielsweise fünf Elemente anzeigt, die Liste jedoch nur vier Elemente enthält, wird die Liste unabhängig von der Einstellung der wrapElements-Eigenschaft nicht umgebrochen.
Sie können das standardmäßige Umbrechen der SpinnerList überschreiben, indem Sie die wrapElements-Eigenschaft auf true oder false setzen.
Im folgenden Beispiel kann der Wert der wrapElements-Eigenschaft geändert werden: <?xml version="1.0" encoding="utf-8"?>
<!-- mobile_spinnerlist/views/SpinnerListWrapElements.mxml -->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
title="Wrap Elements">
<s:layout>
<s:VerticalLayout paddingTop="10" paddingLeft="10"/>
</s:layout>
<fx:Script>
<![CDATA[
import mx.collections.ArrayList;
]]>
</fx:Script>
<s:SpinnerListContainer>
<s:SpinnerList id="smallList" typicalItem="45"
dataProvider="{new ArrayList([1,5,6,10,15,30])}"
wrapElements="{cb1.selected}"/>
</s:SpinnerListContainer>
<!-- By default, cause the elements to be wrapped by setting this to true -->
<s:CheckBox id="cb1" label="Wrap Elements" selected="true"/>
</s:View>
Im Allgemeinen erwarten Benutzer, dass die Liste umgebrochen wird, wenn diese mehr Elemente enthält als gleichzeitig angezeigt werden können. Enthält die Liste weniger Elemente als der Spinner anzeigen kann, erwarten Benutzer gewöhnlicherweise, dass die Liste nicht umgebrochen wird.
Stile in der Spinnerliste festlegenDas SpinnerList-Steuerelement unterstützt alle für das Spark-Mobildesign üblichen Textstile. Zu diesen Stilen gehören fontSize, fontWeight, color, textDecoration und Ausrichtungseigenschaften. Sie können diese Stileigenschaften direkt in der Steuerung von MXML oder in CSS festlegen. Die SpinnerList übernimmt diese Eigenschaften ebenfalls, falls diese in einem übergeordneten Container festgelegt sind.
Sie können außerdem die Auffüllungseigenschaften einer SpinnerList definieren, indem Sie die SpinnerListItemRenderer-Stileigenschaften ändern.
Im folgenden Beispiel werden die textbezogenen Stileigenschaften im SpinnerList-Typselektor und die Auffüllungseigenschaften im SpinnerListItemRenderer-Typselektor festgelegt: <?xml version="1.0" encoding="utf-8"?>
<!-- mobile_spinnerlist/SpinnerListExamples2.mxml -->
<s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
firstView="views.SpinnerListStyles">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
s|SpinnerList {
textAlign: right;
fontSize: 13;
fontWeight: bold;
color: red;
}
s|SpinnerListItemRenderer {
paddingTop: 5;
paddingBottom: 5;
paddingRight: 5;
}
</fx:Style>
</s:ViewNavigatorApplication>
Definieren Sie in einer Mobilanwendung den <fx:Style>-Block in der Anwendungsdatei auf oberster Ebene, falls Sie Typselektoren verwenden. Andernfalls gibt der Compiler eine Warnung aus und die Stile werden nicht angewendet.
Das SpinnerList-Steuerelement unterstützt keine accentColor-, backgroundAlpha-, backgroundColor-, oder chromeColor-Stileigenschaften.
Benutzerdefinierte Skin für Spinnerliste erstellenSie können eine benutzerdefinierte Skin für ein SpinnerList- oder das SpinnerListContainer-Steuerelement erstellen. Dazu müssen Sie normalerweise die Quelle von SpinnerListSkin oder SpinnerListContainerSkin als Grundlage Ihrer benutzerdefinierten Skinklasse kopieren.
Sie erstellen gewöhnlicherweise benutzerdefinierte SpinnerList-Skins, um folgende Aspekte eines SpinnerList-Steuerelements oder seines Containers zu ändern: Größe oder Form des Rahmens um das aktuell ausgewählte Element ändern (selectionIndicator). Dazu müssen Sie eine benutzerdefinierte SpinnerListContainerSkin-Klasse erstellen.
Höhe jeder Zeile definieren (rowHeight). Dazu müssen Sie eine benutzerdefinierte SpinnerListSkin-Klasse erstellen.
Anzahl der angezeigten Zeilen festlegen (requestedRowCount). Dazu müssen Sie eine benutzerdefinierte SpinnerListSkin-Klasse erstellen.
Darstellung des Containers definieren (wie etwa den Eckradius und die Rahmenstärke). Dazu müssen Sie eine benutzerdefinierte SpinnerListContainerSkin-Klasse erstellen.
Ein Beispiel für eine benutzerdefinierte SpinnerListSkin und SpinnerListContainerSkin finden Sie unter Darstellung eines DateSpinner-Steuerelements anpassen.
Bilder in einer Spinnerliste verwendenSie können Bilder in einem SpinnerList-Steuerelement anstelle von Textbeschriftungen verwenden, indem Sie IconItemRenderer als Elementrenderer für die SpinnerList festlegen.
Sie können Bilder in einem IconItemRenderer-Objekt entweder einbetten oder sie während der Laufzeit laden. Mobilbenutzer sollten sie möglicherweise einbetten, um das Datennetzwerk zu entlasten.
Im folgenden Beispiel werden eingebettete Bilder in einem SpinnerList-Steuerelement verwendet: <?xml version="1.0" encoding="utf-8"?>
<!-- mobile_spinnerlist/views/SpinnerListEmbeddedImage.mxml -->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
title="Embedded Images">
<s:layout>
<s:VerticalLayout paddingTop="10" paddingLeft="10"/>
</s:layout>
<fx:Script>
<![CDATA[
import mx.collections.ArrayList;
[Embed(source="../../assets/product_icons/flex_50x50.gif")]
[Bindable]
public var icon0:Class;
[Embed(source="../../assets/product_icons/acrobat_reader_50x50.gif")]
[Bindable]
public var icon1:Class;
[Embed(source="../../assets/product_icons/coldfusion_50x50.gif")]
[Bindable]
public var icon2:Class;
[Embed(source="../../assets/product_icons/flash_50x50.gif")]
[Bindable]
public var icon3:Class;
[Embed(source="../../assets/product_icons/flash_player_50x50.gif")]
[Bindable]
public var icon4:Class;
[Embed(source="../../assets/product_icons/photoshop_50x50.gif")]
[Bindable]
public var icon5:Class;
// Return an ArrayList of icons for each spinner
private function getIconList():ArrayList {
var a:ArrayList = new ArrayList();
a.addItem({icon:icon0});
a.addItem({icon:icon1});
a.addItem({icon:icon2});
a.addItem({icon:icon3});
a.addItem({icon:icon4});
a.addItem({icon:icon5});
return a;
}
]]>
</fx:Script>
<s:SpinnerListContainer>
<s:SpinnerList id="productList1" width="90" dataProvider="{getIconList()}" selectedIndex="0">
<s:itemRenderer>
<fx:Component>
<s:IconItemRenderer labelField="" iconField="icon"/>
</fx:Component>
</s:itemRenderer>
</s:SpinnerList>
<s:SpinnerList id="productList2" width="90" dataProvider="{getIconList()}" selectedIndex="2">
<s:itemRenderer>
<fx:Component>
<s:IconItemRenderer labelField="" iconField="icon"/>
</fx:Component>
</s:itemRenderer>
</s:SpinnerList>
<s:SpinnerList id="productList3" width="90" dataProvider="{getIconList()}" selectedIndex="1">
<s:itemRenderer>
<fx:Component>
<s:IconItemRenderer labelField="" iconField="icon"/>
</fx:Component>
</s:itemRenderer>
</s:SpinnerList>
</s:SpinnerListContainer>
</s:View>
Das folgende Bild zeigt, wie die Anwendung auf einem Mobilgerät angezeigt wird:
 SpinnerList-Steuerelement mit eingebetteten Bildern
|
|
|
