2 Replies Latest reply on Sep 25, 2010 7:45 AM by enloz

    Problem: Dynamically add rich text

    enloz

      Hello to all,

       

       

      in advance sorry for my bad english,

       

      I have major problem and trying to solve it... for days...

      In basic, i want to add RichEditableText or TextArea in runtime, and have ability to bold, italic, change color,size, drag it etc. and change default text

       

       

      If anyone have any idea or solution i would be veery thankful

       

      This is my idea;

       

      Code:

       

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

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

                     xmlns:s="library://ns.adobe.com/flex/spark"

                     xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"  >

          <fx:Script>

              <![CDATA[

       

                  import spark.components.RichEditableText;

       

                  [Bindable]public var selID:int;

                  public var newID:int = new int(0)

       

                  public var ret:RichEditableText;

                  public var retTemp:RichEditableText;

       

                  protected function theClick(event:Event):void{

       

                      selID = event.target.id      

                  }

       

       

                  protected function btnAdd_clickHandler(event:MouseEvent):void{

       

                      ret = new RichEditableText;

       

                      ret.text = "Rich Text"

                      ret.id = newID.toString()

                      ret.addEventListener(MouseEvent.CLICK,theClick)

                      hBox.addElementAt(ret,newID);

       

                      newID++

                  }

       

       

                  protected function btnBold_clickHandler(event:MouseEvent):void{

       

                      retTemp = hBox.getElementAt(selID) as RichEditableText

                      retTemp.setStyle("fontWeight","bold");

                      hBox.addElementAt(retTemp,selID);

                  }

       

       

                  protected function btnItalic_clickHandler(event:MouseEvent):void{

       

                      retTemp = hBox.getElementAt(selID) as RichEditableText

                      retTemp.setStyle("fontStyle","italic");

                      hBox.addElementAt(retTemp,selID);

                  }

       

              ]]>

          </fx:Script>

       

       

          <mx:Label x="10" y="24" text="Selected ID: {selID.toString()}" id="idTxt"/>

          <mx:HBox x="10" y="53" width="565" height="44" id="hBox"  verticalAlign="middle">

          </mx:HBox>

          <s:Button x="10" y="117" label="Add" id="btnAdd" click="btnAdd_clickHandler(event)"/>

          <s:Button x="193" y="117" label="Italic" id="btnItalic" click="btnItalic_clickHandler(event)" />

          <s:Button x="115" y="117" label="Bold" id="btnBold" click="btnBold_clickHandler(event)"/>

       

      </s:Application>

       

      App works while "RichEditableText" text stays Rich Text, if you change text, it has no more ID

        • 1. Re: Problem: Dynamically add rich text
          lsxf_xin

          Why just read the Flex CookBook ,inside it tells how all most every UI control dynamically added to your application by AS.

          • 2. Re: Problem: Dynamically add rich text
            enloz Level 1

            ... I've searched CookBook

             

            For the App that I am trying to build, I need add RichText that have his own unique ID.

             

            If I use Canvas, Label,Button etc... in above code (replacing RichEditableText) it works fine but,

            in this case problem is when I change RichEditableText text, in this case "Rich Text", it's ID just vanish.

            ... if I setStyle ID remains

             

            If you have any specific solution other than "search CookBook"...please post it...

             

             

            Thanks in advance,

             

            PS:

             

            I've tried with

             

               import mx.core.UIComponent

               protected var uiComp:UIComponent

             

               protected function theClick(event:Event):void{

                       uiComp = UIComponent(event.target)

                       selID = uiComp.id     

               }

            ... and so on

             

            ... problem still remains