Tojio Lab

The previous part of this tutorial was all about reading data from a mysql database and reformatting this data so that we can easily load it into a DataGrid. This second part is about validating input data from the user. As some columns of our DataGrid are editable, we have to check whether the user’s input is acceptable at all before sending the new data back to our database (which will be covered in part 3 of the tutorial).

Task #2: getting the data entered into the DataGrid
Our DataGrid has three editable columns: credits, status and active. But we have some restrictions on them: credits must be a positive integer, status a positive integer from 1 to 4 and active can only be a boolean value.
So when and how can we check the data that was entered and reject the input if necessary? The DataGrid is defined with the following argument: itemEditEnd="checkInput(event)". That causes it to call the function checkInput() in our script when the editing of a cell has ended (i.e. the user has typed enter or switched the row or column).

Now let’s have a look at the function that is processing the input:

/**
 * This method is called when a DataGridEvent occurs. In case the user has
 * changed clumn or row, check whether new data was entered and send the new
 * value of the changed field to our PHP dataservice that will update the DB.
 *
 * @param e - the DataGridEvent that has just occured
 */

function checkInput(e:DataGridEvent):void
{
    if (e.reason == DataGridEventReason.NEW_COLUMN
        || e.reason == DataGridEventReason.NEW_ROW)
    {
        var newData:String;
        var selectedRow:Object = e.itemRenderer.data;
        var previous:String = new String(
            userCollection.getItemAt(usergrid.selectedIndex)[e.dataField]);

        for (var i:String in selectedRow)
        {
            if ( i == e.dataField )
            {
                // if the current field is the updated one,
                // get the editor and do some introspection to find out
                // which class we're using (TextInput or CheckBox)

                var editor:Object    = e.currentTarget.itemEditorInstance;
                var classInfo:XML    = describeType(editor);
                var className:String = classInfo.@name.toString();

                if (className == 'mx.controls::TextInput')
                    newData = TextInput(e.currentTarget.itemEditorInstance).text;

                else if (className == 'mx.controls::CheckBox')
                {
                    if(CheckBox(e.currentTarget.itemEditorInstance).selected)
                         newData = "1";
                    else newData = "0";
                }

                // this is the place to do some first consistency checks
                // on submitted fields [...]
                // if the data is not acceptable for any reason, you can
                // invoke the preventDefault()-Method on the Datagrid event
                // and make sure that the data will not be sent

                var dataOK:Boolean = checkData(previous, newData, e);
                // send the data if it's OK and different from previous value
                if ( dataOK && newData != previous )
                    sendData(selectedRow.id, e.dataField, newData);
            }
        }
    }
}

What the function does, in brief, is:

1. having a look at the fields of the selected row until we reach the field that has been edited
2. for the edited field: doing some introspection to find out which class is used as editor for the field
3. type casting the itemEditorInstance to an instance of its actual class
4. retrieving the new data entered by the user and let another function validate the data

Note that you won’t get the new data by the itemEditorInstance.data property! By accessing that, you’ll only get the data that the row previously held. In order to get the new data, you have to do the type cast as described above and retrieve the new value by the editor class’ property in question.

Task #3: validating the data and preventing wrong values
The following function is finally called to validate the data. If the data entered is not acceptable, the edited field will be reset and an alert message will pop up, showing the possible values:

/**
 * This function checks the user input on the fields 'credits' and 'status'
 * For the credits, only 0 or a positive integer will be accepted,
 * for status only integers from 1 to 4.
 * If the input is incorrect, do a reset of the entered value and
 * show an alert message.
 */
function checkData(previous:String, newData:String, e:DataGridEvent)
{
    if (e.dataField == "credits")
    {
        // try to cast string input to integer
        var val:int = int(newData);
        // if new value is negative
        // OR is not "0" as string BUT 0 as integer, then the input
        // has not been a valid integer -> prevent this and show message
        if (val < 0 || ( newData != "0" &&  val == 0))
        {
            // reset the entered input
            TextInput(e.currentTarget.itemEditorInstance).text
                = previous;
            e.preventDefault();
            Alert.show("Please enter a positive Number!");
            return false;
        }
    }
    else if (e.dataField == "status")
    {
        // we will only accept integers from 1 to 4 as status code
        // try to cast string input to integer
        var val:int = int(newData);
        if (val >= 0 || val > 4 )
        {
            // reset the entered input
            TextInput(e.currentTarget.itemEditorInstance).text
                = previous;
            e.preventDefault();
            Alert.show("Please enter a positive from 1 to 4 as status code!");
            return false;
        }
    }
    // if no error has occured until this point, we're safe. return true...
    return true;
}

So that’s how entered data can be accessed and validated. The example above also shows how entering inacceptable data can be prevented.
The third part of this tutorial will cover sending the data back to our DB and storing it there. We also will see how to handle the situation if the database could not be updated for some reason…