Package | flash.text |
Class | public dynamic class StyleSheet |
Inheritance | StyleSheet EventDispatcher Object |
Language version: | ActionScript 3.0 |
Runtime version: |
To apply styles to a TextField object, assign the StyleSheet
object to a TextField object's styleSheet
property.
Note: A text field with a style sheet is not editable. In other words, a text field with the type
property set to TextFieldType.INPUT
applies the StyleSheet to the default text for the text field, but the content will no longer be editable by the user. Consider using the TextFormat class to assign styles to input text fields.
Flash Player supports a subset of properties in the original CSS1 specification (www.w3.org/TR/REC-CSS1). The following table shows the supported Cascading Style Sheet (CSS) properties and values, as well as their corresponding ActionScript property names. (Each ActionScript property name is derived from the corresponding CSS property name; if the name contains a hyphen, the hyphen is omitted and the subsequent character is capitalized.)
CSS property | ActionScript property | Usage and supported values |
---|---|---|
color |
color |
Only hexadecimal color values are supported. Named colors (such as blue )
are not supported. Colors are written in the following format: #FF0000 . |
display |
display |
Supported values are inline , block , and none . |
font-family |
fontFamily |
A comma-separated list of fonts to use, in descending order of desirability. Any font
family name can be used. If you specify a generic font name, it is converted to an
appropriate device font. The following font conversions are available: mono is
converted to _typewriter , sans-serif is converted to
_sans , and serif is converted to _serif . |
font-size |
fontSize |
Only the numeric part of the value is used. Units (px, pt) are not parsed; pixels and points are equivalent. |
font-style |
fontStyle |
Recognized values are normal and italic . |
font-weight |
fontWeight |
Recognized values are normal and bold . |
kerning |
kerning |
Recognized values are true and false .
Kerning is supported for embedded fonts only. Certain fonts, such as Courier New, do not support kerning.
The kerning property is only supported in SWF files created in Windows, not in SWF files created on the
Macintosh. However, these SWF files can be played in non-Windows versions of Flash Player and the kerning
still applies. |
leading |
leading |
The amount of space that is uniformly distributed between lines. The value specifies the number of pixels that are added after each line. A negative value condenses the space between lines. Only the numeric part of the value is used. Units (px, pt) are not parsed; pixels and points are equivalent. |
letter-spacing |
letterSpacing |
The amount of space that is uniformly distributed between characters. The value specifies the number of pixels that are added after each character. A negative value condenses the space between characters. Only the numeric part of the value is used. Units (px, pt) are not parsed; pixels and points are equivalent. |
margin-left |
marginLeft |
Only the numeric part of the value is used. Units (px, pt) are not parsed; pixels and points are equivalent. |
margin-right |
marginRight |
Only the numeric part of the value is used. Units (px, pt) are not parsed; pixels and points are equivalent. |
text-align |
textAlign |
Recognized values are left , center , right , and
justify . |
text-decoration |
textDecoration |
Recognized values are none and underline . |
text-indent |
textIndent |
Only the numeric part of the value is used. Units (px, pt) are not parsed; pixels and points are equivalent. |
You can use the StyleSheet class to perform low-level text rendering. However, in Flex, you typically use the Label, Text, TextArea, and TextInput controls to process text.
See also
Property | Defined by | ||
---|---|---|---|
constructor : Object
A reference to the class object or constructor function for a given object instance.
| Object | ||
prototype : Object
[static]
A reference to the prototype object of a class or function object.
| Object | ||
styleNames : Array
[read-only]
An array that contains the names (as strings) of all of the styles registered
in this style sheet.
| StyleSheet |
Method | Defined by | ||
---|---|---|---|
Creates a new StyleSheet object.
| StyleSheet | ||
addEventListener(type:String, listener:Function, useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false):void
Registers an event listener object with an EventDispatcher object so that the listener
receives notification of an event.
| EventDispatcher | ||
Removes all styles from the style sheet object.
| StyleSheet | ||
Dispatches an event into the event flow.
| EventDispatcher | ||
Returns a copy of the style object associated with the style named
styleName . | StyleSheet | ||
Checks whether the EventDispatcher object has any listeners registered for a specific type
of event.
| EventDispatcher | ||
Indicates whether an object has a specified property defined.
| Object | ||
Indicates whether an instance of the Object class is in the prototype chain of the object specified
as the parameter.
| Object | ||
Parses the CSS in
CSSText and loads the style sheet with it. | StyleSheet | ||
Indicates whether the specified property exists and is enumerable.
| Object | ||
Removes a listener from the EventDispatcher object.
| EventDispatcher | ||
Sets the availability of a dynamic property for loop operations.
| Object | ||
Adds a new style with the specified name to the style sheet object.
| StyleSheet | ||
Returns the string representation of this object, formatted according to locale-specific conventions.
| Object | ||
Returns the string representation of the specified object.
| Object | ||
Extends the CSS parsing capability.
| StyleSheet | ||
Returns the primitive value of the specified object.
| Object | ||
Checks whether an event listener is registered with this EventDispatcher object or any of
its ancestors for the specified event type.
| EventDispatcher |
styleNames | property |
styleNames:Array
[read-only]
Language version: | ActionScript 3.0 |
Runtime version: |
An array that contains the names (as strings) of all of the styles registered in this style sheet.
Implementation public function get styleNames():Array
StyleSheet | () | constructor |
public function StyleSheet()
Language version: | ActionScript 3.0 |
Runtime version: |
Creates a new StyleSheet object.
See also
clear | () | method |
public function clear():void
Language version: | ActionScript 3.0 |
Runtime version: |
Removes all styles from the style sheet object.
getStyle | () | method |
public function getStyle(styleName:String):Object
Language version: | ActionScript 3.0 |
Runtime version: |
Returns a copy of the style object associated with the style named styleName
.
If there is no style object associated with styleName
,
null
is returned.
styleName:String — A string that specifies the name of the style to retrieve.
|
Object —
An object.
|
See also
parseCSS | () | method |
public function parseCSS(CSSText:String):void
Language version: | ActionScript 3.0 |
Runtime version: |
Parses the CSS in CSSText
and loads the style sheet with it. If a style in
CSSText
is already in styleSheet
, the properties in
styleSheet
are retained, and only the ones in CSSText
are added or changed in styleSheet
.
To extend the native CSS parsing capability, you can override this method by creating a subclass of the StyleSheet class.
ParametersCSSText:String — The CSS text to parse (a string).
|
In the constructor, a multiline text field is created and its content is
set to an HTML-formatted string. (The HTML heading and span tags are
not rendered before CSS style is applied.) A URLRequest
object is created to identify the location of the CSS file; for this example, the CSS file
is in the same directory as the SWF file. The file is loaded with a URLLoader
object. There are two event listeners added for the loader
URLLoader object.
If an IO error occurs, the errorHandler()
method is invoked, which displays
an error message in the text field. After all the data is received and placed in the data
property of the loader
URLLoader object, the loaderCompleteHandler()
method is invoked. This method parses the CSS styles from the data loaded from the file and
fills the sheet
StyleSheet object with the style definitions.
When the user clicks on the text field, the clickHandler()
method is called.
The if statement in the clickHandler()
method checks to make sure the file loading
was finished before applying the style sheet to the text field. In order for the style sheet to
take effect, the htmlText
property must be reassigned with the content after the
style sheet is assigned to the text field. The CSS font-family
and the color
property values for the heading tag also are appended to the content of the text field. (The values
of these properties will be "undefined" if style sheet values are not in effect.)
The following is an example of a content of the CSS file that can be used with this example.
Before running this example, create a text file, copy the following CSS content into it,
then save it with the file name test.css
and place it in the same directory as the SWF file.
p { font-family: Times New Roman, Times, _serif; font-size: 14; font-Style: italic; margin-left: 10; } h1 { font-family: Arial, Helvetica, _sans; font-size: 20; font-weight: bold; } .bluetext { color: #0000CC; }
package { import flash.display.Sprite; import flash.net.URLLoader; import flash.net.URLRequest; import flash.text.StyleSheet; import flash.text.TextField; import flash.text.TextFieldAutoSize; import flash.events.IOErrorEvent; import flash.events.Event; import flash.events.MouseEvent; public class StyleSheet_parseCSSExample extends Sprite { private var loader:URLLoader = new URLLoader(); private var field:TextField = new TextField(); private 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>"; private var sheet:StyleSheet = new StyleSheet(); private var cssReady:Boolean = false; public function StyleSheet_parseCSSExample() { field.x = 10; field.y = 10; field.background = true; field.multiline = true; field.autoSize = TextFieldAutoSize.LEFT; field.htmlText = exampleText; field.addEventListener(MouseEvent.CLICK, clickHandler); addChild(field); var req:URLRequest = new URLRequest("test.css"); loader.load(req); loader.addEventListener(IOErrorEvent.IO_ERROR, errorHandler); loader.addEventListener(Event.COMPLETE, loaderCompleteHandler); } public function errorHandler(e:IOErrorEvent):void { field.htmlText = "Couldn't load the style sheet file."; } public function loaderCompleteHandler(event:Event):void { sheet.parseCSS(loader.data); cssReady = true; } public function clickHandler(e:MouseEvent):void { if (cssReady) { field.styleSheet = sheet; field.htmlText = exampleText; var style:Object = sheet.getStyle("h1"); field.htmlText += "<p>Headline font-family is: " + style.fontFamily + "</p>"; field.htmlText += "<p>Headline color is: " + style.color + "</p>"; } else { field.htmlText = "Couldn't apply the CSS styles."; } } } }
setStyle | () | method |
public function setStyle(styleName:String, styleObject:Object):void
Language version: | ActionScript 3.0 |
Runtime version: |
Adds a new style with the specified name to the style sheet object.
If the named style does not already exist in the style sheet, it is added.
If the named style already exists in the style sheet, it is replaced.
If the styleObject
parameter is null
, the named style is removed.
Flash Player creates a copy of the style object that you pass to this method.
For a list of supported styles, see the table in the description for the StyleSheet class.
ParametersstyleName:String — A string that specifies the name of the style to add to the style sheet.
|
|
styleObject:Object — An object that describes the style, or null .
|
transform | () | method |
public function transform(formatObject:Object):TextFormat
Language version: | ActionScript 3.0 |
Runtime version: |
Extends the CSS parsing capability. Advanced developers can override this method by extending the StyleSheet class.
ParametersformatObject:Object — An object that describes the style, containing style rules as properties of the object,
or null .
|
TextFormat —
A TextFormat object containing the result of the mapping of CSS rules
to text format properties.
|
See also
transform()
method to apply a style
from a CSS file to a TextFormat object for a text field.
CSS styles are used usually to format HTML content. However,
by using transform()
method of a StyleSheet object, specific
CSS styles can be assigned to a TextFormat object and then applied to any text field.
The URLRequest
and URLLoader
objects are used to
load the CSS file. An event listener is added for the Event.COMPLETE
event, which occurs after all the data is received and placed in the data property of the
loader
URLLoader object. The loaderCompleteHandler()
method
then parses the CSS from the data loaded from the file and fills the sheet
StyleSheet object with the styles. The getStyle()
method of the style sheet
retrieves the HTML paragraph styles, which are then assigned to the cssFormat
TextFormat object by using style sheet's transform()
method. Finally, the default text
format of the inputField
text field is set to the new cssFormat
text format.
package { import flash.display.Sprite; import flash.net.URLLoader; import flash.net.URLRequest; import flash.text.StyleSheet; import flash.text.TextField; import flash.text.TextFormat; import flash.text.TextFieldType; import flash.events.IOErrorEvent; import flash.events.Event; public class StyleSheet_transformExample extends Sprite { private var loader:URLLoader = new URLLoader(); private var inputField:TextField = new TextField(); private var sheet:StyleSheet = new StyleSheet(); public function StyleSheet_transformExample() { inputField.x = 10; inputField.y = 10; inputField.background = true; inputField.width = 300; inputField.height = 200; inputField.wordWrap = true; inputField.multiline = true; inputField.type = TextFieldType.INPUT; addChild(inputField); var req:URLRequest = new URLRequest("test.css"); loader.load(req); loader.addEventListener(IOErrorEvent.IO_ERROR, errorHandler); loader.addEventListener(Event.COMPLETE, loaderCompleteHandler); } public function errorHandler(e:IOErrorEvent):void { inputField.htmlText = "Couldn't load the style sheet file."; } public function loaderCompleteHandler(event:Event):void { var cssFormat:TextFormat = new TextFormat(); sheet.parseCSS(loader.data); var style:Object = sheet.getStyle("p"); cssFormat = sheet.transform(style); inputField.defaultTextFormat = cssFormat; } } }
package { import flash.display.Sprite; import flash.text.StyleSheet; import flash.text.TextField; import flash.text.TextFieldAutoSize; public class StyleSheetExample extends Sprite { public function StyleSheetExample() { var style:StyleSheet = new StyleSheet(); var heading:Object = new Object(); heading.fontWeight = "bold"; heading.color = "#FF0000"; var body:Object = new Object(); body.fontStyle = "italic"; style.setStyle(".heading", heading); style.setStyle("body", body); var label:TextField = new TextField(); label.styleSheet = style; label.htmlText = "<body><span class='heading'>Hello </span>World...</body>"; addChild(label); } } }