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();

           addChild(textField);

      }

       

      private function insertText(t:String):void

      {

           var tf:TextFlow = new TextFlow();

           var paragraph1:ParagraphElement = new ParagraphElement();

           var span1:SpanElement = new SpanElement();

           span1.text = t;

           paragraph1.addChild(span1);

           tf.addChild(paragraph1);

           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.

             

            Thanks.

            • 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:s="library://ns.adobe.com/flex/spark"

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

                creationComplete="loadXML()">

                <fx:Declarations>

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

                </fx:Declarations>

                 

                <fx:Script>

                <![CDATA[

                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;

                 

                [Bindable]

                private var _w:Number = 640;

                 

                [Bindable]

                private var _h:Number = 360;

                 

                [Bindable]

                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);

                urlloader.load(urlrequest);

                }

                 

                protected function urlLoaderComplete(evt:Event):void

                {

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

                }

                 

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

                {

                cleanElements();

                 

                _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);

                 

                projectInfoWrapper.addChild(projectInfo);

                 

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

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

                //_w = w;

                 

                if(projectIMG.length() > 0)

                {

                addPhotos(projectIMG);

                }

                 

                if(projectVID.length() > 0)

                {

                addVideos(projectVID);

                }

                 

                this.addElement(projectInfoWrapper);

                myText = new RichEditableText();

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

                myText.setStyle("color","white");

                this.addElement(myText);

                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);

                 

                imgContainer.addElement(img);

                elementsArr.push(img);

                 

                }

                }

                 

                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;

                 

                vidContainer.addChild(vid);

                imgContainer.addElement(vidContainer);

                elementsArr.push(vid);

                 

                }

                }

                 

                protected function cleanElements():void

                {

                if(elementsArr.length > 0)

                {

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

                {

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

                {

                elementsArr[x].externalCloseAction();

                 

                }

                }

                imgContainer.removeAllElements();

                elementsArr = new Array();

                }

                }

                 

                protected function showHideInfo():void

                {

                if(projectInfoWrapper.visible)

                {

                projectInfoWrapper.visible = false;

                }else

                {

                projectInfoWrapper.visible = true;

                }

                }

                 

                 

                ]]>

                </fx:Script>

                 

                <s:SkinnableContainer id="allContainer">

                <s:layout>

                <s:VerticalLayout />

                </s:layout>

                 

                <s:SkinnableContainer>

                 

                 

                <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:HGroup>

                </s:VGroup>

                 

                </s:SkinnableContainer>

                 

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

                 

                <s:HGroup id="imgContainer">

                 

                </s:HGroup>

                 

                </s:Scroller>

                </s:SkinnableContainer>

                </s:Group>

                - 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;

                 

                 

                 

                addChild(simple_shape());

                }

                 

                public function simple_shape():Sprite

                {

                square = new Sprite();

                addChild(square);

                square.graphics.lineStyle(1,0xffffff);

                square.graphics.beginFill(0x000000);

                square.graphics.drawRect(0,0,w,h);

                square.graphics.endFill();

                 

                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

                  UIComponent

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

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