Exciting Announcements - Flexicious Dashboard Framework and Flexicious 2.7

clock May 7, 2012 06:00 by author Flexicious

We are proud to make two exciting announcements today:

First, we've released a brand new product, the Flexicious Dashboard Framework!

The Flexicious Dashboard Framework is a new product from Flexicious that empowers RIA developers to provide feature rich, expressive, highly customizable, and deeply engaging dashboard experience to their users. Although there are a few implementations out there that do this, none provides all the features that we do, and none of them are built on top of the Spark Skinning framework, which makes it enormously more easy to customize the look and feel of the product. Details here

Second, in our relentless pursuit of excellence, we've released yet another major update to all our existing products, including Flexicious Classic, Advanced, Ultimate and Spark DataGrids. Details here

Thank you for your continued support and do not hesitate to reach out to us if you have any questions!

Introducing the Flexicious Flex Dashboard Framework

clock May 7, 2012 05:55 by author Flexicious

Update 7/02: Upcoming dashboard widgets : Spark based MicroCharts/Tiny Charts

Update 6/25: We've just released 2.8, which adds a number of widgets (Circular, Linear, and Traffic light Gauges) to the dashboard framework. Check it out!

The Flexicious Dashboard Framework is a new product from Flexicious that empowers RIA developers to provide feature rich, expressive, highly customizable, and deeply engaging dashboard experience to their users.

It provides you with a lot of the base functionality that is standard in dashboard applications, in addition to a number of highly productive features that is sure to WOW your customers.

Right out of the box, you get:
A container for your dashboard that provides;

  •     Support for configurable layout of dashlets, and provision for users to move and resize dashlets, integrated with preference persistence so dashboard loads exactly how the user left it.
  •     Ability to organize dashlets in zones. Ability to drag and drop dashlets between zones, again with preference persistence mechanism.
  •     Ability to Print Preview and Print the dashboard or a single dashlet
  •     Ability to export the Dashboard to PDF
  •     Ability for your users to save the current view of the dashboard via preferences
  •     Ability Show/Hide Dashlets, control which dashlets appear where and at what size.
  •     An auto refresh mechanism
  •     Ability to control dashlet operations including:
    •         Move dashlets via a convenient drag and drop
    •         Resize dashlets
    •         Expand/Collapse Dashlets
    •         Open/Close Dashlets
    •         Maximize/Minimize Dashlets
    •         Loading Animation
  •     Based on the Spark skinning model, provides the ability to completely skin the look and feel of the dashboard as well as the dashlets.
  •     A number of professional, excellent looking built in skins

Check out the demo here
Read the getting started guide here.
Get the PDF copy of the Getting Started Guide here.
Download the trial here

Flexicious 2.7 released!

clock May 6, 2012 05:07 by author Flexicious

2.7 - We should rename this "The Performance Release". We took a long hard look at every single millisecond that the grid takes to initialize, analyzed the time taken by each and every section of the grid and made significant strides in overall performance. Now, keep in perspective that the grid always rendered within sub second timeframes. However, it was towards the higher end of the sub-second range for some of our complicated use cases. We were not very happy with that, and had always been itching to go in and re-write some of the major bottlenecks. Regression is always a risk with changes like this, but we've been very careful with not introducing any new behavior by default. You have to explicitly turn on the new code. None of the new code will execute unless you specifically turn it on. So, with that said, let's take a quick look at what's new on the performance front:

1) enableDataCellOptimization: This is the magic pixie dust that you need to supercharge your Ultimate experience. An interesting tidbit, the stealth name of this property was "enableTwinTurbo" Cool, so if you run into that word somewhere in the samples or the non public API, don't be surprised. (We're really a bunch of nerds). We've managed to see a reduction of over 30% on some of our grids. Your mileage may vary very widely, because it all depends on what you are doing with your grid, but in one example, our rendering time went from about 830 ms (averaged across 100 instantiations) to less around 474 ms, all while consuming less memory. Keep in mind however, the default for this property is false, and you have to explicitly set it to true. We did this to ensure you do not run into any regression impact. Please try it out and let us know if you find any issues.Below is the asdocs for this new property:
  • "Flag to turn on the highly optimized FlexDataGridDataCell3. FlexDataGridDataCell3 is a light weight class introduced in Flexicious 2.7, that renders 30% faster than its predecessor, FlexDataGridDataCell2. Since it is very lightweight, it only supports the basics of text rendering, like fontFamily, fontSize, fontWeight, fontStyle ,color, background, textAlign, and textDecoration. In most cases, this covers the range of things that a typical application developer needs. But incase you need advanced text capabilities, like TLF fonts, RTL, etc, you may need to turn off this flag either on the grid, or on specific columns that you need advanced features on. Once FDG3 is fully settled in the field, this flag will be removed and we will retire FDGC2. As of right now, the FDGC3 cannot handle wordwrap, doubleclick, truncateToFit, handCursor. The grid automatically swaps out the FDG3 with FDG when you set any of these flags. If you notice any inconsistency when you enable this flag, you can turn this same flag off for the column that you notice the inconsistency on, and the grid will fall back to the older mechanism to display that column".
2) PagerControlAS: This one has been bothering us for a while now. Our existing pager control goes against a lot of our own principles of performance optimizations. It uses too many nested containers, it relies a lot on databinding, it uses repeaters, it does not optimize how often it gets drawn in response to lifecycle events, and it is built in MXML instead of pure actionscript. Well, move over PagerControl, PagerControlAS is here. Before we delve into what we did – here's a little performance candy – we went from about 110 ms (worse case) to about 30 (worse case). And that's not all – we actually added a new feature (sorry we cant help it Smile)– ability to have nested toolbar actions with an hbox that converts itself to a flyover menu when your buttons exceed the width available. See the overflow toolbar menu example for more details. Like always, this feature does not get turned on automatically, you have to specify the new pager control as such:
  • import com.flexicious.nestedtreedatagrid.pager.PagerControlAS;
  • pagerRenderer="{new ClassFactory(PagerControlAS)}"
Since most of you often customize this class, it is available here as a direct download. It should be simple enough to follow, the code is very similar to the MXML version, just that the children are added in actionscript instead of mxml, no repeaters are used (simple for loops instead), children are only added when needed (as opposed to hidden when not needed), and instead of databinding, we simply rely on the Event Dispatching mechanism to update the state of the pager control. The file below demonstrates how to use this feature, and here is a screenshot of this functionality:

PagerControlAS.as (27.69 kb)

ToolbarActionsDropdown.mxml (2.71 kb)

That said, there are number of exciting new features, bug fixes, and improvements in 2.7

BugFix, Classic: The selectedKeysChanged event dispatched multiple times when user clicked on select all

BugFix, Classic: The copy cell operation copied incorrect data when there are invisible columns.

Enhancement, Ultimate: The export now allows you to choose the columns to export:

Bug Fix, Ultimate: Fixed memory leak where first instance of FlexDataGrid was pinned into memory.

Enhancement, Ultimate: Added the iconClick, iconMouseOver, and iconMouseOut events.

Bug Fix, Ultimate: When you removed an item from the data provider, it did not get removed from the selected objects collection

Bug Fix, Ultimate: When filterPageSortMode=server, and you select all, and request new page, it will now select the new page records.

Bug Fix, Ultimate: If you run a filter, and then click select all, it selected all the records, not just the filtered ones.

Bug Fix, Ultimate: On some column resize operations, the horizontal scroll bar did not appear when it should (assuming horizontalScrollPolicy=auto or on).

Enhancement, Ultimate: Ability to drag and drop column groups.

Bug Fix, Ultimate: Fix for memory leak when variableRowHeight=true.

Bug Fix, Ultimate: Setting enabled flag on the grid actually enabled each section as opposed to only the body.

