13 Replies Latest reply on May 9, 2009 7:04 PM by ShaF10

    Textarea page break

    ShaF10 Level 1

      Hi Guys

       

      I have a textarea with a fixed height and width. What I want to do is when the user reaches the page break (i.e. end of the height) of the textarea I want to create a new textarea so the user can continue with his document. Does anyone know how I can do this ?

        • 1. Re: Textarea page break
          Michael Borbor Level 4

          I don't get what you're trying to do could you be a bit more specific. Page Break, what do you mean with that?

          • 2. Re: Textarea page break
            ShaF10 Level 1

            Basically Im trying to make a WYSIWYG editor like the buzzword one. Each textarea has a fixed height and once the user has reached the end of it a new text area is created.

            • 3. Re: Textarea page break
              Michael Borbor Level 4

              Interesting creating a child isn't a problem, but the thing is to find which event to listen in order to know when the input reach the end of the TextArea

              • 4. Re: Textarea page break
                ShaF10 Level 1

                Thanks - Any suggestions on which events I may need to listen to ?

                • 5. Re: Textarea page break
                  run,ryan! Level 3

                  pege break? or line break?

                  wordWrap : Boolean

                        Indicates whether the text automatically wraps at the end of a line.
                  • 6. Re: Textarea page break
                    ShaF10 Level 1

                    Page break. I was thinking of using line metrics since that seems to be the closet but not too sure on implementation.

                    • 7. Re: Textarea page break
                      run,ryan! Level 3

                      You can try what's the max number of lines you can input in this size fixed textarea without scrolling first, and listen to chang event, once lines reached the max number, create another textarea and draw focus on it.

                      HTH

                      1 person found this helpful
                      • 8. Re: Textarea page break
                        ShaF10 Level 1

                        Thats a good idea but what if the user increases the size of the text ? Then it will take less chars to fill the textarea.

                        • 9. Re: Textarea page break
                          run,ryan! Level 3

                          will this work for you?

                          function changHandler():void
                          {
                               if(textArea.mx_internal::getTextField().height > (textArea.height - textArea.textHeight))
                               {
                                    //create new textarea
                               }
                          }
                          
                          • 10. Re: Textarea page break
                            ShaF10 Level 1

                            Excellent, that worked a charm. I have another problem, I want the child textarea to inherit all the attributes (size, shadows, formatting etc) of the main textArea. How can I do this ?

                            • 11. Re: Textarea page break
                              run,ryan! Level 3

                              You can use textArea.getStyle('xxx') to get the style value and set it to new textArea, or use css type selector, or you can also create a custom textArea class which has style you like and create its instance instead of native textArea in your application

                              1 person found this helpful
                              • 12. Re: Textarea page break
                                ShaF10 Level 1

                                You will have to forgive my ignorance as I have only been programming in flex for afew hours. This is what I have done for the initial textarea:

                                 

                                <mx:TextArea id="documentPage" width="620" height="877"
                                     paddingLeft="30" paddingBottom="30" paddingTop="30" paddingRight="30"
                                     horizontalScrollPolicy="off" shadowDirection="right" verticalScrollPolicy="off"
                                     backgroundColor="#FFFFFF" borderStyle="solid" cornerRadius="0" borderColor="0xEEEEEE" change="changHandler()">

                                 

                                My guess is this isn't efficient if I am going to be creating new textArea instances. I am in need of a class or CSS file accessible to all the new textarea instances. I was playing around with the CSS of the textarea component but couldn't get to look the way I want it.For example, if I specify a height and weight, the height/width of the component does not change. See css below:

                                 

                                TextArea
                                {

                                    width : 677px;

                                    height : 877px;
                                    paddingLeft : 30px;
                                    paddingBottom : 30px;
                                    paddingTop : 30px;
                                    paddingRight : 30px;
                                    borderStyle : solid;
                                    borderColor : #EEE;
                                    shadowDirection : right;
                                }

                                • 13. Re: Textarea page break
                                  ShaF10 Level 1

                                  Ok, so I have created a AS3 class and initialise that when creating a new textarea instance, so thats fine but I don't know how to set the padding and shadow for the textarea in AS3. can someone give me some example code? Here is my class:

                                   

                                  package myComponents
                                  {
                                      import mx.controls.TextArea;
                                     
                                      public class DocumentTextArea
                                      {
                                          private var textArea:TextArea;
                                         
                                          public function DocumentTextArea()
                                          {
                                              textArea = new TextArea();
                                              textArea.height=877;
                                              textArea.width=620;
                                              textArea.horizontalScrollPolicy="off";
                                              textArea.verticalScrollPolicy="off";
                                          }
                                         
                                          public function getTextArea():TextArea
                                          {
                                              return textArea;
                                          }

                                   

                                      }
                                  }