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>
 
Tagged with:
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

2 Responses to 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?

  2. Anonymous says:

    Eu não estou entendendo nada.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree