dynamisches Befüllen einer TextArea Komponente

[Ouroborus23]

Hallo!

Ich scheitere an folgendem (wahrscheinlich simplen) Problem, zudem mir einfach aufgrund mangelnder Erfahrung mit FlashBuilder 4 kein Lösungsansatz einfallen mag...

Ich erstelle zu allererst eine TextArea

<s:TextArea id="textArea" width="100%" height="155" borderColor="#32c747" selectable="false" editable="false" verticalAlign="top"/>

Nun möchte entsprechend der Datensätze aus einer Datenbank (das funktioniert alles schon...) diese Textarea mit unterschiedlichen Informationen befüllen, von welcher einzelne Teile anders gefärbt/bold erscheinen sollen.

Mit der text-Eigenschaft der textArea kann ich nur den String verändern, nicht aber das Erscheinungsbild des Textes. Ich habe nun schon verschiedene Versuche mit textDisplay und textFlow unternommen, werde nun aber langsam verrückt...

Daher meine Frage: gibt es eine einfache und elegante Möglichkeit, im Script-Teil der mxml dynamischen Text zu generieren und auch zu formatieren? Ist TextArea überhaupt die dafür geeignete Komponente oder geht das auch besser?

Vielen Dank! (Ich befürchte gerade ein wenig, das die Lösung so banal und simpel sein wird, das allein das stellen der Frage schon peinlich ist...)

[Omega Psi]

Ja, das geht alles - auch einigermaßen komplexe Sachen.

[Ouroborus23]

Zitat von Omega Psi

Ja, das geht alles - auch einigermaßen komplexe Sachen.

=D Vielen dank für die schnelle Antwort - Ich ging davon aus das das funktioniert, die Frage ist nur: wie? Wenn du vielleicht Links zu Beispielen oder einer guten Dokumentation hast, immer her damit, ab dort kann ich dann auch wieder allein laufen. Ich finde halt immer nur Beispiele, wie ich formatierten Text innerhalb der Komponente einfügen kann, allerdings nicht, wie man es im Script-Bereich löst..

Würde mich sehr über eine genauere Erklärung freuen

[Omega Psi]

<?xml version="1.0"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
         implements="mx.core.IDataRenderer">

    <fx:Script>
        <![CDATA[

        import flashx.textLayout.elements.ParagraphElement;
        import flashx.textLayout.elements.SpanElement;
        import flashx.textLayout.elements.TextFlow;

        //-----------------------------
        //          data
        //-----------------------------

        /**
         * Storage for the data property.
         */
        private var _data:Object;

        /**
         * Flag indicating the data property changed.
         */
        private var _dataChanged:Boolean;

        [Bindable("dataChanged")]
        /**
         * @inheritDoc
         */
        public function get data():Object
        {
            return _data;
        }

        public function set data(value:Object):void
        {
            if (_data == value)
            {
                return;
            }
            _data = value;
            _dataChanged = true;
            invalidateProperties();
            dispatchEvent(new Event("dataChanged"));
        }

        //---------------------------------------------------------------------
        //
        //          Methods
        //
        //---------------------------------------------------------------------

        /**
         * Creates a new TextFlow object containing text read from the given object.
         *
         * @param data
         *        The object containing the data to be displayed.
         * @param labelField
         *        A string identifying the property to be read.
         *
         * @return the textFlow instance created.
         */
        private function dataToTextFlow(data:Object, labelField:String):TextFlow
        {
            var s:SpanElement = new SpanElement();
            s.text = data[labelField];

            var p:ParagraphElement = new ParagraphElement();
            p.addChild(s);

            var t:TextFlow = new TextFlow();
            t.addChild(p);

            return t;
        }

        //---------------------------------------------------------------------
        //
        //          Overridden Methods
        //
        //---------------------------------------------------------------------

        /**
         * @inheritDoc
         */
        protected override function commitProperties():void
        {
            super.commitProperties();

            textDisplay.textFlow = data ? dataToTextFlow(data, "label") : null;
        }

        ]]>
    </fx:Script>

    <s:TextArea id="textDisplay" />
</s:Group>

So als Beispiel.

[Ouroborus23]

Aaaah okay die Geschichte mit dem SpanElement war mir nicht bekannt.. Ich hatte gedacht man müsse da irgendwie mit html-Statements rumeiern.

Vielen Dank!