Skip to content
September 11, 2013 / Daniel Freeman

New MadComponents DataGrids

MadComponent128exThe latest release of MadComponents incorporates four new datagrid components.  UIFastDataGrid, UIScrollDataGrid, UIScrollDataGrids, and UITouchDataGrids.

MadComponents is still primarily for mobile application UIs – although you can also use it to build desktop and browser apps.  So the new datagrids components are specifically designed primarily for mobile screens.  They’ve been engineered and refined to run on mobile devices, with specific attention to detail in areas of performance, viewable data, and interactivity.

Download MadComponents from here.

Screen shot 2013-09-07 at 22.42.58

UIFastDataGrid

This component is similar to the existing UIDataGrid component, but with additional capabilities.  UIFastDataGrid is optimised for memory usage, and it recycles cells so that rewriting the grid is faster.

If you change the datagrid data, and the new data has a different number of rows and columns – a new render algorithm augments or removes the necessary rows and columns to the old grid.   (As opposed to clearing the datagrid, and then redrawing it).

It also incorporates methods for swapping, adding, and removing, grid rows – without the need to rewrite the entire grid.  This is faster.

There are also new public methods for swapping, inserting, and removing rows.  Common operations that would have necessitated redrawing the entire datagrid previously.

The column width calculation is “smart”.  If the width of all the columns is less than the width of the datagrid, then it will add padding to each column to make the datagrid fit exactly.  (Unless you have explicitly fixed each column width using the widths attribute).

Useful XML Attributes

widths = “i(%),j(%),k(%)‚…”  (similar to the <columns> component)
 
multiline = “true”  (allow text in cells to wrap around)
 
recycle = “true” (recycle cells – use old cells rather than instantiating new ones)recycle = “shared” (If you have several datagrids you can pool their recycled cells together)

Useful Methods

public function swapRows(rowIndexA:int, rowIndexB:int):void

public function insertRow(rowIndex:int, rowData:Array):void

public function deleteRow(rowIndex:int):void


Example Code

There’s some example code that incorporates a UIFastDataGrid here.

UIScrollDataGrid

If you require a scrolling datagrid, you could just nest a UIFastDataGrid inside a scrolling container (UIScrollVertical , UIScrollHorizontal, or UIScrollXY).  For example:-

<scrollXY border=”false” width=”1000″ height=”1000″>
<fastDataGrid id=”datagrid” />
</scrollXY> 

While that will allow you to scroll a datagrid that is larger than the screen size.  The column heading will scroll with the data.  It is better to keep the column headers visible at the top of the datagrid, regardless of which part of the data you’re viewing.  Also, scrolling datagrids, often allow you to fix one of more columns at the left of the datagrid.  These fixed columns never scroll out of view.

The new UIScrollDataGridComponent allows you to create a scrollable datagrid, while keeping column headings in view at the top of the datagrid, and fixed columns in view at the left of the datagrid.

slideFixedColumns = “true”

Fixed Columns are useful.  But on a very small screen, fixed columns leave very little actual scrolling area.  So the UIScrollDataGrid has a slideFixedColumns attribute.

If you declare this as true, then the fixed columns will slide out of the way temporarily when you scroll the datagrid left and right.  This allows you to view more columns while the grid is actually scrolling.  With up and down scrolling, the user is more likely to need to view fixed columns – so with up and down scrolling, they remain where they are.

Useful XML Attributes

fixedColumns = “n” (The number of leftmost fixed columns)
 
slideFixedColumns = “true” (employ fixed column sliding scheme)
 
lockSides = “true” (restrict scrolling left and right beyond limits)
 
 

Useful Methods

public function swapRows(rowIndexA:int, rowIndexB:int):void

public function insertRow(rowIndex:int, rowData:Array):void

public function deleteRow(rowIndex:int):void

Example Code

There’s some example code that incorporates a UIScrollDataGrid here.

 

UIScrollDataGrids

This is a powerful component for stacking a collection of scrolling datagrids one on top of the other.  This is a container component, that you can nest around several <fastDataGrid> components like this:-


<scrollDataGrids id=”dataGrids” gapV=”0″>
   <fastDataGrid id=”dg0″/>
   <fastDataGrid id=”dg1″/>
   <fastDataGrid id=”dg2″/>
</scrollDataGrids>
 

Just like a UScrollDataGrid component, the column headings remain visible at the top.    But as you scroll up and down, through different datagrids, the column headings are switched to correspond to the actual datagrid currently in view.
Useful XML Attributes

alignGridWidths = “true” (pad out the last column so that all datagrids are the same width)

Useful Methods

public function get dataGrids():Vector.<UIFastDataGrid>public function doLayout():void

Example Code

There’s some example code that incorporates UIScrollDataGrids here.

UIScrollTouchGrids

