Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Le contrôle Spark RichEditableText

Compatible Flex 4. Cliquer pour en savoir plus sur les compatibilités.Compatible ActionScript 3. Cliquer pour en savoir plus sur les compatibilités.Par tannoy (Antony Chauviré), le 29 avril 2010

Cet article est une traduction de l'aide Adobe Flex.

Adobe a donné son accord concernant la traduction de la documentation.

Présentation

Le contrôle RichEditableText est similaire au contrôle RichText car comme lui, il peut afficher du texte dans un format riche, avec de multiples formats de caractères et de paragraphes. En outre, le contrôle RichEditableText est interactif: il supporte les liens hypertexte, le défilement, la sélection, ou l'édition.

Le contrôle RichEditableText est similaire au contrôle TextArea, sauf qu'il n'a pas de bordure, de barres de défilement, ou de surbrillance au focus.

Pour créer un contrôle RichEditableText en MXML, vous utilisez la balise <s:RichEditableText>, comme le montre l'exemple suivant:

<?xml version="1.0"?>
<!-- sparktextcontrols/RichEditableTextExample.mxml -->
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009"    
    xmlns:mx="library://ns.adobe.com/flex/mx"     
    xmlns:s="library://ns.adobe.com/flex/spark">
 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout>
 
    <s:RichEditableText height="100" width="200">
        <s:text>
            Hello World!
        </s:text>
    </s:RichEditableText>
 
</s:Application>

Le fichier SWF de l'exemple ci-dessus est affiché ci-dessous :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Pour spécifier le texte, le contrôle RichText supporte les propriétés textFlow, text, et content. Si vous définissez la propriété text, le contenu est lu comme un chaîne de caractères; les balises telles que <p> et <img> sont ignorées. Si vous définissez les propriétés textFlow ou content, alors le contenu est traité par TLF et stocké comme un objet TextFlow. Les balises telles que <p> et <img> sont reconnues comme des instances des classes ParagraphElement et InlineGraphicImageElement.

Le contrôle RichEditableText supporte aussi les méthodes insertText() et appendText(). Ces méthodes vous permettent d'ajouter du texte au contenu du contrôle comme si vous l'aviez saisi. La méthode insertText() remplace une sélection (s'il en existe une) ou ajoute le nouveau texte au point d'insertion en cours. La méthode appendText() ajoute le text à la fin du contenu. Le nouveau texte ajouté avec ces méthodes n'est pas traité par TLF; il est lu comme une chaîne de caractères. L'exemple suivant vous permet d'ajouter ou d'insérer un nouveau texte au contrôle RichEditableText:

<?xml version="1.0"?>
<!-- sparktextcontrols/AddTextExample.mxml -->
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009"    
    xmlns:mx="library://ns.adobe.com/flex/mx"     
    xmlns:s="library://ns.adobe.com/flex/spark">
 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout>
 
  <fx:Script>  
    <![CDATA[
        [Bindable]
        private var newText:String = "<p>This is the new text.</p>";
 
        private function insertNewText():void {
            myRET.insertText(newText);
        }
 
        private function appendNewText():void {
            myRET.appendText(newText);        
        }
      ]]>  
  </fx:Script>  
 
    <s:RichEditableText id="myRET" height="100" width="200">
        <s:textFlow>
            <s:TextFlow>
                <s:p>This is paragraph 1.</s:p>
                <s:p>This is paragraph 2.</s:p>
            </s:TextFlow>
        </s:textFlow>
    </s:RichEditableText>
 
    <s:HGroup>
        <s:Button label="Insert New Text" click="insertNewText()"/>
        <s:Button label="Append New Text" click="appendNewText()"/>
    </s:HGroup>
 
    <s:Label text="New text to add: '{newText}'"/>
 
</s:Application>

Le fichier SWF de l'exemple ci-dessus est affiché ci-dessous :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Le contenu d'un contrôle RichEditableText peut-être exporté au format XML en utilisant la méthode export(), qui produit du XML. Pour un exemple d'utilisation de la méthode export(), regardez http://blog.flexexamples.com/2009/07/25/exporting-a-textflow-object-in-flex-4/

Vous pouvez rendre sélectionnable le contenu d'un contrôle RichEditableText en définissant sa propriété selectable sur true. Vous pouvez rendre éditable le contenu d'un contrôle RichEditableText en définissant sa propriété editable sur true.

L'exemple suivant rend le contenu d'un contrôle RichEditableText à la fois sélectionnable et éditable:

<?xml version="1.0"?>
<!-- sparktextcontrols/RETEditableAndSelectable.mxml -->
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009"    
    xmlns:mx="library://ns.adobe.com/flex/mx"     
    xmlns:s="library://ns.adobe.com/flex/spark">
 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout>
 
    <s:RichEditableText height="100" width="200"
        editable="true"
        selectable="true">
        <s:text>
            This text is editable and selectable!
        </s:text>
    </s:RichEditableText>
 
</s:Application>

Le fichier SWF de l'exemple ci-dessus est affiché ci-dessous :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Vous pouvez lire la plage de caractères sélectionnés avec les propriétés en lecture-seule selectionAnchorPosition et selectionActivePosition. Vous pouvez définir une sélection en utilisant la méthode selectRange(). Pour des exemples d'utilisation de la méthode selectRange(), regardez Selecting text.

Pour déterminer le formatage du texte de la sélection, utilisez la méthode getFormatOfRange(). Vous pouvez définir le format de la sélection en utilisant la méthode setFormatOfRange().

Vous pouvez couper le contenu du contrôle RichEditableText et laissez l'utilisateur le faire défiler en définissant la propriété clipAndEnableScrolling sur true, comme le montre l'exemple suivant:

<?xml version="1.0"?>
<!-- sparktextcontrols/RETClipAndScroll.mxml -->
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009"    
    xmlns:mx="library://ns.adobe.com/flex/mx"     
    xmlns:s="library://ns.adobe.com/flex/spark">
 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout>
 
    <s:RichEditableText height="100" width="200" clipAndEnableScrolling="true">
        <s:text>
            Hello World!
            Hello World!
            Hello World!
            Hello World!
            Hello World!
            Hello World!
            Hello World!
            Hello World!
            Hello World!
            Hello World!
            Hello World!
            Hello World!
            Hello World!
            Hello World!
            Hello World!
            Hello World!
            Hello World!
            Hello World!
            Hello World!
            Hello World!
            Hello World!
        </s:text>
    </s:RichEditableText>
 
</s:Application>

Le fichier SWF de l'exemple ci-dessus est affiché ci-dessous :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Le contrôle RichEditableText n'ajoute pas de barres de défilement pour vous, même quand le contenu est coupé et le défilement activé. Pour ajouter des barres de défilement au contrôle RichEditableText, vous devez placer le contrôle RichEditableText à l'intérieur d'une classe Scroller, comme le montre l'exemple suivant:

<?xml version="1.0"?>
<!-- sparktextcontrols/ScrollableRET.mxml -->
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009"    
    xmlns:mx="library://ns.adobe.com/flex/mx"     
    xmlns:s="library://ns.adobe.com/flex/spark">
 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout>
 
    <s:Scroller>  
        <s:RichEditableText height="100" width="200"
            editable="true"
            selectable="true">
            <s:text>
                This text scrolls vertically!
                This text scrolls vertically!
                This text scrolls vertically!
                This text scrolls vertically!
                This text scrolls vertically!
                This text scrolls vertically!
                This text scrolls vertically!
                This text scrolls vertically!
                This text scrolls vertically!
                This text scrolls vertically!
                This text scrolls vertically!
                This text scrolls vertically!
                This text scrolls vertically!
                This text scrolls vertically!
            </s:text>
        </s:RichEditableText>
    </s:Scroller>
 
    <s:Label text="To enable horizontal scrolling, set lineBreak to explicit:"/>
 
    <s:Scroller>  
        <s:RichEditableText height="100" width="200"
            editable="true"
            selectable="true"
            lineBreak="explicit">
            <s:text>
                This text scrolls horizontally! This text scrolls horizontally! This text scrolls horizontally!
                This text scrolls horizontally! This text scrolls horizontally! This text scrolls horizontally!
            </s:text>
        </s:RichEditableText>
    </s:Scroller>
 
</s:Application>

Le fichier SWF de l'exemple ci-dessus est affiché ci-dessous :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Le contrôle RichEditableText supporte le défilement par programmation à travers son implémentation de l'interface Iviewport; il défile en réponse à la roulette de souris; et il défile automatiquement lorsque vous faites glisser-sélectionnez ou tapez plus de texte qu'il ne peut en tenir dans les limites du contrôle. La classe Scroller vous permet de placer n'importe quel objet qui implémente l'interface Iviewport, tel que le contrôle RichEditableText, afin de permettre à cet objet de proposer le défilement.

Si vous sélectionnez une plage de texte qui n'est pas dans la zone visible du contrôle, vous pouvez défiler par programmation jusqu'à cette sélection, en utilisant la méthode scrollToRange(). L'exemple suivant sélectionne la 10ème ligne et défile jusqu'à cette ligne lorsque vous cliquez sur le bouton:

<?xml version="1.0"?>
<!-- sparktextcontrols/SelectScrollableRET.mxml -->
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009"    
    xmlns:mx="library://ns.adobe.com/flex/mx"     
    xmlns:s="library://ns.adobe.com/flex/spark">
 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout>
 
    <fx:Script>
        <![CDATA[
            private function scrollToLine():void {
                myRET.selectRange(440, 471);
                myRET.scrollToRange(440, 471);
            }
        ]]>
    </fx:Script>
 
    <s:Scroller>  
        <s:RichEditableText id="myRET" 
            selectionHighlighting="TextSelectionHighlighting.ALWAYS" 
            selectable="true" 
            height="100" width="200">
            <s:text>
                This text scrolls vertically1!
                This text scrolls vertically2!
                This text scrolls vertically3!
                This text scrolls vertically4!
                This text scrolls vertically5!
                This text scrolls vertically6!
                This text scrolls vertically7!
                This text scrolls vertically8!
                This text scrolls vertically9!
                This text scrolls vertically10!
                This text scrolls vertically11!
                This text scrolls vertically12!
                This text scrolls vertically13!
                This text scrolls vertically14!
            </s:text>
        </s:RichEditableText>
    </s:Scroller>
 
    <s:Button label="Select and Scroll to Line 10" click="scrollToLine()"/>
 
</s:Application>

Le fichier SWF de l'exemple ci-dessus est affiché ci-dessous :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Pour plus d'informations sur l'utilisation de TLF avec les contrôles de texte Spark, regardez Using Text Layout Framework.