niedziela, 22 stycznia 2012

dataProvider Flex 4.6 spark DataGrid and Flex 3.6 mx DataGrid comparasion

Well I think DataGrid is the most used control and most power full one in flex, so how it's different in spark and mx


The most common thing you do with datagrid is assign dataprovider to it and display data.
There is a significant difference on this method. So let's start with flex 3.x cause it's interesting one.

First difference is that the DataGrid is the class on top of the mx ListBase and there are mostly all the data operations so the function in ListBase in shortcut (not important lines were removed) looks like this.

public function set dataProvider(value:Object):void
if (value is Array)
collection = new ArrayCollection(value as Array);
else if (value is ICollectionView)
collection = ICollectionView(value);
else if (value is IList)
collection = new ListCollectionView(IList(value));
else if (value is XMLList)
collection = new XMLListCollection(value as XMLList);
else if (value is XML)
var xl:XMLList = new XMLList();
xl += value;
collection = new XMLListCollection(xl);
// convert it to an array containing this one item
var tmp:Array = [];
if (value != null)
collection = new ArrayCollection(tmp);
// get an iterator for the displaying rows. The CollectionView's
// main iterator is left unchanged so folks can use old DataSelector
// methods if they want to
iterator = collection.createCursor();
collectionIterator = collection.createCursor(); //IViewCursor(collection);

It's now clear that to create own implementation of the dataProvider you need to implement ICollectionView cause it's only one without the root class on top of it and make sure you also have strong IViewCursor implementation cause it's the most important one. The IViewCursor is iterator for the list that let's you display the data.

On the other hand in spark 4.6 you have one big class that inherits from SkinnableContainerBase and is using composition to make Grid with columns and rows so the dataProvider is assigned to Grid - well it's using 3 method's to do it - that's the spirit of the flex 4 design.

public function set dataProvider(value:IList):void

private function setGridProperty(propertyName:String, value:*):Boolean

// THIRD - the most valuable and readable for simple grid.dataProvider = value;
private static function setPartProperty(part:Object, properties:Object, propertyName:String, value:*, defaults:Object):Boolean

YEAH it sucks ;) well nevermind, the person who wrote it lost the contact with reality, hope they meet the dedline.

The grid dataProvider function looks simple _dataProvider = value, so if you want to implement the custom dataProvider you need implement the IList and the most important function is

function getItemAt(index:int, prefetch:int=0):Object

cause it's using it all the time to get to the data.

Overall spark DataGrid dataprovider assign is much more straightforward and I need not much time to implement my own, if only all flex4 code will be refactored for performance - what I hope will become true in ASF during the Apache Flex incubation we could have pretty decent platform independent (with AIR captive runtime) framework for developing business applications.

Another thing is with processor time and memory when compiling the flex sdk 3.6 I got 22MB flash debugger application and with flex sdk 4.6 I got 40MB flash debugger application - hope that's only the debugging size but the 3.6 datagrid runs a little faster.
I need to try with custom itemrenderers with override data and manualy change with propertyChange event yet.

And that's all about my analysis.

Icing on the cake is my custom 8KB only datagrid early prototype, without flex but with custom item renderers (ex time is rendered with custom date) and custom dataprovider. Compiled for SDK 4.6. you can drag to see 100 generated insturments with code generated data feed.

[kml_flashembed fversion="8.0.0" movie="" targetclass="flashmovie" publishmethod="static" width="500" height="300"]

Get Adobe Flash player


Now without the itemrenderer caching, sorting, css styles.
Similar one compiled in air captive runtime for IOS runs smoothly and takes only 11MB with custom compiled prototype of RPC and real data push inside ;)

Beware of further flex components comparasion and happy codding as always ;)

środa, 11 stycznia 2012

Flex Spark TextInput scroll and position coursor

Well ex. you want to browse for directory and then display results in to let end user modify it. These operations you can find easy in one place textDisplay property.

And the code:



protected function windowedapplication1_applicationCompleteHandler(event:FlexEvent):void
var s:String = "myVeryVeryVeryLongString";
$myInput.text = s;
$myInput.textDisplay.scrollToRange($myInput.text.length, $myInput.text.length);


hope that helps you can find also textDisplay in spark TextArea.