Enhancement, Ultimate: Control key based multiple cell/row selection. New property added : enableStickyControlKeySelection. Docs: "Only applicable when selectionMode=multipleRows or multipleCells. By default, when you click on a row (or cell), the grid will add it to the selection. If you click again, the grid will remove it from selection. If you click on another row (or cell), the grid will add that row/cell to the selection. When you set this to false, when you click on a row, the grid will add it to selection, If you click again nothing will happen. If you click with the control key down the grid will remove it from selection. If you click another row/cell, the originally selected row/cell will be unselected. If you CTRL click on another row, the grid will add that row in addition to the previously selected row. In short, the grid will behave like the SDK datagrid."

Enhancement, Ultimate: Continuous row strips in case of no data. New property added : enableFillerRows. Docs: "By default, for performance reasons, the grid will only draw one large row to fill up the bottom in case that the grid is taller than the sum of the row heights. However, for consistency with the MX grids, setting this property to true will cause the grid to draw blank rows similar to the other data rows."

Enhancement, Ultimate: Much faster rendering (enableDataCellOptimization) details above.

Enhancement, Ultimate: Ability to have sibling columns and column groups. The following property was added to enable this behavior. Added groupedColumns to FlexDataGridColumnGroup. Docs: "Support for columns and column groups as siblings. Prior to 2.7, you could not have a columngroup next to a column. In other words, a column group could either have sub columngroups OR sub columns. If you use the new groupedColumns property you can have column groups that contain both sub column groups as well as sub columns." Below is the screen shot, and attached is the code.

Enhancement, Ultimate: Ability to define custom nestIndentPaddingRenderer and scrollbarPadRenderer.

Enhancement, Ultimate: Enhancements to keyboard navigation, enableDoubleClickEdit, and F2 begins edit session.

Bug Fix, Ultimate: Mouse Wheel over locked sections scrolls the grids correctly.

Bug Fix, Ultimate: Virtual Scroll, fix for issue when there are not enough rows in the virtual scroll call.

Bug Fix, Ultimate: Print data grid did not carry over column text alignment.

Bug Fix, Ultimate: Save Settings and Settings popups are now modal, so user cannot instantiate multiple ones.

Enhancement, Ultimate: Support for nested toolbar actions. See PagerControlAS above.

Enhancement, All DataGrids: Ability to specify default date range for DateComboBox, custom date range. The new property "defaultDateRangeForDatePicker" was added for this.

Enhancement, All DataGrids: Ability to show time picker for the date combobox custom date picker. The property showTimePicker was added for this.
Here is a screenshot of this functionality, and how to use it:


Enhancement, All DataGrids: Did you know that the Flexicious TextInput is no ordinary text input? You can define inside icon, outside icon, watermarks, and now, with 2.7, you can define masks. The following properties were added to enable this functionality:
  1. inputMask
  2. inputCharValidFunction
  3. inputMaskDelimiters
  4. inputMaskForceLength

Enhancement, All DataGrids: The DateField control has been extended to accept the same input masks functionality from the TextInput component:
  1. inputMask
  2. inputCharValidFunction
  3. inputMaskDelimiters
  4. inputMaskForceLength

Enhancement, All DataGrids: All NEW Filter Control – Date Range Box. Think a DateComboBox and a NumericRangeBox combined! Class name DateRangeBox. Below are screenshots of these enhancements and the code to use them follows:


    <controls:TextInput inputMask="__/__/____" restrict="0-9" />

    <controls:DateField inputMask="__/__/____" editable="true" restrict="0-9"/>

    <controls:DateRangeBox width="225" height="20"/>

Enhancement, All DataGrids: The MultiSelectComboBox now supports search within it. For DataGrids with large selections in the MultiSelectComboBox, you can now filter down the MSCB itself. The following properties were added to MSCB to support this: addSearchBox and searchBoxWaterMark.

And here is the markup:

<columns:ExtendedDataGridColumn filterRenderer="{UIUtils.createRenderer(MultiSelectComboBox,{addSearchBox:true})}" filterWaterMark="Search"
filterComboBoxBuildFromGrid="true" />