Creating a simple estimate form in Flex

The following example shows how you can create a simple online estimate form in Flex using some ComboBox controls and some simple ActionScript.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/15/creating-a-simple-estimate-form-in-flex/ -->
<mx:Application name="EstimateForm_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            import mx.events.ListEvent;
 
            protected function button1_clickHandler(evt:MouseEvent):void {
                cb1.selectedIndex = -1;
                cb2.selectedIndex = -1;
                cb3.selectedIndex = -1;
                cb4.selectedIndex = -1;
                cb_changeHandler(null); // reset estimate
            }
 
            protected function cb_changeHandler(evt:ListEvent):void {
                var total:Number = 0;
                if (cb1.selectedIndex > -1) {
                    total += parseFloat(cb1.selectedItem.data);
                }
                if (cb2.selectedIndex > -1) {
                    total += parseFloat(cb2.selectedItem.data);
                }
                if (cb3.selectedIndex > -1) {
                    total += parseFloat(cb3.selectedItem.data);
                }
                if (cb4.selectedIndex > -1) {
                    total += parseFloat(cb4.selectedItem.data);
                }
 
                if (total >= 0) {
                    estimate.text = fmt.format(total);
                } else {
                    estimate.text = "";
                }
            }
        ]]>
    </mx:Script>
 
    <mx:CurrencyFormatter id="fmt" precision="0" />
 
    <mx:VBox>
        <mx:Form indicatorGap="0"
                paddingLeft="0" paddingRight="0">
            <mx:FormItem label="Square Footage of Your Home:">
                <mx:ComboBox id="cb1"
                        prompt="Please Select"
                        selectedIndex="-1"
                        change="cb_changeHandler(event);">
                    <mx:dataProvider>
                        <mx:Object label="Up to 1500 Sq. Ft." data="400" />
                        <mx:Object label="1501 - 3000 Sq. Ft." data="450" />
                        <mx:Object label="3001 - 5000 Sq. Ft." data="500" />
                        <mx:Object label="Over 5000 Sq. Ft." data="550" />
                    </mx:dataProvider>
                </mx:ComboBox>
            </mx:FormItem>
            <mx:FormItem label="Number of Stories:">
                <mx:ComboBox id="cb2"
                        prompt="Please Select"
                        selectedIndex="-1"
                        change="cb_changeHandler(event);">
                    <mx:dataProvider>
                        <mx:Object label="1" data="0" />
                        <mx:Object label="2" data="50" />
                        <mx:Object label="3" data="150" />
                    </mx:dataProvider>
                </mx:ComboBox>
            </mx:FormItem>
            <mx:FormItem label="Roof Pitch:">
                <mx:ComboBox id="cb3"
                        prompt="Please Select"
                        selectedIndex="-1"
                        change="cb_changeHandler(event);">
                    <mx:Object label="Flat" data="0" />
                    <mx:Object label="Low" data="100" />
                    <mx:Object label="Steep" data="200" />
                </mx:ComboBox>
            </mx:FormItem>
            <mx:FormItem label="Number of Sides:">
                <mx:ComboBox id="cb4"
                        prompt="Please Select"
                        selectedIndex="-1"
                        change="cb_changeHandler(event);">
                    <mx:Object label="1" data="0" />
                    <mx:Object label="2" data="150" />
                    <mx:Object label="3" data="250" />
                    <mx:Object label="4" data="350" />
                </mx:ComboBox>
            </mx:FormItem>
        </mx:Form>
 
        <mx:HBox width="100%">
            <mx:Button label="Reset To Zero"
                    click="button1_clickHandler(event);" />
            <mx:Spacer width="100%" />
            <mx:HBox toolTip="{disclaimer.text}">
                <mx:Label text="Estimate*:" />
                <mx:TextInput id="estimate" editable="false" width="70" />
            </mx:HBox>
        </mx:HBox>
 
        <mx:Text id="disclaimer"
                text="* Note: This is just an estimate. Price includes set up, take down, and includes LED Lights."
                selectable="false"
                fontWeight="bold"
                width="100%" />
    </mx:VBox>
 
</mx:Application>

2 thoughts on “Creating a simple estimate form in Flex

  1. Pretty nice, I haven’t known about VBox ans HBox classes before, always using canvas and positioning stuff manually. Will have to change that.
    Two questions though – why is the box centered horizontally? I see that the Application has vertical align set, but I haven’t noticed the horizontal one. Also, Flex is nice and all, but is there actually any point in making on-site modules with it? Considering that weight of such simple app is around 300 KB?

Comments are closed.