6 Replies Latest reply on Sep 1, 2010 11:52 AM by Vie Bone

    Create RichEditableText with actionscript

    Vie Bone Level 1

      Hello all!


      i am trying to create a text element that allow me to insert or modify the text content.


      I am not using mxml, I need to create it with actionscript.


      The code that I'm using is:


      var textField:RichEditableText;


      private function displayText():void



           textField  = new RichEditableText();




      private function insertText(t:String):void


           var tf:TextFlow = new TextFlow();

           var paragraph1:ParagraphElement = new ParagraphElement();

           var span1:SpanElement = new SpanElement();

           span1.text = t;



           textField.textFlow = tf;



      insertText("hello world");


      This code doesn't work


      Any Ideas?????


      Thanks a lot.

        • 1. Re: Create RichEditableText with actionscript
          Flex harUI Adobe Employee

          DO you get an error?

          • 2. Re: Create RichEditableText with actionscript
            Vie Bone Level 1

            No, I don't get any error.


            Working on my problem I realize that the problem is that I'm working in a .as file, not in a mxml file and in the class I have to use addChild an not addElement.


            If I do the same in a mxml file and add my new RichEditableText with the addElement function it works perfect.


            Do you know why??? I would like to set up the RichEditableText in a class.



            • 3. Re: Create RichEditableText with actionscript
              Flex harUI Adobe Employee

              Is your class an AS component?  What does it extend?  It has to follow the

              rules to being a custom Flex AS component.

              • 4. Re: Create RichEditableText with actionscript
                Vie Bone Level 1

                hi thanks!


                I don't know if I am doing it in the correct way, if you don't mind I am puting my code bellow:


                - MXML FILE:


                <?xml version="1.0" encoding="utf-8"?>

                <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"


                xmlns:mx="library://ns.adobe.com/flex/mx" width="100%"



                <!-- Place non-visual elements (e.g., services, value objects) here -->





                import assets.MenuItemSelectedEvent;

                import assets.Moogaloop2;

                import assets.ProjectInfo;


                import mx.collections.ArrayCollection;

                import mx.controls.Alert;

                import mx.controls.Image;

                import mx.core.UIComponent;

                import mx.flash.UIMovieClip;


                import spark.components.RichEditableText;


                private var xmlData:XML;



                private var _w:Number = 640;



                private var _h:Number = 360;



                private var _title:String;


                private var elementsArr:Array = new Array();


                private var projectInfoWrapper:UIComponent;


                private var myText:RichEditableText;



                protected function loadXML():void



                var urlrequest:URLRequest = new URLRequest("../data/categories.xml");

                var urlloader:URLLoader = new URLLoader();

                urlloader.addEventListener(Event.COMPLETE, urlLoaderComplete);




                protected function urlLoaderComplete(evt:Event):void


                xmlData = new XML(evt.target.data);



                public function loadProject(_category:Number, _project:Number, w:Number):void




                _title = xmlData.category[_category].@name;

                _title +=  " > " + xmlData.category[_category].project[_project].@name;

                projectInfoWrapper = new UIComponent();

                projectInfoWrapper.visible = false;


                var projectInfo:ProjectInfo = new ProjectInfo(_w,_h);




                var projectIMG:XMLList = xmlData.category[_category].project[_project].img;

                var projectVID:XMLList = xmlData.category[_category].project[_project].vid;

                //_w = w;


                if(projectIMG.length() > 0)





                if(projectVID.length() > 0)






                myText = new RichEditableText();

                myText.text = "jon is a good man asdf asdf asdf asdf asdf asdfas df asdfa dsfasf fd";



                projectInfoWrapper.y = imgScroller.y;

                myText.y = projectInfoWrapper.y;



                protected function addPhotos(photos:XMLList):void


                for(var x:Number=0; x<photos.length(); x++)


                var img:Image = new Image();

                img.source = "../"+photos[x].@url;

                img.id = String(x);








                protected function addVideos(videos:XMLList):void


                for(var x:Number=0; x<videos.length(); x++)



                var id:String = videos[x].@id;

                var title:String = videos[x].@title;

                var vid:Moogaloop2 = new Moogaloop2(id,title);

                var playerSize:Array = vid.getPlayerSize();

                vid.name = id;


                var vidContainer:UIComponent = new UIComponent();

                vidContainer.width = 640;

                vidContainer.height = 360;


                vid.x = vidContainer.width / 2 - playerSize[0] / 2;









                protected function cleanElements():void


                if(elementsArr.length > 0)


                for(var x:Number = 0; x < elementsArr.length; x++)


                if(getQualifiedClassName(elementsArr[x]) == "assets::Moogaloop2")







                elementsArr = new Array();




                protected function showHideInfo():void




                projectInfoWrapper.visible = false;



                projectInfoWrapper.visible = true;








                <s:SkinnableContainer id="allContainer">


                <s:VerticalLayout />






                <s:VGroup width="{_w}" horizontalAlign="right">

                <s:BitmapImage source="@Embed('skins/assets/socialmedia_buttons.jpg')"/>

                <s:HGroup horizontalAlign="left" width="100%">

                <s:Label id="title" text="{_title}" color="#FFFFFF" width="100%"/>

                <s:Button label="Project Info" click="showHideInfo()"/>






                <s:Scroller id="imgScroller" width="{_w}" height="380" verticalScrollPolicy="off">


                <s:HGroup id="imgContainer">







                - THE ACTIONSCRIPT CLASS(I chenged the code but this is the class in where i was creating the RichEditableText):

                package assets


                import flash.display.Sprite;

                import flash.text.TextField;

                import flash.text.TextFormat;

                import flash.text.TextFormatAlign;


                import flashx.textLayout.conversion.ITextImporter;

                import flashx.textLayout.conversion.TextConverter;

                import flashx.textLayout.edit.EditManager;

                import flashx.textLayout.elements.FlowElement;

                import flashx.textLayout.elements.ParagraphElement;

                import flashx.textLayout.elements.SpanElement;

                import flashx.textLayout.elements.TextFlow;


                import mx.controls.Alert;

                import mx.controls.Text;

                import mx.events.FlexEvent;


                import spark.components.RichEditableText;

                import spark.utils.TextFlowUtil;




                public class ProjectInfo extends Sprite


                private var square:Sprite;

                private var w:Number;

                private var h:Number;


                private var textField:RichEditableText;

                private var myEdit:EditManager;


                private var _textFlow:TextFlow;

                private var importer:ITextImporter = TextConverter.getImporter(TextConverter.TEXT_LAYOUT_FORMAT);


                public function ProjectInfo(_w:Number,_h:Number)


                w = _w;

                h = _h;


                textField = new RichEditableText();

                textField.width = _w;

                textField.height = _h;

                textField.text = "ya ya ya ya ayasf asdf asdf asdf asdf asdf";

                //textField.editable = true;

                //textField.wordWrap = true;







                public function simple_shape():Sprite


                square = new Sprite();







                square.alpha = 0.7;


                return square;







                Thanks a lot.



                • 5. Re: Create RichEditableText with actionscript
                  Flex harUI Adobe Employee

                  Plain Sprites cannot parent UIComponents.  The parent must also extend


                  • 6. Re: Create RichEditableText with actionscript
                    Vie Bone Level 1

                    Ahhhh my friend, what a silly think, sorry and thanks a lot!!!!!