Introduction to Flexicious Ultimate (Flex DataGrid):
Flexicious Ultimate is a revolutionary new product from Flexicious, the makers of the Flexicious Flex DataGrid. With Ultimate, you now have the ability to present complex, hierarchical data in Flex applications in a way that has never been possible before.
For the first time in the history of Flex, a DataGrid that empowers you with smooth scroll, nested hierarchical tree/child grids, right locked columns, customizable built in lazy load support, in addition to all of the exciting Flexicious features you are already used to, like Print, Word/Excel Export, Paging, Inline Customizable Filter and Footers, Preference Persistence, PDF export, on top of the regular features like Grid Display/Editing, Sortable/Resizable/Re-orderable columns, Customizable headers & data cells , various selection modes, and an easy to extend architecture.
Our goal is to ensure that there is no use case that is not achievable using the functionality already built in, and if there are such use cases, they are easy to implement by customizing/extending the product.
Below are some of the features offered by Flexicious Ultimate are (Features in bold are exclusive to Flexicious Ultimate):
1) Inline Filtering
2) Paging
3) Summary Footers
4) Print and Print Preview
5) PDF Export
6) Export to Excel, Word, Text, XML and other formats
7) Preference Persistence (Ability for your end users to save viewing preferences)
8) Display of Homogenous Hierarchical Data
9) Display of Heterogonous Hierarchical Data
10) Smooth Scrolling
11) Left
and Right Locked columns
12) Ability to define fully lazy loaded,
partially lazy loaded and initial loaded flat as well as hierarchical data
grids.
13) Single Cell, Single Row, Multiple Cell, Multiple Row selection modes.
14) A vast number of business scenario support out of the box:
· Read write nested properties of complex objects
· Support for checkbox based selection of data
· Automatic column width adjustment on basis of data
· Drill down/Drill up/Drill to of hierarchical data
· Toolbar action icons, with ability to define custom actions
· Cascading of row selection for hierarchical data
· Auto adjustment of the height on basis of the number of rows displayed
· Context menu based copying:
i. Current Cell
ii. Current Row
iii. All Rows
· Ability to define initial sort values
· Ability to programmatically navigate to a row
· Ability to show custom ToolTip on hover over
· Ability to fully customize borders, backgrounds, and styles for any cell programmatically
·
Ability to define custom logic that control row
selection
Please note, the above features are provided specifically by Flexicious. This is in addition to a whole bunch of features that you get from the Adobe Grids - like item renderers, editors, sortable, resizable re-orderable columns, row/cell selection etc.
Flexicious the company began with a product called “Flexicious Flex DataGrid/AdvancedDataGrid”. Flexicious Ultimate includes Flexicious Flex DataGrid/AdvancedDataGrid. The Adobe Flex SDK ships with two Halo based DataGrids – the Classic DataGrid and the Advanced DataGrid. Flexicious Flex DataGrid/AdvancedDataGrids are extensions to the Classic SDK DataGrid and AdvancedDataGrid. For those of you who are absolutely new to Flex, it’s like Flexicious Flex DataGrid/AdvancedDataGrids were simply add-ons that you purchased to beef up the functionality of the Adobe Classic and Advanced DataGrids at a cost which is a fraction of what it would cost to build in-house.
Flexicious Ultimate on the other hand, is a ground up re-write of the Flex SDK DataGrid. That is, instead of simply extending the Adobe SDK DataGrids, we wrote our own DataGrid, pulled in all of the Flexicious Extension features and most of the Adobe Classic and Advanced DataGrid features, and provided certain features unique to Flexicious Ultimate, to create an offering that is functionally very rich, as well as extensible to cater to a variety of business scenarios. The most important feature, and also the driving factor behind what compelled us to write our own DataGrid is support for Hierarchical Data.
Now, some FAQ’s:
· What made you create Flexicious Ultimate? Could you not have added the features that it has directly to Flexicious Flex DataGrid/AdvancedDatagrid?
· Some, but not all. We’ve managed to make the Flexicious DataGrid/AdvancedDataGrid do quite a few things that initially did not appear to be feasible. However, we came across certain features, like lazy loaded display of heterogeneous hierarchical data with smooth scrolling that were simply not practical to build on top of an architecture that was not created with these use cases envisioned. And although the SDK datagrids are very well written, building on top of a massive code base comes with its own complications. It also makes us less agile. There were certain scenarios, the base Architecture of the Halo Grids and the relative immaturity of the Spark DataGrid required us to create a product that was flexible enough to handle the use cases that our clients presented to us.
· If I choose to use the Flexicious Ultimate, should I stop using the Adobe SDK DataGrid (and the Flexicious DataGrid/AdvancedDataGrid)?
·
No, not necessarily. Flexicious Ultimate
includes the Flexicious Flex DataGrid/AdvancedDatagrid. Flexicious Ultimate
should be a tool in your arsenal. Just like today you use AdvancedDataGrid in
certain scenarios and Classic DataGrid in others, you could use Flexicious
Ultimate where you need features that it offers. There are some features, which
at the time of this writing do not exist on the Flexicious Ultimate, but do on
the Advanced DataGrid, column groups, OLAP, multi column sort and such. But
this list will shrink with newer versions of Flexicious Ultimate.
· Does Flexicious Ultimate Support Skin Parts?
· No. We did not base Flexicious Ultimate on the Skinnable architecture introduced in Flex 4. We did this because of multiple reasons:
i. A number of our Enterprise Clients are still Flex 3, and plan to be so for the foreseeable future
ii. We wanted to take on as little of the framework over head as possible. Most of our components inherit from UIComponent, which is the top level component that all Flex Components inherit from (including Spark). This gives us a lot of flexibility from approaching the architecture of the product from the perspective of the features we are trying to provide.
iii. We still have ability to provide the most important feature of Spark, which is ability to define a very different, yet functionally similar user interface. Please see our example – specifically the Custom Grid Paint Example.
· Can you explain the architecture of Flexicious Ultimate?
One of the most important
concepts behind the Architecture of Flexicious Ultimate arose from the
fundamental requirement that we created the product for - that is display of
Heterogeneous Hierarchical Data. The notion of nested levels is baked in to the
grid via the "columnLevel" property. This is a property of type
"FlexDataGridColumnLevel". This grid always has at least one column
level. This is also referred to as the top level, or the root level. In flat
grids (non hierarchical), this is the only level. But in nested grids, you
could have any number of nested levels. The columns collection actually belongs
to the columnLevel, and since there is one root level, the columns collection
of the grid basically points to the columns collection of this root level.
The FlexDataGridColumnLevel class has a "nextLevel" property, which
is a pointer to another instance of the same class, or a
"nextLevelRenderer" property, which is a reference to a ClassFactory
the next level. Please note, currently, if you specify nextLevelRenderer, the
nextLevel is ignored. This means, at the same level, you cannot have both a
nested subgrid as well as a level renderer. Bottom line - use nextLevelRenderer
only at the innermost level. Our examples demonstrate this.
Another one important feature of the product is left and right locked columns, as well as a locked header and footer. This complicates the grid structure a little bit like below:
You can access each of the above container sections via the following properties:
· leftLockedHeader (com.flexicious.nestedtreedatagrid.cells.LockedContent) - The container for the left locked filter and header cells. This is an instance of the LockedContent class, which basically is an extended UIComponent that manages the filter and footer cell visiblity, heights, and the y positions.
· leftLockedContent (com.flexicious.nestedtreedatagrid.cells.ElasticContainer) - The container for the left locked data cells. This is an instance of the ElasticContainer class, which basically attaches to the owner component (which is the bodyContainer) and scrolls vertically along with it. The horizontal scroll of this component is set to off)
· leftLockedFooter (com.flexicious.nestedtreedatagrid.cells.LockedContent)
· filterContainer (com.flexicious.nestedtreedatagrid.cells. FlexDataGridHeaderContainer)
· headerContainer (com.flexicious.nestedtreedatagrid.cells.FlexDataGridHeaderContainer)
· bodyContainer(com.flexicious.nestedtreedatagrid.cells. FlexDataGridBodyContainer)
· rightLockedHeader (com.flexicious.nestedtreedatagrid.cells.LockedContent)
· rightLockedContent (com.flexicious.nestedtreedatagrid.cells.ElasticContainer)
· rightLockedFooter (com.flexicious.nestedtreedatagrid.cells.LockedContent)
· pagerContainer (com.flexicious.nestedtreedatagrid.cells. FlexDataGridHeaderContainer)
You should normally not need to touch any of these properties. But they're there if you need to. Also, if you need a handle on the actual cells, you should go to the rows collection of filterContainer, headerContainer, bodyContainer, footerContainer, or pagerContainer. Each of these has a rows property, which in case of all but the bodyContainer is collection with 1 Item, of type RowInfo. The rowInfo object, that has the cells collection. The Cells are basically a collection of ComponentInfo object, that each contain a pointer to the actual component which is an instance of on of the subclasses of the FlexDataGridCell object. The FlexDataGridCell has a renderer property, which is the actual component being displayed. These concrete classes that inherit from FlexDataGridCell are:
· FlexDataGridHeaderCell
· FlexDataGridFilterCell
· FlexDataGridFooterCell
· FlexDataGridPagerCell
· FlexDataGridLevelRendererCell
· FlexDataGridExpandCollapseHeaderCell
· FlexDataGridExpandCollapseCell
· FlexDataGridPaddingCell.
Each of the above cells has a renderer property. The renderer is the actual component that is displayed on the UI. The FlexDataGridCell is responsible for sizing, positioning (based on padding), drawing the background, and drawing the borders. In case of the Header, Data or Footer cells the default renderer is a UITextField or UIFTETextField. For Filter, it is an instance of the IFilterControl. For the Pager, it is an IPager control. For the LevelRenderer it is an instance of the Class Factory that you specify in the nextLevelRenderer of the associated column Level. For the ExpandCollapse cells, it will draw an instance of the expand collapse icon on basis of the disclosureIcon style property. All the drawing happens in the drawCell method. It internally calls the drawBackground and drawBorder methods. Usually specifying the style attributes or the cellBackgroud/rowBackground/cellBorder/rowBorder functions is sufficient, but in case its needed, these methods can be overridden in a custom implementation, and this custom implementation can then be hooked in via the dataCellRenderer, headerCellRenderer, footerCellRenderer, pagerCellRenderer, filterCellRender, expandCollapseHeaderCellRenderer,nestIndentPaddingCellRenderer, and expandCollapseCellRenderer of the column or the level.
· Does Flexicious Ultimate support HierarchicalCollectionView?
a. Yes
it does, but most of our examples do not use it. This is because the hierarchy
is setup in the Grid itself. The Grid provides the concept of "columnLevels".
In fact, a non-hierarchical Flexicious Ultimate Grid is simply a grid with just
one column level. When you have multiple levels of data (i.e. multiple Column
Levels), you can just assign a flat collection to the top level, and within the
flat collection specify which property contains the next level of data, via the
childrenField property.
Flexicious Ultimate was architected with Multi Level Heterogeneous and
Homogenous Hierarchical Data in mind, so we do not have the need to implement a
customized data structure to morph object graphs into nested data. We are able
to consume it as is, and display a hierarchical UI. We provide numerous examples of this concept
in our sample project.
· What does this mean for your existing customers? Will you be continuing support/development of the Flexicious Classic/AdvancedDataGrids?
a. Absolutely. Flexicious Ultimate is a new product, which is a superset of our original product. Although it would be excellent if all of our customers upgraded to Flexicious Ultimate, we are firmly committed to continue to support and add/enhance features to Flexicious Classic/Advanced DataGrids even if you choose not to.