7 Replies Latest reply on Nov 29, 2012 6:23 PM by heartgoon

    how to layout the search_icon,textInput and the search botton with blue background

    heartgoon Level 1

      There is a view like this:

      search.jpg

       

      can anybody tell me how to layout the search_icon,textInput and the search botton with blue background?

      do we need some special container?

      plz help!

        • 2. Re: how to layout the search_icon,textInput and the search botton with blue background
          komal harkut Level 1

          You have to use a borderContainer with layout and set your serach_icon, textinput and button.

          For bordercontainer,make borderVisible="false" and apply backgroundColor as you wish.

          May be this can help you.

          • 3. Re: how to layout the search_icon,textInput and the search botton with blue background
            heartgoon Level 1

            the problem is how to embed the serach_icon in the textinput component,

            can u give me some example code?

            • 4. Re: how to layout the search_icon,textInput and the search botton with blue background
              Claudiu Ursica Level 4

              Extend the TextInput, declare the searchIcon as a SkinPart, create a skin and embed the icon inside the skin.

               

              C

              • 5. Re: how to layout the search_icon,textInput and the search botton with blue background
                heartgoon Level 1

                i have tried it.There is a RichEditableText component in the TextInput skin:

                <s:RichEditableText id="textDisplay"

                                            verticalAlign="middle"

                                            widthInChars="10"

                                            left="35" right="1" top="1" bottom="1" />

                i defined a searchIcon and an Image component in the skin:

                -------------------------------------------------

                [Embed(source="libs/new_search_left.png",scaleGridTop="1", scaleGridBottom="13",scaleGridLeft="1", scaleGridRight="41")]

                [Bindable]

                public var searchIcon:Class;

                -------------------------------------------------

                <s:Image source="{searchIcon}" />

                -------------------------------------------------

                the problem is that i was unable to control the input cursor.

                at the same time the width and height of the TextInput component seem out of expect.

                plz help...

                • 6. Re: how to layout the search_icon,textInput and the search botton with blue background
                  Claudiu Ursica Level 4

                  Can you send me the code, I don;t have time to write myself from scratch. If you send some code I may be able to quickly look into it.

                   

                  C

                  • 7. Re: how to layout the search_icon,textInput and the search botton with blue background
                    heartgoon Level 1

                    thanks for your replies.Below is my code.Waiting for your help...

                    ----------------------------MyView.xml-----------------------------

                    <?xml version="1.0" encoding="utf-8"?>

                    <s:View xmlns:fx="http://ns.adobe.com/mxml/2009"

                            xmlns:s="library://ns.adobe.com/flex/spark">

                        <fx:Declarations>

                            <!-- 将非可视元素(例如服务、值对象)放在此处 -->

                        </fx:Declarations>   

                        <s:HGroup width="100%" id="testgp"  horizontalAlign="center" verticalAlign="middle"

                                  paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">   

                            <s:TextInput width="80%" id="input" skinClass="skin.SeTextInputSkin"/>

                            <s:Button width="20%" label="search" />

                        </s:HGroup>

                    </s:View>

                    ----------------------------SeTextInputSkin.xml-----------------------------

                    <?xml version="1.0" encoding="utf-8"?>

                    <!--

                     

                        ADOBE SYSTEMS INCORPORATED

                        Copyright 2008 Adobe Systems Incorporated

                        All Rights Reserved.

                     

                        NOTICE: Adobe permits you to use, modify, and distribute this file

                        in accordance with the terms of the license agreement accompanying it.

                     

                    -->

                    <!--- The default skin class for Spark TextInput component. 

                     

                         @see spark.components.TextInput

                           

                          @langversion 3.0

                          @playerversion Flash 10

                          @playerversion AIR 1.5

                          @productversion Flex 4

                    -->

                    <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.disabledStates="0.5" blendMode="normal">

                     

                        <fx:Metadata>

                        <![CDATA[

                            /**

                             * @copy spark.skins.spark.ApplicationSkin#hostComponent

                             */

                            [HostComponent("spark.components.TextInput")]

                        ]]>

                        </fx:Metadata>

                       

                        <fx:Script fb:purpose="styling">

                            <![CDATA[

                            import mx.core.FlexVersion;

                           

                            private var paddingChanged:Boolean;

                           

                            /* Define the skin elements that should not be colorized. */

                            static private const exclusions:Array = ["background", "textDisplay", "promptDisplay", "border"];

                           

                            /* exclusions before Flex 4.5 for backwards-compatibility purposes */

                            static private const exclusions_4_0:Array = ["background", "textDisplay", "promptDisplay"];

                           

                            /**

                             * @private

                             */

                            override public function get colorizeExclusions():Array

                            {

                                // Since border is styleable via borderColor, no need to allow chromeColor to affect

                                // the border.  This is wrapped in a compatibility flag since this change was added 

                                // in Flex 4.5

                                if (FlexVersion.compatibilityVersion < FlexVersion.VERSION_4_5)

                                {

                                    return exclusions_4_0;

                                }

                               

                                return exclusions;

                            }

                           

                            /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */

                            static private const contentFill:Array = ["bgFill"];

                     

                            /**

                             *  @private

                             */

                            override public function get contentItems():Array {return contentFill};

                           

                            /**

                             *  @private

                             */

                            override protected function commitProperties():void

                            {

                                super.commitProperties();

                               

                                if (paddingChanged)

                                {

                                    updatePadding();

                                    paddingChanged = false;

                                }

                            }

                           

                            /**

                             * @private

                             */

                            override protected function initializationComplete():void

                            {

                                useChromeColor = true;

                                super.initializationComplete();

                            }

                           

                            /**

                             *  @private

                             */

                            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void

                            {

                                if (getStyle("borderVisible") == true)

                                {

                                    border.visible = true;

                                    shadow.visible = true;

                                    background.left = background.top = background.right = background.bottom = 1;

                                    textDisplay.left = textDisplay.top = textDisplay.right = textDisplay.bottom = 1;

                                    if (promptDisplay)

                                    {

                                        promptDisplay.setLayoutBoundsSize(unscaledWidth - 2, unscaledHeight - 2);

                                        promptDisplay.setLayoutBoundsPosition(1, 1);

                                    }

                                }

                                else

                                {

                                    border.visible = false;

                                    shadow.visible = false;

                                    background.left = background.top = background.right = background.bottom = 0;

                                    textDisplay.left = textDisplay.top = textDisplay.right = textDisplay.bottom = 0;

                                    if (promptDisplay)

                                    {

                                        promptDisplay.setLayoutBoundsSize(unscaledWidth, unscaledHeight);

                                        promptDisplay.setLayoutBoundsPosition(0, 0);

                                    }

                                }

                               

                                borderStroke.color = getStyle("borderColor");

                                borderStroke.alpha = getStyle("borderAlpha");

                               

                                super.updateDisplayList(unscaledWidth, unscaledHeight);

                            }

                     

                            /**

                             *  @private

                             */

                            private function updatePadding():void

                            {

                                if (!textDisplay)

                                    return;

                               

                                // Push padding styles into the textDisplay

                                var padding:Number;

                               

                                padding = getStyle("paddingLeft");

                                if (textDisplay.getStyle("paddingLeft") != padding)

                                    textDisplay.setStyle("paddingLeft", padding);

                               

                                padding = getStyle("paddingTop");

                                if (textDisplay.getStyle("paddingTop") != padding)

                                    textDisplay.setStyle("paddingTop", padding);

                               

                                padding = getStyle("paddingRight");

                                if (textDisplay.getStyle("paddingRight") != padding)

                                    textDisplay.setStyle("paddingRight", padding);

                               

                                padding = getStyle("paddingBottom");

                                if (textDisplay.getStyle("paddingBottom") != padding)

                                    textDisplay.setStyle("paddingBottom", padding);

                               

                                if (!promptDisplay)

                                    return;

                               

                                padding = getStyle("paddingLeft");

                                if (promptDisplay.getStyle("paddingLeft") != padding)

                                    promptDisplay.setStyle("paddingLeft", padding);

                               

                                padding = getStyle("paddingTop");

                                if (promptDisplay.getStyle("paddingTop") != padding)

                                    promptDisplay.setStyle("paddingTop", padding);

                               

                                padding = getStyle("paddingRight");

                                if (promptDisplay.getStyle("paddingRight") != padding)

                                    promptDisplay.setStyle("paddingRight", padding);

                               

                                padding = getStyle("paddingBottom");

                                if (promptDisplay.getStyle("paddingBottom") != padding)

                                    promptDisplay.setStyle("paddingBottom", padding);

                            }

                           

                            /**

                             *  @private

                             */

                            override public function styleChanged(styleProp:String):void

                            {

                                var allStyles:Boolean = !styleProp || styleProp == "styleName";

                     

                                super.styleChanged(styleProp);

                               

                                if (allStyles || styleProp.indexOf("padding") == 0)

                                {

                                    paddingChanged = true;

                                    invalidateProperties();

                                }

                            }

                            ]]>

                        </fx:Script>

                       

                        <fx:Script>

                            <![CDATA[

                            /**

                             * @private

                             */    

                            private static const focusExclusions:Array = ["textDisplay"];

                     

                            /**

                             *  @private

                             */

                            override public function get focusSkinExclusions():Array { return focusExclusions;};

                            ]]>

                        </fx:Script>

                       

                        <fx:Script>

                            <![CDATA[

                                [Embed(source="libs/new_search_left.png",scaleGridTop="1", scaleGridBottom="13",scaleGridLeft="1", scaleGridRight="41")]           

                                [Bindable]           

                                public var searchIcon:Class;

                            ]]>

                        </fx:Script>

                       

                        <s:states>

                            <s:State name="normal"/>

                            <s:State name="disabled" stateGroups="disabledStates"/>

                            <s:State name="normalWithPrompt"/>

                            <s:State name="disabledWithPrompt" stateGroups="disabledStates"/>

                        </s:states>

                       

                        <!-- border -->

                        <!--- @private -->

                        <s:Rect left="0" right="0" top="0" bottom="0" id="border">

                            <s:stroke>    

                                <!--- @private -->

                                <s:SolidColorStroke id="borderStroke" weight="1" />

                            </s:stroke>

                        </s:Rect>

                     

                        <!-- fill -->

                        <!--- Defines the appearance of the TextInput component's background. -->

                        <s:Rect id="background" left="1" right="1" top="1" bottom="1">

                            <s:fill>

                                <!--- @private Defines the background fill color. -->

                                <s:SolidColor id="bgFill" color="0xFFFFFF" />

                            </s:fill>

                        </s:Rect>

                       

                        <!-- shadow -->

                        <!--- @private -->

                        <s:Rect left="1" top="1" right="1" height="1" id="shadow">

                            <s:fill>

                                <s:SolidColor color="0x000000" alpha="0.12" />

                            </s:fill>

                        </s:Rect>

                       

                        <!-- text -->

                        <!--- @copy spark.components.supportClasses.SkinnableTextBase#textDisplay -->

                        <s:RichEditableText id="textDisplay"

                                  verticalAlign="middle"

                                  widthInChars="10"

                                  left="1" right="1" top="1" bottom="1" />

                        <s:Image source="{searchIcon}" smooth="true"/>

                        <!--- Defines the Label that is used for prompt text. The includeInLayout property is false so the prompt text does not affect measurement. -->

                        <s:Label id="promptDisplay" maxDisplayedLines="1"

                                    verticalAlign="middle"

                                    mouseEnabled="false" mouseChildren="false"

                                    includeIn="normalWithPrompt,disabledWithPrompt"

                                    includeInLayout="false"

                                    />

                     

                    </s:SparkSkin>