Styles werden in TextArea.textFlow nicht dargestellt

[kleiner midas]

Hallo zusammen,

ich lese HTML-formatierten Text (mit diversen Links) aus einer externen XML-Datei aus und setze diesen dann mit TextFlowUtil.importFromXML als textFlow in eine TextArea.
Mit <span class="mainBody"> habe ich im Text aus der XML-Datei CSS-Klassen gesetzt.
In der Application lade ich eine Styles.css mit <fx:Style source="Styles.css"/>
Die zugehörigen Style-Klassen sind in der CSS-Datei enthalten:

@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";

@font-face {
	src:url("assets/fonts/HENM__.TTF");
	fontFamily: floatFont;
	advancedAntiAliasing:true;
}

@font-face {
	src:url("assets/fonts/HENB__.TTF");
	fontFamily: headFont;
	advancedAntiAliasing:true;
}

.
.
.

a:link {
	color: #7a1a9b;
	textDecoration:underline;
}

a:hover{
	color: #ff9a00;
	textDecoration:underline;
}
.title{
	fontFamily: headFont;
	color: #7a1a9b;
	fontSize: 13;
}

.mainBody{
	fontFamily: floatFont;
	color: #000000;
	fontSize: 12;
}

Ich hab zur Kontrolle die Stylemanager der Application und der TextArea miteinander verglichen und sie scheinen gleich zu sein.
Trace-Ausgabe:

FlexGlobals.topLevelApplication.styleManager == infoTxt.styleManager: true

Aber die Formatierung der Styles wird in der TextArea nicht dargestellt.

Was mache ich falsch?

Viele Grüße,
Peter

[kleiner midas]

Eine Sache habe ich gefunden. Statt

<span class="title">

muss es wohl

<span styleName="title">

lauten.

Trotzdem klappt es leider immer noch nicht...

<TextFlow xmlns="http://ns.adobe.com/textLayout/2008" whiteSpaceCollapse="preserve" >
<p><span styleName="title">Titel</span></p>
<p><span styleName="mainBody">Weiterer Text...

Kann keiner helfen??

Gruß,
Peter

[Omega Psi]

Was sagt denn die Doku, wie man Text formatiert?

[kleiner midas]

Zitat von Omega Psi

Was sagt denn die Doku, wie man Text formatiert?

Dazu habe ich so leider nichts gefunden. Deshalb habe ich im Internet gesucht und es mittels TextFlow und TextConverter umgesetzt (infoTxt ist eine spark TextArea):

//var textFlow : TextFlow = TextFlowUtil.importFromXML( event.result as XML );
var textFlow : TextFlow = TextConverter.importToFlow( event.result as XML, TextConverter.TEXT_FIELD_HTML_FORMAT );
infoTxt.textFlow = textFlow;
infoTxt.textFlow.invalidateAllFormats();
infoTxt.textFlow.flowComposer.updateAllControllers();

Klappt aber leider nicht bei mir.

Die Umsetzung aus dem Buch 'Flex 4 Cookbook' 7.8 Locate Elements Within a TextFlow Seite 194/195 funktioniert leider auch nicht.

Möchte halt mit einer externen CSS-Datei meine nachgeladenen HTML-Texte (aus XML-Dateien) allgemeine Text-Formate zuweisen können.

Oder macht man das in Flex anders?

Viele Grüße,
Peter

[kleiner midas]

Wie kann man denn bei einer spark TextArea am besten nachzuladenden HTML-formatierten Text mit einer globalen CSS-Datei (ebenfalls extern gelagert) darstellen?

[Omega Psi]

Ich versuche morgen etwas dazu zu schreiben.

[kleiner midas]

Zitat von Omega Psi

Ich versuche morgen etwas dazu zu schreiben.

Das wäre super!

[kleiner midas]

Ich warte hier schon voll gespannt

[kleiner midas]

Hmmmmm .... schade. Könnte hier immer noch Hilfe brauchen.

[Omega Psi]

Sorry, bin gerade etwas unter Strom, musst dich noch etwas gedulden.

[kleiner midas]

Okay, danke. Gut zu wissen.

[kleiner midas]

Habe etwas gefunden, was zu funktionieren scheint:
Flex4 Text-Flow and CSS-Styles - C-Ware IT-Service (public) - Confluence

Hier der entsprechende Code:

