2 Replies Latest reply on Nov 5, 2011 3:17 AM by RiccardoB.

    Flex 4 spark validator message

    RiccardoB. Level 1

      In Flex 4 Spark form, the validators display the error on the right inside the container (not floating) and this resize my application.

       

      I want to show the errors like in Flex 3 MX: on the right in a floating tooltip (so the dimensions of the container is not resized).

       

      Anyone has a solution?

        • 1. Re: Flex 4 spark validator message
          Jason Szeto Level 3

          The error message is displayed in the FormItem if the FormItem's skin has the errorTextDisplay skin part. To remove it, create a copy of the spark.skins.spark.FormItemSkin and remove the errorTextDisplay. To get the mx style error, set the showErrorTip and showErrorSkin styles to true on the control being validated.

           

          Have you checked out the Stacked form skins? These are meant to be used when space is limited.

           

          <?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 -->

                  <mx:StringValidator maxLength="4" source="{ti1}" property="text"/>

                  <mx:StringValidator  maxLength="4" source="{ti3}" property="text"/>

              </fx:Declarations>

             

              <fx:Style>

                  @namespace s "library://ns.adobe.com/flex/spark";

                  @namespace mx "library://ns.adobe.com/flex/mx";

                 

                  #stacked s|Form

                  {

                      skinClass : ClassReference("spark.skins.spark.StackedFormSkin");

                  }

                 

                  #stacked s|FormItem

                  {

                      skinClass : ClassReference("spark.skins.spark.StackedFormItemSkin");

                  }

                 

                  #noError s|TextInput

                  {

                      showErrorTip : true;

                      showErrorSkin : true;

                  }

                 

              </fx:Style>

             

              <s:layout>

                  <s:VerticalLayout/>

              </s:layout>

             

              <s:Form id="noError">

                  <s:FormItem label="One">

                      <s:TextInput id="ti1"/>

                  </s:FormItem>

                  <s:FormItem label="Two">

                      <s:TextInput id="ti2"/>

                  </s:FormItem>

              </s:Form>

             

              <s:Form id="stacked">

                  <s:FormItem label="One">

                      <s:TextInput id="ti3"/>

                  </s:FormItem>

                  <s:FormItem label="Two">

                      <s:TextInput id="ti4"/>

                  </s:FormItem>

              </s:Form>

             

          </s:Application>

                                                                                                                                                     

          • 2. Re: Flex 4 spark validator message
            RiccardoB. Level 1

            Thanks,

            I made a custom skin removing the error text and enabling the tooltip.