Friday, August 17, 2012

Speech Bubble Component in flex:

CustomContainerBorderSkin.as
-------------------------------------
package {
    import flash.display.Graphics;
    import mx.graphics.RectangularDropShadow;
    import mx.skins.RectangularBorder;   
    public class CustomContainerBorderSkin extends RectangularBorder {
       
        private var dropShadow:RectangularDropShadow;
       
        // Constructor.
        public function CustomContainerBorderSkin() {
        }
       
        override protected function updateDisplayList(unscaledWidth:Number,
                                                      unscaledHeight:Number):void
        {
           
            super.updateDisplayList(unscaledWidth, unscaledHeight);
           
            var cornerRadius:Number = getStyle("cornerRadius");
            var backgroundColor:int = getStyle("backgroundColor");
            var backgroundAlpha:Number = getStyle("backgroundAlpha");
            graphics.clear();
           
            // Background
            drawRoundRect(0, 0, unscaledWidth, unscaledHeight,
                {tl: cornerRadius, tr:cornerRadius, bl: cornerRadius, br: cornerRadius},
                backgroundColor, backgroundAlpha);
           
            // Shadow
            if (!dropShadow)
                dropShadow = new RectangularDropShadow();
           
            dropShadow.distance = 8;
            dropShadow.angle = 45;
            dropShadow.color = 0;
            dropShadow.alpha = 0.4;
            dropShadow.tlRadius = cornerRadius;
            dropShadow.trRadius = cornerRadius;
            dropShadow.blRadius = cornerRadius;
            dropShadow.brRadius = cornerRadius;
            dropShadow.drawShadow(graphics, 0, 0, unscaledWidth, unscaledHeight);           
            graphics.beginFill(0xCCCC99,0.8);
            graphics.moveTo(this.x-80, this.height/2+45);
            graphics.lineTo(this.x, this.height/2-20);           
            graphics.lineTo(this.x, this.height/2+20);
           
        }
    }
}

Usage of the above component:
----------------------------------------------
<?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 -->
    </fx:Declarations>
    <mx:VBox height="100%" width="100%" verticalAlign="middle" horizontalAlign="center">   
    <mx:VBox id="vb1"
             borderSkin="CustomContainerBorderSkin"
             backgroundColor="0xCCCC99"
             backgroundAlpha="0.8"
             cornerRadius="70"
             paddingLeft="20"
             paddingTop="20"
             paddingRight="20"
             paddingBottom="20"
             verticalAlign="middle" horizontalAlign="center"
             >       
        <mx:Label text="Speech Bubble" fontSize="24" fontWeight="bold"/>
        <mx:Form horizontalCenter="0" verticalCenter="0" verticalGap="5" horizontalGap="5">       

            <mx:FormItem horizontalAlign="center" label="User Name" styleName="loginFormItem">
                <mx:TextInput id="tipUsername" fontWeight="normal" width="180"  height="29" maxChars="15"/>
            </mx:FormItem>
            <mx:FormItem horizontalAlign="center" label="Password" styleName="loginFormItem">
                <mx:TextInput id="tipPassword" maxChars="8" fontWeight="normal" displayAsPassword="true" height="29" width="180"/>
            </mx:FormItem>
            <mx:FormItem direction="horizontal" x="71" y="59" horizontalGap="5">
                <mx:Button id="btnLogin" label="Login" />
                <mx:Button id="btnCancel" paddingLeft="5" label="Cancel"/>
            </mx:FormItem>
        </mx:Form>       
    </mx:VBox>
    </mx:VBox>
</s:Application>

Output:
---------------

7 comments:

  1. I'm going to you basically, I'm sure! Might that develop into likely to give
    you your blog interpreted straight to Italian?
    Uk is actually our next dialect.
    Feel free to visit my blog post ... How To Treat Genital Warts

    ReplyDelete
  2. There isn't a right or wrong strategy to create a website. We have now sites relevant to a particular specific niche market and in addition sites upon 100 % not related merchandise. It’s really for you to decide which will technique you want to get. One point though…you advocate Blogger, why should spent cash developing a .internet.. I’ve always considered when this ended up being vital. A reply can be awesome!
    Stop by my web-site ... Genital Warts Natural

    ReplyDelete
  3. It’s been a long time since I seen the site.
    I would like to prevent through and need you, plus your own,
    an exceptionally joyful holiday break!
    My web page ; Genital Warts Home Remedy

    ReplyDelete
  4. Hello! Ι cοuld have swогn I’vе been to this
    ωеbsitе before but аftеr browsing thгough sοme оf the artiсles Ӏ геalized it’s new to me.

    Regaгdleѕs, І’m ԁefinitely happy І diѕcοverеd it and I’ll be book-marking it and
    chеcking baсk oftеn!

    Herе іѕ my website: hydroxycut with ephedra for sale

    ReplyDelete
  5. Great ωeb ѕitе you've got here.. It’s hard to find high-quality writing like yours these days. I seriously appreciate people like you! Take care!!

    Check out my blog :: bolt ephedrine
    my page > ephedrine hydrochloride side Effects

    ReplyDelete
  6. Everything posted made a lot of sense. But, consider this, what
    if you were to create a awesome headline?

    I mean, I don't wish to tell you how to run your blog, but what if you added a post title to maybe get a person's
    attention? I mean Untitled is kinda vanilla.
    You ought to peek at Yahoo's home page and watch how they create news titles to grab people to open the links. You might try adding a video or a related picture or two to grab readers excited about everything've got to
    say. In my opinion, it would bring your website a little livelier.


    Money from home

    ReplyDelete
  7. Hi! This is kind of off topic but I need some help from an established blog.
    Is it very hard to set up your own blog? I'm not very techincal but I can figure things out pretty fast. I'm thinking about setting
    up my own but I'm not sure where to start. Do you have any tips or suggestions? Cheers how to treat nail fungus treating nail fungus

    Here is my website ... zetaclear review

    ReplyDelete