////////////////////////////////////////////////////////////////////////////////
//
//  ADOBE SYSTEMS INCORPORATED
//  Copyright 2008-2009 Adobe Systems Incorporated
//  All Rights Reserved.
//
//  NOTICE: Adobe permits you to use, modify, and distribute this file
//  in accordance with the terms of the license agreement accompanying it.
//
//////////////////////////////////////////////////////////////////////////////////
package
de.cware.cweb.core.utils {
import flash.utils.Dictionary;
import flash.utils.getQualifiedClassName;
 
import flashx.textLayout.elements.FlowElement;
import flashx.textLayout.elements.FlowGroupElement;
import flashx.textLayout.elements.IFormatResolver;
import flashx.textLayout.elements.TextFlow;
import flashx.textLayout.formats.ITextLayoutFormat;
import flashx.textLayout.formats.TextLayoutFormat;
import flashx.textLayout.formats.TextLayoutFormatValueHolder;
import flashx.textLayout.property.Property;
import flashx.textLayout.tlf_internal;
 
import mx.core.FlexGlobals;
import mx.styles.CSSStyleDeclaration;
import mx.styles.IStyleManager2;
 
use namespace tlf_internal;
 
 
/** This version hands back a style on demand from the dictionary.
 * Another way to do it would be to "redo" the cascade top down.
 */
public class CSSFormatResolver implements IFormatResolver {
    private var _textLayoutFormatCache:Dictionary;
    private var _styleManager:IStyleManager2;
 
    static public var classToNameDictionary:Object = {
        "SpanElement":"span", "ParagraphElement":"p", "TextFlow":"TextFlow", "DivElement":"div" };
 
    /** Create a flex style resolver.  */
    public function CSSFormatResolver(styleManager:IStyleManager2):void {
        // cache results
        _textLayoutFormatCache = new Dictionary(true);
        _styleManager = styleManager;
    }
 
    private function addStyleAttributes(attr:TextLayoutFormatValueHolder, styleSelector:String):TextLayoutFormatValueHolder {
        var foundStyle:CSSStyleDeclaration = getStyleDeclaration(styleSelector);
        if (foundStyle) {
            for each (var prop:Property in TextLayoutFormat.description) {
                var propStyle:Object = foundStyle.getStyle(prop.name);
                if (propStyle) {
                    if (attr == null)
                        attr = new TextLayoutFormatValueHolder();
                    attr[prop.name] = propStyle;
                }
            }
        }
        return attr;
    }
 
    /** Calculate the TextLayoutFormat style for a particular element. */
    public function resolveFormat(elem:Object):ITextLayoutFormat {
        // note usage of TextLayoutFormatValueHolder.  This is just like TextLayoutFormat but optimized
        // for the case where only a few stles are actually filled in.  Its naming and usage is subject to change and review.
        var attr:TextLayoutFormatValueHolder = _textLayoutFormatCache[elem];
        if (attr !== null)
            return attr;
 
        if (elem is FlowElement) {
            // maps ParagraphElement to p, SpanElement to span etc.
            var elemClassName:String = getQualifiedClassName(elem);
            elemClassName = elemClassName.substr(elemClassName.lastIndexOf(":") + 1);
            var dictionaryName:String = classToNameDictionary[elemClassName];
            attr = addStyleAttributes(attr, dictionaryName ? dictionaryName : elemClassName);
 
            if (elem.styleName != null)
                attr = addStyleAttributes(attr, "." + elem.styleName);
 
            if (elem.id != null)
                attr = addStyleAttributes(attr, "#" + elem.id);
 
            _textLayoutFormatCache[elem] = attr;
        }
        // else if elem is IContainerController inherit via the container?
        return attr;
    }
 
    /** Calculate the user style for a particular element. */
    public function resolveUserFormat(elem:Object, userStyle:String):* {
        var flowElem:FlowElement = elem as FlowElement;
        var cssStyle:CSSStyleDeclaration;
        var propStyle:*;
 
        // support non-tlf styles
        if (flowElem) {
            if (flowElem.id) {
                cssStyle = getStyleDeclaration("#" + flowElem.id);
                if (cssStyle) {
                    propStyle = cssStyle.getStyle(userStyle);
                    if (propStyle !== undefined)
                        return propStyle;
                }
            }
            if (flowElem.styleName) {
                cssStyle = getStyleDeclaration("." + flowElem.styleName);
                if (cssStyle) {
                    propStyle = cssStyle.getStyle(userStyle);
                    if (propStyle !== undefined)
                        return propStyle;
                }
            }
 
            var elemClassName:String = getQualifiedClassName(flowElem);
            elemClassName = elemClassName.substr(elemClassName.lastIndexOf(":") + 1);
            var dictionaryName:String = classToNameDictionary[elemClassName];
            cssStyle = getStyleDeclaration(dictionaryName == null ? elemClassName : dictionaryName);
            if (cssStyle) {
                propStyle = cssStyle.getStyle(userStyle);
                if (propStyle !== undefined)
                    return propStyle;
            }
        }
        return undefined;
    }
 
    /** Completely clear the cache.  None of the results are valid. */
    public function invalidateAll(tf:TextFlow):void {
        _textLayoutFormatCache = new Dictionary(true);  // clears the cache
    }
 
    /** The style of one element is invalidated.  */
    public function invalidate(target:Object):void {
        delete _textLayoutFormatCache[target];
        var blockElem:FlowGroupElement = target as FlowGroupElement;
        if (blockElem) {
            for (var idx:int = 0; idx < blockElem.numChildren; idx++)
                invalidate(blockElem.getChildAt(idx));
        }
    }
 
    /** these are sharable between TextFlows */
    public function getResolverForNewFlow(oldFlow:TextFlow, newFlow:TextFlow):IFormatResolver {
        return this;
    }
 
    private function getStyleDeclaration(selector:String):CSSStyleDeclaration {
        return _styleManager.getMergedStyleDeclaration(selector);
    }
}
}

ACHTUNG:
Seit 4.5 TextLayoutFormat statt TextLayoutFormatValueHolder verwenden!

Klasse wie folgt benutzen:

var flow:TextFlow = new TextFlow();
flow.formatResolver = new CSSFormatResolver(StyleManager.getStyleManager(moduleFactory));
RichEditableText(content).textFlow = flow;

Aber wenn das die einzige Möglichkeit darstellt, mittels einer externen CSS-Datei einen TextFlow zu stylen, finde ich das sehr fragwürdig!

[kleiner midas]

Hier die zugehörige AS-Datei.

Links bekomme ich leider immer noch nicht richtig formatiert :[-

[kleiner midas]

... aber das kann doch eigentlich nicht der richtige Weg sein.
Gibt es da keine andere Möglichkeit?

[kleiner midas]

Wollte noch mal nachfragen, ob jemand eine einfachere Lösung für das Problem kennt, wo dann auch die Links formatiert werden können!

Viele Grüße,
Peter