Tekst opmaken

U kunt de klasse TextFormat gebruiken om een aantal verschillende tekstweergave-eigenschappen in te stellen en deze toe te passen op de gehele inhoud van een TextField-object of op een tekstbereik.

In het volgende voorbeeld wordt één TextFormat-object toegepast op een heel TextField-object en wordt een tweede TextFormat-object toegepast op een tekstbereik binnen dat TextField-object:

var tf:TextField = new TextField(); 
tf.text = "Hello Hello"; 
 
var format1:TextFormat = new TextFormat(); 
format1.color = 0xFF0000; 
 
var format2:TextFormat = new TextFormat(); 
format2.font = "Courier"; 
 
tf.setTextFormat(format1); 
var startRange:uint = 6; 
tf.setTextFormat(format2, startRange); 
 
addChild(tf);

De methode TextField.setTextFormat() is alleen van invloed op tekst die al in het tekstveld wordt weergegeven. Als de inhoud in het tekstveld verandert, moet de toepassing mogelijk de methode TextField.setTextFormat() opnieuw aanroepen om de opmaak opnieuw toe te passen. U kunt ook de tekstveldeigenschap defaultTextFormat instellen om de opmaak op te geven die moet worden gebruikt voor tekst die de gebruiker invoert.

Tekstvelden kunnen platte tekst of tekst met HTML-opmaak bevatten. Platte tekst wordt opgeslagen in de eigenschap text van de instantie en HTML-tekst in de eigenschap htmlText .

U kunt CSS-stijldeclaraties gebruiken om tekststijlen te definiëren die u kunt toepassen op veel verschillende tekstvelden. CSS-stijldeclaraties kunnen worden gemaakt in de toepassingscode of bij het uitvoeren worden geladen vanuit een extern CSS-bestand.

De klasse flash.text.StyleSheet behandelt de CSS-stijlen. De klasse StyleSheet herkent een beperkte set CSS-eigenschappen. Zie de vermelding over flash.textStylesheet in de Naslaggids voor ActionScript® 3.0 voor Adobe® Flash® Professional CS5 voor een gedetailleerde lijst stijleigenschappen die door de klasse StyleSheet worden ondersteund.

Zoals het volgende voorbeeld aangeeft, kunt u CSS maken in uw code en die stijlen toepassen op HTML-tekst door gebruik te maken van een StyleSheet-object:

var style:StyleSheet = new StyleSheet(); 
 
var styleObj:Object = new Object(); 
styleObj.fontSize = "bold"; 
styleObj.color = "#FF0000"; 
style.setStyle(".darkRed", styleObj); 
 
var tf:TextField = new TextField(); 
tf.styleSheet = style; 
tf.htmlText = "<span class = 'darkRed'>Red</span> apple"; 
 
addChild(tf);

Wanneer u een StyleSheet-object hebt gemaakt, maakt de voorbeeldcode een eenvoudig object dat een set stijldeclaratie-eigenschappen bevat. Vervolgens wordt de methode StyleSheet.setStyle() aangeroepen, waarmee de nieuw stijl wordt toegevoegd aan het opmaakmodel met de naam “.darkred”. Vervolgens wordt de opmaakmodelopmaak toegepast door het StyleSheet-object toe te wijzen aan de tekstveldeigenschap styleSheet .

CSS-stijlen werken pas wanneer het opmaakmodel wordt toegepast op het TextField-object voordat de eigenschap htmlText wordt ingesteld.

Een tekstveld met een opmaakmodel kan niet worden bewerkt. Als u een invoertekstveld hebt en hieraan een opmaakmodel toewijst, vertoont het tekstveld de eigenschappen van het opmaakmodel, maar staat het tekstveld niet toe dat gebruikers hierin nieuwe tekst invoeren. U kunt ook de volgende ActionScript-API's niet gebruiken op een tekstveld met een hieraan toegewezen opmaakmodel:

• De methode TextField.replaceText()

• De methode TextField.replaceSelectedText()

• De eigenschap TextField.defaultTextFormat

• De methode TextField.setTextFormat()

Als aan een tekstveld een opmaakmodel is toegewezen, maar de eigenschap TextField.styleSheet later wordt ingesteld op null , voegt de inhoud van zowel de eigenschap TextField.text als TextField.htmlText tags en kenmerken toe aan de inhoud, om de opmaak uit het eerder toegewezen opmaakmodel op te nemen. Als u de oorspronkelijke eigenschap htmlText wilt behouden, slaat u deze op in een variabele, voordat u het opmaakmodel instelt op null .

