4 Replies Latest reply on Jun 8, 2009 10:05 AM by Marc Speck

    Migration 3>4: borderStyle=none?

    Marc Speck Level 1

      I've started to test a migration of a Flex 3 app to Gumbo. I couldn't find out how to remove the border from components like e.g. mx:TextInput. The code below shows the problem:

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application
          xmlns:fx="http://ns.adobe.com/mxml/2009"
          xmlns:s="library://ns.adobe.com/flex/spark"
          xmlns:mx="library://ns.adobe.com/flex/halo"
          layout="vertical"
          >
          <mx:TextInput
              borderStyle="none"
              borderThickness="0"
              borderColor="red"
              text="A red border is visible but I expect no border."
              />
          <mx:TextInput
              borderColor="red"
              text="A red border is visible"
              />
         
      </mx:Application>

       

      How can I remove the border of Flex 3 components?

      Thanks for any hints,

      Marc

        • 1. Re: Migration 3>4: borderStyle=none?
          Peter deHaan Level 4

          Marc,

           

          I believe you may need a custom TextInput border skin to achieve the same effect with the Spark skins for the mx:TextInput control. Certain styles that were supported by the default Halo controls/containers are not as easily tweakable with the Spark skins.

           

          So, long story longer, here is my solution. I copied the default Spark skin for the Halo TextInput control (you can find the default skin, TextInputBorderSkin.mxml, in the <SDK_Dir>\frameworks\projects\sparkskins\src\mx\skins\spark\ folder) and made a couple minor tweaks and then saved my custom skin as CustomTextInputBorderSkin.mxml in the /src/skins/ folder of my Flex Project. Here's the revised CustomTextInputBorderSkin.mxml file:

           

          <?xml version="1.0" encoding="utf-8"?>
          <!--- The Spark skin class for the border of the Halo TextInput component. -->
          <local:SparkSkinForHalo xmlns:fx="
          http://ns.adobe.com/mxml/2009"
                  xmlns:s="library://ns.adobe.com/flex/spark"
                  xmlns:local="mx.skins.spark.*"
                  implements="mx.core.IBorder">

              <fx:Script>
                  <![CDATA[
                      import mx.core.EdgeMetrics;
                      import mx.core.IUIComponent;

                      /* Define the skin elements that should not be colorized. */
                      static private const exclusions:Array = ["background"];
                      override public function get colorizeExclusions():Array {return exclusions;}

                      /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
                      static private const contentFill:Array = ["bgFill"];
                      override public function get contentItems():Array {return contentFill};

                      /* Define the border items.*/
                      static private const borderItem:Array = [];
                      override protected function get borderItems():Array {return borderItem;}

                      static private const metrics:EdgeMetrics = new EdgeMetrics(2, 2, 2, 2);

                      public function get borderMetrics():EdgeMetrics {
                          return metrics;
                      }

                      override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
                          super.updateDisplayList(unscaledWidth, unscaledHeight);
                         
                          if (parent && parent is IUIComponent && !IUIComponent(parent).enabled) {
                              alpha = 0.5;
                          } else {
                              alpha = 1;
                          }
                      }
                  ]]>
              </fx:Script>

              <!-- fill -->
              <s:Rect id="background" left="1" right="1" top="1" bottom="1">
                  <s:fill>
                      <s:SolidColor id="bgFill" color="0xFFFFFF" />
                  </s:fill>
              </s:Rect>

          </local:SparkSkinForHalo>

           

          And then I specified the custom border skin by specifying the borderSkin style on the Halo TextInput control, as seen in the following example:

           

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:fx="
          http://ns.adobe.com/mxml/2009"
                  xmlns:s="library://ns.adobe.com/flex/spark"
                  xmlns:mx="library://ns.adobe.com/flex/halo">

              <mx:TextInput
                      borderStyle="none"
                      borderThickness="0"
                      text="A red border is visible but I expect no border."
                      borderSkin="skins.CustomTextInputBorderSkin" />


              <mx:TextInput
                      borderColor="red"
                      text="A red border is visible" />

          </mx:Application>

           

          Hopefully that helps. For a lot of other great migration information and differences between Flex 3 and Flex 4 (and how to use the Halo skins in your projects), see the following article on the Flex Developer Center: http://www.adobe.com/devnet/flex/articles/flex3and4_differences.html

           

          Peter deHaan

          Flex SDK Team | Adobe Systems Inc

          • 2. Re: Migration 3>4: borderStyle=none?
            Marc Speck Level 1

            Thank you very much, Peter; it works as expected and I will use it.

             

            I wondered whether I could do it more efficiently with the spark

            TextInput. But if I understand spark styles/skins correctly, I also need

            to create a new skin. Is that correct?

            Marc

            • 3. Re: Migration 3>4: borderStyle=none?
              Peter deHaan Level 4

              Correct.

               

              For the Spark TextInput control, I would use something like the following:

               

              <?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/halo">
              
              
                  <s:VGroup horizontalCenter="0" verticalCenter="0">
                      <s:TextInput id="textInput"
                              text="A red border is visible but I expect no border."
                              skinClass="skins.CustomTextInputSkin" />
                  </s:VGroup>
              
              
              </s:Application>
              

               

               

              And my custom skin, /src/skins/CustomTextInputSkin.mxml, is as follows:

               

              <?xml version="1.0" encoding="utf-8"?>
              <!--- The default skin class for Spark TextInput component. -->
              <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
                    alpha.disabled="0.5">
                  <fx:Metadata>
                  <![CDATA[
                      [HostComponent("spark.components.TextInput")]
                  ]]>
                  </fx:Metadata>
                 
                  <fx:Script>
                      /* Define the skin elements that should not be colorized. */
                      static private const exclusions:Array = ["background", "textView"];
                 
                      override public function get colorizeExclusions():Array {return exclusions;}
                     
                      /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
                      static private const contentFill:Array = ["bgFill"];
                      override public function get contentItems():Array {return contentFill};
                  </fx:Script>
                 
                  <s:states>
                      <s:State name="normal"/>
                      <s:State name="disabled"/>
                  </s:states>
                  <!-- fill -->
                  <!--- Defines the appearance of the TextInput component's background. -->
                  <s:Rect id="background" left="1" right="1" top="1" bottom="1">
                      <s:fill>
                      <!--- Defines the background fill color. -->
                          <s:SolidColor id="bgFill" color="0xFFFFFF" />
                      </s:fill>
                  </s:Rect>
                 
                  <!-- text -->
                  <s:RichEditableText id="textView"
                            lineBreak="explicit"
                            left="1" right="1" top="1" bottom="1"
                            paddingLeft="3" paddingTop="5"
                            paddingRight="3" paddingBottom="3"/>
              </s:SparkSkin>
              

               

               

              Peter

              • 4. Re: Migration 3>4: borderStyle=none?
                Marc Speck Level 1

                Peter, I appreciate your support!

                Thanks, Marc