All of these new datagrid components have been designed for mobile devices.  You may have noticed that none of them allow the user to edit a cell.  The old UIDataGrid component allowed you to do this.  The user was able to tap on a cell, and type in a new value.  That capability has been dropped from the new components.  (But UIDataGrid is still there if you need it).  The reason I dropped it is because – on a small screen it’s just too fiddly to interact with a datagrid like that.  Especially with a small mobile screen and a clumsy finger.  The old desktop/mouse conventions just aren’t appropriate here.  The cells, and text is likely small – because we want to pack as much data as we can on a small screen.  While it is big enough to be legible, it’s not big enough to edit comfortably on a touch screen.

Hence, the app developer is encouraged to make mobile device editable datagrids in a different way.  Select a row, and click on an “edit” button, and this edit button can be linked to another page, or a pop-up form, where you can allow the user to edit datagrid fields.

UIScrollTouchGrids includes the ability to select a row, and it has an edit button.

edit button

 

Useful Events

UIScrollTouchGrids.EDIT_BUTTON_MOUSE_DOWN    (The edit button has been pressed, but this may not be a click)UIScrollTouchGrids.EDIT_BUTTON_MOUSE_UP   (The edit button has been clicked)

UIScrollTouchGrids.EDIT_BUTTON_LONG_CLICK  (The edit button has been long-clicked)

UIScrollTouchGrids.EDIT_BUTTON_LONG_CLICK_END  (The edit button long click has ended)

UIScrollTouchGrids.ROW_SELECTED  (A row has been selected)

UIScrollTouchGrids.HEADER_DOWN  (The top datagrid header has been pressed – but this may not be a click)

UIScrollTouchGrids.HEADER_CLICKED  (The top datagrid header has been clicked)

Note:  You’ll notice in the comments about, I’ve made the distinction between a touch and a click.  When the user touches a component – it might be initiating a CLICK action, or it might be the start of a different gesture.  For example, an edit button can be dragged as well as clicked.  So if you want to listen specifically for Click gestures, listen for CLICK or MOUSE_UP events, not DOWN events.

Example Code

There’s some example code that incorporates UIScrollTouchGrids here and here.

Join The Community

For community discussions about MadComponents/MC3D, come and join the facebook page:-http://www.facebook.com/groups/madcomponents

You may also be interested in the Stage3D Facebook group: http://www.facebook.com/groups/stage3d/T

here’s an introductory video to MadComponents here: http://www.youtube.com/watch?v=CMf2XGRhkOk

Please blog about this project and help to spread the word. Also, don’t forget to leave a “star”, or “g + 1″ recommendation on the Google Code site.

 

 

 

Advertisements

2 Comments

Leave a Comment
  1. James / Nov 8 2013 12:03 am

    Hi,
    I can’t get any of the mad component datagrids to work. I’ve imported com.danielfreeman.extendedMadness.*; I’ve followed all the tutorials that I can find.

    -https://madskool.wordpress.com/2011/04/06/madcomponents-update/
    -https://code.google.com/p/mad-components/source/browse/trunk/ExtendedMadnessStuff/src/DataGridExample3.as
    -https://code.google.com/p/mad-components/source/browse/trunk/ExtendedMadnessStuff/src/DataGridExample4.as

    I’ve tried DataGrid, FastDataGrid
    ———-

    I’m getting the following error:
    ReferenceError: Error #1065: Variable FastDataGrid is not defined.
    at global/flash.utils::getDefinitionByName()
    at com.danielfreeman.madcomponents::UIForm/otherCommands()[/Users/danielfreeman/Documents/Adobe Flash Builder 4/ExtendedMadnessLib/src/com/danielfreeman/madcomponents/UIForm.as:953]
    at com.danielfreeman.madcomponents::UIForm/parseBlock()[/Users/danielfreeman/Documents/Adobe Flash Builder 4/ExtendedMadnessLib/src/com/danielfreeman/madcomponents/UIForm.as:428]
    at com.danielfreeman.madcomponents::UIForm()[/Users/danielfreeman/Documents/Adobe Flash Builder 4/ExtendedMadnessLib/src/com/danielfreeman/madcomponents/UIForm.as:197]
    at com.danielfreeman.madcomponents::UIForm/parseBlock()[/Users/danielfreeman/Documents/Adobe Flash Builder 4/ExtendedMadnessLib/src/com/danielfreeman/madcomponents/UIForm.as:414]
    at com.danielfreeman.madcomponents::UIForm()[/Users/danielfreeman/Documents/Adobe Flash Builder 4/ExtendedMadnessLib/src/com/danielfreeman/madcomponents/UIForm.as:197]
    at com.danielfreeman.madcomponents::UI$/create()[/Users/danielfreeman/Documents/Adobe Flash Builder 4/ExtendedMadnessLib/src/com/danielfreeman/madcomponents/UI.as:136]
    at Mobile::Main()[E:\james\mobile\src\Mobile\Main.as:50]

    • Daniel Freeman / Nov 13 2013 2:39 pm

      It looks like you’re using UI.create(… DataGrids are in the extended component set, so you should be using UIe.create(…

      – by the way, I’m a bit slow to notice comments on the blog – I don’t come here as often. But I answer question in the Facebook group usually very quickly. https://www.facebook.com/groups/madcomponents/

To discuss MadComponents/MC3D, join the Facebook group!

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: