17 Replies Latest reply on Aug 3, 2011 2:22 PM by Rangora

    Please help with creating text area

    lingo55 Level 1

      Hi all,

      I am embarrasingly new to FLEX 4, so please excuse my questions.

      What I want to do is to create a button that inserts a text area in my canvas every time it gets clicked.

      How would I do that?

      Thanks a lot

        • 1. Re: Please help with creating text area
          kokorito Level 4

          easiest way would be to use states

           

          take a look at the videos here, should help you get started

           

          http://www.adobe.com/devnet/flex/videotraining.html

          • 2. Re: Please help with creating text area
            GordonSmith Level 4

            Write a 'click' handler for the Button that does something like

             

            var textArea:TextArea = new TextArea();

            textArea.x = ...;

            textArea.y = ...;

            myCanvas.addChild(textArea);

             

            Gordon Smith

            Adobe Flex SDK Team

            • 3. Re: Please help with creating text area
              lingo55 Level 1

              Thanks for the link Kokorito.

              • 4. Re: Please help with creating text area
                lingo55 Level 1

                Thanks Gordon,

                problem is I don't know how to create a click handler....but will do some research.

                • 5. Re: Please help with creating text area
                  lingo55 Level 1

                  OK, this is what I've done:

                   

                  protected function create_text(evt:MouseEvent):void {

                   

                  var RichEditableText:RichEditableText = new RichEditableText();

                  RichEditableText.x = 50;

                  RichEditableText.y = 23;

                  MyCanvas.addChild(RichEditableText);

                   

                  }

                   

                  And this is the code attached to my button:

                   

                  click="create_text(event);"

                   

                  But I get this error:

                   

                  1046: Type was not found or was not a compile-time constant: RichEditableText. Main.mxml /src line 12 Flex Problem

                   

                  What am I doing wrong?

                  • 6. Re: Please help with creating text area
                    kokorito Level 4
                    <?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:Declarations>
                              <!-- Place non-visual elements (e.g., services, value objects) here -->
                         </fx:Declarations>
                         
                         <s:states>
                              <s:State name="first"/>
                              <s:State name="second"/>
                         </s:states>
                         
                         <s:Button includeIn="first" label="show text area" click="currentState='second'"/>
                         <s:TextArea includeIn="second"/>
                         
                         
                    </s:Application>
                    • 7. Re: Please help with creating text area
                      Rangora Level 3

                      Do not give your variable the exact class name... Your app have no way to understand if you try to work on the var or on the class.

                      • 8. Re: Please help with creating text area
                        lingo55 Level 1

                        Thanks Kokorito, but what I want to do is to insert a RichEditableText

                        every time the button is clicked

                        .

                        • 9. Re: Please help with creating text area
                          lingo55 Level 1

                          Thanks Rangora,

                          could you give me an example please?

                           

                          TY

                          • 10. Re: Please help with creating text area
                            kokorito Level 4

                            RichEditableText is a class

                             

                            you cant name an instance of a class the same as the class. Flex is case sensitive so you can use richEditableText or myRichEditableText

                            • 11. Re: Please help with creating text area
                              lingo55 Level 1

                              OK I've done this now:

                               

                              protected function create_text(evt:MouseEvent):void {

                               

                              var myRichEditableText:RichEditableText = new RichEditableText();

                              myRichEditableText.x = 50;

                              myRichEditableText.y = 23;

                              MyCanvas.addChild(myRichEditableText);

                              }

                               

                              But I get this error:

                               

                              1046: Type was not found or was not a compile-time constant: RichEditableText. Main.mxml /src line 12 Flex Problem

                               

                               

                              TY

                              • 12. Re: Please help with creating text area
                                kokorito Level 4

                                you have to import it first

                                 

                                import spark.components.RichEditableText;

                                • 13. Re: Please help with creating text area
                                  lingo55 Level 1

                                  OK, no more errors now..but nothing gets inserted. Here is my code

                                   

                                  <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" backgroundColor="#F4F2F2" width="900" height="600">

                                   

                                  <s:layout>

                                   

                                  <s:BasicLayout/>

                                   

                                  </s:layout>

                                   

                                   

                                  <fx:Script>

                                  <![CDATA[

                                   

                                  import spark.components.RichEditableText;

                                   

                                   

                                  protected function create_text(evt:MouseEvent):void {

                                   

                                  var myRichEditableText:RichEditableText = new RichEditableText();

                                  myRichEditableText.width = 50;

                                  myRichEditableText.height = 23;

                                  myRichEditableText.x = 0;

                                  myRichEditableText.y = 0;

                                  myRichEditableText.text=

                                  "RichEditableText"

                                  MyCanvas.addChild(myRichEditableText);

                                  }

                                   

                                  ]]>

                                   

                                  </fx:Script>

                                   

                                   

                                  <fx:Declarations>

                                   

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

                                   

                                  </fx:Declarations>

                                   

                                  <s:BorderContainer x="63" y="254" width="501" height="290" borderVisible="false" dropShadowVisible="true" cornerRadius="0" id="BusinessCard">

                                   

                                  </s:BorderContainer>

                                   

                                  <mx:HRule x="63" y="237" chromeColor="#A4A4A4" height="1" width="501"/>

                                   

                                  <mx:VRule x="581" y="254" width="1" chromeColor="#A4A4A4" height="290"/>

                                   

                                  <s:Label text="85 mm" chromeColor="#B0B0B0" color="#A2A2A2" backgroundColor="#F4F2F2" width="53" verticalAlign="middle" textAlign="center" x="297" y="231"/>

                                   

                                  <s:Label text="55 mm" width="47" height="19" color="#A2A2A2" backgroundColor="#F4F2F2" verticalAlign="middle" x="574" y="388"/>

                                   

                                  <s:Button x="692" y="254"

                                  label="

                                  Insert text"

                                  click="create_text(event);"

                                  />

                                  </s:Application>

                                   

                                  </code>

                                   

                                  </code>

                                  </code>

                                   

                                   

                                   

                                   

                                  • 14. Re: Please help with creating text area
                                    kokorito Level 4

                                    you are adding the text area to a container called MyCanvas

                                     

                                    what is the container MyCanvas?

                                     

                                    also it is bad practice to start instance names with a capital, use lower case for instance names and capitals for class names.

                                    id="businessCard" (is that where you want the text area?)

                                     

                                    although that is really up to you but you'll appreciate it later if you get into the habit now

                                    • 15. Re: Please help with creating text area
                                      lingo55 Level 1

                                      Thanks again Kokorito. I have changed the container name to myCanvas bu still

                                      nothing gets inserted. Heres the code again:

                                       

                                      <?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" backgroundColor="#F4F2F2" width="900" height="600">

                                       

                                       

                                      <s:layout>

                                       

                                       

                                      <s:BasicLayout/>

                                       

                                       

                                      </s:layout>

                                       

                                       

                                      <fx:Script>

                                      <![CDATA[

                                       

                                      import spark.components.RichEditableText;

                                       

                                       

                                      protected function create_text(evt:MouseEvent):void {

                                       

                                      var myRichEditableText:RichEditableText = new RichEditableText();

                                      myRichEditableText.width = 50;

                                      myRichEditableText.height = 23;

                                      myRichEditableText.x = 0;

                                      myRichEditableText.y = 0;

                                      myRichEditableText.text=

                                      "kljlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkjlkj"

                                      myCanvas.addChild(myRichEditableText);

                                      }

                                      ]]>

                                       

                                      </fx:Script>

                                       

                                       

                                      <fx:Declarations>

                                       

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

                                       

                                      </fx:Declarations>

                                       

                                      <s:BorderContainer x="63" y="254" width="501" height="290" borderVisible="false" dropShadowVisible="true" cornerRadius="0" id="myCanvas">

                                       

                                       

                                      </s:BorderContainer>

                                       

                                      <mx:HRule x="63" y="237" chromeColor="#A4A4A4" height="1" width="501"/>

                                       

                                      <mx:VRule x="581" y="254" width="1" chromeColor="#A4A4A4" height="290"/>

                                       

                                      <s:Label text="85 mm" chromeColor="#B0B0B0" color="#A2A2A2" backgroundColor="#F4F2F2" width="53" verticalAlign="middle" textAlign="center" x="297" y="231"/>

                                       

                                      <s:Label text="55 mm" width="47" height="19" color="#A2A2A2" backgroundColor="#F4F2F2" verticalAlign="middle" x="574" y="388"/>

                                       

                                      <s:Button x="692" y="254"

                                      label="

                                      Insert text"

                                      click="create_text(event);"

                                      />

                                      </s:Application>

                                      • 16. Re: Please help with creating text area
                                        Rangora Level 3

                                        Tried your code. Got a popup telling me :

                                         

                                        Error: addChild() is not available in this class. Instead, use addElement() or modify the skin, if you have one.

                                         

                                        Changed     myCanvas.addChild(myRichEditableText); to     myCanvas.addElement(myRichEditableText); and it worked.

                                         

                                        But you should use a HGroup, a VGroup or a TileGroup instead of a BorderContainer... You would not have to set x and y of the text area manually.

                                        • 17. Re: Please help with creating text area
                                          lingo55 Level 1

                                          THANKS!! it seems to be working now. I am in Spain and it's

                                          quite late here...I better go to bed now and con

                                          tinue with my next problem tomorrow.

                                          Thanks again