<s:DataRenderer>
tag inherits all of the tag
attributes of its superclass and adds the following tag attributes:
<s:DataRenderer Properties data="" Events dataChange="No default" />]]>
Hinweis: Diese Klasse wird in einer späteren Version möglicherweise entfernt.
Diese Eigenschaft ist bindbar; sie löst dataChange-Ereignisse aus.
<s:TextArea>
tag inherits all of the tag
attributes of its superclass and adds the following tag attributes:
<s:TextArea Properties heightInLines="Calculated default" [Spark theme only] textFlow="TextFlow" [Spark theme only] typicalText=null [Spark theme only] widthInChars="Calculated default" [Spark theme only] Styles horizontalScrollPolicy="auto" [Spark theme only] symbolColor="" verticalScrollPolicy="auto" [Spark theme only] />]]>
Die Skin für das Spark-Design verwendet die RichEditableText-Klasse. Das bedeutet, dass das Spark-TextArea-Steuerelement die Text Layout Framework(TLF)-Bibliothek unterstützt, die auf der Flash Text Engine (FTE) aufbaut. In Kombination ermöglichen diese Ebenen die Bearbeitung von Text mit hochwertigen internationalen Typografie- und Layoutfunktionen. Diese Skin beinhaltet einen Scroller, mit dem horizontale und vertikale Bildlaufleisten für Bildläufe in Texten angezeigt werden können. Außerdem werden vertikale Bildläufe mit dem Mausrad unterstützt. Zugriff auf RichEditableText erhalten Sie über
Die Skin für das Mobile-Design verwendet die Klasse StyleableStageText. Da StyleableStageText native Textfelder verwendet, ermöglicht es eine bessere Texteingabe und Manipulation auf Mobilgeräten, jedoch gibt es
Mithilfe der
Der Text wird mithilfe von CSS-Stilen wie beispielsweise
Für das Spark-Design können Sie mithilfe der Eigenschaften
Mit der
Für das Mobile-Design legen die Software-Tastatur-spezifischen Eigenschaften, die Eigenschaften
Textbereich für das Spark-Design
Es folgen Beschreibungen der wichtigsten Unterschiede zwischen Spark TextArea und dem MX TextArea-Steuerelement:
Beim Spark-TextArea-Steuerelement kommt das objektorientierte TLF-Modell von Rich Text zum Einsatz. Hierbei werden Textlayoutelemente wie Unterteilungen, Absätze, Spannen, Hyperlinks und Bilder zur Laufzeit durch ActionScript-Objekte dargestellt. Sie können auf diese Objekte programmgesteuert zugreifen und sie bearbeiten. Das zentrale Objekt in TLF zur Darstellung von Rich Text ist ein TextFlow. Geben Sie Rich Text für ein TextArea-Steuerelement an, indem Sie seine
Wenn Sie bei der Anzeige von Text auf die Darstellung unterschiedlicher Formatierungen verzichten können, legen Sie die TextArea-
Beim Kompilieren können Sie TLF-Markup-Tags in das TextArea-Tag einfügen. Gehen Sie dazu wie im folgenden Beispiel vor:
<s:TextArea>Hello <s:span fontWeight="bold">World!</s:span></s:TextArea>In diesem Beispiel legt der MXML-Compiler die TextArea
Das TextArea-Steuerelement bietet keine Benutzeroberfläche zum Ändern der Textformatierung, enthält jedoch APIs, mit denen Sie Text programmgesteuert formatieren können. Beispielsweise ist es möglich, eine Schaltfläche zu erstellen, auf die Sie klicken können, um den gewählten Text fett zu formatieren.
Die Standardtextformatierung wird mithilfe von CSS-Stilen wie beispielsweise
Sie können viele Merkmale von TextArea-Inhalten mit Stilen steuern. Im Folgenden werden einige häufig verwendete Stile erläutert:
Standardmäßig wird Text an der rechten Kante des Steuerelements umbrochen. Wenn mehr Text vorhanden ist als in TextArea passt, wird automatisch eine vertikale Bildlaufleiste angezeigt. Wenn Sie den
Mit Spark TextArea können Sie Texte anzeigen, die sowohl von links nach rechts (z. B. Französisch) als auch von rechts nach links (z. B. Arabisch) verlaufen. Auch die Anzeige von Text mit zwei Richtungen wird unterstützt. Sie können also einen Satz auf Französisch in einem arabischen Text anzeigen. Läuft der Text vorwiegend von rechts nach links, stellen Sie den
Die Spark-TextArea unterstützt eine unbegrenzte Anzahl von Schritten, die während einer Bearbeitungssitzung rückgängig gemacht und wiederhergestellt werden können. Eine Bearbeitungssitzung beginnt, wenn das Steuerelement den Tastaturfokus erhält und endet, wenn das Steuerelement den Fokus verliert.
Erstellen Sie einen Elementrenderer, um diese Komponente in einer listenbasierten Komponente wie beispielsweise einer Liste oder einem DataGrid zu verwenden. Weitere Informationen zum Erstellen eines Elementrenderers finden Sie unter
Für das Spark-Design verfügt die Textbereich-Steuerung über folgende Standardmerkmale:
Für das Mobile-Design verfügt die Textbereich-Steuerung über folgende Standardmerkmale:
Die
<s:TextArea>Hello <s:span fontWeight="bold">World</s:span></s:TextArea>In diesem Beispiel können Sie den String und das SpanElement, die Sie als Inhalt angeben, zur Erstellung eines TextFlow nutzen.
Diese Eigenschaft hat den Typ „Object“, da Sie sie als String, FlowElement oder ein Array von Strings und FlowElements festlegen können. Im obigen Beispiel ist der Inhalt ein Array mit zwei Elementen. Das erste Arrayelement ist der String „Hello“. Das zweite Arrayelement ist ein SpanElement-Objekt mit dem Text „World“ in Fettdruck.
Unabhängig davon, wie Sie den Inhalt angeben, wird er in ein TextFlow-Objekt konvertiert. Wenn Sie den Wert dieser Eigenschaft abrufen, erhalten Sie das resultierende TextFlow-Objekt.
Dies wird im Mobile-Design nicht unterstützt.
Spark-Design: siehe spark.components.RichEditableText.heightInLines
Dies wird im Mobile-Design nicht unterstützt.
Spark-Design: siehe spark.components.RichEditableText.textFlow
Dies wird im Mobile-Design nicht unterstützt.
Spark-Design: siehe spark.components.RichEditableText.widthInChars
Dies wird im Mobile-Design nicht unterstützt.
<s:Grid>
tag inherits all of the tag
attributes of its superclass and adds the following tag attributes:
<s:Grid Properties />]]>
Die Grid-Komponente soll als DataGrid-Skinteil oder als Element anderer benutzerdefinierter Composite-Komponenten verwendet werden. Daher ist sie als solche nicht skinfähig, enthält keinen Scroller bzw. keine Bildlaufleisten und bietet keine standardmäßige Ereignisprozedur für Maus oder Tastatur.
Jede sichtbare Grid-Zelle wird durch eine GridItemRenderer-Instanz angezeigt, die mithilfe der
Das Grid-Steuerlement unterstützt die Auswahl entsprechend der
Das Grid-Steuerelement zeigt hover-, Einfügezeichen- und Auswahlindikatoren basierend auf der
Das Grid-Steuerelement unterstützt einen flüssigen Bildlauf (Smooth Scrolling). Ihre vertikalen und horizontalen Bildlaufpositionen definieren den Pixelursprung des sichtbaren Teils des Rasters und dessen Layout zeigt nur so viele Zellelementrenderer an, wie zum Ausfüllen des verfügbaren Raumes erforderlich sind.
Das Grid-Steuerelement unterstützt Zeilen mit variabler Höhe, die ihre Höhe basierend auf den Inhalten der Elementrenderer automatisch berechnen. Diese Unterstützung wird Virtualisierung des Rasters genannt, weil die Zuordnung von (Pixel-)Bildlaufpositionen zu Zeilen- und Spaltenindexpositionen normalerweise auf unvollständigen Informationen über die bevorzugten Größen der Rasterzellen basiert. Das Raster führt eine Zwischenspeicherung der berechneten Höhen der Zeilen durch, die per Bildlauf in die Ansicht geholt wurden, und schätzt den Rest auf der Basis eines einzigen
Übergänge in DataGrid-Elementrenderern werden nicht unterstützt. Die GridItemRenderer-Klasse hat ihre
Der
Der
Die Beispielfunktion unten verwendet diese Methode zur Berechnung des
function getCellData(x:Number, y:Number):Object { var cell:CellPosition = getCellAt(x, y); if (!cell) return null; var GridColumn:column = grid.columns.getItemAt(cell.columnIndex); return grid.dataProvider.getItemAt(cell.rowIndex)[column.dataField]; }
Wenn noch keine Spalten der angegebenen Zeile und der ihr vorangehenden Zeilen per Bildlauf in die Ansicht geholt wurden, können die zurückgegebenen Grenzen nur eine Annäherung entsprechend der jeweiligen
Wenn noch keine Spalten der angegebenen Zeile und der ihr vorangehenden Zeilen per Bildlauf in die Ansicht geholt wurden, kann der zurückgegebene Wert nur eine Annäherung entsprechend der jeweiligen
Wenn noch keine Spalten der angegebenen Zeile und der ihr vorangehenden Zeilen per Bildlauf in die Ansicht geholt wurden, kann der zurückgegebene Wert nur eine Annäherung entsprechend der jeweiligen
Wenn noch keine Zellen der angegebenen Spalte per Bildlauf in die Ansicht geholt wurden, können die zurückgegebenen Grenzen nur eine Annäherung entsprechend des
Wenn noch keine Spalten oder Zeilen des Rasters per Bildlauf in die Ansicht geholt wurden, kann die zurückgegebene Indexposition nur eine Annäherung entsprechend der jeweiligen
Wenn die width-Eigenschaft der angegebenen Spalte nicht definiert ist, kann der zurückgegebene Wert nur eine Annäherung sein. Die tatsächliche Spaltenbreite wird erst berechnet, nachdem die Spalte per Bildlauf in die Ansicht geholt wurde.
Wenn der angeforderte Elementrenderer nicht sichtbar ist, wird bei jedem Aufrufen dieser Methode ein neuer Elementrenderer erstellt. Der neue Elementrenderer ist nicht sichtbar
Wenn die angegebene Spalte keine explizite Breite aufweist, basiert die Breite dieser Zelle auf dem
Wenn die Rastereigenschaft
Wenn noch keine Spalten der angegebenen Zeile und der ihr vorangehenden Zeilen per Bildlauf in die Ansicht geholt wurden, können die zurückgegebenen Grenzen nur eine Annäherung entsprechend der jeweiligen
Wenn noch keine Spalten oder Zeilen des Rasters per Bildlauf in die Ansicht geholt wurden, kann die zurückgegebene Indexposition nur eine Annäherung entsprechend der jeweiligen
Die folgende Beispielfunktion verwendet diese Methode zur Berechnung eines Vektors sichtbarer GridColumn-Objekte.
function getVisibleColumns():Vector.<GridColumn> { var visibleColumns = new Vector.<GridColumn>; for each (var columnIndex:int in grid.getVisibleColumnIndices()) visibleColumns.push(grid.columns.getItemAt(columnIndex)); return visibleColumns; }
Wenn columnIndex „-1“ ist, wird die gesamte Zeile ungültig gemacht. Entsprechend wird bei einem Wert von „-1“ für
Diese Methode muss aufgerufen werden, wenn eine Änderung an einem Aspekt des Datenprovider-Elements an
Diese Methode wird bei einer direkten Änderung des
Der
Der
Wenn dem
Dieser implizite „selectAll“-Modus wird beendet, wenn eines der folgenden Ereignisse auftritt:
Der
Diese Methode hat keine Auswirkungen, wenn der Zellbereich nicht komplett innerhalb des Rasters enthalten ist.
Jede Indexposition stellt ein Element im Datenprovider dar, das in der Auswahl enthalten sein soll.
Der
Der
Der
Der
Der
Rasterereignisprozeduren müssen mit dieser Eigenschaft die Position des aktuellsten Mouse-Down- oder Tastaturereignisses (ohne Betätigen der Umschalttaste) aufzeichnen, das ein Ende der nächsten möglichen Auswahl mit der Umschalttaste definiert. Die Indexposition des Einfügezeichens definiert das andere Ende.
Rasterereignisprozeduren müssen mit dieser Eigenschaft die Position des aktuellsten Mouse-Down- oder Tastaturereignisses (ohne Betätigen der Umschalttaste) aufzeichnen, das ein Ende der nächsten möglichen Auswahl mit der Umschalttaste definiert. Die Indexposition des Einfügezeichens definiert das andere Ende.
Wenn
Das Festlegen von
Das Festlegen von
GridColumn-Objekte können nur in den
Das Festlegen von
Das Festlegen von
Wenn die Originalgröße des Rasters explizit festgelegt wurde, hat diese Eigenschaft keine Auswirkungen.
Die Eigenschaft hat keine Auswirkungen, wenn einer der folgenden Werte „true“ lautet;
Die Eigenschaft hat keine Auswirkungen, wenn einer der folgenden Werte „true“ lautet;
Die Eigenschaft hat keine Auswirkungen, wenn einer der folgenden Werte „true“ lautet;
Wenn
Wenn die Originalgröße des Rasters explizit festgelegt wurde, hat diese Eigenschaft keine Auswirkungen.
Wenn
Wenn
Wenn der Benutzer die Auswahl durch Interaktion mit dem Steuerelement ändert, löst dieses das
Mit dieser Eigenschaft wird die Auswahl im MXML-Markup initialisiert oder gebunden. Die
Wenn der Benutzer die Auswahl durch Interaktion mit dem Steuerelement ändert, löst dieses das
Mit dieser Eigenschaft wird die Auswahl im MXML-Markup initialisiert oder gebunden. Die
Der Standardwert ist ein leerer
Wenn der Benutzer die Auswahl durch Interaktion mit dem Steuerelement ändert, löst dieses das
Mit dieser Eigenschaft wird die Auswahl im MXML-Markup initialisiert oder gebunden. Die
Wenn der Benutzer die Auswahl durch Interaktion mit dem Steuerelement ändert, löst dieses das
Mit dieser Eigenschaft wird die Auswahl im MXML-Markup initialisiert oder gebunden. Die setSelectedCell()-Methode sollte für programmgesteuerte Auswahlupdates verwendet werden, z. B. beim Schreiben einer Tastatur- oder Mausereignisprozedur.
>Der Standardwert ist ein leerer
Wenn der Benutzer die Auswahl durch Interaktion mit dem Steuerelement ändert, löst dieses das
Mit dieser Eigenschaft wird die Auswahl im MXML-Markup initialisiert oder gebunden. Die
Wenn der Benutzer die Auswahl durch Interaktion mit dem Steuerelement ändert, löst dieses das
Mit dieser Eigenschaft wird die Auswahl im MXML-Markup initialisiert oder gebunden. Die setSelectedCell()-Methode sollte für programmgesteuerte Auswahlupdates verwendet werden, z. B. beim Schreiben einer Tastatur- oder Mausereignisprozedur.
Der Standardwert ist ein leerer
Durch Ändern des selectionMode wird die aktuelle Auswahl gelöscht und der caretRowIndex und caretColumnIndex auf „-1“ zurückgesetzt.
Einschränkung: Wenn das
Wenn der Wert
<s:Application>
tag inherits all of the tag
attributes of its superclass and adds the following tag attributes:
<s:Application Properties applicationDPI=Device dependent" backgroundColor="0xFFFFFF" colorCorrection="default" controlBarContent="null" controlBarLayout="HorizontalLayout" controlBarVisible="true" frameRate="24" pageTitle"" preloader="No default" preloaderChromeColor="No default" resizeForSoftKeyboard=true" runtimeDPIProvider="RuntimeDPIProvider" scriptRecursionLimit="1000" scriptTimeLimit="60" splashScreenImage="" splashScreenMinimumDisplayTime="1000" splashScreenScaleMode="none" usePreloader="true" viewSourceURL="" xmlns:No default="No default" Events applicationComplete="No default" error="No default" />]]>
Der Application-Container weist folgende Standardmerkmale auf:
Hinweis: Diese Eigenschaft kann nicht mithilfe von ActionScript-Code festgelegt werden. Sie muss in MXML-Code festgelegt werden.
Hinweis: Diese Eigenschaft kann nicht mithilfe von ActionScript-Code festgelegt werden. Sie muss in MXML-Code festgelegt werden. Der in MXML-Code eingestellte Code ist für die Verwendung mit einem Werkzeug konzipiert, das die mit SDK verfügbaren HTML-Vorlagen aktualisiert.
Hinweis: Diese Eigenschaft kann nicht mit ActionScript-Code eingestellt werden; sie muss in MXML-Code eingestellt werden.
Verwenden Sie diese Eigenschaft, um den Pfad einer Komponente anzugeben, die eine benutzerdefinierte Fortschrittanzeige definiert. Zum Erstellen einer benutzerdefinierten Fortschrittsanzeige erstellen Sie normalerweise eine Unterklasse der Klasse „SparkDownloadProgressBar“ oder „DownloadProgressBar“, oder Sie erstellen eine Unterklasse der Klasse „flash.display.Sprite“, die die Schnittstelle „mx.preloaders.IPreloaderDisplay“ implementiert.
Hinweis: Diese Eigenschaft kann nicht mithilfe von ActionScript-Code festgelegt werden. Sie muss in MXML-Code festgelegt werden.
Hinweis: Diese Eigenschaft kann nicht mithilfe von ActionScript-Code festgelegt werden. Sie muss in MXML-Code festgelegt werden.
Hinweis: Die Eigenschaft hat nur Auswirkungen, wenn die
Hinweis: Die frameworks\libs\mobile\mobilecomponents.swc-Datei muss dem Bibliothekspfad der Anwendung hinzugefügt werden, um den Begrüßungsbildschirm in einer Desktop-Anwendung zu unterstützen.
Für den Teil der Bühne, der nicht vom Bild verdeckt ist, wird die
Hinweis: Die Eigenschaft hat nur Auswirkungen, wenn die
Hinweis: Die frameworks\libs\mobile\mobilecomponents.swc-Datei muss dem Bibliothekspfad der Anwendung hinzugefügt werden, um den Begrüßungsbildschirm in einer Desktop-Anwendung zu unterstützen.
Hinweis: Diese Eigenschaft kann nicht mithilfe von ActionScript-Code festgelegt werden. Sie muss in MXML-Code festgelegt werden.
Nur die Hauptanwendung kann die
Hinweis: Der Application-Container überwacht die
Sie können eine for-in-Schleife verwenden, um alle Namen und Werte aus dem parameters-Objekt zu extrahieren.
Es sind zwei Parameterquellen verfügbar: der Abfragestring der Anwendungs-URL und der Wert des FlashVars-HTML-Parameters (dies betrifft nur die Hauptanwendung).
Hierzu muss das
Die Standardzuordnungen von Flex lauten wie folgt:
splashScreenImage="@Embed('Default.png')"
Hinweis: Diese Eigenschaft hat nur Auswirkungen, wenn die
Hinweis: Die frameworks\libs\mobile\mobilecomponents.swc-Datei muss dem Bibliothekspfad der Anwendung hinzugefügt werden, um den Begrüßungsbildschirm in einer Desktop-Anwendung zu unterstützen.
Sie müssen die
<Application viewSourceURL="http://path/to/source"> ... </Application>
<s:Button>
tag inherits all of the tag
attributes of its superclass and adds the following tag attributes:
<s:Button Properties emphasized="false" />]]>
Schaltflächen verwenden normalerweise Ereignis-Listener, um Aktionen auszuführen, wenn der Benutzer ein Steuerelement auswählt. Wenn ein Benutzer mit der Maus auf ein Button-Steuerelement klickt und das Button-Steuerelement aktiviert wird, werden ein
Erstellen Sie einen Elementrenderer, um diese Komponente in einer listenbasierten Komponente wie beispielsweise einer Liste oder einem DataGrid zu verwenden. Weitere Informationen zum Erstellen eines Elementrenderers finden Sie unter
Das Button-Steuerelement hat die folgenden Standardmerkmale:
<s:CheckBox>
tag inherits all of the tag
attributes of its superclass and adds the following attributes:
<s:CheckBox Properties symbolColor="0x000000" />]]>
Wenn ein Benutzer auf eine CheckBox-Komponente oder den damit verknüpften Text klickt, stellt die CheckBox-Komponente selbst die
Erstellen Sie einen Elementrenderer, um diese Komponente in einer listenbasierten Komponente wie beispielsweise einer Liste oder einem DataGrid zu verwenden. Weitere Informationen zum Erstellen eines Elementrenderers finden Sie unter
Das CheckBox-Steuerelement verfügt über die folgenden Standardmerkmale:
<s:Group>
tag inherits all of the tag
attributes of its superclass and adds the following tag attributes:
<s:Group Properties blendMode="auto" mxmlContent="null" scaleGridBottom="null" scaleGridLeft="null" scaleGridRight="null" scaleGridTop="null" Events elementAdd="No default" elementRemove="No default" />]]>
Um die Leistung zu verbessern und die Anwendungsgröße zu minimieren, kann dem Group-Container keine Skin zugewiesen werden. Wenn Sie eine Skin anwenden möchten, verwenden Sie stattdessen den SkinnableContainer.
Hinweis: Das Skalierungsraster funktioniert möglicherweise nicht ordnungsgemäß, wenn untergeordnete DisplayObject-Elemente innerhalb der Gruppe vorhanden sind, beispielsweise als Komponente oder andere Gruppe. Wenn die untergeordneten Elemente GraphicElement-Objekte sind, die alle das DisplayObject der Gruppe gemeinsam nutzen, dann funktioniert das Skalierungsraster ordnungsgemäß.
Für das Festlegen einer der folgenden Eigenschaften auf einem untergeordneten GraphicElement ist es erforderlich, dass dieses GraphicElement ein eigenes DisplayObject erstellt, sodass die Skalierungsrastereigenschaften in der Gruppe ignoriert werden.
alpha blendMode other than BlendMode.NORMAL or "auto" colorTransform filters mask matrix rotation scaling 3D properties bounds outside the extent of the Group
Der Group-Container hat die folgenden Standardmerkmale:
Der Wert „auto“ (die Standardeinstellung) bezieht sich speziell auf die Verwendung von blendMode durch die Gruppe. Er gibt als zugrunde liegenden blendMode
Die Inhaltselemente sollten nur IVisualElement-Objekte sein. Ein
Wenn der Inhalt ein Array ist, ändern Sie das Array nicht direkt. Verwenden Sie stattdessen die von der Group-Klasse definierten Methoden.
<s:TextInput>
tag inherits all of the tag
attributes of its superclass and adds the following tag attributes:
<s:TextInput Properties widthInChars="Calculated default" [applies to Spark theme] Events enter="No default" />]]>
Die TextInput-Skin für das Spark-Design verwendet die RichEditableText-Klasse. Das bedeutet, dass das Spark-TextInput-Steuerelement die Text Layout Framework(TLF)-Bibliothek unterstützt, die auf der Flash Text Engine (FTE) aufbaut. In Kombination ermöglichen diese Ebenen die Bearbeitung von Text mit hochwertigen internationalen Typografie- und Layoutfunktionen.
Die TextInput-Skin für das Mobile-Design verwendet die Klasse StyleableStageText anstelle von RichEditableText. Da StyleableStageText native Textfelder verwendet, ermöglicht es eine bessere Texteingabe und Manipulation auf Mobilgeräten, jedoch gibt es
Mithilfe der
Der Text wird mithilfe von CSS-Stilen wie beispielsweise
Für das Spark-Design können Sie die Breite der Steuerung mithilfe der Eigenschaft
Mit der
Für das Mobile-Design legen die Software-Tastatur-spezifischen Eigenschaften, die Eigenschaften
Dieses Steuerelement löst ein
Diese Steuerung ist eine skinfähige Steuerung, deren Standard-Skin entweder eine RichEditableText-Instanz für das Spark-Design oder eine StyleableStageText-Instanz für das Mobile-Design enthält. Sie ist für das Anzeigen und Bearbeiten des Texts zuständig. (Die Skin verarbeitet auch das Zeichnen des Rahmens und des Hintergrunds.) Diese RichEditableText- oder StyleableStageText-Instanz kann als
Für das Spark-Design unterstützt die Spark-TextInput-Steuerung als Ergebnis von RichEditableText mit TLF die Anzeige von LTR-Text (links nach rechts), z. B. Französisch, RTL-Text (rechts nach links), z. B. Arabisch, und bidirektionalem Text, z. B. ein französischer Abschnitt innerhalb eines arabischen Textes. Läuft der Text vorwiegend von rechts nach links, stellen Sie den
Infolge der Verwendung von TLF unterstützt der Spark-TextInput eine unbegrenzte Anzahl von Schritten, die während einer Bearbeitungssitzung rückgängig gemacht und wiederhergestellt werden können. Eine Bearbeitungssitzung beginnt, wenn das Steuerelement den Tastaturfokus erhält und endet, wenn das Steuerelement den Fokus verliert.
Erstellen Sie einen Elementrenderer, um diese Komponente in einer listenbasierten Komponente wie beispielsweise einer Liste oder einem DataGrid zu verwenden. Weitere Informationen zum Erstellen eines Elementrenderers finden Sie unter
Für das Spark-Design verfügt die Texteingabe-Steuerung über folgende Standardmerkmale:
Für das Mobile-Design verfügt die Texteingabe-Steuerung über folgende Standardmerkmale:
Ein em ist eine typografische Maßeinheit und entspricht der Punktgröße. Ein em hat nicht unbedingt genau die Breite des Zeichens „M“, aber in vielen Schriftarten ist das „M“ ungefähr ein em breit. Der
Beispielsweise würden Sie für diese Eigenschaft den Wert „20“ einstellen, wenn Sie festlegen möchten, dass die Breite von TextInput ausreichen soll, um 20 Textzeichen einzugeben.
Diese Eigenschaft wird ignoriert, wenn Sie eine ausdrückliche Breite, eine prozentuale Breite oder sowohl
Diese Eigenschaft wird auch ignoriert, wenn die
Dies wird im Mobile-Design nicht unterstützt.
<s:Form>
tag inherits all the tag
attributes of its superclass and adds no new tag attributes:
<s:Form> ... child tags ... </s:Form>]]>
Die folgende Tabelle beschreibt die Komponenten, die Sie für die Erstellung von Formularen in Flex verwenden:
Wenn ein untergeordnetes Element aus dem Formular entfernt wurde, wird das Wörterbuch nicht aktualisiert.
<s:NumericStepper>
tag inherits all of the tag
attributes of its superclass and adds the following tag attributes:
<s:NumericStepper Properties imeMode="null" maxChars="0" maximum="10" valueFormatFunction="" valueParseFunction="" Styles alignmentBaseline="USE_DOMINANT_BASELINE" baselineShift="0.0" blockProgression="TB" borderAlpha="0.5" borderColor="0x000000" borderVisible="true" breakOpportunity="AUTO" cffHinting="HORIZONTAL_STEM" color="0" contentBackgroundAlpha="1.0" contentBackgroundColor="0xFFFFFF" clearFloats="none" digitCase="DEFAULT" digitWidth="DEFAULT" direction="LTR" dominantBaseline="AUTO" firstBaselineOffset="AUTO" focusedTextSelectionColor="" fontFamily="Arial" fontLookup="DEVICE" fontSize="12" fontStyle="NORMAL" fontWeight="NORMAL" inactiveTextSelection="" justificationRule="AUTO" justificationStyle="AUTO" kerning="AUTO" leadingModel="AUTO" ligatureLevel="COMMON" lineHeight="120%" lineThrough="false" listAutoPadding="40" listStylePosition="outside" listStyleType="disc" locale="en" paragraphEndIndent="0" paragraphSpaceAfter="0" paragraphSpaceBefore="0" paragraphStartIndent="0" renderingMode="CFF" tabStops="null" textAlign="START" textAlignLast="START" textAlpha="1" textDecoration="NONE" textIndent="0" textJustify="INTER_WORD" textRotation="AUTO" trackingLeft="0" trackingRight="0" typographicCase="DEFAULT" unfocusedTextSelectionColor="" whiteSpaceCollapse="COLLAPSE" wordSpacing="100%,50%,150%" />]]>
Das NumericStepper-Steuerelement besteht aus einem einzeiligen Eingabetextfeld und zwei Bildlaufpfeilen, mit denen die möglichen Werte durchlaufen werden können. Mit der Nach-Oben-Taste, der Nach-Unten-Taste und dem Mausrad können Sie sich ebenfalls durch die Werte bewegen. Ein Eingabewert wird übernommen, wenn der Benutzer die Eingabetaste drückt, den Fokus von der Komponente entfernt oder den NumericStepper durch Drücken einer Pfeiltaste oder Aufrufen der
Erstellen Sie einen Elementrenderer, um diese Komponente in einer listenbasierten Komponente wie beispielsweise einer Liste oder einem DataGrid zu verwenden. Weitere Informationen zum Erstellen eines Elementrenderers finden Sie unter
Das NumericStepper-Steuerelement verfügt über die folgenden Standardmerkmale:
spark.skins.spark.NumericStepperTextInputSkin
Die flash.system.IMEConversionMode-Klasse definiert Konstanten für gültige Werte dieser Eigenschaft. Sie können auch
Die Funktion hat folgende Signatur:
funcName(value:Number):String
Die Funktion hat folgende Signatur:
funcName(value:String):Number
<s:Spinner>
tag inherits all of the tag
attributes of its superclass and adds the following tag attributes:
<s:Spinner Properties allowValueWrap="false" Events change="No default" Styles cornerRadius="2" focusAlpha="0.5" focusColor="0x70B2EE" symbolColor="0x000000" />]]>
Eine Spinner-Komponente verfügt über zwei erforderliche Schaltflächen zum Erhöhen bzw. Verringern des aktuellen Werts. Mit der Nach-oben-Taste und der Nach-unten-Taste und dem Mausrad können Sie sich ebenfalls durch die Werte bewegen. Ein Eingabewert wird übernommen, wenn der Benutzer die Eingabetaste drückt und den Fokus von der Komponente entfernt oder durch Drücken einer Pfeiltaste bzw. Aufrufen der
Die Skalierung einer Spinner-Komponente entspricht der Menge an zulässigen Werten für die
Erstellen Sie einen Elementrenderer, um diese Komponente in einer listenbasierten Komponente wie beispielsweise einer Liste oder einem DataGrid zu verwenden. Weitere Informationen zum Erstellen eines Elementrenderers finden Sie unter
Das Spinner-Steuerelement verfügt über die folgenden Standardmerkmale:
Die Komponente kann ihre eigenen Abmessungen (
Eine alternative Option für die Komponente besteht darin, den Maßstab zu ändern. In diesem Fall müssen die untergeordneten Elemente überhaupt nicht geändert werden. Diese Option wird von
Die Komponente ändert ihre Größe immer selbst und ordnet ihre untergeordneten Elemente anschließend in der Originalgröße an, die vom Layout oder Benutzer angegeben wurde.
Die Komponente ändert ihre Größe immer selbst und ordnet anschließend die untergeordneten Elemente in der gemessenen Größe an. Der Maßstab wird an die durch das Layout oder den Benutzer angegebene Größe angepasst.
<s:NavigatorContent>
tag inherits all of the tag
attributes of its superclass and adds the following tag attributes:
<s:NavigatorContent Properties icon="null" label="" />]]>
Verwenden Sie keinen NavigatorContent-Container außerhalb eines MX-Navigator-Containers.
Die Erstellungsrichtlinie des NavigatorContent-Containers basiert auf der Erstellungsrichtlinie seines übergeordneten Navigatorcontainers:
Der NavigatorContent-Container unterstützt keine Warteschlangen für Erstellungsrichtlinien.
Der NavigatorContent-Container weist folgende Standardmerkmale auf:
Beispiel: Wenn dieser Container ein untergeordnetes Element eines TabNavigator ist, wird dieses Symbol auf der entsprechenden Registerkarte angezeigt. Ist dieser Container ein untergeordnetes Element eines Accordion, wird dieses Symbol im entsprechenden Header angezeigt.
Verwenden Sie zum Einbetten des Symbols in der SWF-Datei die @Embed()-Anweisung des MXML-Compilers:
icon="@Embed('filepath')"
Das Bild kann eine Datei in den Formaten JPEG, GIF, PNG, SVG oder SWF sein.
Beispiel: Wenn dieser Container ein untergeordnetes Element eines TabNavigator ist, wird dieser String auf der entsprechenden Registerkarte angezeigt. Ist dieser Container ein untergeordnetes Element eines Accordion, wird dieser String im entsprechenden Header angezeigt.
<s:VSlider>
tag inherits all of the tag
attributes of its superclass and adds no tag attributes:
<s:VSlider/>]]>
Die Schiebereglerleiste ermöglicht einen fortlaufenden Wertebereich zwischen dem Mindest- und dem Höchstwert; Werte können auch durch bestimmte Intervalle zwischen Mindest- und Höchstwert beschränkt werden. Der aktuelle Wert wird eventuell mithilfe eines Datentipps angezeigt.
Das VSlider-Steuerelement verfügt über die folgenden Standardmerkmale:
spark.skins.spark.VSliderThumbSkin
spark.skins.spark.VSliderTrackSkin
<s:ToggleButton>
tag inherits all of the tag
attributes of its superclass and adds no tag attributes:
<s:ToggleButton/>]]>
Sie können diesen Status programmgesteuert mithilfe der Eigenschaft
Erstellen Sie einen Elementrenderer, um diese Komponente in einer listenbasierten Komponente wie beispielsweise einer Liste oder einem DataGrid zu verwenden. Weitere Informationen zum Erstellen eines Elementrenderers finden Sie unter
Das ToggleButton-Steuerelement verfügt über die folgenden Standardmerkmale:
<s:FormHeading>
tag inherits all the tag
attributes of its superclass and adds no new tag attributes:
<s:FormHeading Properties label="" Common Styles alignmentBaseline="baseline" baselineShift="0" cffHinting="0.0" color="0x000000" digitCase="default" digitWidth="default" direction="ltr" dominantBaseline="auto" fontFamily="Arial" fontLookup="embeddedCFF" fontSize="12" fontStyle="normal" fontWeight="normal" justificationRule="auto" justificationStyle="auto" kerning="false" ligatureLevel="common" lineBreak="toFit" lineHeight="120%" lineThrough="false%" locale="en" paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0" renderingMode="cff" textAlign="start" textAlignLast="start" textAlpha="1" textDecoration="start" textJustify="interWord" trackingLeft="0" trackingRight="00" typographicCase="default" verticalAlign="top" Mobile Styles leading="2" letterSpacing="0" />]]>
<s:HScrollBar>
tag inherits all of the tag
attributes of its superclass and adds the following tag attributes:
<s:HScrollBar Properties viewport="" />]]>
Obwohl das HScrollBar-Steuerelement auch als allein stehendes Steuerelement verwendet werden kann, wird es üblicherweise zusammen mit anderen Elementen in einer Komponentengruppe für die Bildlauffunktion verwendet.
Das HScrollBar-Steuerelement hat die folgenden Standardmerkmale:
spark.skins.spark.HScrollBarThumbSkin
spark.skins.spark.HScrollBarTrackSkin
Der Bildlauf erfolgt in horizontaler Richtung gemäß der für dieses Ereignis standardmäßig festgelegten
Das Aufrufen der
Ist die
Wenn
<s:SkinnablePopUpContainer>
tag inherits all of the tag
attributes of its superclass and adds the following tag attributes:
<s:SkinnablePopUpContainer Events close="No default" open="No default" />]]>
Sie erstellen kein SkinnablePopUpContainer-Container als Teil des normalen Layouts des übergeordneten Containers. Stattdessen wird er als Popup-Fenster über dem übergeordneten Element angezeigt. Daher erstellen Sie ihn nicht direkt im MXML-Code der Anwendung.
Stattdessen erstellen Sie ihn als MXML-Komponente, häufig in einer separaten MXML-Datei. Erstellen Sie zum Anzeigen der Komponente eine Instanz der MXML-Komponente und rufen Sie die
Rufen Sie zum Schließen der Komponente die
Der SkinnablePopUpContainer befindet sich zu Beginn im
Der SkinnablePopUpContainer-Container weist folgende Standardmerkmale auf:
Dieses Ereignis wird ausgelöst, wenn der Container vom
Das Ereignis stellt einen Mechanismus zum Übergeben von commit-Informationen vom Container an einen Ereignis-Listener bereit. Ein typisches Verwendungsszenario ist das Erstellen eines Dialogfelds mit mehreren Optionen und einer Schaltfläche zum Abbrechen. Wenn eine gültige Option ausgewählt wurde, schließen Sie das Popup, indem Sie die
Dieses Ereignis wird ausgelöst, wenn der Container vom
Verwenden Sie die
<s:DropDownList>
tag inherits all of the tag
attributes of its superclass and adds the following tag attributes:
<s:DropDownList Properties prompt="" typicalItem="null" Events closed="No default" open="No default" />]]>
Das DropDownList-Steuerelement besteht aus der Ankerschaltfläche, Eingabeaufforderungsbereich und Dropdownliste. Verwenden Sie die Ankerschaltfläche, um die Dropdownliste zu öffnen und zu schließen. Im Eingabeaufforderungsbereich wird ein String für die Eingabeaufforderung oder das ausgewählte Element in der Dropdownliste angezeigt.
Bei geöffneter Dropdownliste:
Hinweis: Die listenbasierten Spark-Steuerelemente (die Spark ListBase-Klasse und ihre Unterklassen wie ButtonBar, ComboBox, DropDownList, List und TabBar) unterstützen nicht die Verwendung der BasicLayout-Klasse als Wert der
Erstellen Sie einen Elementrenderer, um diese Komponente in einer listenbasierten Komponente wie beispielsweise einer Liste oder einem DataGrid zu verwenden. Weitere Informationen zum Erstellen eines Elementrenderers finden Sie unter
Das DropDownList-Steuerelement hat die folgenden Standardmerkmale:
Der Container verwendet das typische Datenelement und den damit verknüpften Elementrenderer, um die Standardgröße der untergeordneten Elemente des Containers zu bestimmen. Durch die Definition des typischen Elements muss der Container nicht die Größe von jedem untergeordneten Element festlegen, das auf dem Bildschirm gezeichnet wird.
Durch Festlegen dieser Eigenschaft wird die
Einschränkung: Wenn das
Hinweis: Durch Festlegen von
<s:GridColumnHeaderGroup>
tag inherits all of the tag
attributes of its superclass and adds the following tag attributes:
<s:GridColumnHeaderGroup Properties columnSeperator="null" dataGrid="null" downColumnIndex="-1" headerRenderer="null" hoverColumnIndex="-1" visibleSortIndicatorIndices="empty Vector.<int>" Styles paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0" separatorAffordance="5" Events gridClick="No default" gridDoubleClick="No default" gridMouseDown="No default" gridMouseDrag="No default" gridMouseUp="No default" gridMouseRollOut="No default" gridMouseRollOver="No default" separatorClick="No default" separatorDoubleClick="No default" separatorMouseDrag="No default" separatorMouseUp="No default" separatorMouseRollOut="No default" separatorMouseRollOver="No default" />]]>
Überschriften werden von der durch die
Wenn noch keine sichtbaren Spalten vor der angegebenen Spalte per Bildlauf in die Ansicht geholt wurden, können die zurückgegebenen Grenzen nur eine Annäherung entsprechend allen
Wenn noch keine Spalten oder Zeilen des Rasters per Bildlauf in die Ansicht geholt wurden, kann die zurückgegebene Indexposition nur eine Annäherung entsprechend dem
Wenn der angeforderte Spaltenüberschriftsrenderer nicht sichtbar ist, wird bei jedem Aufruf dieser Methode ein neuer Spaltenüberschriftsrenderer erstellt. Der neue Elementrenderer ist nicht sichtbar
Die Breite des zurückgegebenen Renderers entspricht der von Elementrenderern, die von DataGrid/getItemRendererAt() zurückgegeben wurden.
Ein Trennzeichen „überlappt“ die angegebene Position, wenn die x-Koordinate innerhalb der
Die Indexposition des Trennzeichens entspricht der Indexposition der Spalte links, vorausgesetzt, dass die
Wenn noch keine Spalten oder Zeilen des Rasters per Bildlauf in die Ansicht geholt wurden, kann die zurückgegebene Indexposition nur eine Annäherung entsprechend dem
visibleSortIndicatorIndices.indexOf(columnIndex) != -1
Wenn
Wenn
<s:PopUpAnchor>
tag inherits all of the tag
attributes of its superclass and adds the following tag attributes:
<s:PopUpAnchor Properties displayPopUp="false" popUp="" popUpHeightMatchesAnchorHeight="false" popUpPosition="topLeft" popUpWidthMatchesAnchorWidth="false" />]]>
Das PopUpAnchor-Steuerelement verfügt über die folgenden Standardmerkmale:
Standardmäßig ist der Dropindikator für ein Spark-Steuerelement eine durchgehende Linie, die sich über die Breite des Steuerelements erstreckt. Sie erhalten einen angepassten Dropindikator, indem Sie eine angepasste Skinklasse für das Ablageziel erstellen. Erstellen Sie im <fx:Declarations>-Bereich Ihrer Skinklasse einen Skinteil namens
<s:List>
tag inherits all of the tag
attributes of its superclass and adds the following tag attributes:
<s:List Properties allowMultipleSelection="false" dragEnabled="false" dragMoveEnabled="false" dropEnabled="false" selectedIndices="null" selectedItems="null" useVirtualLayout="true" Styles alternatingItemColors="undefined" borderAlpha="1.0" borderColor="0#CCCCCC" borderVisible="true" contentBackgroundColor="0xFFFFFF" downColor="0xA8C6EE" dragIndicator="ListItemDragProxy" dropIndicatorSkin="ListDropIndicator" rollOverColor="0xCEDBEF" selectionColor="0xA8C6EE" symbolColor="0x000000" />]]>
Hinweis: Die listenbasierten Spark-Steuerelemente (die Spark ListBase-Klasse und ihre Unterklassen wie ButtonBar, ComboBox, DropDownList, List und TabBar) unterstützen nicht die Verwendung der BasicLayout-Klasse als Wert der
Erstellen Sie einen Elementrenderer, um diese Komponente in einer listenbasierten Komponente wie beispielsweise einer Liste oder einem DataGrid zu verwenden. Weitere Informationen zum Erstellen eines Elementrenderers finden Sie unter
Das List-Steuerelement verfügt über die folgenden Standardmerkmale:
Diese Methode wird für eine Drag & Drop-Kopie verwendet.
Wenn Sie die
Wenn Sie die
Drag & Drop-Funktion wird auf mobilen Geräten nicht unterstützt, bei denen
Drag & Drop-Funktion wird auf mobilen Geräten nicht unterstützt, bei denen
Wenn Sie diese Eigenschaft auf
Drag & Drop-Funktion wird auf mobilen Geräten nicht unterstützt, bei denen
Eine von „Aus“ abweichende Einstellung dieser Eigenschaft kann zu einer sofortigen Änderung der Bildlaufposition führen, damit ein bestimmtes Element in die richtige Position „springen“ kann. Diese Änderung der Bildlaufposition ist nicht animiert.
Wenn durch Einstellen von
Wenn durch Einstellen von
Hinweis: Diese Eigenschaft ähnelt der von Flash Player verwendeten
Diese Eigenschaft ist normalerweise
Ist dieser Wert eingestellt und die Listenskin enthält einen Scroller-Skinteil, dann wird der Wert nach unten auf den Scroller übertragen.
Ist der Wert
Bei
<s:BorderContainer>
tag inherits all the tag attributes
of its superclass, and adds the following tag attributes:
<s:BorderContainer Properties backgroundFill="null" borderStroke="null" Styles backgroundImage="undefined" backgroundImageFillMode="scale" borderAlpha="1.0" borderColor="0xB7BABC" borderStyle="solid" borderVisible="true" borderWeight="1" cornerRadius="0" dropShadowVisible="false" />]]>
Hinweis: Da Sie CSS-Stile und Klasseneigenschaften verwenden, um das Aussehen des BorderContainer zu steuern, erstellen Sie normalerweise keine benutzerdefinierte Skin für ihn. Wenn Sie eine benutzerdefinierte Skin erstellen, muss Ihre Skin-Klasse die zur Steuerung des Container-Aussehens dienenden Stile anwenden.
Standardmäßig ist der Rahmenstrich gerundet. Wenn Sie keine runden Ecken wünschen, legen Sie für die
Der BorderContainer-Container hat die folgenden Standardmerkmale:
Im folgenden Beispiel stellt die
<s:BorderContainer cornerRadius="10"> <s:backgroundFill> <s:SolidColor color="red" alpha="1"/> </s:backgroundFill> </s:BorderContainer>
Im folgenden Beispiel wird die
<s:BorderContainer cornerRadius="10"> <s:borderStroke> <mx:SolidColorStroke color="black" weight="3"/> </s:borderStroke> </s:BorderContainer>
Die Hostkomponente des Elementrenderers kann mithilfe der
Für Steuerelemente wie „List“ und „ButtonBar“ können Sie mithilfe der Eigenschaften
<s:VideoPlayer>
tag inherits all of the tag
attributes of its superclass and adds the following tag attributes:
<s:VideoPlayer Properties autoDisplayFirstFrame="true" autoPlay="true" autoRewind="true" loop="false" muted="false" pauseWhenHidden="true" scaleMode="letterbox" source="" volume="1" Events bytesLoadedChange="No default" complete="No default" currentTimeChange="No default" durationChange="No default" mediaPlayerStateChange="No default" Styles alignmentBaseline="baseline" baselineShift="0" cffHinting="0.0" color="0x000000" digitCase="default" digitWidth="default" direction="ltr" dominantBaseline="auto" dropShadowVisible="true" fontFamily="Arial" fontLookup="device" fontSize="12" fontStyle="normal" fontWeight="normal" justificationRule="auto" justificationStyle="auto" kerning="false" ligatureLevel="common" lineHeight="120%" lineThrough="false%" locale="en" renderingMode="cff" textAlign="start" textAlignLast="start" textAlpha="1" textDecoration="start" textJustify="interWord" trackingLeft="0" trackingRight="00" typographicCase="default" />]]>
Das VideoPlayer-Steuerelement verfügt über die folgenden Standardmerkmale:
Dieses Ereignis wird möglicherweise nicht ausgelöst, wenn die Quelle auf null gesetzt wurde oder ein Wiedergabefehler auftritt.
Dieses Ereignis wird möglicherweise nicht ausgelöst, wenn die Quelle auf null gesetzt wurde oder ein Wiedergabefehler auftritt.
Dieses Ereignis wird möglicherweise nicht ausgelöst, wenn die Quelle auf null gesetzt wurde oder ein Wiedergabefehler auftritt.
<s:ButtonBar>
tag inherits all of the tag
attributes of its superclass and adds the following tag attributes:
<s:ButtonBar />]]>
Normalerweise wird eine Schaltflächenleiste für das Gruppieren von miteinander in Beziehung stehenden Schaltflächen verwendet. Diese erhalten dadurch ein einheitliches Aussehen und Navigationsverhalten. Außerdem wird durch die Standardschaltflächen die Logik des
Das ButtonBar-Steuerelement erzeugt Button-Steuerelemente auf Basis der Werte seiner
Erstellen Sie einen Elementrenderer, um diese Komponente in einer listenbasierten Komponente wie beispielsweise einer Liste oder einem DataGrid zu verwenden. Weitere Informationen zum Erstellen eines Elementrenderers finden Sie unter
Für Nicht-Mobilprojekte legen Sie mit dem ButtonBar-Steuerelement das aktive untergeordnete Element eines ViewStack-Containers fest, wie im folgenden Beispiel beschrieben:
Hinweis: Die listenbasierten Spark-Steuerelemente (die Spark ListBase-Klasse und ihre Unterklassen wie ButtonBar, ComboBox, DropDownList, List und TabBar) unterstützen nicht die Verwendung der BasicLayout-Klasse als Wert der
<s:ButtonBar dataProvider="{myViewStack}" requireSelection="true" /> <mx:ViewStack id="myViewStack" borderStyle="solid"> <s:NavigatorContent id="search" label="Search"> <s:Label text="Search Screen"/> </s:NavigatorContent> <s:NavigatorContent id="custInfo" label="Customer Info"> <s:Label text="Customer Info"/> </s:NavigatorContent> <s:NavigatorContent id="accountInfo" label="Account Info"> <s:Label text="Account Info"/> </s:NavigatorContent> </mx:ViewStack>
Das ButtonBar-Steuerelement hat die folgenden Standardmerkmale:
<s:Label>
tag inherits all of the tag
attributes of its superclass and adds the following tag attributes:
<s:Label Properties fontContext="" Styles alignmentBaseline="baseline" baselineShift="0" cffHinting="0.0" color="0x000000" digitCase="default" digitWidth="default" direction="ltr" dominantBaseline="auto" fontFamily="Arial" fontLookup="embeddedCFF" fontSize="12" fontStyle="normal" fontWeight="normal" justificationRule="auto" justificationStyle="auto" kerning="false" ligatureLevel="common" lineBreak="toFit" lineHeight="120%" lineThrough="false" locale="en" paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0" renderingMode="cff" textAlign="start" textAlignLast="start" textAlpha="1" textDecoration="start" textJustify="interWord" trackingLeft="0" trackingRight="00" typographicCase="default" verticalAlign="top" />]]>
Label verwendet die Flash Text Engine (FTE) im Flash Player für die Darstellung hochwertiger, internationaler Typographie. Da Label schnell und einfach ist, eignet es sich besonders zum Rendern vieler kleiner Objekte mit nichtinteraktivem Text, wie beispielsweise Elementrenderer und Beschriftungen in Schaltflächenskins.
Die Spark-Architektur bietet Benutzern, die ausschließlich die für sie erforderlichen Funktionen verwenden möchten, die drei grundlegenden Steuerelemente Label, RichText und RichEditableText. Label ist das zwar schnellste und einfachste Steuerelement, hat jedoch eingeschränkte Funktionen: keine komplexe Formatierung, keine Bildläufe, keine Auswahl, keine Bearbeitung und keine Hyperlinks. RichText und RichEditableText basieren auf der Text Layout Framework (TLF)-Bibliothek und nicht auf FTE. Mit RichText können Sie HTML-ähnlichen Text mit komplexer Formatierung anzeigen. Das Steuerelement ist jedoch nicht interaktiv. RichEditableText ist das langsamste und umfangreichste Steuerelement und bietet viele Möglichkeiten: Bildläufe mit virtualisierten TextLines, Auswahl, Bearbeitung, Hyperlinks und von URLs geladene Bilder. Es empfiehlt sich, das schnellste Steuerelement zu verwenden, das Ihre Anforderungen erfüllt.
Das Spark Label-Steuerelement ähnelt dem MX Label-Steuerelement, mx.controls.Label. Die wichtigsten Unterschiede sind die folgenden:
Bei Spark Label werden die drei folgenden Zeichenfolgen als ausdrückliche Zeilenumbrüche erkannt: CR (
Wenn Sie keine Breite für Label angeben, richtet sich die Breite der Beschriftung nach der Länge der längsten Zeile, die durch ausdrücklichen Zeilenumbruch bestimmt wird.
Wenn Sie irgendeine Breite definieren, wird der angegebene Text am rechten Rand der Grenzen der Komponente umbrochen, da der Standardwert des
Zum Deaktivieren des automatischen Zeilenumbruchs stellen Sie den
Wenn der vorhandene Text die verfügbare Anzeigegröße überschreitet, kann Label den Text für Sie kürzen. Beim Kürzen von Text wird überlanger Text durch Kürzungszeichen ersetzt, wie z. B. „...“. Siehe die geerbten Eigenschaften
Sie können den Zeilenabstand mit dem
Standardmäßig hat ein Label keinen Hintergrund. Sie können jedoch mithilfe der
Mit Label können Sie Texte anzeigen, die sowohl von links nach rechts (z. B. Französisch) als auch von rechts nach links (z. B. Arabisch) verlaufen. Auch die Anzeige von bidirektionalem Text wird unterstützt. Sie können also einen Satz auf Französisch in einem arabischen Text anzeigen. Läuft der Text vorwiegend von rechts nach links, stellen Sie den
Label verwendet die TextBlock-Klasse der Flash Text Engine, um mindestens ein TextLine-Objekt zu erstellen und den Textstring in dem durch die CSS-Stile bestimmten Format statisch anzuzeigen. Aus Gründen der Leistungsfähigkeit enthalten dessen TextLines keine Informationen über einzelne Glyphen. Weitere Informationen finden Sie unter flash.text.engine.TextLineValidity.STATIC.
Das Label-Steuerelement verfügt über die folgenden Standardeigenschaften:
<s:RichEditableText>
tag inherits all of the tag
attributes of its superclass and adds the following tag attributes:
<s:RichEditableText Properties clipAndEnableScrolling="false|true" contentHeight="Calculated default" contentWidth="Calculated default" displayAsPassword="false" editable="true" heightInLines="NaN" horizontalScrollPosition="0" imeMode="null" maxChars="0" multiline="true" restrict="null" selectable="true" selectionActivePosition="-1" selectionAnchorPosition="-1" selectionHighlighting="TextSelectionHighlighting.WHEN_FOCUSED" text="" textFlow="TextFlow" typicalText=null verticalScrollPosition="0" widthInChars="NaN" Events change="No default" changing="No default" enter="No default" selectionChange="No default" />]]>
Rich Text kann klickbare Hyperlinks bzw. Verknüpfungen und eingebundene Grafiken enthalten, die entweder eingebettet oder von URLs geladen werden.
RichEditableText hat zwar keine Bildlaufleisten, implementiert jedoch die IViewport-Schnittstelle zum Ausführen von programmgesteuerten Bildläufen, sodass die Steuerung durch einen Scroller möglich ist, der Bildlaufleisten bereitstellt. Außerdem werden vertikale Bildläufe mit dem Mausrad unterstützt.
Es bietet keine Benutzeroberfläche zum Ändern der Textformatierung. Es bietet jedoch APIs, mit denen Sie Text programmgesteuert formatieren können. Diese ermöglichen es beispielsweise, eine Fettdruck-Schaltfläche zu erstellen, durch die ausgewählter Text fett formatiert wird.
Diese Klasse wird in den Skins der Spark-Versionen von TextInput und TextArea verwendet. (TextInput bietet im Gegensatz zu TextArea nicht die Möglichkeit, Rich Text zu verarbeiten.) RichEditableText hat standardmäßig einen transparenten Hintergrund und unterstützt das Zeichnen von Rahmen nicht.
RichEditableText verwendet die Text Layout Framework (TLF)-Bibliothek, welche wiederum auf der neuen Flash Text Engine (FTE) in Flash Player 10 beruht. In Kombination ermöglichen diese Ebenen die Bearbeitung von Text mit hochwertigen internationalen Typografie- und Layoutfunktionen.
Die Spark-Architektur bietet drei grundlegende Textsteuerelemente: Label, RichText und RichEditableText. Label ist das schnellste und einfachste Steuerelement, da es nicht TLF, sondern FTE verwendet. Es hat eingeschränkte Funktionen: kein Rich Text, keine Bildläufe, keine Auswahl und keine Bearbeitung. Mit RichText können Sie Rich Text mit komplexem Layout anzeigen. Das Steuerelement ist dennoch nicht interaktiv. RichEditableText ist das umfangreichste Steuerelement und bietet die meisten Möglichkeiten von TLF. In der Regel sollten Sie das schnellste Textsteuerelement verwenden, das Ihre Anforderungen erfüllt.
RichEditableText ähnelt der UITextField-Klasse, die in MX-Komponenten zum Einsatz kommt. Bei dieser Klasse wurde weder FTE noch TLF verwendet. Vielmehr wurde die ältere TextField-Klasse erweitert.
Die wichtigsten Unterschiede zwischen UITextField und RichEditableText sind die folgenden:
Bei RichEditableText kommt das objektorientierte TLF-Modell von Rich Text zum Einsatz. Hierbei werden Textlayoutelemente wie Unterteilungen, Absätze, Spannen, Hyperlinks und Bilder zur Laufzeit durch ActionScript-Objekte dargestellt, welche programmgesteuert verwendet und bearbeitet werden können. Das zentrale Objekt in TLF zur Darstellung von Rich Text ist ein TextFlow. Sie geben also Rich Text an, um ein RichEditableText-Steuerelement anzuzeigen, indem Sie die
Beim Kompilieren können Sie in TLF-Markup-Tags das RichEditableText-Tag einfügen. Gehen Sie dazu wie im folgenden Beispiel vor:
<s:RichEditableText>Hello <s:span fontWeight="bold">World!</s:span></s:RichEditableText>In diesem Beispiel legt der MXML-Compiler die
Die Standardtextformatierung wird mithilfe von CSS-Stilen wie beispielsweise
Sie können den Abstand zwischen den Zeilen mit dem
Standardmäßig wird die Größe von RichEditableText automatisch angepasst: zu Beginn ist es sehr klein, wenn noch kein Text vorhanden ist, dann wird die Breite während der Eingabe bis auf
Mit den
Wenn Sie irgendeine Breite definieren (ausdrücklich oder prozentual oder mit
Mit der
Mit der
Um das Bearbeiten von Text zu unterbinden, setzen Sie die
Da RichEditableText TLF verwendet, können Sie Texte anzeigen, die sowohl von links nach rechts (z. B. Französisch) als auch von rechts nach links (z. B. Arabisch) verlaufen. Auch die Anzeige von bidirektionalem Text wird unterstützt – das heißt, Sie können einen Satz auf Französisch in einem arabischen Text anzeigen. Läuft der Text vorwiegend von rechts nach links, stellen Sie den
Infolge der Verwendung von TLF unterstützt RichEditableText eine unbegrenzte Anzahl von Schritten, die während einer Bearbeitungssitzung rückgängig gemacht und wiederhergestellt werden können. Eine Bearbeitungssitzung beginnt, wenn die Komponente den Tastaturfokus erhält, und endet, wenn sie den Fokus verliert.
RichEditableText nutzt die TextContainerManager-Klasse von TLF, um Textanzeige, Bildläufe, Auswahl, Bearbeitung und Kontextmenü zu verarbeiten.
Erstellen Sie einen Elementrenderer, um diese Komponente in einer listenbasierten Komponente wie beispielsweise einer Liste oder einem DataGrid zu verwenden. Weitere Informationen zum Erstellen eines Elementrenderers finden Sie unter
Nach dem neuen Text wird anschließend eine Einfügemarke eingefügt. Falls nötig erfolgt ein Bildlauf des Texts, um sicherzustellen, dass die Einfügemarke sichtbar ist.
Wird ein Format nicht für den gesamten Bereich einheitlich eingestellt, ist sein Wert
Sie können einen Vektor von Strings angeben, der die Namen der für Sie wichtigen Formate enthält. Wenn Sie dies nicht tun, werden alle Formate berechnet.
Wenn Sie keinen Bereich angeben, wird der ausgewählte Bereich verwendet.
Wurde ein Bereich ausgewählt, wird der ausgewählte Text durch den neuen Text ersetzt. Wenn eine Einfügemarke vorhanden war, wird der neue Text dort eingefügt.
Nach dem neuen Text wird anschließend eine Einfügemarke eingefügt. Falls nötig erfolgt ein Bildlauf des Texts, um sicherzustellen, dass die Einfügemarke sichtbar ist.
Ist eine der Positionen negativ, wird die Auswahl des Textbereichs aufgehoben.
Die unterstützten Formate entsprechen denjenigen in TextLayoutFormat. Der Wert
Im folgenden Beispiel werden
var textLayoutFormat:TextLayoutFormat = new TextLayoutFormat(); textLayoutFormat.fontSize = 12; textLayoutFormat.color = 0xFF0000; myRET.setFormatOfRange(textLayoutFormat);
Hinweis: Wenn Sie die Ergebnisse von
Wenn Sie ein Format festlegen möchten, das auf den gesamten Text angewendet werden soll, sollten Sie
Im folgenden Beispiel werden
myRET.setStyle("fontSize", 12); myRET.setStyle("color", 0xFF0000);
Da das Text Layout Framework aus Gründen der Leistungsfähigkeit TextLines virtualisiert, ist diese Höhe zunächst eine Schätzung, wenn die Komponente nicht den gesamten Text anzeigen kann. Wenn Sie einen Bildlauf bis zum Ende des Texts durchführen, werden alle TextLines zusammengesetzt und die
Sie können vertikal durch den Text blättern, indem Sie für
Da das Text Layout Framework aus Gründen der Leistungsfähigkeit TextLines virtualisiert, ist diese Breite zunächst eine Schätzung, wenn die Komponente nicht den gesamten Text anzeigen kann. Wenn Sie einen Bildlauf bis zum Ende des Texts durchführen, werden alle TextLines zusammengesetzt und die
Sie können horizontal durch den Text blättern, indem Sie für
Die
<s:RichEditableText>Hello <s:span fontWeight="bold"/>World</s:span></s:RichEditableText>Damit können Sie den String und das SpanElement, die Sie als Inhalt angeben, zur Erstellung eines TextFlows nutzen.
Diese Eigenschaft hat den Typ „Object“, da Sie sie als String, FlowElement oder ein Array von Strings und FlowElements festlegen können. Im obigen Beispiel geben Sie an, dass der Inhalt ein Array mit zwei Elementen ist. Das erste Element ist der String „Hello“ und das zweite Element ist ein SpanElement mit dem Text „World“ in Fettdruck.
Unabhängig davon, wie Sie den Inhalt angeben, wird er in TextFlow konvertiert, und wenn Sie diese Eigenschaft abrufen, erhalten Sie den resultierenden TextFlow.
Wenn Sie Rich Text-Inhalte zur Laufzeit abrufen und einstellen möchten, empfiehlt Adobe, die
Bei
Wenn diese Eigenschaft
Die Formatierungsstile des Steuerelements, wie beispielsweise
Beispielsweise könnten Sie für diese Eigenschaft den Wert „5“ einstellen, wenn Sie festlegen möchten, dass die Höhe von RichEditableText ausreichen soll, um fünf Zeilen Text anzuzeigen.
Wenn diese Eigenschaft auf den Standardwert
Diese Eigenschaft wird ignoriert, wenn Sie eine ausdrückliche Höhe, eine prozentuale Höhe oder sowohl
Diese Eigenschaft wird auch ignoriert, wenn die
Die
Da sowohl
Sie können horizontal durch den Text blättern, indem Sie für
Die flash.system.IMEConversionMode-Klasse definiert Konstanten für gültige Werte dieser Eigenschaft. Sie können auch
Bei
Wenn der Text auswählbar ist, können Sie ihn aus dem Steuerelement kopieren.
Diese Eigenschaft wird ignoriert, wenn die
Die aktive Position kann entweder dem Anfang oder dem Ende der Auswahl entsprechen.
Wenn Sie beispielsweise durch Ziehen und Auswählen Position 12 bis Position 8 markieren, ist
Der Wert „-1“ bedeutet „nicht festgelegt“.
Die Ankerposition kann entweder dem Anfang oder dem Ende der Auswahl entsprechen.
Wenn Sie beispielsweise durch Ziehen und Auswählen Position 12 bis Position 8 markieren, ist
Der Wert „-1“ bedeutet „nicht festgelegt“.
Die möglichen Werte werden durch die spark.components.TextSelectionHighlighting-Klasse festgelegt. Gültige Werte sind
Ein TextFlow ist die wichtigste Klasse im Text Layout Framework (TLF). Es handelt sich um den Stamm einer Struktur von FlowElements, die Rich Text-Inhalt darstellen.
Normalerweise erstellen Sie einen TextFlow mithilfe von TLF-Markup unter Verwendung der
Das Einstellen dieser Eigenschaft wirkt sich auf die
Wenn Sie den
Wenn Sie den
Wenn der Text ausdrücklich definierte Zeilenumbrüche enthält, wie beispielsweise CR („\r“), LF („\n“) oder CR+LF („\r\n“), wird der Inhalt auf einen TextFlow mit mehreren Absätzen mit jeweils einem span eingestellt.
Das Einstellen dieser Eigenschaft wirkt sich auch auf die Eigenschaften aus, mit denen die Bildlaufposition des Steuerelements und die Textauswahl angegeben werden. Dadurch werden
Um ein TextFlow-Objekt in TLF-Markup zu konvertieren, verwenden Sie
Ein einzelner TextFlow kann nicht von mehreren Instanzen von RichEditableText gemeinsam verwendet werden. Um Text in einer zweiten Instanz anzuzeigen, erstellen Sie einen zweiten TextFlow, indem Sie entweder
Das Einstellen dieser Eigenschaft wirkt sich auf die
Wenn Sie den
Wenn Sie den
Wenn der Text ausdrücklich definierte Zeilenumbrüche enthält, wie beispielsweise CR („\r“), LF („\n“) oder CR+LF („\r\n“), wird der Inhalt auf einen TextFlow mit mehreren Absätzen mit jeweils einem span eingestellt.
Wenn Sie den
Das Einstellen dieser Eigenschaft wirkt sich auch auf die Eigenschaften aus, mit denen die Bildlaufposition des Steuerelements und die Textauswahl angegeben werden.
Diese Eigenschaft wird ignoriert, wenn Sie eine ausdrückliche Breite, eine prozentuale Breite oder sowohl
Wenn diese Eigenschaft verwendet wird, werden die
Sie können vertikal durch den Text blättern, indem Sie für
Ein em ist eine typografische Maßeinheit und entspricht der Punktgröße. Ein em hat nicht unbedingt genau die Breite des Zeichens „M“, aber in vielen Schriftarten ist das „M“ ungefähr ein em breit. Der
Beispielsweise würden Sie für diese Eigenschaft den Wert „20“ einstellen, wenn Sie festlegen möchten, dass die Breite von RichEditableText ausreichen soll, um 20 Textzeichen anzuzeigen.
Wenn diese Eigenschaft auf den Standardwert
Diese Eigenschaft wird ignoriert, wenn Sie eine ausdrückliche Breite, eine prozentuale Breite oder sowohl
Diese Eigenschaft wird auch ignoriert, wenn die
Die
Da sowohl
Flex schließt das Fenster nicht automatisch. Um das „Schließen“-Symbol zu unterstützen, müssen Sie eine Prozedur für das
Fokus ist für diesen Skinteil deaktiviert.
Um den TitleWindow-Container zu ziehen, klicken Sie auf den Bereich der Titelleiste und halten Sie die Maustaste gedrückt, verschieben Sie dann die Maus. Erstellen Sie eine benutzerdefinierte Skinklasse, um den Verschiebebereich zu ändern.
<s:TitleWindow>
tag inherits all of the tag
attributes of its superclass and adds the following tag attributes:
<s:TitleWindow> Events close="No default" windowMove="No default" windowMoveEnd="No default" windowMoveStart="No default" windowMoving="No default" </s:TitleWindow>]]>
Das TitleWindow ist als Popup-Fenster vorgesehen. Erstellen Sie kein TitleWindow in MXML als Teil einer Anwendung. Stattdessen erstellen Sie normalerweise eine auf der TitleWindow-Klasse basierende benutzerdefinierte MXML-Komponente und verwenden dann die
Der TitleWindow-Container weist folgende Merkmale für die Standardgrößen auf:
<s:TabBar>
tag inherits all of the tag
attributes of its superclass and adds the following tag attributes:
<s:TabBar Styles cornerRadius="4" />]]>
Die Registerkartenreihe wird durch die
Mit dem TabBar-Steuerelement legen Sie das aktive untergeordnete Element eines ViewStack-Containers fest, wie im folgenden Beispiel beschrieben:
Hinweis: Die listenbasierten Spark-Steuerelemente (die Spark ListBase-Klasse und ihre Unterklassen wie ButtonBar, ComboBox, DropDownList, List und TabBar) unterstützen nicht die Verwendung der BasicLayout-Klasse als Wert der
<s:TabBar dataProvider="{myViewStack}"/> <mx:ViewStack id="myViewStack" borderStyle="solid"> <s:NavigatorContent id="search" label="Search"> <s:Label text="Search Screen"/> </s:NavigatorContent> <s:NavigatorContent id="custInfo" label="Customer Info"> <s:Label text="Customer Info"/> </s:NavigatorContent> <s:NavigatorContent id="accountInfo" label="Account Info"> <s:Label text="Account Info"/> </s:NavigatorContent> </mx:ViewStack>
Der TabBar-Container weist folgende Standardmerkmale auf:
<s:RadioButton>
tag inherits all of the tag
attributes of its superclass, and adds the following tag attributes:
<s:RadioButton Properties enabled="" group="the automatically created default RadioButtonGroup" groupName="radioGroup" value="null" />]]>
Die RadioButton-Gruppe kann auf eine durch das
Erstellen Sie einen Elementrenderer, um diese Komponente in einer listenbasierten Komponente wie beispielsweise einer Liste oder einem DataGrid zu verwenden. Weitere Informationen zum Erstellen eines Elementrenderers finden Sie unter
Die RadioButton-Komponente verfügt über die folgenden Standardmerkmale:
Beim Erstellen von Optionsschaltern, die in einer RadioButtonGroup enthalten sein sollen, wird empfohlen, entweder die
Die Hostkomponente des Elementrenderers kann mithilfe der
Für Steuerelemente wie „List“ und „ButtonBar“ können Sie mithilfe der Eigenschaften
<s:Panel>
tag inherits all of the tag
attributes of its superclass and adds the following tag attributes:
<s:Panel Properties controlBarContent="null" controlBarLayout="HorizontalLayout" controlBarVisible="true" title="" Styles borderAlpha="0.5" borderColor="0" borderVisible="true" cornerRadius="0" dropShadowVisible="true" > ... child tags ... </s:Panel>]]>
Der Panel-Container weist folgende Standardmerkmale auf:
Hinweis: Der Panel-Container überwacht die
<s:HGroup>
tag inherits all of the tag
attributes of its superclass and adds the following tag attributes:
<s:HGroup Properties columnWidth="no default" gap="6" horizontalAlign="left" paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0" requestedColumnCount="-1" requestedMaxColumnCount="-1" requestedMinColumnCount="-1" variableColumnWidth"true" verticalAlign="top" />]]>
Der HGroup-Container weist folgende Standardmerkmale auf:
Die Klasse, die den Elementrenderer definiert, muss die IItemRenderer-Schnittstelle implementieren.
Am Schluss legt diese Methode die
<s:FormItem>
tag inherits all the tag
attributes of its superclass and adds no new tag attributes:
<s:FormItem Properties helpContent="null" label="" required="false" sequenceLabel="" Common Styles errorIndicatorSource="assets/ErrorIndicator.png" requiredIndicatorSource="assets/RequiredIndicator.png" Mobile Styles leading="2" letterSpacing="0" />]]>
Diese Eigenschaft steuert nur den Status der Skin. Sie müssen dem untergeordneten Objekt einen Validator zuweisen, wenn Sie eine Überprüfung der Eingaben verlangen.
<s:SkinnableContainer>
tag inherits all of the tag
attributes of its superclass and adds the following tag attributes:
<s:SkinnableContainer Properties autoLayout="true" creationPolicy="auto" layout="BasicLayout" Styles accentColor="0x0099FF" alignmentBaseline="useDominantBaseline" alternatingItemColors="" backgroundAlpha="1.0" backgroundColor="0xFFFFFF" baselineShift="0.0" blockProgression="TB" breakOpportunity="auto" cffHinting="horizontal_stem" clearFloats="none" color="0" contentBackgroundAlpha="" contentBackgroundColor="" digitCase="default" digitWidth="default" direction="LTR" dominantBaseline="auto" downColor="" firstBaselineOffset="auto" focusColor="" focusedTextSelectionColor="" fontFamily="Arial" fontLookup="device" fontSize="12" fontStyle="normal" fontWeight="normal" inactiveTextSelectionColor="0xE8E8E8" justificationRule="auto" justificationStyle="auto" kerning="auto" leadingModel="auto" ligatureLevel="common" lineHeight="120%" lineThrough="false" listAutoPadding="40" listStylePosition="outside" listStyleType="disc" locale="en" paragraphEndIndent="0" paragraphSpaceAfter="0" paragraphSpaceBefore="0" paragraphStartIndent="0" renderingMode="CFF" rollOverColor="" symbolColor="" tabStops="null" textAlign="start" textAlignLast="start" textAlpha="1" textDecoration="none" textIndent="0" textJustify="inter_word" textRotation="auto" trackingLeft="0" trackingRight="0" typographicCase="default" unfocusedTextSelectionColor="" verticalScrollPolicy="auto" whiteSpaceCollapse="collapse" wordSpacing="100%,50%,150%" Events elementAdd="No default" elementRemove="No default" />]]>
Um die Leistung zu verbessern und die Anwendungsgröße zu minimieren, können Sie den Group-Container verwenden. Dem Group-Container kann keine Skin zugewiesen werden.
Der SkinnableContainer-Container weist folgende Standardmerkmale auf:
Überschreiben Sie diese Funktion, um dem Teil ein bestimmtes Verhalten zuzuweisen. Wenn Sie das Verhalten in Bezug auf einen Skinteil überschreiben möchten, das von einer Basisklasse vererbt wurde, rufen Sie nicht die
Überschreiben Sie diese Funktion, um das Verhalten vom Teil zu entfernen.
<s:RichText>
tag inherits all of the tag
attributes of its superclass and adds the following tag attributes:
<s:RichText Properties fontContext="IFlexModuleFactory" luminosityClip="false" luminosityInvert="false" maskType="MaskType.CLIP" textFlow="TextFlow" />]]>
Aus Gründen der Leistungsfähigkeit werden Bildlauf, Auswahl, Bearbeitung, klickbare Hyperlinks und von URLs geladene Bilder nicht unterstützt. Wenn Sie diese Funktionen benutzen möchten, verwenden Sie die RichEditableText-Klasse.
RichText verwendet die Text Layout Framework (TLF)-Bibliothek, welche wiederum auf der Flash Text Engine (FTE) in Flash Player 10 beruht. Diese Kombination ermöglicht die Bearbeitung von Rich Text-Layouts mit hochwertiger internationaler Typographie.
Die Spark-Architektur bietet drei grundlegende Textsteuerelemente: Label, RichText und RichEditableText. Label ist das schnellste und einfachste Steuerelement, da es nicht TLF, sondern FTE verwendet. Es hat eingeschränkte Funktionen: kein Rich Text, keine Bildläufe, keine Auswahl und keine Bearbeitung. Mit RichText können Sie Rich Text mit komplexem Layout anzeigen. Das Steuerelement ist dennoch nicht interaktiv. RichEditableText ist das umfangreichste Steuerelement und bietet die meisten Möglichkeiten von TLF. Es empfiehlt sich, das Textsteuerelement mit dem geringsten Umfang, der Ihre Anforderungen noch erfüllt, zu verwenden.
RichText ähnelt dem MX-Steuerelement mx.controls.Text. Das Textsteuerelement verwendet nicht TLF, sondern die ältere TextField-Klasse zum Anzeigen von Text.
Die wichtigsten Unterschiede zwischen RichText und Text sind die folgenden:
Bei RichText kommt das objektorientierte TLF-Modell von Rich Text zum Einsatz. Hierbei werden Textlayoutelemente wie Bereiche, Absätze, Spannen und Bilder zur Laufzeit durch ActionScript-Objekte dargestellt, welche programmgesteuert verwendet und bearbeitet werden können. Das zentrale Objekt in TLF zur Darstellung von Rich Text ist ein TextFlow. Sie geben also an, was Rich Text anzeigen soll, indem Sie die
Beim Kompilieren können Sie in TLF-Markup-Tags das RichText-Tag einfügen. Gehen Sie dazu wie im folgenden Beispiel vor:
<s:RichText>Hello <s:span fontWeight="bold">World!</s:span></s:RichText>In diesem Beispiel legt der MXML-Compiler die
Die Standardtextformatierung wird mithilfe von CSS-Stilen wie beispielsweise
Sie können den Abstand zwischen den Zeilen mit dem
Wenn Sie keine Breite für RichText angeben, richtet sich die Breite der Beschriftung nach der Länge der längsten Zeile, die durch ausdrücklichen Zeilenumbruch bestimmt wird.
Wenn Sie eine Breite definieren, wird der Text am rechten Rand der Komponente umbrochen. Wenn mehr Text vorhanden ist als in den Anzeigebereich passt, wird der Text abgeschnitten. Wenn Sie den
Wenn der vorhandene Text die verfügbare Anzeigegröße überschreitet, kann RichText den Text für Sie kürzen. Beim Kürzen von Text wird überlanger Text durch Kürzungszeichen ersetzt, wie z. B. „...“. Siehe die geerbten Eigenschaften
Standardmäßig hat RichText keinen Hintergrund. Sie können jedoch mithilfe der
Da RichText TLF verwendet, können Sie Texte anzeigen, die sowohl von links nach rechts (z. B. Französisch) als auch von rechts nach links (z. B. Arabisch) verlaufen. Auch die Anzeige von bidirektionalem Text wird unterstützt. Sie können also einen Satz auf Französisch in einem arabischen Text anzeigen. Läuft der Text vorwiegend von rechts nach links, stellen Sie den
RichText verwendet die StringTextFlowFactory- und TextFlowTextLineFactory-Klassen von TLF, um ein oder mehrere TextLine-Objekte zu erstellen und den Text statisch anzuzeigen. Aus Gründen der Leistungsfähigkeit enthalten dessen TextLines keine Informationen über einzelne Glyphen. Weitere Informationen finden Sie unter der TextLineValidity-Klasse.
Erstellen Sie einen Elementrenderer, um diese Komponente in einer listenbasierten Komponente wie beispielsweise einer Liste oder einem DataGrid zu verwenden. Weitere Informationen zum Erstellen eines Elementrenderers finden Sie unter
Die
<s:RichText>Hello <s:span fontWeight="bold"/>World</s:span></s:RichText>Damit können Sie den String und das SpanElement, die Sie als Inhalt angeben, zur Erstellung eines TextFlows nutzen.
Diese Eigenschaft hat den Typ „Object“, da Sie sie als String, FlowElement oder ein Array von Strings und FlowElements festlegen können. Im obigen Beispiel geben Sie an, dass der Inhalt ein Array mit zwei Elementen ist. Das erste Element ist der String „Hello“ und das zweite Element ist ein SpanElement mit dem Text „World“ in Fettdruck.
Unabhängig davon, wie Sie den Inhalt angeben, wird er in TextFlow konvertiert, und wenn Sie diese Eigenschaft abrufen, erhalten Sie den resultierenden TextFlow.
Wenn Sie Rich Text-Inhalte zur Laufzeit abrufen und einstellen möchten, empfiehlt Adobe, die
Der maskType definiert, wie die Maske auf die Komponente angewendet wird.
Mögliche Werte sind
Schnittmasken
Beim Maskieren im Schnittmodus wird die Schnittmaske auf 1 Bit reduziert. Das bedeutet, dass die Maske die Deckkraft eines Pixels des Quellinhalts nicht beeinflusst. Entweder bleibt der Wert unverändert, wenn das entsprechende Pixel der Maske einen Alphawert ungleich null hat, oder es wird voll transparent, wenn der Wert des Maskenpixels einen Alphawert von null hat.
Wenn Sie Schnittmasken verwenden, werden nur die tatsächlichen, durch die Maske definierten Pfad- und Formvektoren sowie Füllungen verwendet, um die Auswirkung auf den Quellinhalt zu bestimmen. Striche und Bitmapfilter, die für die Maske definiert wurden, werden ignoriert. Jeder in der Maske gefüllte Bereich gilt als gefüllt und gibt den Quellinhalt wieder. Typ und Parameter der Füllung sind nicht relevant. Eine durchgehende Farbfüllung, Verlaufsfläche oder Bitmapfüllung einer Maske gibt stets den darunter liegenden Quellinhalt wieder, unabhängig von den Alphawerten der Maskenfüllung.
BitmapGraphics werden bei Verwendung in einer Schnittmaske als mit einer Bitmap gefüllte Rechtecke betrachtet. Folglich ist der Alphakanal der Quellbitmap nicht relevant, wenn er Teil einer Maske ist. Die Bitmap wirkt sich auf die Maske genauso aus wie ein Rechteck mit durchgehende Farbfüllung entsprechender Abmessungen.
Alphamasken
Im Alphamodus wird die Deckkraft eines jeden Pixels des Quellinhalts mit der Deckkraft des entsprechenden Bereichs der Maske multipliziert. D. h., ein Pixel des Quellinhalts mit einer Deckkraft von 1, das mit einem Bereich mit der Deckkraft 5 maskiert ist, hat im Ergebnis eine Deckkraft von 5. Ein Quellpixel mit einer Deckkraft von 0,8, das mit einem Bereich mit der Deckkraft 0,5 maskiert ist, hat im Ergebnis eine Deckkraft von 0,4.
Konzeptionell entspricht die Verwendung von Alphamasken der Wiedergabe des transformierten Masken- und Quellinhalts auf separaten RGBA-Oberflächen und der Multiplikation des Alphakanals des Maskeninhalts in den Alphakanal des Quellinhalts. Der gesamte Maskeninhalt wird auf der Oberfläche wiedergegeben, bevor er auf der Oberfläche des Quellinhalts zusammengesetzt wird. Dies führt dazu, dass alle FXG-Merkmale wie Striche, Bitmapfilter und Füllungsdeckkraft sich auf den endgültigen zusammengesetzten Inhalt auswirken.
Im Alphamodus wird der Alphakanal der Bitmapdaten wie üblich im Alphakanal der Maske berücksichtigt und wirkt sich auf den am Ende wiedergegebenen Inhalt aus. Dies gilt sowohl für BitmapGraphics als auch für Bitmap-gefüllte Formen und Pfade.
Luminanzmasken
Eine Luminanzmaske, manchmal digitale Maske genannt, funktioniert ganz ähnlich wie eine Alphamaske, außer dass sowohl die Deckkraft als auch der RGB-Farbwert der Pixel des Quellinhalts mit der Deckkraft und dem RGB-Farbwert des entsprechenden Bereichs der Maske multipliziert wird.
Konzeptionell entspricht die Verwendung von Luminanzmasken der Wiedergabe des transformierten Masken- und Quellinhalts auf separaten RGBA-Oberflächen und der Multiplikation des Alphakanals und des RGB-Farbwerts des Maskeninhalts in den Alphakanal und RGB-Farbwert des Quellinhalts. Der gesamte Maskeninhalt wird auf der Oberfläche wiedergegeben, bevor er auf der Oberfläche des Quellinhalts zusammengesetzt wird. Dies führt dazu, dass alle FXG-Merkmale wie Striche, Bitmapfilter und Füllungsdeckkraft sich auf den endgültigen zusammengesetzten Inhalt auswirken.
Luminanzmasken stehen nicht originär in Flash zur Verfügung, sondern in Tools wie Adobe Illustrator und Adobe Photoshop. Um bei Inhalten, die in Flash wiedergegeben werden, die visuelle Wirkung einer Luminanzmaske zu erzielen, instanziieren Grafikelemente, die eine Luminanzmaske angeben, einen Shaderfilter, der das Aussehen einer Luminanzmaske in Adobe Creative Suite-Tools imitiert.
Von Luminanzmasken maskierte Objekte können Eigenschaften zur Steuerung der RGB-Farbwerte und der Beschneidung der Maske festlegen. Weitere Informationen finden Sie bei den Attributen luminosityInvert und luminosityClip.
Ein TextFlow ist die wichtigste Klasse im Text Layout Framework (TLF). Es handelt sich um den Stamm einer Struktur von FlowElements, die Rich Text-Inhalt darstellen.
Normalerweise erstellen Sie einen TextFlow mithilfe von TLF-Markup unter Verwendung der
Das Einstellen dieser Eigenschaft wirkt sich auf die
Wenn Sie den
Wenn Sie den
Wenn der Text ausdrücklich definierte Zeilenumbrüche enthält, wie beispielsweise CR (
Um ein TextFlow-Objekt in TLF-Markup zu konvertieren, verwenden Sie das von der
<s:SkinnableDataContainer>
tag inherits all of the tag
attributes of its superclass and adds the following tag attributes:
<s:SkinnableDataContainer Properties autoLayout="true" dataProvider="null" itemRenderer="null" itemRendererFunction="null" layout="VerticalLayout" typicalItem="null" Styles alignmentBaseline="useDominantBaseline" baselineShift="0.0" cffHinting="horizontal_stem" color="0" digitCase="default" digitWidth="default" direction="LTR" dominantBaseline="auto" focusAlpha="0.55" focusColor="" focusThickness="2" fontFamily="Arial" fontLookup="device" fontSize="12" fontStyle="normal" fontWeight="normal" justificationRule="auto" justificationStyle="auto" kerning="auto" ligatureLevel="common" lineHeight="120%" lineThrough="false" locale="en" renderingMode="CFF" textAlign="start" textAlignLast="start" textAlpha="1" textJustify="inter_word" trackingLeft="0" trackingRight="0" typographicCase="default" Events rendererAdd="No default" rendererRemove="No default" />]]>
Die SkinnableDataContainer-Klasse verwendet untergeordnete Datenelemente oder visuelle Elemente, die die IVisualElement-Schnittstelle implementieren und DisplayObjects sind. Datenelemente können einfache Datenelemente wie String- und Number-Objekte und komplexere Datenelemente wie Object- und XMLNode-Objekte sein. Obwohl diese Container visuelle Elemente enthalten können, sind oft nur untergeordnete Datenelemente enthalten.
Ein Elementrenderer definiert die visuelle Darstellung des Datenelements im Container. Der Elementrenderer konvertiert das Datenelement in ein Format, das vom Container angezeigt werden kann. Sie müssen einen Elementrenderer an einen SkinnableDataContainer übergeben, um die Datenelemente ordnungsgemäß zu rendern.
Wenn Sie einen Container von Datenelementen, aber keine Skin benötigen, ist die Verwendung von einer DataGroup (für die keine Skins möglich sind) zu empfehlen, um die Leistung und Anwendungsgröße zu verbessern.
Der SkinnableDataContainer-Container weist folgende Standardmerkmale auf:
<s:Scroller>
tag inherits all of the tag
attributes of its superclass and adds the following tag attributes:
<s:Scroller Properties measuredSizeIncludesScrollBars="true" minViewportInset="0" viewport="null" Styles alignmentBaseline="use_dominant_baseline" alternatingItemColors="" baselineShift="0.0" blockProgression="TB" breakOpportunity="auto" cffHinting="horizontal_stem" clearFloats="none" color="0" contentBackgroundAlpha="" contentBackgroundColor="" digitCase="default" digitWidth="default" direction="LTR" dominantBaseline="auto" downColor="" firstBaselineOffset="auto" focusColor="" focusedTextSelectionColor="" fontFamily="Arial" fontLookup="device" fontSize="12" fontStyle="normal" fontWeight="normal" horizontalScrollPolicy="auto" inactiveTextSelection="" justificationRule="auto" justificationStyle="auto" kerning="auto" leadingModel="auto" ligatureLevel="common" lineHeight="120%" lineThrough="false" listAutoPadding="40" listStylePosition="outside" listStyleType="disc" locale="en" paragraphEndIndent="0" paragraphSpaceAfter="0" paragraphSpaceBefore="0" paragraphStartIndent="0" renderingMode="CFF" rollOverColor="" symbolColor="" tabStops="null" textAlign="start" textAlignLast="start" textAlpha="1" textDecoration="none" textIndent="0" textJustify="inter_word" textRotation="auto" trackingLeft="0" trackingRight="0" typographicCase="default" unfocusedTextSelectionColor="" verticalScrollPolicy="auto" whiteSpaceCollapse="collapse" wordSpacing="100%,50%,150%" />]]>
Die Spark-Group-, DataGroup- und RichEditableText-Komponenten implementieren die IViewport-Schnittstelle und können als untergeordnete Elemente des Scroller-Steuerelements verwendet werden, wie im folgenden Beispiel gezeigt wird:
<s:Scroller width="100" height="100"> <s:Group> <mx:Image width="300" height="400" source="@Embed(source='assets/logo.jpg')"/> </s:Group> </s:Scroller>
Die Größe des Image-Steuerelements wird höher eingestellt als die des dazugehörigen übergeordneten Group-Containers. Standardmäßig überschreitet das untergeordnete Element die Begrenzungen des übergeordneten Containers. Anstatt zuzulassen, dass das untergeordnete Element die Begrenzungen des übergeordneten Containers überschreitet, gibt der Scroller an, dass das untergeordnete Objekt auf die Begrenzungen beschnitten wird und Bildlaufleisten angezeigt werden.
Nicht alle Spark-Container implementieren die IViewPort-Schnittstelle. Deshalb können solche Container wie BorderContainer- und SkinnableContainer-Container nicht als direkt untergeordnetes Element der Scroller-Komponente verwendet werden. Dennoch können alle Spark-Container eine Scroller-Komponente als untergeordnete Komponente haben. Beispiel: Um Bildlaufleisten in einem untergeordneten Element des Spark-BorderContainer zu verwenden, schließen Sie das untergeordnete Element in eine Scroller-Komponente ein.
Um den gesamten BorderContainer bildlauffähig zu machen, schließen Sie ihn in einen Group-Container ein. Machen Sie anschließend den Group-Container zu einem untergeordneten Element der Scroller-Komponente. Bei skinfähigen Spark-Containern, die die IViewport-Schnittstelle nicht implementieren, können Sie auch eine benutzerdefinierte Skin, die die Scroller-Komponente enthält, für den Container erstellen.
Die IViewport-Schnittstelle definiert einen Viewport für die Komponenten, die ihn implementieren. Bei einem Viewport handelt es sich um eine rechteckige Untergruppe des Bereichs eines Containers, den Sie anzeigen möchten, und nicht um die Anzeige des gesamten Containers. Die Bildlaufleisten steuern die Eigenschaften
Sie können Bildlaufleisten mit ausdrücklichen Einstellungen für den Viewport des Containers kombinieren. Die Viewport-Einstellungen bestimmen die anfängliche Position des Viewports. Anschließend können Sie ihn mit den Bildlaufleisten bewegen, wie im folgenden Beispiel demonstriert wird:
<s:Scroller width="100" height="100"> <s:Group horizontalScrollPosition="50" verticalScrollPosition="50"> <mx:Image width="300" height="400" source="@Embed(source='assets/logo.jpg')"/> </s:Group> </s:Scroller>
Die Bildlaufleisten werden entsprechend der Richtlinie für vertikale und horizontale Bildlaufleisten angezeigt, die auf
Das Scroller-Skinlayout kann nicht geändert werden. Es ist bedingungslos auf eine private Layoutimplementierung eingestellt, die die Bildlaufrichtlinien verarbeitet. Skins der Scroller-Komponente können nur Ersetzungsbildlaufleisten bereitstellen. Damit Sie das Layout eines Viewports und dessen Bildlaufleisten besser steuern können, fügen Sie die Scroller-Komponente, statt sie zu verwenden, zu einer
Das Scroller-Steuerelement hat die folgenden Standardmerkmale:
Wenn es eine sichtbare verticalScrollBar gibt, wird für den Viewport standardmäßig ein vertikaler Bildlauf in
Wenn es dagegen eine sichtbare horizontalScrollBar gibt, wird für den Viewport standardmäßig ein horizontaler Bildlauf in
Das Aufrufen der
Komponenten wie TextArea, die ihren Inhalt neu umbrechen, damit er in die verfügbare Breite oder Höhe passt, können diese Eigenschaft verwenden, um ihre gemessene Größe zu stabilisieren. Standardmäßig wird ein TextArea durch seine
Bei Komponenten, deren Inhalt nicht umbrochen wird, wie dies beispielsweise bei Elementen einer normalen Liste der Fall ist, ist das Standardverhalten vorteilhaft, da es die Wahrscheinlichkeit verringert, dass der Inhalt einer Komponente von einer Bildlaufleiste verdeckt wird.
Der Viewport wird zur Skin der Scroller-Komponente hinzugefügt, die sowohl den Viewport als auch die Bildlaufleisten anordnet. Wenn die
<s:VGroup>
tag inherits all of the tag
attributes of its superclass and adds the following tag attributes:
<s:VGroup Properties gap="6" horizontalAlign="left" paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0" requestedMaxRowCount="-1" requestedMinRowCount="-1" requestedRowCount"-1" rowHeight="no default" variableRowHeight="true" verticalAlign="top" />]]>
Der VGroup-Container weist folgende Standardmerkmale auf:
<s:ComboBox>
tag inherits all of the tag
attributes of its superclass and adds the following tag attributes:
<s:ComboBox Properties itemMatchingFunction="null" labelToItemFunction="null" maxChars="0" openOnInput="true" prompt="null" restrict="" Styles paddingBottom="3" paddingLeft="3" paddingRight="3" paddingTop="5" />]]>
Beim ComboBox-Steuerelement wird der Eingabeaufforderungsbereich mithilfe des TextInput-Steuerelements implementiert. Dagegen erfolgt beim DropdownList-Steuerelement die Implementierung mithilfe des Label-Steuerelements. Deshalb können Benutzer den Eingabeaufforderungsbereich bearbeiten und einen Wert eingeben, der von den vordefinierten Optionen abweicht.
Beispielsweise lässt das DropdownList-Steuerelement nur zu, dass die Benutzer eine Auswahl aus einer Liste vordefinierter Objekte treffen. Beim ComboBox-Steuerelement dagegen kann der Benutzer entweder ein vordefiniertes Objekt auswählen oder ein neues im Eingabeaufforderungsbereich eingeben. Ihre Anwendung kann erkennen, dass ein neues Objekt eingegeben wurde und dieses optional zu den Listenelementen des Steuerelements hinzufügen.
Außerdem durchsucht das ComboBox-Steuerelement die Objektliste, während der Benutzer Zeichen im Eingabeaufforderungsbereich eingibt. Bei der Zeicheneingabe durch den Benutzer wird der Dropdownbereich des Steuerelements geöffnet. Dann erfolgt ein Bildlauf zum passendsten Treffer in der Objektliste; dieser wird hervorgehoben.
Erstellen Sie einen Elementrenderer, um diese Komponente in einer listenbasierten Komponente wie beispielsweise einer Liste oder einem DataGrid zu verwenden. Weitere Informationen zum Erstellen eines Elementrenderers finden Sie unter
Hinweis: Die listenbasierten Spark-Steuerelemente (die Spark ListBase-Klasse und ihre Unterklassen wie ButtonBar, ComboBox, DropDownList, List und TabBar) unterstützen nicht die Verwendung der BasicLayout-Klasse als Wert der
Das ComboBox-Steuerelement verfügt über die folgenden Standardeigenschaften:
spark.skins.spark.ComboBoxTextInputSkin
Die Funktion, auf die diese Eigenschaft verweist, gibt bei Eingabe eines Strings den Index der Elemente im Datenprovider zurück, die der Eingabe entsprechen. Die Elemente werden als Vektor zurückgegeben.<int> der Indizes im Datenprovider.
Die Rückruffunktion muss über die folgende Signatur verfügen:
function myMatchingFunction(comboBox:ComboBox, inputText:String):Vector.<int>
Wenn der Wert der Eigenschaft „null“ ist, findet ComboBox die Treffer mithilfe des Standardalgorithmus. Wenn ein Eingabestring der Länge n mit den ersten n Zeichen eines Objekts (ohne Berücksichtigung der Groß-/Kleinschreibung) übereinstimmt, handelt es sich standardmäßig um einen Treffer für dieses Objekt. Beispielsweise gilt „aRiz“ als Übereinstimmung für „Arizona“, „riz“ jedoch nicht.
Um die Suche zu deaktivieren, erstellen Sie eine Rückruffunktion, die einen leeren Vektor zurückgibt.<int>.
Text für die Eingabeaufforderung wird angezeigt, wenn das Steuerelement zuerst erstellt wird. Text für die Eingabeaufforderung wird ausgeblendet, wenn das Steuerelement den Fokus erhält, wenn der Eingabetext nicht null ist oder wenn ein Element in der Liste ausgewählt ist. Text für die Eingabeaufforderung wird wieder eingeblendet, wenn das Steuerelement den Fokus verliert, aber nur, wenn kein Text eingegeben wurde (wenn der Wert des Textfelds „null“ oder ein leerer String ist).
Sie können den Stil des Texts für die Eingabeaufforderung mit CSS ändern. Wenn das Steuerelement Text für die Eingabeaufforderung enthält und nicht deaktiviert ist, wird der Stil durch den
Die folgende Beispiel-CSS ändert die Farbe des Texts der Eingabeaufforderung in den TextInput-Steuerelementen. Das ComboBox-Steuerelement verwendet ein TextInput-Steuerelement als Unterkomponente für den Text der Eingabeaufforderung und die Eingabe: damit wird der Text der Eingabeaufforderung geändert, wenn Sie diese CSS verwendet:
@namespace s "library://ns.adobe.com/flex/spark"; s|TextInput:normalWithPrompt { color: #CCCCFF; }
Die Rückruffunktion muss über die folgende Signatur verfügen:
function myLabelToItem(value:String):Object
Dabei ist
Die Standardrückruffunktion gibt
<s:Image>
tag inherits all of the tag
attributes of its superclass and adds the following tag attributes:
<s:Image Properties clearOnLoad="true" contentLoader="null" contentLoaderGrouping="null" fillMode="scale" horizontalAlign="center" preliminaryHeight="NaN" preliminaryWidth="NaN" scaleMode="letterbox" smooth="false" source="null verticalAlign="middle" Styles backgroundAlpha="NaN" backgroundColor="NaN" enableLoadingState="false" smoothingQuality="default" Events complete="No default" httpStatus="No default" ioError="No default" progress="No default" ready="No default" securityError="No default" />]]>
Hinweis: Flex umfasst auch das SWFLoader-Steuerelement zum Laden von Flex-Anwendungen. Das Image-Steuerelement wird üblicherweise zum Laden von statischen Grafikdateien und SWF-Dateien verwendet, das SWFLoader-Steuerelement zum Laden von Flex-Anwendungen. Das Image-Steuerelement ist auch für die Verwendung in benutzerdefinierten Elementrenderern und Elementeditoren ausgelegt.
Hinweis: Flex enthält auch die BitmapImage-Klasse. Diese Klasse dient zum Einbetten von Bildern in Skins und FXG-Komponenten.
Eingebettete Bilder werden automatisch geladen, da sie bereits Teil einer Flex-SWF-Datei sind. Sie erhöhen jedoch die Größe Ihrer Anwendung und verlangsamen den Initialisierungsprozess der Anwendung. Eingebettete Bilder machen es auch nötig, dass die Anwendungen neu kompiliert werden, wenn sich Bilddateien ändern.
Alternativ zum Einbetten von Ressourcen können diese zur Laufzeit geladen werden. Ressourcen können vom lokalen Dateisystem, auf dem die SWF-Datei ausgeführt wird, geladen werden oder von einer Remote-Quelle, üblicherweise über eine HTTP-Anfrage oder ein Netzwerk. Diese Bilder sind unabhängig von Ihrer Flex-Anwendung und können daher geändert werden, ohne einen erneuten Kompiliervorgang auszulösen, solange die Namen der geänderten Bilder gleich bleiben. Die referenzierten Bilder verlangsamen die ursprüngliche Ladezeit Ihrer Anwendung nicht. Beim Verwenden und Laden der Bilder in Flash Player oder AIR kann es jedoch zu Verzögerungen kommen.
Die standardmäßige Skin bietet eine chromlose Bildskin mit einem auf einer generischen Fortschrittsleiste basierenden Preloader und einem Bildsymbol für ungültigen Inhalt.
Erstellen Sie einen Elementrenderer, um diese Komponente in einer listenbasierten Komponente wie beispielsweise einer Liste oder einem DataGrid zu verwenden. Weitere Informationen zum Erstellen eines Elementrenderers finden Sie unter
Das Image-Steuerelement verfügt über die folgenden Standardeigenschaften:
Hinweis: Bei Inhalt, der über Loader geladen wird, werden
Hinweis: Es ist nicht sicher, dass das
Hinweis: Bei Inhalt, der über Loader geladen wird, werden
<s:DataGroup>
tag inherits all of the tag
attributes of its superclass and adds the following tag attributes:
<s:DataGroup Properties dataProvider="null" itemRenderer="null" itemRendererFunction="null" typicalItem="null" Events rendererAdd="No default" rendererRemove="No default" />]]>
Die DataGroup-Klasse verwendet untergeordnete Datenelemente oder visuelle Elemente, die die IVisualElement-Schnittstelle implementieren und DisplayObjects sind. Datenelemente können einfache Datenelemente wie String- und Number-Objekte und komplexere Datenelemente wie Object- und XMLNode-Objekte sein. Obwohl diese Container visuelle Elemente enthalten können, sind oft nur untergeordnete Datenelemente enthalten.
Ein Elementrenderer definiert die visuelle Darstellung des Datenelements im Container. Der Elementrenderer konvertiert das Datenelement in ein Format, das vom Container angezeigt werden kann. Sie müssen einen Elementrenderer an einen DataGroup-Container übergeben, um die Datenelemente ordnungsgemäß zu rendern.
Um die Leistung zu verbessern und die Anwendungsgröße zu minimieren, kann dem DataGroup-Container keine Skin zugewiesen werden. Wenn Sie eine Skin anwenden möchten, verwenden Sie stattdessen den SkinnableDataContainer.
Der DataGroup-Container hat die folgenden Standardmerkmale:
Wenn
Die den zurückgegebenen Indexpositionen jeweils entsprechende Indexposition kann mithilfe der
Die Reihenfolge der Objekte im zurückgegebenen Vektor wird nicht garantiert.
Die Klassen „VerticalLayout“ und „HorizontalLayout“ stellen bindbare
Diese Methode wird bei einer direkten Änderung des
Bei einem Datenelement wird die
Am Schluss legt diese Methode die
In der Flex-Architektur sind zahlreiche IList-Implementierungen enthalten, einschließlich ArrayCollection, ArrayList und XMLListCollection.
function myItemRendererFunction(item:Object):IFactory
Der Container verwendet das typische Datenelement und den damit verknüpften Elementrenderer, um die Standardgröße der untergeordneten Elemente des Containers zu bestimmen. Durch die Definition des typischen Elements muss der Container nicht die Größe von jedem untergeordneten Element festlegen, das auf dem Bildschirm gezeichnet wird.
Durch Festlegen dieser Eigenschaft wird die
Beschränkung: Wenn das
<s:HSlider>
tag inherits all of the tag
attributes of its superclass and adds no tag attributes:
<s:HSlider/>]]>
Die Schiebereglerleiste ermöglicht einen fortlaufenden Wertebereich zwischen dem Mindest- und dem Höchstwert; Werte können auch durch bestimmte Intervalle zwischen Mindest- und Höchstwert beschränkt werden. Die Schiebereglerleiste kann einen Datentipp für die Anzeige des aktuellen Werts enthalten.
Das HSlider-Steuerelement verfügt über die folgenden Standardmerkmale:
spark.skins.spark.HSliderThumbSkin
spark.skins.spark.HSliderTrackSkin
<s:DataGrid>
tag inherits all of the tag
attributes of its superclass and adds the following tag attributes:
<s:DataGrid Properties columns="null" dataProvider="null" dataTipField="null" dataTipFunction="null" editable="false" editorColumnIndex="-1" editorRowIndex="-1" imeMode="null" itemEditor="null" itemRenderer="DefaultGridItemRenderer" preserveSelection="true" requestedColumnCount="-1" requestedMaxRowCount="-1" requestedMinColumnCount="-1" requestedMinRowCount="-1" requestedRowCount="-1" requireSelection="false" resizeableColumns="true" rowHeight="Calculated default" selectedCell="null" selectedCells="empty Vector.<CellPosition>" selectedIndex="null" selectedIndices="empty Vector.<CellPosition>" selectedItem="null" selectedItems="empty Vector.<Object>" selectionMode="singleRow" showDataTips="false" sortableColumns="true" typicalItem="null" variableRowHeight="false" Styles alignmentBaseline="useDominantBaseline" baselineShift="0.0" cffHinting="horizontalStem" color="0" defaultGridItemEditor="null" digitCase="default" digitWidth="default" direction="ltr" dominantBaseline="auto" fontFamily="Arial" fontLookup="device" fontSize="12" fontStyle="normal" fontWeight="normal" justificationRule="auto" justificationStyle="auto" kerning="auto" ligatureLevel="common" lineHeight="120%" lineThrough="false" locale="en" renderingMode="cff" stretchCursor="cursorStretch symbol from Assets.swf" textAlign="start" textAlignLast="start" textAlpha="1" textDecoration="none" textJustify="interWord" trackingLeft="0" trackingRight="0" typographicCase="default" verticalScrollPolicy="auto" Styles for the Spark Theme alternatingRowColors="undefined" borderAlpha="1.0" borderColor="0x696969" borderVisible="true" caretColor="0x0167FF" contentBackgroundAlpha="1.0" contentBackgroundColor="0xFFFFFF" rollOverColor="0xCEDBEF" selectionColor="0xA8C6EE" symbolColor="0x000000" Styles for the Mobile Theme leading="0" letterSpacing="0" selectionColor="0xE0E0E0" symbolColor="0x000000" Events caretChange="No default" gridClick="No default" gridDoubleClick="No default" gridItemEditorSessionCancel="No default" gridItemEditorSessionSave="No default" gridItemEditorSessionStart="No default" gridItemEditorSessionStarting="No default" gridMouseDown="No default" gridMouseDrag="No default" gridMouseUp="No default" gridMouseRollOut="No default" gridMouseRollOver="No default" selectionChange="No default" selectionChanging="No default" sortChange="No default" sortChanging="No default" />]]>
Das Spark-DataGrid-Steuerelement wird als skinfähiger Wrapper um das Spark-Grid-Steuerelement implementiert. Das Grid-Steuerelement definiert die Spalten des Datenrasters und die meisten Funktionen des DataGrid-Steuerelements selbst.
Die DataGrid-Skin ist zuständig für das Anordnen des Rasters, der Spaltenüberschrift und des Scrollers. Die Skin konfiguriert außerdem die Grafikelemente, die zum Darstellen von als Indikatoren, Trennzeichen und Hintergründe verwendeten, visuellen Elementen verwendet werden. Die DataGrid-Skin definiert außerdem einen Standardelementrenderer, der zum Anzeigen aller Zelleninhalte verwendet wird. In der Dokumentation zu Rendererklassen für die Liste unterstützter Stile finden Sie weitere Informationen.
Übergänge in DataGrid-Elementrenderern werden nicht unterstützt. Die GridItemRenderer-Klasse hat ihre
Wenn das Ereignis abgebrochen wird, wird der Elementeditor nicht erstellt.
Dieses Ereignis wird ausgelöst, wenn der Benutzer mit dem Steuerelement interagiert. Wenn Sie die Sammlung des Datenproviders programmgesteuert sortieren, löst die Komponente kein
Das DataGrid-Steuerelement verfügt über eine Standardprozedur für dieses Ereignis, bei dem eine Sortierung nach einer einzelnen Spalte implementiert wird und die
Sortierungen nach mehreren Spalten können implementiert werden, indem die
Dieses Ereignis wird ausgelöst, wenn der Benutzer mit dem Steuerelement interagiert. Wenn Sie die Sammlung des Datenproviders programmgesteuert sortieren, löst die Komponente kein
Dieses Ereignis wird ausgelöst, wenn der Benutzer mit dem Steuerelement interagiert. Wenn Sie die Auswahl programmgesteuert ändern, löst die Komponente das
Dieses Ereignis wird ausgelöst, wenn der Benutzer mit dem Steuerelement interagiert. Wenn Sie die Auswahl programmgesteuert ändern, löst die Komponente das
Weisen Sie zum Verarbeiten dieses Ereignisses dem
Weisen Sie zum Verarbeiten dieses Ereignisses dem
Weisen Sie zum Verarbeiten dieses Ereignisses dem
Weisen Sie zum Verarbeiten dieses Ereignisses dem
Weisen Sie zum Verarbeiten dieses Ereignisses dem
Weisen Sie zum Verarbeiten dieses Ereignisses dem
Weisen Sie zum Verarbeiten dieses Ereignisses dem
Weisen Sie zum Verarbeiten dieses Ereignisses dem
Wenn der
Wenn der
Die flash.system.IMEConversionMode-Klasse definiert Konstanten für gültige Werte dieser Eigenschaft. Sie können auch
Verwenden Sie die
Die
Stellen Sie diese Eigenschaft nicht in MXML ein.
<s:RadioButtonGroup>
tag inherits all of the
tag attributes of its superclass, and adds the following tag attributes:
<s:RadioButtonGroup Properties enabled="true" selectedValue="null" selection="null" Events change="No default" itemClick="No default" valueCommit="No default" />]]>
Die RadioButtonGroup-Komponente ist eine Unterklasse von EventDispatcher, nicht von UIComponent, und implementiert die IMXMLObject-Schnittstelle. Alle anderen visuellen Komponenten von Flex implementieren die IVisualElement-Schnittstelle. Die RadioButtonGroup-Komponentendeklaration muss im Tag
Erstellen Sie einen Elementrenderer, um diese Komponente in einer listenbasierten Komponente wie beispielsweise einer Liste oder einem DataGrid zu verwenden. Weitere Informationen zum Erstellen eines Elementrenderers finden Sie unter
Da dieses Ereignis durch eine programmgesteuerte Änderung ausgelöst wird, müssen Sie sicherstellen, dass keine
Wenn Sie einen Wert für
<s:VScrollBar>
tag inherits all of the tag
attributes of its superclass and adds the following tag attributes:
<s:VScrollBar Properties viewport="" />]]>
Obwohl das VScrollBar-Steuerelement auch als allein stehendes Steuerelement verwendet werden kann, wird es üblicherweise in Kombination in einer Komponentengruppe für die Bildlauffunktion verwendet.
Das VScrollBar-Steuerelement verfügt über die folgenden Standardmerkmale:
spark.skins.spark.VScrollBarThumbSkin
spark.skins.spark.VScrollBarTrackSkin
Der Bildlauf erfolgt in vertikaler Richtung gemäß der für dieses Ereignis standardmäßig festgelegten
Das Aufrufen der
Ist die
Wenn
<s:VideoDisplay>
tag inherits all of the tag
attributes of its superclass and adds the following tag attributes:
<s:VideoDisplay Properties autoDisplayFirstFrame="true" autoPlay="true" autoRewind="true" loop="false" muted="false" pauseWhenHidden="true" scaleMode="letterbox" source="" volume="1" Events bytesLoadedChange="No default" complete="No default" currentTimeChange="No default" durationChange="No default" mediaPlayerStateChange="No default" />]]>
Das VideoDisplay-Steuerelement hat die folgenden Standardmerkmale:
Dieses Ereignis wird möglicherweise nicht ausgelöst, wenn die Quelle auf null gesetzt wurde oder ein Wiedergabefehler auftritt.
Dieses Ereignis wird möglicherweise nicht ausgelöst, wenn die Quelle auf null gesetzt wurde oder ein Wiedergabefehler auftritt.
Dieses Ereignis wird möglicherweise nicht ausgelöst, wenn die Quelle auf null gesetzt wurde oder ein Wiedergabefehler auftritt.
Um die Wiedergabe erneut zu starten, rufen Sie die
Wenn der Wert für „time“ kleiner 0 oder gleich NaN ist, wird eine Ausnahme ausgegeben. Wenn der Wert für „time“ nach dem Ende des Streams oder des bereits heruntergeladenen Teils der Datei liegt, wird der Suchlauf dennoch ausgeführt und bei einem Fehler eine Wiederherstellung durchgeführt.
Unter Umständen weist die
Hinweis: Beim Streaming führt eine Suche immer zu der exakt angegebenen Zeit, selbst wenn die FLV-Quelldatei an dieser Stelle über kein Schlüsselbild verfügt.
Die Suche erfolgt nicht synchron. Das heißt, wenn Sie die
Ist
Auch wenn für
Hat
Diese Eigenschaft hat keine Wirkung für Live-Streaming-Video.
Wird das Video (oder eines seiner übergeordneten Elemente) deaktiviert, wird das Video ebenfalls angehalten; wenn es aber erneut aktiviert wird, wird das Video nicht wieder abgespielt. Dieses Verhalten wird nicht durch
Das Video wird möglicherweise derzeit nicht abgespielt, da ein Suchlauf ausgeführt oder es gepuffert wird, aber es wird versucht, das Video abzuspielen.
Wenn keine Breite, Höhe oder Beschränkungen für die Komponente angegeben sind, hat diese Eigenschaft keine Auswirkungen.
Für einen progressiven Download ist die Quelle nur ein Pfad oder eine URL, die auf die abzuspielende Videodatei verweist.
Für Streaming (Recorded Streaming, Live-Streaming oder Multibitrate-Streaming) ist die source-Eigenschaft ein DynamicStreamingVideoSource-Objekt. Wenn Sie nur ein aufgezeichnetes oder ein Live-Streaming-Video ohne Multibitrate-Unterstützung abspielen möchten, brauchen Sie nur eine String-URL, die auf den Videostream zeigt, zu übergeben. Dabei wird allerdings davon ausgegangen, dass der streamType "any" ist und Sie haben nicht so viel Einfluss auf das Streaming, wie bei Verwendung des DynamicStreamingVideoSource-Objekts.
Hinweis: Es wird empfohlen, die Quelle für MediaPlayerStateChangeEvent.LOADING oder MediaPlayerStateChangeEvent.READY nicht festzulegen, wenn sie vorher bereits definiert wurde. Dies könnte zu einer Endlosschleife oder einem Laufzeitfehler führen. Wenn Sie einen solchen Vorgang durchführen müssen, warten Sie bis zum nächsten Bild, um die Quelle festzulegen.
Ist die Quelle
<s:TileGroup>
tag inherits all of the tag
attributes of its superclass and adds the following tag attributes:
<s:TileGroup Properties columnAlign="left" columnCount="-1" columnWidth="0" horizontalAlign="justify" horizontalGap="6" orientation="rows" paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0" requestedColumnCount"-1" requestedRowCount="-1" rowAlign="top" rowCount="-1" rowHeight="0" verticalAlign="justify" verticalGap="6" />]]>
Der TileGroup-Container hat die folgenden Standardmerkmale: