Harish Sivaramakrishnan

Swaroop wrote an awesome python – flex app yesterday in round about 20 minutes. What makes this application cool is the way a python generated file seamlessly integrates with a flex app to display a pie chart. The python guru that swaroop is, it took him less than 5 minutes to write the python app . A tweak here, a test there the flex app was also ready – All this in a small distracted period of a meeting. Great going Swaroop!

Read the entry on his blog to see the app in action.

We had folks coming from SAP Labs, Bangalore and Tavant Technologies, Bangalore to attend a one day Flex training. I was one of the presenters for the same along with Prayank, Ram, Raghu & Anant. It was a wonderful experience and I was really impressed by the amount of Flex work these guys were doing. The folks from Tavant had great knowledge about the cairngorm framework and the works too.

The first preso was by Prayank, who spoke about the key features of Flex and the benefits of using flex for building RIAs. This was followed by a talk by Raghu on using e4x in flex. He also demonstrated a neat application which uses amazon webservice for data retrieval and e4x parsing to display the data.

I had a great time talking about the Flex DataGrid and the drag & drop capabilities of flex. My first session was on Datagrid. I also tried to give some deep insight into the itemRenderers and itemEditors on Datagrid. My presentation was just before lunch and to make matters worse, it got extended by almost 20mins. But, fortunately the whole thing went on well! The attendees asked some fantastic, well researched questions at the end of the session, which was a clear reflection of the quality of flex work these guys are doing.

Anant’s preso on events and dataProviders provided a great deal of technical insight to the attendees and it elaborated many of the key concepts of the flex event model. My short drag and drop preso followed, where I demonstrated the same example that I had published here , few days back.

The last talk for the day was by Ram, who spoke about building large scale apps in flex. He elaborated the challenges, the way outs and the work arounds. He also spoke in detail about using cairngorm framework to build large scale apps with a great demo which used the amazon webservice to implement a shopping cart experience.

The demos went great, the participants could get a very detailed insight on many concepts of flex and We guys had a lot of fun.

I will post the examples I presented during the talk here soon! Coming up next is the tutorial on validating itemEditors on the itemEditor tutorial series.

Alex has written two wonderful posts in his blog about working with itemRenderers. Along with itemRenderers another extremely useful feature in flex is itemEditors. itemEditors provide a highly efficient and clean way of providing custom editors for editing data in components like List and DataGrid.

Take this example: You have a Datagrid with two columns (Product, Available and Order Qty). Avaliable & Order Qty columns contain numeric data. You want to allow the user to make an order by selecting the Order Qty column by entering a value for the number of pieces he wants to order in the column.

Option 1: You can simply pop the default itemEditor of a Datagrid / List, which is a TextInput where the user can key in the number.
Option 2: You can pop a custom itemEditor.In this case, using a NumericStepper makes a lot of sense because it lets the user increment / decrement a value and also allow him to type in just like in a textinput.

I have used Option 2, to implement the solution.

So, Why itemEditors and not itemRenderers?
You can set a NumericStepper as an itemRenderer and set the rendererIsEditor property to true. But in that case the renderers are pre-created, they are *always* displayed evcen when you are not editing it and lastly, you have to write your own logic to persist the data after editing the cell. (That surely seems like more work than using itemEditors for our current problem.)

Lets Get back to itemEditors - Take a look at the example attached along with this post which uses a NumericStepper as its itemEditor. You can see that the NumericStepper is popped when you click on the cell in the Order Qty column and the editor is destroyed when you click on anywhere else / change the focus. Also note that the value that you entered / stepped is now committed and the DataGrid display is updated.

Lets do a little digging into the code
As you can see, there is *very little* code that is written to implement this solution.

Step 1 – Set up the data: (see inline code comments)

//DataGrid event, fired when the itemEditing is performed
import mx.events.DataGridEvent;
//Used for populating the datagrid
import mx.collections.ArrayCollection;
//Used to display the Alert
import mx.controls.Alert;
//ArrayCollection that will hold the data
[Bindable]private var arr:ArrayCollection
private function populateData():void
{
//Create an array with dummy product names
var prodarray:Array = ['Apple','Orange','Peach','Grapes','Guava','Mango','Raspberry','Strawberry','Watermelon','Passionfruit']
//Create an arraycollection
arr = new ArrayCollection()
//Loop to create 10 records
for(var i:int=0;i<10;i++)
{
//create a random number
var rnd:Number = Math.round(Math.random()*100);
//Create an object to insert into the array collection
var obj:Object = {value:rnd, disp:prodarray[i],order:0}
//Add the object to array collection
arr.addItem(obj)
}

}

Step 2: Create the Datagrid and set up the itemEditor.

The following lines of code create an instance of Datagrid with 3 columns, and we set the itemEditor and editorDataField properties to the third column. (See inline comments)

One important point to be remembered here. The DataGrid or List always looks for the default property text on the itemEditors unless you specify the editorDataField property to the appropriate value. In this case editorDataField will be value since we will be altering the value property when we increment / decrement a NumericStepper. If we were to use a TextArea, the property should be set to text. If you forget to set this property, then prepare yourself for some erratic behavior

<!– DataGrid Instance, dataProvider is bound to ‘arr’- the arraycollection. –>
<mx:DataGrid editable=”true” id=”datagrid” x=”56″ y=”104″ height=”176″ width=”317″ dataProvider=”{arr}”>
<mx:columns>
<mx:DataGridColumn headerText=”Product” dataField=”disp”/>
<mx:DataGridColumn headerText=”Available” dataField=”value”/>
<!– itemEditor is set to our class CustomNumericStepper. Always remember to set the editorDataField to the dataField on which the operation is performed–>
<mx:DataGridColumn headerText=”Order Qty” dataField=”order” itemEditor=”CustomNumericStepper” editorDataField=”value” />
</mx:columns>
</mx:DataGrid>

Step 3: Create the custom itemEditor

I have created a CustomNumericStepper class which extends from NumericStepper. (CustomNumericStepper.as). This class contains just two properties, the maximum and the stepSize. The maximum is set to 150, assuming that we will *not* be stocking more than 150 fruits of each type (well, we will change this assumption soon, accommodating a more realistic calculation, but lets keep it this way for the sake of simplicity )

package
{
import mx.controls.NumericStepper;

public class CustomNumericStepper extends NumericStepper
{
public function CustomNumericStepper():void
{
super();
//Set the properties
stepSize=1;
maximum=150;
}
}
}

Note: I chose to write this as a .as file, you could very well use an MXML component to achieve the same results.

We are all set to go!

View the Sample | Download Source

and right click on the application to view / download the full source.

Coming up next: Doing more with itemEditors – applying formatters & validators to itemEditors