Adobe Flex ItemRenderer: Making Calculations

Question

I have a database including a user's Date of Birth, but I want to display their age. I have a function which calculates the age but I cannot use it in the ItemRenderer and I don't know why. I don't think it will work if I use this code outside of the ItemRenderer. The DOB is accessed by {data.dob}.

Here's my code:

<s:GridColumn dataField="age" headerText="Age" width="80">
                    <s:itemRenderer>
                        <fx:Component>
                            <s:GridItemRenderer>
                                <fx:Script>
                                    <![CDATA[
                                        // Retrieving the user's DOB
                                        var dateStr:String = "{data.dob}";
                                        //Splitting the DOB up to make it compatible with Flex
                                        var parts:Array = dateStr.split("-");

                                        if(parts == null || parts.length != 3)
                                        {
                                            Alert.show("There is an error retrieving the birthday.");
                                        }

                                        var dobDay:* = parts[2];
                                        var dobMonth:* = parts[1] - 1;
                                        var dobYear:* = parts[0];

                                        var userDOB : Date = new Date(dobYear, dobMonth, dobDay);
                                        var today : Date = new Date();

                                        var diff : Date = new Date();
                                        diff.setTime( today.getTime() - userDOB.getTime() );

                                        var userAge : int = diff.getFullYear() - 1970;
                                    ]]>
                                </fx:Script>
                                <s:Label id="ageLbl" text="userAge" />
                            </s:GridItemRenderer>
                        </fx:Component>
                    </s:itemRenderer>
                </s:GridColumn>`

At first I was getting a #1084 error for var dateStr:String = {data.dob}; so I changed it to var dateStr:String = "{data.dob}"; and the errors migrated to 1120: Access of Undefined property Alert. I also had the same error for: diff, parts, today, userAge, userDOB. Any ideas here? Like I said the code works when outside of the ItemRenderer, using just one DOB.

Answer 1

Try this:

<s:DataGrid x="71" y="58" width="490" height="264" requestedRowCount="4">
    <s:columns>
        <s:ArrayList>
            <s:GridColumn dataField="dataField1" headerText="Column 1"></s:GridColumn>
            <s:GridColumn dataField="dataField2" headerText="Column 2"></s:GridColumn>
            <s:GridColumn dataField="dob" headerText="Age" width="80">
                <s:itemRenderer>
                    <fx:Component>
                        <s:GridItemRenderer>
                            <fx:Script>
                                <![CDATA[
                                    import mx.controls.Alert;

                                    override public function prepare(hasBeenRecycled:Boolean):void {

                                        if(data!=null)
                                        {
                                            trace(data.dob);

                                            // Retrieving the user's DOB
                                            var dateStr:String = data.dob;
                                            //Splitting the DOB up to make it compatible with Flex
                                            var parts:Array = dateStr.split("-") ;

                                            if(parts == null || parts.length != 3)
                                            {
                                                Alert.show("There is an error retrieving the birthday.");
                                            }

                                            var dobDay:* = parts[2];
                                            var dobMonth:* = parts[1] - 1;
                                            var dobYear:* = parts[0];

                                            var userDOB : Date = new Date(dobYear, dobMonth, dobDay);
                                            var today : Date = new Date();

                                            var diff : Date = new Date();
                                            diff.setTime( today.getTime() - userDOB.getTime() );

                                            var userAge : int = diff.getFullYear() - 1970;

                                            ageLbl.text = userAge.toString(); 
                                        }
                                    }

                                ]]>
                            </fx:Script>
                            <s:Label id="ageLbl" text="userAge"  top="7" left="9"/>
                        </s:GridItemRenderer>
                    </fx:Component>
                </s:itemRenderer>
            </s:GridColumn>

        </s:ArrayList>
    </s:columns>
    <s:ArrayList>
        <fx:Object dataField1="data1" dataField2="data1" dob="1990-05-25"></fx:Object>
        <fx:Object dataField1="data2" dataField2="data2" dob="1981-02-15"></fx:Object>
        <fx:Object dataField1="data3" dataField2="data3" dob="1956-05-7"></fx:Object>
        <fx:Object dataField1="data4" dataField2="data4" dob="1994-08-25"></fx:Object>
    </s:ArrayList>
</s:DataGrid>