Stephen's dev blog

Posts Tagged ‘flex

I just remembered that I had trouble finding out what I could access with this event handler function. Sure it was easy to find out when the event is dispatched, but how can I access the new field value edited by the user? How do I access the previous value?

So this is just a simple example showing you that. This also applies to the normal DataGrid and standard list controls.

The itemEditEnd event is dispatched (it’s in the name) when a user finishes editing a cell so this is pretty much the best time to save the user’s changes to that field/row.

Here’s our function:

protected function saveChange(event:AdvancedDataGridEvent):void
{
    /**
     * use event.dataField to get the edited field name
     */
    var field:String = event.dataField;

    /**
     * i'm using the following line to get the 'id' of the row being edited
     * because i passed an 'id' field through from my dataProvider.
     */
    var selectedID:String = event.currentTarget.selectedItem.id.toString();

    /**
     * use the itemEditorInstance to get the newly edited value but retrieve
     * the previous value from the existing grid data. i'm using the default
     * textinput itemRenderer so I can retrieve the new value using the
     * itemEditInstance's 'text' property.
     */
    var newValue:String = event.currentTarget.itemEditorInstance.text;
    var prevValue:String = ProductPersonalisationList.selectedItem[event.dataField];

    // run a http service call or something to save the change or validate the data
}

This is a pretty simple one but there are surprisingly few tutorials showing the user simply how to get a selected RadioButtonGroup’s value.

There are quite a number of tutorials covering change event triggers for RadioButton controls but this is slightly different.

Say you have a form and you want to process the RadioButton value after submitting the form instead of when the value of it changes.

To do this you actually have to create a RadioButtonGroup MXML tag for the radio buttons and select the value using the ‘selectedValue’ property of that RadioButtonGroup:

<mx:RadioButtonGroup id="myRadioButtonGroup" enabled="true" />
<mx:RadioButton label="I like RadioButtons" groupName="{myRadioButtonGroup}" left="505" top="64" selected="true" value="true"/>
<mx:RadioButton label="I don't like RadioButtons" groupName="{myRadioButtonGroup}" left="348" top="62" value="false"/>

Notice the {} around the groupName attributes of the RadioButton controls. You can then do this to select the value:

Alert.show(myRadioButtonGroup.selectedValue.toString());

There are a number of tutorials on doing this around the web but I thought I’d write my own tailored tutorial on this topic.

I’m going to cover two scenarios;

Assigning XML results as a dataProvider:

This is by far the simplest of the two:

// The initialisation function
protected function init():void
{
    var serviceObj:HTTPService = new HTTPService();
    serviceObj.resultFormat = 'e4x';
    serviceObj.method = 'GET';
    serviceObj.useProxy = false;
    serviceObj.addEventListener(ResultEvent.RESULT, processResult);
    serviceObj.url = 'myScriptURL.php';
    serviceObj.send();
}

// The result processing function
protected function processResult(response:ResultEvent):void
{
    // make sure the response is cast as the correct data type
    var XMLResults:XML = response.result as XML;
    MyDataGrid.dataProvider = XMLResults.user;
}

// Sample XML sent from the server
<?xml version="1.0" encoding="utf-8" ?>
<users>
    <user>
        <id>1</id>
        <username>stephen</username>
        <email>stephen@example.com</email>
    </user>
</users>

You’ll notice I’ve set the resultFormat attribute of the HTTPService object to be ‘e4x’. In my experience I’ve found e4x more useful to work with XML in Flex. e4x stands for ECMAScript for XML and you can find out more about it here. e4x allows you to use XML as a primitive data type in your actionscript. I.E. you can do:

var myXML:XML = <root>
                    <myNode>
                        <myChildNode />
                    </myNode>
                </root>;

When using e4x as the result format, you don’t have to reference the root node when processing the XML, which is why I use the line

MyDataGrid.dataProvider = XMLResults.user;

instead of

MyDataGrid.dataProvider = XMLResults.users.user;

Creating a new XML dataProvider from an existing RPC result

This method is slightly more complicated but isn’t really needed as much. There’s really only a few situations that this would come in handy but I’ve had to use it on a recent project so I thought I may aswell post it.

Say you are making a call to a preexisting web service which is out of your control. In my situation, the web service WAS in my control, but it was already being used for other means so changing the output now wasn’t really an option. I wanted to process the XML, perform some logic on it and then add a new variable or two into the XML before assigning it to my DataGrid control.

The method I used in the end is quite simple and quick to do. You basically create a new empty XML document, loop through the results of the web service call, perform your logic and rebuild the new values into the new XML document. You then assign it to your control:

protected function processResult(response:ResultEvent):void
{
    // make sure the response is cast as the correct data type
    var XMLResults:XML = response.result as XML;
    // create the new XML document
    var newXML:XML = new XML('<users></users>');
    // loop through previous results
    for (var i:String in XMLResults.users)
    {
        // userXML is going to be our new user XML record
        var userXML:XML = new XML();
        // status is the new variable I want to add to the dataProvider
        var status:String;
        // perform some logic on the previous results
        if (XMLResults.users.activated[i] == 1)
        {
            status = 'Active';
        }
        else
        {
            status = 'Inactive';
        }
        // build the new XML record for this user
        // we can use {XMLResults.user.field[i]} to keep any previous elements in tact that we want to keep
        // use the {} parenthesis to put actionscript variables into the XML datatype
        userXML =
                <user>
                    {XMLResults.user.username[i]}
                    {XMLResults.user.email[i]}
                    <status>{status}</status>
                </user>;
        // add the new user record to the XML document
        newXML = newXML.appendChild(userXML);
    }
    MyDataGrid.dataProvider = newXML;
}



  • Patrick: I changed my code, but now I have another problem: Fatal error: Call to a member function isAvailable() on a non-object in /var/www/vhost/web/shopA
  • Stephen Gray: Hi Patrick, That first error is my fault. I had the method name for the refund() method as void() as I had copied the code from the other method!
  • Patrick: Hi Stephen, thanks for sharing your knowledge about creating a custom payment module. I need an extension for magento to handle a credit card payme

Categories