A cool and flexible interface without images

I recently had to develop a small widget with round corners that needed to be resized in all directions. Coming from the web, my first approach was to create this application using images. This approach is possible but you need to cut your images and the specificity of the layout made it impossible to manage auto-resize.

Unsatisfied with this first approach, I looked for something else. I finally found that Flex offers a lot of possibilities allowing you to create cool layouts using only code. This makes global modifications to your application a lot easier to manage.

Here is a simple example that does not use one single image :

And here is the code

/*mxml file*/
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute"
    height="200"
    width="200"
    xmlns:geom="flash.geom.*">
    <mx:Style source="css/style.css"/>
    <mx:Canvas styleName="outsideCanvas"
               height="190" width="190">
        <mx:filters>
            <mx:DropShadowFilter distance="0"
                                 quality="15"
                                 alpha="0.5"
                                 inner="false"/>
        </mx:filters>
        <mx:Canvas styleName="insideCanvas"
                   height="150" width="150"
                   verticalScrollBarStyleName="verticalScrollBar">
            <mx:filters>
                <mx:DropShadowFilter distance="0"
                             quality="15"
                             alpha="0.5"
                             inner="true"/>
            </mx:filters>
            <mx:Canvas verticalScrollPolicy="off"
                       horizontalScrollPolicy="off"
                       styleName="buttonStyle"
                       id="exampleButton" width="80"
                       horizontalCenter="0"
                       verticalCenter="0">
                <mx:Canvas y="1" x="1"
                           width="{exampleButton.width-4}"
                           height="50%"
                           backgroundAlpha="0.5"
                           styleName="insideButton"/>
                <mx:Canvas y="0" x="0" width="100%"
                           height="100%"
                           backgroundAlpha="0.5"
                           visible="{!this.enabled}"
                           styleName="insideButton" />
                <mx:Text text="OK"
                         verticalCenter="0"
                         horizontalCenter="0"
                         paddingTop="4"
                         color="#FFFFFF" />
                <mx:mouseOver>
                    <![CDATA[
    exampleButton.setStyle('backgroundColor', '#DF0021');
                    ]]>
                </mx:mouseOver>
                <mx:mouseOut>
                    <![CDATA[
    exampleButton.setStyle('backgroundColor', '#666666');
                    ]]>
                </mx:mouseOut>
            </mx:Canvas>
        </mx:Canvas>
    </mx:Canvas>
</mx:Application>

/* CSS file */
Application {
     backgroundGradientAlphas: 1, 1;
     backgroundGradientColors: #FFFFFF, #FFFFFF;
}
.outsideCanvas {
     horizontalCenter:0;
     verticalCenter: 0;
     backgroundAlpha: 1;
     backgroundColor: #EEEEEE;
     cornerRadius: 8;
     borderStyle: solid;
     borderThickness: 2;
     borderColor: #FFFFFF;
}
.insideCanvas {
     horizontalCenter:0;
     verticalCenter: 0;
     backgroundAlpha: 1;
     backgroundColor: #FFFFFF;
     cornerRadius: 8;
     borderStyle: solid;
     borderThickness: 2;
     borderColor: #FFFFFF;
}
.buttonStyle {
     borderColor: #DDDDDD;
     borderStyle:solid;
     borderThickness: 1;
     focusThickness: 0;
     cornerRadius: 6;
     backgroundColor: #666666;
     backgroundAlpha: 1;
}
.insideButton {
     cornerRadius: 3;
     borderColor: #DDDDDD;
     borderStyle: solid;
     borderThickness: 0;
     backgroundColor: #FFFFFF;
}

If this was not an example, the button would have been a component for obvious reusability reasons. You can do this sort of stuff for other components as well such as scrollbars, datagrids, etc… have fun !