[FLEX-33777] DataGrid for mobile

• Type: New Feature
• Status: Resolved
• Priority: Major
• Resolution: Fixed
• Affects Version/s: Apache Flex 4.11.0
• Fix Version/s: Apache Flex 4.11.0
• Component/s: .Unspecified - Mobile
• Labels: datagrid mobile
• Assignee: Maurice Amsellem
• Reporter: Maurice Amsellem (old)
• Created: 24/Sep/13 15:55
• Updated: 31/Mar/14 22:14
• Resolved: 04/Oct/13 23:54

Description

I have developed for my company (SYSTAR) a custom Flex Mobile DataGrid component (MDG for short) , for one of our projects (Business Activity Monitoring framework, running on mobile devices ).

You can see a quick video of the MDG in action here:

http://www.youtube.com/watch?v=nm9yGfcwwBo

(make sure to select 720p, for best viewing quality).

More details on the component at end of this email.

I would like, on behalf and with the formal agreement of my company, to donate this component's source code to Apache Flex.

------------------------------------------------
Mobile DataGrid component details:

The goal was to provide essential datagrid functions adapted to mobile devices, with good performance on mobile.

Features:

• Displays information in tabbed columns (like any datagrid)
• Sorting columns by clicking on the header
• Touch enabled scrolling.
• Selection
• Default renderers for stylable text and embedded bitmaps.
• Custom renderers (preferably in AS) are possible.
• Multi DPI aware ( both scaling and no scaling, media css, multi-DPI artwork).

Note on performance

Good performance was key for this component, so it derives from List, and not from DataGrid.
To ensure good performance, all the columns for each row are rendered using one single "TabbedRowItemRenderer" which inherits from the base mobile list renderer.
This renderer will delegate the rendering of each column in the row to lightweight sub-renderers, and will manage the tabbed layout of sub-renderers.
There are two predefined sub-renderers:

• The sub-renderer for Text inherits from StylableTextField
• The sub-renderer for bitmaps inherits from BitmapAsset.

Custom sub-renderers must implement a given interface and be written in AS3.

Performance tests:
Sample Mobile dataGrid displaying: 300 lines by 6 columns:
. 4 of small text,
. 1 with icon
. 1 with multiline very long text in small font.

iPad 2 ipad 3 retina (gpu) iPhone4s
scrolling (fps) 24 24 18-24
sort on short col instant instant 0.3s
sort on long text <2s < 2s < 2s