cssapache-flexadobeflex-sparkhalo

Is it possible to style a Spark Button like an old Halo Button? (with CSS only)


I think Adobe are messing with me, from all the docs and tutorials it seems like styling a simple button got much more difficult in Flex 4 (Spark). I used to be able to have my designer create the CSS as it wasn't too far off from web standard CSS. Now it seems like I need to make a skin first as outlined in this post?

Below is the old button style.

Button {
    fontFamily: "Arial, Helvetica";
    fontWeight: bold;
    fontSize: 11px;
    paddingTop: 0px;
    paddingBottom: 0px;
    highlightAlphas: 0.42, 0.13;
    fillAlphas: 1, 1, 1, 1;
    fillColors: #B9DEF8, #9AC3EB, #B9DEF8, #9AC3EB;
    color: #477199;
    textRollOverColor: #477199;
    textSelectedColor: #3399cc;
    borderStyle: none;  
}

thanks!


Solution

  • Skinning the Spark Button would be a programmatic approach to which you could mimic the Halo mx:button very closely.

    If you just wanted your application to use the Halo theme, you could use Halo theme.

    It's also important to note mx:Button included things like icon, which Spark Button does not.

    As you denote you want to use CSS only, you'll have to dive in to mx skin class at:

    mx.skins.halo.ButtonSkin
    

    Spark theme:

    Spark theme

    Halo theme:

    Halo theme

    Based upon your CSS for spark:

    <?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:Style>
            @namespace s "library://ns.adobe.com/flex/spark";
            @namespace mx "library://ns.adobe.com/flex/mx";
    
            s|Button
            {
                fontFamily: "Arial, Helvetica";
                fontWeight: bold;
                fontSize: 11px;
                paddingTop: 0px;
                paddingBottom: 0px;
                highlightAlphas: 0.42, 0.13;
                fillAlphas: 1, 1, 1, 1;
                fillColors: #B9DEF8, #9AC3EB, #B9DEF8, #9AC3EB;
                color: #477199;
                textRollOverColor: #477199;
                textSelectedColor: #3399cc;
                borderStyle: none;  
            }
        </fx:Style>
    
        <s:VGroup width="100%"
                  height="100%"
                  paddingTop="10"
                  paddingLeft="10">
    
            <s:Button label="Hello, world!" />
    
            <mx:Button label="Hello, world!" />
    
        </s:VGroup>
    
    </s:Application>