Spark Text Primitives - Functional and Design SpecificationSpark Text Primitives - Functional and Design Specification | Glossary | Summary and Background | Usage Scenarios | Detailed Description | API Description | B Features | Examples and Usage | Additional Implementation Details | Prototype Work | Compiler Work | Web Tier Compiler Impact | Flex Feature Dependencies | Backwards Compatibility | Accessibility | Performance | Globalization | Localization | Issues and Recommendations | Documentation | QA
Glossary
FTE is the foundation for all future text functionality in the Player. TextField will be maintained for backward compatibility, but it will no longer be enhanced, and bug fixes are unlikely. The documentation for the FTE APIs can be found under the flash.text.engine.* package in the Gumbo ActionScript 3.0 Language and Components Reference. However, very few developers are likely to need to use FTE APIs.
TLF was formerly known by the code name Vellum. (At one point it was also called TCAL, the Text Component ActionScript Library.). It is provided within the Gumbo SDK as the SWCs textLayout.swc. The documentation for the TLF APIs can be found under the flashx.textLayout.* package in the Gumbo ActionScript 3.0 Language and Components Reference. Developers are likely to use TLF mainly via its text model, when they write MXML tags like <p> and <span> or import markup with such tags. TLF's text model is a superset of FXG 1.0.
Summary and BackgroundGumbo will have three text primitives – Label, RichText, and RichEditableText – which offer new text functionality made possible by Flash Player 10 and AIR 1.5. They are implemented using a combination of FTE and TLF. These primitives will typically be used in the skins of skinnable components, and having three of them allows a pay-as-you-go strategy: you use the lightest-weight one that meets your needs. For example, the default skin of a Spark Button contains a Label to render the label of the Button. If you have a Button that requires rich text, you can "upgrade" its skin to use a RichText. The default skins of the Spark TextInput and TextArea will use a RichEditableText to provide an area in which text can be edited. (The border and background will be provided by a Rect, and the scrollbars by a Scroller.) The following table summarizes the features of the three text primitives. Note how RichText has more functionality than Label, and RichEditableText more than RichText.
* even with device fonts! ** Label supports a "basic" subset of TLF formats, as explained in the styles section below. Note that none of the text primitives are designed to support flowing text through linked containers, although TLF supports this. This functionality may be added in a post-Gumbo release. This specification does not cover details of functionality which is implemented entirely within FTE and TLF. For example, it does not describe things like the linebreaking algorithm, whether a double-click selects whitespace after a word, what Shift-Right-Arrow does, etc., because these are not implemented in Spark code. Usage ScenariosThese three primitives are the basis for all text display in Spark components, so usage scenarios include anything involving text. See the table above to determine which text primitive offers which capabilities. Within the other Spark components, Label is used in ButtonSkin, DefaultButtonSkin, ToggleButtonSkin, ButtonBarFirstButtonSkink, ButtonBarMiddleButtonSkin, ButtonBarLastButtonSkin, CheckBoxSkin, RadioButtonSkin, DefaultItemRenderer, DropDownListSkin, HSliderSkin, VSliderSkin, PanelSkin, VideoPlayeSkin, VideoPlayerScrubBarSkin, and VideoPlayerFullScreenScrubBarSkin. RichEditableText is used in TextInputSkin, TextAreaSkin, and NumericStepperTextInputSkin. Detailed DescriptionDefault formatting via CSS stylesThe three text primitives support specifying default text formatting via CSS styles. The complete set of styles will support all of TLF's formatting capabilities and is divided into four include files listed below. The names and meanings of these styles are the same as those in TLF's flashx.textLayout.formats.TextLayoutFormat and flashx.textLayout.edit.SelectionFormat classes. For details, please see the documentation. In a few cases, the the Flex styles support additional values, or a different default value, than TLF does. These are noted later. Note that some styles are inheriting and others non-inheriting, meaning that if you set them on a container they affect the children of that container. Generally, the choice of whether a CSS style is inheriting or non-inheriting is made based on whether the corresponding TLF format inherits from parent FlowElement to child FlowElement. Since a skinnable component is a type of Spark container, if you set an inheriting style such as fontSize on, say, a Spark Button, it will affect the Label in the ButtonSkin. But if you set a non-inheriting style such as paddingTop it will not affect the Label; instead you would have reskin the Button and set paddingTop directly on the Label. TLF's FlowElement tags such as <p> and <span>, which are supported in the content of a RichText or RichEditableText, support formatting only via properties, not CSS styles. The CSS styles determine the default formatting for text in a text primitive. Formatting properties on FlowElements are applied after the formatting styles on the component. Applying CSS selecctors to FloxElements may be supported in a post-Gumbo release. BasicInheritingTextStyles.as The following styles are supported on Label, RichText, and RichEditableText. Note that all of these are inheriting. [Style(name="alignmentBaseline", type="String", enumeration="useDominantBaseline,roman,ascent,descent, ideographicTop,ideographicCenter,ideographicBottom", inherit="yes")] [Style(name="baselineShift", type="Object", inherit="yes")] [Style(name="cffHinting", type="String", enumeration="horizontalStem,none", inherit="yes")] [Style(name="color", type="uint", format="Color", inherit="yes")] [Style(name="digitCase", type="String", enumeration="default,lining,oldStyle", inherit="yes")] [Style(name="digitWidth", type="String", enumeration="default,proportional,tabular", inherit="yes")] [Style(name="direction", type="String", enumeration="ltr,rtl", inherit="yes")] [Style(name="dominantBaseline", type="String", enumeration="auto,roman,ascent,descent, ideographicTop,ideographicCenter,ideographicBottom", inherit="yes")] [Style(name="fontFamily", type="String", inherit="yes")] [Style(name="fontLookup", type="String", enumeration="auto,device,embeddedCFF", inherit="yes")] [Style(name="fontSize", type="Number", format="Length", inherit="yes")] [Style(name="fontStyle", type="String", enumeration="normal,italic", inherit="yes")] [Style(name="fontWeight", type="String", enumeration="normal,bold", inherit="yes")] [Style(name="justificationRule", type="String", enumeration="auto,space,eastAsian", inherit="yes")] [Style(name="justificationStyle", type="String", enumeration="auto,prioritizeLeastAdjustment, pushInKinsoku,pushOutOnly", inherit="yes")] [Style(name="kerning", type="String", enumeration="auto,on,off", inherit="yes")] [Style(name="ligatureLevel", type="String", enumeration="common,minimum,uncommon,exotic", inherit="yes")] [Style(name="lineHeight", type="Object", inherit="yes")] [Style(name="lineThrough", type="Boolean", inherit="yes")] [Style(name="locale", type="String", inherit="yes")] [Style(name="renderingMode", type="String", enumeration="cff,normal", inherit="yes")] [Style(name="textAlign", type="String", enumeration="start,end,left,right,center,justify", inherit="yes")] [Style(name="textAlignLast", type="String", enumeration="start,end,left,right,center,justify", inherit="yes")] [Style(name="textAlpha", type="Number", inherit="yes")] [Style(name="textDecoration", type="String", enumeration="none,underline", inherit="yes")] [Style(name="textJustify", type="String", enumeration="interWord,distribute", inherit="yes")] [Style(name="trackingLeft", type="Object", inherit="yes")] [Style(name="trackingRight", type="Object", inherit="yes")] [Style(name="typographicCase", type="String", enumeration="default,capsToSmallCaps,uppercase, lowercase,lowercaseToSmallCaps", inherit="yes")] BasicNonInheritingTextStyles.as The following styles are supported on Label, RichText, and RichEditableText. Note that all of these are non-inheriting. [Style(name="lineBreak", type="String", enumeration="toFit,explicit", inherit="yes")] [Style(name="paddingBottom", type="Number", format="Length", inherit="no")] [Style(name="paddingLeft", type="Number", format="Length", inherit="no")] [Style(name="paddingRight", type="Number", format="Length", inherit="no")] [Style(name="paddingTop", type="Number", format="Length", inherit="no")] [Style(name="verticalAlign", type="String", enumeration="top,middle,bottom,justify", inherit="no")] AdvancedInheritingTextStyles.as The following styles are supported on RichText and RichEditableText but not on Label. Note that all of these are inheriting. [Style(name="blockProgression", type="String", enumeration="tb,rl", inherit="yes")] [Style(name="breakOpportunity", type="String", enumeration="auto,all,any,none", inherit="yes")] [Style(name="firstBaselineOffset", type="Object", inherit="yes")] [Style(name="leadingModel", type="String", enumeration="auto,romanUp,ideographicTopUp,ideographicCenterUp, ideographicTopDown,ideographicCenterDown,ascentDescentUp", inherit="yes")] [Style(name="paragraphEndIndent", type="Number", format="length", inherit="yes")] [Style(name="paragraphSpaceAfter", type="Number", format="length", inherit="yes")] [Style(name="paragraphSpaceBefore", type="Number", format="length", inherit="yes")] [Style(name="paragraphStartIndent", type="Number", format="length", inherit="yes")] [Style(name="tabStops", type="String", inherit="yes")] [Style(name="textIndent", type="Number", format="Length", inherit="yes")] [Style(name="textRotation", type="String", enumeration="auto,rotate0,rotate90,rotate180,rotate270", inherit="yes")] [Style(name="whiteSpaceCollapse", type="String", enumeration="collapse,preserve", inherit="yes")] AdvancedNonInheritingTextStyles.as The following styles are supported on RichText and RichEditableText but not on Label. Note that all of these are non-inheriting. [Style(name="columnCount", type="Object", inherit="no")] [Style(name="columnGap", type="Number", format="Length", inherit="no")] [Style(name="columnWidth", type="Object", inherit="no")] SelectionFormatTextStyles.as The following styles are supported only on RichEditableText. Note that all of these are inheriting. [Style(name="focusedTextSelectionColor", type="uint", format="Color", inherit="yes")] [Style(name="inactiveTextSelectionColor", type="uint", format="Color", inherit="yes")] [Style(name="unfocusedTextSelectionColor", type="uint", format="Color", inherit="yes")] Default values The default values for each style are specified in the global selector: global
{
alignmentBaseline: "useDominantBaseline";
baselineShift: 0;
blockProgression: "tb";
breakOpportunity: "auto";
cffHinting: "horizontalStem";
color: #000000;
columnCount: "auto";
columnGap: 20;
columnWidth: "auto";
digitCase: "default";
digitWidth: "default";
direction: "ltr";
dominantBaseline: "auto";
firstBaselineOffset: "auto";
fontFamily: "Arial";
fontLookup: "auto";
fontSize: 12;
fontStyle: "normal";
fontWeight: "normal";
inactiveSelectionColor: #E8E8E8;
justificationRule: "auto";
justificationStyle: "auto";
kerning: false;
leadingModel: "auto";
ligatureLevel: "common";
lineBreak: "toFit";
lineHeight: "120%";
lineThrough: false;
locale: "en";
paddingBottom: 0;
paddingLeft: 0;
paddingRight: 0;
paddingTop: 0;
paragraphEndIndent: 0;
paragraphSpaceAfter: 0;
paragraphSpaceBefore: 0;
paragraphStartIndent: 0;
renderingMode: "cff";
selectionColor: #A8C6EE;
tabStops: ClassReference(null);
textAlign: "left";
textAlignLast: "start";
textAlpha: 1.0;
textDecoration: "none";
textIndent: 0;
textRotation: "auto";
trackingLeft: 0;
trackingRight: 0
typographicCase: "default";
unfocusedSelectionColor: #E8E8E8;
verticalAlign: "top";
whiteSpaceCollapse: "collapse";
}
Differences between Flex styles and TLF formats The backgroundColor style defaults to undefined, meaning "no background", for compatibility with Halo components. (This is accomplished by omitting it from the global selector; there is no way to declare in a selector that a style is undefined.) In TLF the default value is "transparent". The fontLookup style supports an additional value, "auto", which is not supported in TLF. This is the default value in Flex 4, and it causes a Spark component to resolve the fontLookup to either "embeddedCFF"" or "device" based on whether the font is found to be embedded or not. The kerning style supports the additional values true and false for compatibility with Halo components. The default value is currently false for performance and compatibility, but this may change before Gumbo ships. In TLF the default value is "auto". The textAlign style currently defaults to "left" for compatibility with Halo components, but this is likely to change before Gumbo ships. In TLF the default value is "start". Text contentComponents such as RichText and RichEditableText which support TLF-formatted text expose a content property whose getter always returns a TextFlow which is owned by the component. Although you can set this property to a TextFlow, it is typed as Object to allow you to set to more convenient things from which the component will automatically create a TextFlow: If you set content to a String, the String will be assumed to be a markup string to be imported at runtime by TLF. Such a markup string can range from plain text such as "Hello, world!", through "partial markup" such as "This is <span fontStyle='italic'>very</span> exciting", to full markup enclosed with a <TextFlow> tag. If you set content to XML, the XML should start with a <TextFlow> tag, and it will get converted to a String and parsed by the TLF importer. Note: If the top-level <TextFlow> tag appears in markup to be imported at runtime, either in a String or in XML, it must be in the namespace for TLF markup, which is "http://ns.adobe.com/textLayout/2008". If you omit it, the content you specify will be wrapped in a <TextFlow xml=""http://ns.adobe.com/textLayout/2008"> tag so that tags like <p> and <span> without namespace prefixes are recognized as being in the TLF markup namespace. Note: If the content is a String, it will get converted to XML for runtime parsing, whereas if it is XML it will be parsed as-is. Therefore if you already have XML, do not convert it to a String before setting the content. If you set content to a TLF FlowElement, such as a ParagraphElement, this element will get wrapped into a TextFlow. If you set content to an Array containing Strings and FlowElements, each String will get wrapped into a SpanElement, and then all the FlowElements will get wrapped into a TextFlow. Regardless of what you set the content to, it will be transformed into a TextFlow by the component's commitProperties() method, so that if you get the content property later (after an updateComplete event) it will be a TextFlow. There is of course an interaction between the text and content properties. If you set one and later (after an updateComplete event) get the other, they will be in sync. When you set the text of RichText or RichEditableText, any line-ending sequences – CR ("\r"), LF ("\n"), or CR+LF ("\r\n") – will cause the String to produce multiple ParagraphElements in the TextFlow. TextBaseLabel and RichText extend a new subclass of UIComponent called TextBase. It also supports text and truncation properties and an isTruncated() method. TextBases have the same styling APIs as UIComponents, such as getStyle(), setStyle(), styleName, etc. The text property can be used for setting and getting "plain text" without any markup. When set, this text will be rendered using the formats determined by the component's CSS styles. the truncation property can be used to specify that a truncation indicator such as "..." (specified by the resource named "truncationIndicator" in the resource bundle named "core") should be displayed if the entire text isn't displayed. The isTruncated() can be used to determine whether truncation has occurred. TextBase is an abstract class in the sense that it does not actually declare any styles or render any text. You need to use one of its subclasses for useful functionality. LabelLabel is the most lightweight of the three text primitives, because it offers the least functionality. It is suitable for displaying a limited amount of text, such as for a Button label. It is implemented mostly using FTE and makes little use of TLF. <s:Label> is basically Gumbo's replacement for <mx:Label>, with some differences: it can display multiple lines, but only in a single format; it can render bidi text; and it supports rotation and alpha even when you use device fonts. Note that it is completely non-interactive: it doesn't support hyperlinks, scrolling, selection, or editing. It supports only a subset of TLF's formats. It can draw a plain background but not a border. Label uses FTE to create TextLines to statically display its text String in the format determined by the basic formatting styles. For performance, its TextLines do not contain information about individual glyphs; for more info, see flash.text.engine.TextLineValidity.STATIC. The specified text is wrapped at the right edge of the component's bounds. If it extends below the bottom, it is clipped. It is also clipped if you turn off wrapping by setting lineBreak to "explicit" and cause lines to extend past the right edge. The text can be horizontally and vertically aligned but it cannot be scrolled. The text can be truncated so that it displays a truncation indicator such as "...". Label's measure() method is implemented to determine the "natural" size of the text. If the width isn't specified, then text will be broken only at explicit linebreaks such as "\n", <br/>, and <p>. RichTextRichText is the middle-weight text primitive. It is implemented using TLF's StringTextLineFactory and TextFlowTextLineFactory classes. Using it requires linkage to many TLF classes. RichText is basically Gumbo's replacement for <mx:Text>: it can display richly-formatted text, with multiple character and paragraph formats. However, it is completely non-interactive: it doesn't support scrolling, selection, or editing. It supports all of TLF's text formats. It can draw a plain background but not a border. RichText adds a content property of type Object, as explained in the section above about content. RichText uses TLF's TextLineFactory to create TextLines to display its TextFlow. For performance, its TextLines do not contain information about individual glyphs; for more info, see flash.text.engine.TextLineValidity.STATIC. The specified text is wrapped at the right edge of the component's bounds. If it extends below the bottom, it is clipped. It is also clipped if you turn off wrapping by setting lineBreak to "explicit" and cause lines to extend past the right edge. The text can be horizontally and vertically aligned but it cannot be scrolled. The text can be truncated so that it displays a truncation indicator such as "...". RichText's measure() method is implemented to determine the "natural" size of the text. If the width isn't specified, then text will be broken only at explicit linebreaks such as "\n", <br/>, and <p>. RichEditableTextRichEditableText is the most heavyweight of the three text primitives, because it offers the most functionality. It is implemented by having TLF control TextLines within the RichEditableText via a TextContainerManager. In addition to offering RichText's rendering capabilities, it also supports hyperlinks, scrolling, selection, and editing. RichEditableText is basically a chromeless <mx:TextArea>: it renders a scrollable rectangle of selectable/editable text and inline graphics, and can draw a background, but it doesn't support drawing a border, or scrollbars. You combine it with other components to do that. For example, new Spark components like TextInput and TextArea use a RichEditableText in their skin to provide the scrollable area where the text is rendered and edited. RichEditableText supports all the text formatting styles. For setting the text to display, RichEditableText supports both text and content properties. It also supports insertText() and appendText() methods. The content can be exported to XML using the export() method, which produces XML with a TextFlow root tag. The behavior of RichEditableText's measure() method depends on the setting of the autoSize property. If autoSize it true, the content is measured in the same way as for RichText. If it is false, the measured size is determined by widthInChars and heightInLines, which are similar to the cols and rows of an HTML <TEXTAREA>. RichEditableText supports autoscrolling while selecting or editing, and also supports user scrolling via the mouse wheel. Although it has no scrollbars, it supports programmatic scrolling via the horizontalScrollPosition and verticalScrollPosition properties. The scrolling range can be determined from the contentWidth and contentHeight properties. A selectionChange event is dispatched when the selection changes. Scrolling is currently pixel-based, but line-based scrolling is likely to be added. The selectability of the content is determined by the selectable property. The selection range can be determined from the read-only selectionAnchorPosition and selectionActivePosition properties and can be set with the setSelection() method. The format of the selection can be determined with the getSelectionFormat() method and set with the setSelectionFormat() method. The editability of the content is determined by the editable property. Each editing operation is preceded by a cancelable changing event and followed by a change event, which specify the FlowOperation that is occurring. (Note: Unlike a TextField's textInput event, the changing event lets you listen for deletions as well as insertions.) The multiline property determines the behavior of the Enter key when the content is editable. If this property is true, the Enter key terminates the current paragraph. If this property is false, the Enter key does not affect the content and instead causes an enter event to be dispatched. API DescriptionClass TextBasepackage spark.components.supportClasses
{
/**
* The alpha level of the color defined by
* the backgroundColor style.
* Valid values range from 0.0 to 1.0.
*
* @default 1.0
*/
[Style(name="backgroundAlpha", type="Number", inherit="no")]
/**
* The color of the background of the entire
* bounding rectangle of this component.
* If this style is undefined,
* no background is drawn.
* Otherwise, this RGB color is drawn with an alpha level
* determined by the backgroundAlpha style.
*
* @default undefined
*/
[Style(name="backgroundColor", type="uint", format="Color", inherit="no")]
/**
* The base class for Label and RichText
* which display text using CSS styles for the default format.
*
* <p>It also adds text and truncation properties
* and an isTruncated() method.</p>
*
* @langversion 3.0
* @playerversion Flash 10
* @playerversion AIR 1.5
* @productversion Flex 4
*/
*/
public class TextBase extends UIComponent
{
//------------------------------------------------------------------------------
//
// Constructor
//
//------------------------------------------------------------------------------
/**
* Constructor.
*/
public function TextBase()
//------------------------------------------------------------------------------
//
// Properties
//
//------------------------------------------------------------------------------
//--------------------------------------
// text
//--------------------------------------
/**
* The text displayed by this text component.
* The text formatting is controlled by CSS styles,
* but the supported styles depend on the subclass.
*
* @default ""
*/
public function get text():String
public function set text(value:String):void
//--------------------------------------
// truncation
//--------------------------------------
/**
* An integer which determines whether, and where, the text
* displays a truncation indicator such as "..." if it doesn't fit
* within the component's bounds.
*
* If the value is 0, no truncation occurs.
* Instead, the text will simply be clipped if it doesn't fit.
*
* If the value is is a positive integer n,
* the text will be truncated to display no more than
* n lines.
*
* If the value is -1, the text will be truncated to display
* as many lines as will completely fit within the height
* of the component.
*
* The truncation indicator is locale-dependent;
* it is specified by the "truncationIndicator" resource
* in the "core" resource bundle.
*
* Truncation is only performed if the lineBreak
* style is "toFit"; the value of this property
* is ignored if lineBreak is "explicit".</p>
*
* @default 0
*/
public function get truncation():int
public function set truncation(value:int):void
//------------------------------------------------------------------------------
//
// Methods
//
//------------------------------------------------------------------------------
/**
* Determines if the text, once composed, has been truncated.
*
* @return true if the text has been truncated.
*/
public function isTruncated():Boolean
/**
* Flex calls the stylesInitialized() method when
* the styles for a component are first initialized.
*
* <p>This is an advanced method that you might override
* when creating a subclass of TextBase.
*/
public function stylesInitialized():void
}
}
Class Labelpackage spark.components
{
//--------------------------------------
// Styles
//--------------------------------------
// Basic formatting only
include "BasicInheritingTextStyles.as"
include "BasicNonInheritingTextStyles.as"
//--------------------------------------
// Other metadata
//--------------------------------------
[DefaultProperty("text")]
/**
* Label is a UIComponent that can render
* one or more lines of uniformly-formatted text.
* The formatting is specified by styles.
*/
public class Label extends TextBase implements IFontContextComponent
{
//------------------------------------------------------------------------------
//
// Constructor
//
//------------------------------------------------------------------------------
/**
* Constructor.
*/
public function Label()
//------------------------------------------------------------------------------
//
// Properties
//
//------------------------------------------------------------------------------
//----------------------------------
// fontContext
//----------------------------------
/**
* The module factory that provides the font context for this component.
*/
public function get fontContext():IFlexModuleFactory
public function set fontContext(value:IFlexModuleFactory):void
}
}
Class RichTextpackage spark.components
{
//--------------------------------------
// Styles
//--------------------------------------
// All formatting supported by TLF except for selection formats
include "BasicInheritingTextStyles.as"
include "BasicNonInheritingStyles.as"
include "AdvancedInheritingTextStyles.as"
include "AdvancedNonInheritingTextStyles.as"
//--------------------------------------
// Other metadata
//--------------------------------------
[DefaultProperty("content")]
/**
* RichText is a UICompontent that can render
* one or more lines of richly-formatted text.
* The default formatting is specified by styles.
* The text content can include TLF elements
* such as divs, paragraphs, and spans,
* each of which can have its own formatting.
*/
public class RichText extends TextBase implements IFontContextComponent
{
//------------------------------------------------------------------------------
//
// Constructor
//
//------------------------------------------------------------------------------
/**
* Constructor.
*/
public function RichText()
//------------------------------------------------------------------------------
//
// Properties
//
//------------------------------------------------------------------------------
//--------------------------------------
// content
//--------------------------------------
/**
* The rich text content displayed by this control.
*
* When you get this property, it will always be a TextFlow.
* A TextFlow object is the standard representation
* of rich text content in the Text Layout Framework.
* A TextFlow is the root of a tree of FlowElements
* such as divisions, paragraphs, spans, hyperlinks,
* and images, each representing one node of a TLF text model.
* You can use FlowElement APIs to navigate this tree
* and change nodes, such as changing the color
* of the second paragraph.
*
* If you set this property to a TextFlow, you must ensure
* that the TextFlow is not being used as the content
* of another text component, because a single TextFlow
* cannot be shared by multiple controls.
* You can use the deepCopy() method of a TextFlow to create
* a copy of one controls' content for use in another control.
*
* This property is typed as Object because, for convenience,
* you can set it to other things that will be automatically
* converted to a TextFlow:
*
* ---
*
* 1. A text String, possibly including markup.
*
* Examples:
*
* richText.content = "Hello World";
*
* If you are not using any markup, you should set the 'text' property
* instead, because that is more efficient.
*
* richText.content = "<span fontWeight='bold'>Hello</span> World";
*
* richText.content =
* "<p>One paragraph.</p>" +
* "<p><span fontStyle='italic'>Another</span> paragraph.</p>";
*
* richText.content =
* "<TextFlow xmlns="http://ns.adobe.com/textLayout/2008">" +
* "<p>One paragraph.</p>" +
* "<p><span fontStyle='italic'>Another</span> paragraph.</p>"
* "</TextFlow>"
*
* (The previous two examples were written to use string concatenation
* because otherwise the single string is too wide to fit on the page.)
*
* If you specify the TextFlow tag, it must be in the namespace
* for TLF markup, "http://ns.adobe.com/textLayout/2008".
* You should make this the default namespace so that you can simply write
* unprefixed tags such as <p> and <span> for convenience.
* If you don't specify the TextFlow tag, your content will be wrapped
* with one which makes the namespace for TLF markup the default namespace.
*
* If you specify a String, it will be converted to XML for parsing.
*
* 2. XML markup whose root tag is any FlowElement.
*
* Examples:
*
* richText.content = <span>Hello World</span>;
*
* richText.content =
* <p><span fontWeight='bold'>Hello</span> World</p>;
*
* richText.content =
* <div>
* <p>One paragraph.</p>
* <p><span fontStyle='italic'>Another</span> paragraph.</p>
* </div>;
*
* richText.content =
* <TextFlow xmlns="http://ns.adobe.com/textLayout/2008">
* <p>One paragraph.</p>
* <p><span fontStyle='italic'>Another</span> paragraph.</p>
* </TextFlow>;
*
* If you specify the TextFlow tag, it must be in the namespace
* for TLF markup, "http://ns.adobe.com/textLayout/2008".
* You should make this the default namespace so that you can simply write
* unprefixed tags such as <p> and <span> for convenience.
* If you don't specify the TextFlow tag, your content will be wrapped
* with one which makes the namespace for TLF markup the default namespace.
*
* If you specify XML, it will parsed as-is. Do not convert it to a String first.
*
* 3. A FlowElement.
*
* Example:
*
* var helloSpan:SpanElement = new SpanElement("Hello");
* helloSpan.fontWeight = "bold";
* richText.content = helloSpan;
*
* 4. An Array containing a mixture of Strings and FlowElements.
*
* Example:
*
* var helloSpan:SpanElement = new SpanElement("Hello");
* helloSpan.fontWeight = "bold";
* richText.content = [ helloSpan, "World" ];
*
* ---
*
* In each case, a String is placed in a SpanElement if it doesn't
* have one, a series of SpanElements are placed in a ParagraphElement
* if they don't have one, and a series of ParagraphElements is placed
* in a TextFlow if they don't have one, because the minimal TextFlow
* is one that has one paragraph containing one span.
*
* You can of course use MXML to set the 'content' property declaratively.
* Because it is the default property, you don't need to specify it.
*
* Examples:
*
* <s:RichText>Hello World</s:RichEditableText>
*
* Note: If you are not using markup tags like <p> and <span>,
* you should set the 'text' property because it s more efficient:
* <s:RichText text="Hello World"/>
*
* <s:RichText xmlns="library://ns.adobe.com/flex/spark">
* <span fontWeight='bold'>Hello</span> World
* </s:RichText>
*
* Note: When you write MXML like this, the content is parsed
* by the MXML compiler, not by the Text Layout Framework at runtime.
* Therefore you must use the Spark namespace in order for the compiler
* to recognize compile-time tags like <p> and <span>.
* Alternately, you can put a prefix for the Spark library namespace
* on each markup tag::
* <s:RichText>
* <s:span fontWeight='bold'>Hello</s:span> World
* </s:RichText>
*
* Setting the 'text' property affects the 'content' property
* and vice versa.
*
* If you set the text to a String such as "Hello World"
* and get the content, it will be a TextFlow
* containing a single ParagraphElement
* with a single SpanElement.
*
* If the text contains line-ending sequences --
* CR ("\r"), LF ("\n"), or CR+LF ("\r\n") --
* then the content will be set to a TextFlow
* which contains multiple paragraphs, each with one span.
*
* If you set the content to markup such as
* "<span fontWeight='bold'>Hello</span> World"
* and then get the text, it will be "Hello World",
* without the markup.
* If the content contains multiple paragraphs,
* as indicated by <p> tags, then when you get the text property
* the text in each paragraph will be separated by a single
* LF ("\n").
*
* Setting this property also affects the properties
* specifying the control's scroll position and the text selection.
* It resets the horizontalScrollPosition and verticalScrollPosition to 0,
* and it sets the selectionAnchorPosition and selectionActivePosition
* to the end of the new content.
*
* The default value is a TextFlow containing a single paragraph
* which contains a single span whose text is the empty String.
*
* @see spark.components.RichEditableText#text
* @see spark.components.RichEditableText#horizontalScrollPosition
* @see spark.components.RichEditableText#verticalScrollPosition
* @see spark.components.RichEditableText#selectionAnchorPosition
* @see spark.components.RichEditableText#selectionActivePosition
*/
public function get content():Object
public function set content(value:Object):void
//----------------------------------
// fontContext
//----------------------------------
/**
* The module factory that provides the font context for this component.
*/
public function get fontContext():IFlexModuleFactory
public function set fontContext(value:IFlexModuleFactory):void
}
}
Class RichEditableTextpackage spark.components
{
//--------------------------------------
// Events
//--------------------------------------
/**
* Dispached after the selectionAnchorPosition and/or
* selectionActivePosition properties have changed,
* either because of a user interaction or a programmatic change.
*/
[Event(name="selectionChange", type="mx.events.FlexEvent")]
/**
* Dispatched before a user editing operation occurs.
* You can alter the operation, or cancel the event
* to prevent the operation from being processed.
*/
[Event(name="changing", type="mx.events.TextOperationEvent")]
/**
* Dispatched after a user editing operation is complete.
* The operation may or may not change the text
* displayed in the component.
*/
[Event(name="change", type="mx.events.TextOperationEvent")]
/**
* Dispatched when the user pressed the Enter key,
* if the 'multiline' property is false.
*/
[Event(name="enter", type="mx.events.FlexEvent")]
//--------------------------------------
// Styles
//--------------------------------------
// All formatting supported by TLF
include "BasicInheritingTextStyles.as"
include "BasicNonInheritingStyles.as"
include "AdvancedInheritingTextStyles.as"
include "AdvancedNonInheritingTextStyles.as"
include "SelectionFormatTextStyles.as"
/**
* The alpha level of the color defined by
* the backgroundColor style.
* Valid values range from 0.0 to 1.0.
*
* @default 1.0
*/
[Style(name="backgroundAlpha", type="Number", inherit="no")]
/**
* The color of the background of the entire
* bounding rectangle of this component.
* If this style is undefined,
* no background is drawn.
* Otherwise, this RGB color is drawn with an alpha level
* determined by the backgroundAlpha style.
*
* @default undefined
*/
[Style(name="backgroundColor", type="uint", format="Color", inherit="no")]
//--------------------------------------
// Other metadata
//--------------------------------------
[DefaultProperty("content")]
/**
* RichEditableText is a UIComponent that supports rich text
* which is scrollable, selectable, and editable.
* The default formatting is specified by styles.
* The text content can include TLF elements
* such as divs, paragraphs, and spans,
* each of which can have its own formatting.
*/
public class RichEditableText extends UIComponent implements IViewport, IIMESupport
{
//------------------------------------------------------------------------------
//
// Constructor
//
//------------------------------------------------------------------------------
/**
* Constructor.
*/
public function RichEditableText()
//------------------------------------------------------------------------------
//
// Properties
//
//------------------------------------------------------------------------------
//----------------------------------
// autoSize
//----------------------------------
/**
* A flag indicating how this control determines
* its measuredWidth and measuredHeight in its measure() method.
*
* If this property is true, the measured size is determined
* in the same way as for RichText,
* by determining the rectangle required to display all of the content.
* For example, if you've specified neither how wide nor how high
* the control should be, then the text will wrap only at characters
* such as "\n".
* In this case, the measuredWidth will be sufficient to display
* the widest line and the measuredHeight sufficient to display all the lines.
* If you've specified how wide the component should be, but not how high,
* then the text will be wrapped within the specified width
* (assuming the lineBreak style is "toFit")
* and the measuredHeight will be sufficient to display
* all of the wrapped lines.
*
* If the control has no text to display, then its measuredWidth
* will be just large enough to display an insertion point
* and its measuredHeight will be sufficient to display one line of text.
*
* If the component is editable, the measured size can increase
* or decrease as you enter or delete text.
*
* If this property is false, the content is ignored and the measured size
* is determined by the widthInChars and heightInRows properties
* and by the styles that determine the height of the font
* and the width of its em box.
*
* If you specify an explicit width or percentWidth,
* or if you use left and right constraints,
* then these, rather than the calculated measuredWidth,
* will determine the actual width of the component.
*
* Similarly, if you specify an explicit height or percentHeight,
* or if you use top and bottom constraints,
* then these, rather than the calculated measuredHeight,
* will determine the actual height of the component.
*
* @default true
*/
public function get autoSize():Boolean
public function set autoSize(value:Boolean):void
//----------------------------------
// content
//----------------------------------
/**
* <The same as the 'content' property in RichText>
*
public function get content():Object
public function set content(value:Object):void
//----------------------------------
// displayAsPassword
//----------------------------------
/**
* A flag indicating whether this control is used
* for entering passwords.
*
* If true, the field does not display entered text;
* instead, each text character entered into the control
* appears as the character "*".
*
* If false, characters appear as themselves.
*
* @default false
*/
public function get displayAsPassword():Boolean
public function set displayAsPassword(value:Boolean):void
//--------------------------------------
// editable
//--------------------------------------
/**
* A flag indicating whether the user is allowed
* to edit the text in this control.
*
* If true, the mouse cursor will change to an i-bream
* when over the bounds of this control.
*
* If false, the mouse cursor will remain an arrow.
*
* If this property is true, the selectable property is ignored.
*
* @default true
*
* @see spark.components.RichEditableText#selectable
*/
public function get editable():Boolean
public function set editable(value:Boolean):void
//--------------------------------------
// heightInLines
//--------------------------------------
/**
* The default height for the control, measured in lines.
*
* For example, set this to 5 if you want the height
* of the control to be sufficient to display five lines of text.
*
* When autoSize is false, this property is used by the component's
* measure() method to determine its measuredHeight.
*
* When autoSize is true, this property is ignored.
*
* This property will also be ignored if you specify
* an explicit height, a percent height,
* or both top and bottom constraints.
*
* The control's formatting styles -- such as fontSize and lineHeight --
* are used to calculate the line height in pixels.
*
* @default 10
*/
public function get heightInLines():int
public function set heightInLines(value:int):void
//----------------------------------
// maxChars
//----------------------------------
/**
* The maximum number of characters that the user can enter
* into this control.
*
* If the value of this property is 0,
* a user can enter an unlimited amount of text.
*
* A script can set more text than maxChars allows;
* the maxChars property indicates only how much text
* a user can type or paste.
*
* @default 0
*/
public function get maxChars():int
public function set maxChars(value:int):void
//--------------------------------------
// multiline
//--------------------------------------
/**
* A flag indicating whether how the Enter key is processed
* when the component is editable.
*
* If true, the Enter key starts a new paragraph.
*
* If false, the Enter key does not change the content
* and instead causes an 'enter' event to be dispatched.
*
* @default false
*/
public function get multiline():Boolean
public function set multiline(value:Boolean):void
//----------------------------------
// restrict
//----------------------------------
/**
* A String indicating the set of characters
* that a user can enter into the control.
*
* If the value of the restrict property is null,
* you can enter any character.
*
* If the value of the restrict property is an empty string,
* you cannot enter any character.
*
* If the value of the restrict property is a string of characters,
* you may enter only characters in that string into the text field.
* Flex scans the string from left to right.
* You can specify a range such as A-Z or 0-9
* by using the hyphen (-) character.
* If the string begins with a caret (^) character,
* all characters are initially accepted and succeeding characters
* in the string are excluded from the set of accepted characters.
* If the string does not begin with a caret (^) character,
* no characters are initially accepted and succeeding characters
* in the string are included in the set of accepted characters.
*
* Because some characters have a special meaning when used in the
* restrict property, you must use backslash characters to specify
* the literal characters -, ^, and \.
* When you use the restrict property as an attribute in an MXML tag,
* use single backslashes, as in the following example: \^\-\\.
* When you set the restrict in an ActionScript expression,
* use double backslashes, as in the following example: \\^\\-\\\.
*
* This property only restricts user interaction;
* ActionScript code can put any text into the text field.
*
* @default null
*/
public function get restrict():String
public function set restrict(value:String):void
/--------------------------------------
// selectable
//--------------------------------------
/**
* A flag indicating whether the content is selectable
* with the mouse, or with the keyboard when the control
* has the keyboard focus.
*
* If the editable property is true,
* this property is ignored.
*
* @default true;
*
* @see spark.components.RichEditableText#editable
*/
public function get selectable():Boolean
public function set selectable(value:Boolean):void
//--------------------------------------
// selectionActivePosition
//--------------------------------------
[Bindable]
/**
* A character position specifying the end of the selection.
* that changes when the selection is extended.
*
* A value of -1 indicates "not set".
*
* @default -1
*
* @see spark.components.RichEditableText#selectionAnchorPosition
* @see spark.components.RichEditableText#selectionVisibility
* @see spark.components.RichEditableText#selectionColor
* @see spark.components.RichEditableText#unfocusedSelectionColor
* @see spark.components.RichEditableText#inactiveSelectionColor
*/
public function get selectionActivePosition():int
//--------------------------------------
// selectionAnchorPosition
//--------------------------------------
[Bindable]
/**
* A character position specifying the end of the selection
* that stays fixed when the selection is extended.
*
* A value of -1 indicates "not set".
*
* @default -1
*
* @see spark.components.RichEditableText#selectionActivePosition
* @see spark.components.RichEditableText#selectionVisibility
* @see spark.components.RichEditableText#selectionColor
* @see spark.components.RichEditableText#unfocusedSelectionColor
* @see spark.components.RichEditableText#inactiveSelectionColor
*/
public function get selectionAnchorPosition():int
//----------------------------------
// selectionVisibility
//----------------------------------
/**
* A String that determines when the selection is highlighted,
*
* The allowed values are specified by the
* spark.components.TextSelectionVisibility class.
*
* Possible values are TextSelectionVisibility.WHEN_FOCUSED,
* TextSelectionVisibility.WHEN_ACTIVE,
* and TextSelectionVisibility.ALWAYS,
*
* WHEN_FOCUSED means how the text selection only when the component
* has keyboard focus.
*
* WHEN_ACTIVE means show the text selection whenever
* the component's window is active, even if the component
* doesn't have the keyboard focus.
*
* ALWAYS means show the text selection, even if the component
* doesn't have the keyboard focus or if the component's
* window isn't the active window.
*
* @default TextSelectionVisibility.WHEN_FOCUSED
*
* @see mx.components.TextSelectionVisibility
* @see spark.components.RichEditableText#selectionAnchorPosition
* @see spark.components.RichEditableText#selectionActivePosition
* @see spark.components.RichEditableText#selectionColor
* @see spark.components.RichEditableText#unfocusedSelectionColor
* @see spark.components.RichEditableText#inactiveSelectionColor
*/
public function get selectionVisibility():String
public function set selectionVisibility(value:String):void
//--------------------------------------
// text
//--------------------------------------
[Bindable]
/**
* The text displayed by this component.
*
* Setting this property affects the 'content' property
* and vice versa.
*
* If you set the text to a String such as "Hello World"
* and get the content, it will be a TextFlow containing
* a single ParagraphElement with a single SpanElement.
*
* If the text contains line-ending sequences --
* CR ("\r"), LF ("\n"), or CR+LF ("\r\n") --
* then the content will be set to a TextFlow
* which contains multiple paragraphs, each with one span.
*
* If you set the content to markup such as
* "<span fontWeight='bold'>Hello</span> World"
* and then get the text, it will be "Hello World",
* without the markup.
* If the content contains multiple paragraphs,
* as indicated by <p> tags, then when you get the text property
* the text in each paragraph will be separated by a single
* LF ("\n").
*
* Setting this property also affects the properties
* specifying the control's scroll position and the text selection.
* It resets the horizontalScrollPosition and verticalScrollPosition to 0,
* and it sets the selectionAnchorPosition and selectionActivePosition
* to the end of the new content.
*
* @default ""
*
* @see spark.components.RichEditableText#content
* @see spark.components.RichEditableText#horizontalScrollPosition
* @see spark.components.RichEditableText#verticalScrollPosition
* @see spark.components.RichEditableText#selectionAnchorPosition
* @see spark.components.RichEditableText#selectionActivePosition
*/
public function get text():String
public function set text(value:String):void
//--------------------------------------
// widthInChars
//--------------------------------------
/**
* The default width for the control, measured in em units.
*
* An em is generally the width of the widest character in the font.
* For example, set this to 5 if you want the width
* of the control to be sufficient to display five characters.
*
* When autoSize is false, this property is used by the component's
* measure() method to determine its measuredWidth.
*
* When autoSize is true, this property is ignored.
*
* This property will also be ignored if you specify
* an explicit width, a percent width,
* or both left and right constraints.
*
* The control's fontSize style is used to calculated the em size.
*
* @default 15
*/
public function get widthInChars():Number
public function set widthInChars(value:Number):void
//------------------------------------------------------------------------------
//
// Methods
//
//------------------------------------------------------------------------------
/**
* Exports the control's content as XML with a <TextFlow> root tag.
*
* This XML can be used for setting the content of another control.
*
* @return XML representing the TextFlow that specifies
* this control's rich text content.
*/
public function export():XML
/**
* Inserts the specified text as if you had typed it.
*
* If a range was selected, the new text replaces the selected text;
* if there was an insertion point, the new text is inserted there,
* otherwise the text is appended to the text that is there.
*
* An insertion point is then set after the new text.
*
* If necessary, the text will scroll to ensure
* that the insertion point is visible.
*
* @param text The String to be inserted.
*/
public function insertText(text:String):void
/**
* Appends the specified text to the end of the TextView,
* as if you had clicked at the end and typed it.
*
* An insertion point is then set after the new text.
*
* If necessary, the text will scroll to ensure
* that the insertion point is visible.
*
* @param text The String to be appended.
*/
public function appendText(text:String):void
/**
* Scrolls so that the text position is visible in the container.
*
* @param anchorPosition The position of one end of the range
* to be scrolled into view.
*
* @param activePosition The position of the other end of the range
* to be scrolled into view.
*/
public function scrollToPosition(anchorPosition:int,
activePosition:int):void
/**
* Sets the selection range.
*
* If you pass no parameters, the entire range is selected.
*
* If you pass negative numbers for the two positions,
* it will deselect and no block selection or insertion point
* will appear.
*
* @param anchorPosition The new value for the selectionAnchorPosition.
*
* @param activePosition The new value for the selectionActivePosition.
*/
public function setSelection(anchorPosition:int = 0,
activePosition = int.MAX_VALUE):void
/**
* Returns an Object containing name/value pairs of text formats
* for the current selectionl.
*
* You can specify an Array containing names of the formats
* that you want returned; if you don't, all formats will be returned.
* The supported formats are those in the ITextLayoutFormat interface.
*
* If a format is not consistently set across the entire range,
* its value will be null.
*
* As an example, calling
* getSelectionFormat([ "fontSize", "color" ])
* might return ({ fontSize: 12, color: null })
* if the selection is uniformly 12-point but has multiple colors.
*
* @param names An Array containing names of formats to be returned,
* or null if you want all formats returned.
*
* @return An Object containing name/value pairs
* specifying the formats of the current selection.
*/
public function getSelectionFormat(names:Array = null):Object
/**
* Applies a set of name/value pairs of text formats
* to the current selection..
*
* The supported formats are those in the ITextLayoutFormat interface.
*
* A value of null does not get applied.
*
* For example, calling
* setAttributes({ fontSize: 12, color: 0xFF0000 })
* will set the fontSize and color of the selection.
*
* @param format An Object containing name/value pairs
* specifying formats to be applied to the current selection.
*/
public function setSelectionFormat(format:Object):void
}
}
Note: The methods implementing the IViewport and IIMESupport interfaces are not shown above because IViewport is a separate Spark feature that is not specific to text and IIMESupport is familiar from Flex 3. Class TextOperationEventpackage spark.events
{
/**
* Represents events that are dispatched when text content
* changes due to user operations such as inserting characters,
* backspacing, pasting, changing attributes, etc.
*/
public class TextOperationEvent extends Event
{
//--------------------------------------------------------------------------
//
// Class constants
//
//--------------------------------------------------------------------------
/**
* Dispatched before a FlowOperation is applied to edit a TextFlow.
* This event is cancelable; if it is canceled,
* the FlowOperation is not applied.
*/
public static const CHANGING:String = "changing";
/**
* Dispatched after a FlowOperation has been applied to edit a TextFlow.
* This event is not cancelable.
*/
public static const CHANGE:String = "change";
//------------------------------------------------------------------------------
//
// Constructor
//
//------------------------------------------------------------------------------
/**
* Constructor.
*
* @param type The event type; indicates the action that caused the event.
*
* @param bubbles Specifies whether the event
* can bubble up the display list hierarchy.
*
* @param cancelable Specifies whether the behavior
* associated with the event can be prevented.
*
* @param operation Reference to the FlowOperation object
* describing the editing operation being performed
* on the text by the user.
*/
public function TextOperationEvent(type:String, bubbles:Boolean = false,
cancelable:Boolean = true,
operation:FlowOperation = null)
//------------------------------------------------------------------------------
//
// Properties
//
//------------------------------------------------------------------------------
//--------------------------------------
// operation
//--------------------------------------
/**
* The FlowOperation being performed by the user.
*/
public function get operation():FlowOperation
}
}
Class TextSelectionVisibility
package spark.components
{
/**
* This class specifies the allowed values for the
* 'textVisibility' property in RichEditableText and TextBase.
*/
public final class TextSelectionVisibility
{
/**
* Always show the text selection, even if the component
* doesn't have the keyboard focus or if the component's
* window isn't the active window.
*/
public static const ALWAYS:String = "always";
/**
* Show the text selection whenever the component's window is
* active, even if the component doesn't have the keyboard focus.
*/
public static const WHEN_ACTIVE:String = "whenActive";
/**
* Show the text selection only when the component
* has keyboard focus.
*/
public static const WHEN_FOCUSED:String = "whenFocused";
}
}
B FeaturesNone. Examples and UsageLabelIf you simply specify the text, it will be formatted according the text formatting styles found by the usual getStyle() search algorithm. The Label will be just large enough to display the specified text. <Label text="Hello World"/> Since text is the default property of a Label, you can also specify it like this: <Label>Hello World</Label> Since Label supports CSS, you can use class selectors and instance styles: <Label styleName="myLabel" fontSize="12">Hello World</Label> If you specify an explicit width or a percentage width, the text will, by default, get wrapped to that width: <Label width="100">Text that will get implicitly wrapped because it is too wide.</Label> You can use LF characters to create explicit line breaks. In this case, the Label will be as wide as the longest line. <Label>Text that is explicitly wrapped onto two lines with an LF character.</Label> Of course, you can specify explicit linebreaks even when using implicit wrapping. If you use neither, all the text will appear in a single, wide line. If you don't specify a height, the height is calculated to be big enough to display all the text. If you specify an explicit height or a percent height and the text doesn't fit, the glyphs are clipped to the bounds you specify. RichTextThe examples above for Label are also valid for RichText, although when you use RichText the default property is content. However, you can go further and use rich text. The most explicit way to do this is to set the content to a TextFlow instance: <s:RichText fontSize="12">
<s:content>
<s:TextFlow color="0x222222">
<s:p>
<s:span fontWeight="bold">Hello </span>
<s:span> World</s:span>
</s:p>
</s:TextFlow>
</s:content>
</s:RichText>
Since content is the default property of RichText, you can omit it. It is also convenient to no prefix on the markup tags by making the Spark library namespace the default namespace on the <s:RichEditableText> tag: <s:RichText fontSize="12" xmlns="library://ns.adobe.com/flex/spark">
<TextFlow color="0x222222">
<p>
<span fontWeight="bold">Hello</span>
<span> World</span>
<p>
</TextFlow>
</s:RichText>
You can also get terser by setting the content to an Array of Strings and FlowElements, such as in this example: <s:RichText fontSize="12" xmlns="library://ns.adobe.com/flex/spark">> <span fontWeight="bold">Hello</span> World </s:RichText> The MXML compiler treats the character data " World" as if it were wrapped in a <String> tag. You can also set the content to a single FlowElement: <s:RichText fontSize="12" xmlns="library://ns.adobe.com/flex/spark"> <span fontWeight="bold">Hello World</span> </s:RichText> or to a single String: <s:RichText fontSize="12" fontWeight="bold">Hello World</s:RichText> However, in both cases, since there is only one format across the whole content, it is more efficient to set the text property: <s:RichText fontSize="12" fontWeight="bold" text="Hello World"/> RichEditableTextThe examples for Label and RichText are also valid for RichEditableText. But if you use RichEditableText, the text will by default be scrollable, selectable, and editable. Additional Implementation DetailsNone. Prototype WorkNone. Compiler WorkThe MXML compiler has already been modified to support "mixed content", and it is being modified to support enhanced font embedding using the new DefineFont4 SWF tag, as required for use with FTE. Web Tier Compiler ImpactNone. Flex Feature DependenciesThe skins for all Spark components displaying text make use of these text primitives. All three text primitives require classes in the TLF library. Backwards CompatibilitySyntax changesNone. BehaviorNone. Warnings/DeprecationNone. AccessibilitySpark components will not be accessible until a post-Gumbo release. PerformanceThe goal is to match Halo components, which used TextField, in speed and memory. Achieving this will depend on further optimizations in FTE beyond those in Flash Player 10. GlobalizationThe goal is to accept Unicode input in any language, but Flash Player 10.0 doesn't make this possible. (In particular, Arabic and Hebrew input are not possible on the Mac.) This should improve in Flash Player 10.X. LocalizationCompiler FeaturesNone. Framework FeaturesNone. The Flex code for these components does not throw any RTEs. TLF's runtime error messages are only in English and do not use Flex's ResourceManager. Issues and RecommendationsPlayerPlayer 10.X needs to reduce the memory footprint of FTE. Player 10.X needs to support a new accessibility API for conveying the selection from TLF to the Player. Player 10.X needs to support Unicode input with any input system on Windows and Macintosh. A future Player should either support countable mouse events (e.g., second mouseDown) or expose the system's doubleclick threshold. A future Player should have an API for getting the system's text selection color. TLFA future verson of TLF should allow all FlowElements – not just LinkElements – to support mouse events. A future verson of TLF should support lists. A future verson of TLF should support tables. A future verson of TLF should support text wrapped around images. FlexA post-Gumbo release should make CSS apply to TLF FlowElements such as paragraphs and spans. Especially important is supporting formats for hyperlink states, as in an a:hover selector. DocumentationNone. QAYou bet! |
|
| You must be logged in to comment. |
|---|
I'm glad you're excited by what FTE and TCAL make possible. However, I feel duty-bound to point out that TCAL doesn't yet support <ul>, <ol>, or <li> tags. However, the TCAL team hopes to get these in by the time Gumbo ships. Tables will probably have to wait until after Gumbo.
Posted by Hi Gordon,
ul,li etc.. so not a problem. It was only the limited set of formatting options we had with Fx3/Fp9 that made me what these to function. Now it really hardly matters. My formatting scope has just become endless! It's all just so much more than I could have hoped for even in my most wishful imaginings. 
At least we now have the primitives that will allow us to do just about anything format wise.
I read the first specs of the player 10 text engine and then these documents and I swear to you , my head was in a spin. The amount of functionality I could build on top of the base engine is boggling.
The only problem is I can no longer make that oft repeated phone call to clients informing them just how much extra development time would be required to fulfill some for there text layout demands (with the usual reply from the client being 'ok well cut it back to basics'
OK, I admit it, I'm an Alpha Geek I know, but this really does excite me!
Great work and thanks to the whole team who decided to take this major leap forward.
onwards and upwards people!
cheers
glenn
tinylion development UK
I'm not sure which is out of date, the source code or this document, but the API description lists that TextView has an editable property, while the actual source code does not list such a property. Should there be an editable property on it?
Pretty cool, but only thing make me sad is that there's no workaround on around-image while i have to create a custom component on TCAL and FTE, right?
And wiil RTE be updated to leverage these great features~
Anyway you guys did great job. thanks to Adobe
TCAL (now renamed to TLF) doesn't currently support wrapping text aroud images, but this is under consideration and may get implemented before Flex 4 ships.
A Gumbo version of RichTextEditor is not planned for Flex 4. However, with the getSelectionFormat() and setSelectionFormat() APIs, it should be easy to build one by hooking up controls in a toolbar to a TextView.
Great stuff but it's sad to read that tables aren't supported yet 
Wouldn't it be possible to trow in (the Flash Player 10.1) a WebKit based HTML component for the time being 
It would also allow Google to build the next generation of its GMail application
My current application uses lots of <mx:Label>, <mx:Text>, and <mx:TextArea>. Will it be seamless to transition to the new Spark versions of these components? What is the process and what differences will I notice?
Thanks...tired of fighting with the old text components and looking forward to using the newly built framework!!!
Amazing!
and to think, there was a time when all was was hoping for from vm10 was that the <ul><li> html text rendering was fixed to help with text formatting.
I hardly know where to start. This is so much more than I could of hoped for.
Thank you!
(ps. thats twice now that the 'please type this word graphic thingy' has said fatter!, are you trying to tell me something?)