De CSS-benadering van opmaak is krachtiger wanneer u tijdens het uitvoeren CSS-informatie kunt laden uit een extern bestand. Wanneer CSS-gegevens zich buiten de toepassing zelf bevinden, kunt u de visuele stijl van tekst in de toepassing wijzigen zonder de ActionScript 3.0-broncode te wijzigen. Wanneer de toepassing in gebruik is genomen, kunt u een extern CSS-bestand wijzigen zodat het de weergave van de toepassing wijzigt zonder het SWF-bestand van de toepassing opnieuw in gebruik te hoeven nemen.

Met de methode StyleSheet.parseCSS() converteert u een tekenreeks die CSS-gegevens bevat in stijldeclaraties in het StyleSheet-object. In het volgende voorbeeld wordt aangegeven hoe een extern CSS-bestand kan worden gelezen en de stijldeclaraties ervan kunnen worden toegepast op een TextField-object.

Ten eerste is hier de inhoud van het CSS-bestand dat moet worden geladen, met de naam example.css:

p { 
    font-family: Times New Roman, Times, _serif; 
    font-size: 14; 
} 
 
h1 { 
    font-family: Arial, Helvetica, _sans; 
    font-size: 20; 
    font-weight: bold; 
} 
 
.bluetext { 
    color: #0000CC; 
}    

Vervolgens is er de ActionScript-code voor een klasse waarmee het bestand example.css wordt geladen en de stijlen op de inhoud van het tekstveld worden toegepast:

package 
{ 
    import flash.display.Sprite; 
    import flash.events.Event; 
    import flash.net.URLLoader; 
    import flash.net.URLRequest; 
    import flash.text.StyleSheet; 
    import flash.text.TextField; 
    import flash.text.TextFieldAutoSize; 
 
    public class CSSFormattingExample extends Sprite 
    { 
        var loader:URLLoader; 
        var field:TextField; 
        var exampleText:String = "<h1>This is a headline</h1>" +  
            "<p>This is a line of text. <span class='bluetext'>" + 
            "This line of text is colored blue.</span></p>"; 
         
        public function CSSFormattingExample():void 
        { 
            field = new TextField(); 
            field.width = 300; 
            field.autoSize = TextFieldAutoSize.LEFT; 
            field.wordWrap = true; 
            addChild(field); 
             
            var req:URLRequest = new URLRequest("example.css"); 
             
            loader = new URLLoader(); 
            loader.addEventListener(Event.COMPLETE, onCSSFileLoaded); 
            loader.load(req); 
        } 
         
        public function onCSSFileLoaded(event:Event):void 
        { 
            var sheet:StyleSheet = new StyleSheet(); 
            sheet.parseCSS(loader.data); 
            field.styleSheet = sheet; 
            field.htmlText = exampleText; 
        } 
    } 
}

Wanneer de CSS-gegevens zijn geladen, wordt de methode onCSSFileLoaded() uitgevoerd en wordt de methode StyleSheet.parseCSS() aangeroepen om de stijldeclaraties over te brengen naar het StyleSheet-object.

Een nuttige methode van de klasse flash.text.TextField is de methode setTextFormat() . Met setTextFormat() kunt u specifieke eigenschappen toewijzen aan de inhoud van een deel van een tekstveld, zodat dit reageert op de invoer van de gebruiker. Dit kunnen bijvoorbeeld formulieren zijn waarmee gebruikers eraan worden herinnerd dat bepaalde invoer nodig is of om de nadruk van een subsectie van een tekstgedeelte in een tekstveld te wijzigen wanneer de gebruiker delen van de tekst selecteert.

In het volgende voorbeeld wordt TextField.setTextFormat() voor een reeks tekens gebruikt om de weergave van een deel van de inhoud van myTextField te wijzigen wanneer de gebruiker op het tekstveld klikt.

var myTextField:TextField = new TextField(); 
myTextField.text = "No matter where you click on this text field the TEXT IN ALL CAPS changes format."; 
myTextField.autoSize = TextFieldAutoSize.LEFT; 
addChild(myTextField); 
addEventListener(MouseEvent.CLICK, changeText); 
 
var myformat:TextFormat = new TextFormat(); 
myformat.color = 0xFF0000; 
myformat.size = 18; 
myformat.underline = true; 
 
function changeText(event:MouseEvent):void 
{ 
    myTextField.setTextFormat(myformat, 49, 65); 
}