3 Replies Latest reply on Apr 9, 2010 9:58 AM by PDSB_Greg

    Line wrapping with <s:TextInput />

    PDSB_Greg Level 1

      With the Beta 2 SDK, line wrapping was allowed for s:TextInput if they skin was modified to put the lineBreak="toFit" style on the textDisplay component.  This does not seem to work with the final release of the Flex 4 SDK as the text continues to flow past the right-most edge of the input box.

       

      Is there a work around available?

        • 1. Re: Line wrapping with <s:TextInput />
          Peter deHaan Level 4

          @Greg Yantz,

           

          Why not just use a s:TextArea if you want multiline input? Word wrapping on s:TextInput isn't really supported, so I dont know how well it will work, but I came up with two workarounds (with the help of a coworker), which may help you get started:

           

          I think the main problem is that the partAdded() method in the TextInput.as class is clobbering whatever values you're setting in the skin:

           

              override protected function partAdded(partName:String, instance:Object):void
              {
                  super.partAdded(partName, instance);
                  if (instance == textDisplay)
                  {
                      textDisplay.multiline = false;
                      // Single line for interactive input.  Multi-line text can be
                      // set.
                      textDisplay.setStyle('lineBreak', 'explicit');
                      
                      // TextInput should always be 1 line.
                      textDisplay.heightInLines = 1;
                  }
              }
          

           

           

          You can work around this by using the creationComplete event in the s:TextInput control to reset those values to whatever you want:

           

          <?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">
              <fx:Script>
                  <![CDATA[
                      import flashx.textLayout.formats.LineBreak;
                      
                      protected function init():void {
                          ti.textDisplay.setStyle('lineBreak', LineBreak.TO_FIT);
                          ti.textDisplay.multiline = true;
                      }
                  ]]>
              </fx:Script>
              
              <s:TextInput id="ti" creationComplete="init();" />
              
          </s:Application>
          

           

           

          Or you could probably move that logic to a custom skin and use the creationComplete event in the skin to set the lineBreak style and multiline property. Again, I only did a very quick test and it seemed to work, but your mileage may vary and since this is unsupported it may not work in future builds for the Flex SDK:

           

          <?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">
              
              <s:TextInput id="ti" skinClass="CustomTISkin2" />
              
          </s:Application>
          

           

           

          And my custom skin, CustomTISkin2.mxml, is a copy of the default s:TextInput skin with a few minor tweaks:

           

          <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
              xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled="0.5" blendMode="normal"
              creationComplete="init();">
          
          ...
          
               <fx:Script>
                  <![CDATA[
                      import flashx.textLayout.formats.LineBreak;
                      
                      private function init():void {
                          textDisplay.multiline = true;
                          textDisplay.setStyle('lineBreak', LineBreak.TO_FIT);
                      }
                  ]]>
              </fx:Script>
          

           

           

          Peter

          • 2. Re: Line wrapping with <s:TextInput />
            Peter deHaan Level 4

            Or my preferred method:

             

            <s:TextArea id="ta"
                    heightInLines="1"
                    verticalScrollPolicy="off"
                    x="20" y="20" />
             

             

             

            Peter

            • 3. Re: Line wrapping with <s:TextInput />
              PDSB_Greg Level 1

              Hi Peter,

               

              Thanks for the quick reply.  You Flex QA  guys (and gals I assume) must be going crazy with the new release!

               

              The reason for line wrapping in a TextInput is because we want our users to be able to enter a lot of text, but not let them break the text with line breaks (enter key).  I was able to figure out that it wasn't doing what I wanted it to do because of the override on partAdded, so what I ended up doing was creating a custom TextInput that does what I need it to do.  It doesn't handle styling or anything like TextInput, but because it won't be used outside this application, I'm not too concerned about that.

               

              Thanks again,

              Greg.