Performance Improvements to Classic Flex DataGrid and AdvancedDataGrid

clock November 24, 2013 04:18 by author Flexicious

We have recently reworked the filtering and paging implementations for Classic, resulting in good performance improvements for Classic ExtendedDataGrid and ExtendedAdvancedDataGrid components. This is especially true if you have a large number of records. Previous performance improvements had revolved around optimizing the renderered part of the grid, but this one particularly targets the internals of how the grid stores indexes for pages and filters. We have had a couple of our consulting services customers experience dramatic improvements, especially for larger recordsets. 

If you have grids with tens of thousands of rows, please request a build, you should be able to see these improvements.

Please note, this is only for our Classic Product (Not Ultimate). We've already made a lot of advances in terms of performance for Ultimate before. 



Android DataGrid

clock November 20, 2013 05:16 by author Flexicious

As we announced a few days ago, we're in the process of converting the Flexicious Ultimate DataGrid to a few other platforms that our customers have expressed an interest in supporting. We have completed the port to HTML/JavaScript (with jQuery, EXT JS or DOJO), and iOS. These are available at www.htmltreegrid.com and www.ioscomponents.com. The Android team is wrapping up the Android port as well, and we are looking for beta testers. So if you have an Android Application that needs a DataGrid or a Table, please reach out to us via the Contact us form, and we will be glad to get you a beta version. 



Spark DataGrid - Drag and Drop

clock November 14, 2013 01:56 by author Flexicious

The Spark DataGrid got a significant boost with the release of Apache Flex 4.10 and 4.11. One of the major additions was  the introduction of built in drag and drop functionality. With this, Spark DataGrid is capable of the same Drag Copy, Drag Move and Drag Reorder features of the MX DataGrid. We added some basic bug fixes around this, especially with the new skins that the spark datagrid ships with, but the one key thing we added was support for drag and drop when in mobile mode.

The issue here is that the user gesture for scroll, and drag and drop is the same. This makes it incredibly hard for the user to actually do the drag and drop without triggering a scroll. So we basically added support for drag and drop via a custom drag grip column. All you have to do is to set enableDragColumn=true, and our product does the rest!

 

Below are the screen shots:

 

And on Mobile, this would look like :

 



Spark DataGrid Multi Column Sort

clock November 12, 2013 16:25 by author Flexicious

As we talked about before, we have added numerous new features to the Apache Flex Spark DataGrid. One of these features was support for Multiple Column Sort.

A little backround:   In Apache Flex 4.10, code that Adobe had almost finished but not released was included. This code included support for multiple column sort. However, the default header renderer being used does not have the separate section to click on the multiple column sort. We added this and automatically swap it in place of the default renderer when the multiColumnSort enabled flag is set to true. So now your grids look like this :

 

 



Scrolling Issues With TextInput for Flex & Air Mobile Native StageText

clock November 10, 2013 03:29 by author Flexicious

This issue was a rather tough one to resolve, so we decided to blog about it. For one of our consulting services customers, we’re working on converting a fairly large legacy Flex 3 application, optimizing it for Mobile use. As a part of this we’ve skinned a number of components for mobile use, optimized their interactions to be touch sensitive, and built new components speficially for mobile. We optmizied the DataGrid to have touch sensitive drag and drop (This is particularly challenging because the scroll gesture for mobile datagrid is the same as the drag and drop gesture),

One of the challenges we faced in this project was that the usage of Stage Text caused a number of issues

 

  • When used inside of a Scroller, the text does not maintain its scroll position as the user scrolls. This makes the text appear out of its correct location
  • Things such as date pickers, combo boxes (which we also styled) or anything with a popup were impossible to use, because  surrounding native Stage Text objects rendered on top of the popups, making interacting with them impossible.

 

A number of people have reported to have run into this issue, and there seems to have been no solution. We basically built an extended text input skin, that switches off the visibility of the StageText whenever the user is not interacting with it, and replaces it with a snapshot of itself, which is a flex component and thus behaves nicely regardless of scrolling or positioning. When the user does interact with it, it switches the visibility back on. This might be a little heavy on the performance side, but we have not experienced any noticable lag.

The good thing about this skin is that it does not require any of our products to use, so you can download and use it right off here (link at the end of the blog) . If you find this component to be useful, please feel free to check out some of our other work: 

http://www.flexicious.com/Home/Dashboard

http://www.flexicious.com/Home/Ultimate

http://www.flexicious.com/Home/SparkDataGridDemo

ExtendedStageTextInputSkin.as (7.94 kb)

If this works for you, please click on the tweet/like button below to spread the word! If it does not, send us a quick note on any of our social medial handles below to let us know what the issue is and we will try to help. 



Spark DataGrid - Transitioning to Apache Flex

clock November 10, 2013 03:24 by author Flexicious

With the release of the Apache Flex 4.10 SDK, comes the codebase from Adobe’s final few months of work on Flex Next (which was to be Flex 5.0). This is code that Adobe was almost finished with, but was not a part of the Flex 4.6 SDK. Among these changes were a list of enhancements to the Spark DataGrid to bring it on par with MX. Features like multi column sort, locked columns and rows, as well as drag and drop were added.

As most of you are aware, at Flexicious, we have an extension to the SDK Spark DataGrid that adds features like filter, footer, paging, print, export, persistence and a lot more. As a part of Flexicious 3.1, we added support for Apache Flex 4.10 to this release. Almost all of the Flexicious code is pretty SDK version agnostic, but there are always some differences between the API’s of the various SDKs that leads to some version mismatches. Since the API for the Spark DataGrid changed a lot between SDK 4.6 and 4.10, the Flexicious libraries built for Flex SDK 4.6 (especially for the Spark libraries) will not work with SDK 4.6. Starting Flexicious 3.11, we are adding full support for Apache Flex 4.10 and 4.11.

Most of the work around this was under the hood, so you do not have to worry about it. However, the biggest change really is the skin. Since Spark DataGrid added locked columns in 4.10, the skins changed to house the various locked sections. In addition, the layout algorithms had to change to accommodate various locked skin parts. In this blog post, there is both the older and the newer skin attached. For source customers who use the Spark DataGrid, there is a folder underneath skins, called Apache.

 

This was by far the most time consuming part of our efforts to fully support Apache Flex 4.10 (and 4.11). For those of you who are going to be transitioning to Apache Flex, unless you have custom skins for you DataGrid components, transitioning to the Apache Flex SDK should be quite painless. We strongly encourage our customers and the Flex community in general to upgrade to the latest Apache Flex release. It not only has a much larger expanded set of components, but also adds features to existing ones. 

Extended Spark DataGrid Skin : 

ExtendedSparkDataGridSkin.mxml (14.04 kb)

Extended Spark DataGrid Skin (Apache): 

ExtendedSparkDataGridSkin.mxml (16.96 kb)

In addition to the support for Apache Flex 4.10 and 4.11, we put a lot of effort in making the grid suitable for mobile use. The stock Spark DataGrid is not optimized for mobile use. However, we've managed to override a lot of the built in functionality to add support for mobile use including Drag and Drop (http://blog.flexicious.com/post/Spark-DataGrid-Drag-and-Drop.aspx), scrolling without affecting selection, multiple column sort (http://blog.flexicious.com/post/Spark-DataGrid-Multi-Column-Sort.aspx) and more!!

 



Charts with Rotated Axis Labels

clock November 6, 2013 16:35 by author Flexicious

A frequent question that is asked to our support team is how to rotate labels and keep them aligned correctly for charts. For cartesian charts, there are 2 axes (vertical and horizontal). Each axis is really an extended gauge control, with full control over tick marks, length of ticks, offset of ticks, color, label rotation, how far the labels move from the axis, etc. The following set of properties are useful in label rotation and positioning:

myChart.horizontalAxis.labelXOffset = -20;      //this gives it enough space to rotate (pushes the labels left)

myChart.horizontalAxis.labelYOffset = 70;       //this gives it enough space to rotate (pushes the labels down)

myChart.horizontalAxis.labelRotation = -45; //the angle by which you want to rotate the labels

myChart.horizontalAxis.tickMajorLabelStyleName = "rightAlign"; //this style makes the labels align right

myChart.horizontalAxis.autosizeLabels = false//this tells the chart not to size the labels on basis of the content of the label

myChart.horizontalAxis.tickLabelFactory = UIUtils.createRenderer(Label,{'width':100})     //this gives a fixed width to the labels so they dont appear jagged

 

Below is what the chart will look like:

 

 

Below is the code used to make this happen:

 

LineChartLabelRotationIssue.mxml (4.54 kb)



Flexicious 3.1 released

clock November 4, 2013 00:19 by author Flexicious

It is with great pleasure, that we are announcing the release of Flexicious 3.1. 

Major Changes:

New Components:

  • Treemap: Added a new control, the Flex Treemap, based upon the existing Charts API.  More details here
  • Calendar/Scheduler: Added a new control, the Spark based, Fully Skinnable, Mobile (and desktop/web) Ready, Calendar/Scheduler component. More details here.

Enhancements- All Products

  • Full support for Apache Flex 4.10 & 4.11.
  • Spark DataGrid: With the 3.1 release, the Spark DataGrid is getting closer to feature parity with MX than ever before. Not only did we (Flexicious) add a number of features, but it also got a lot of enhancements with the release of Apache Flex 4.10/4.11.  With this release, the Spark DataGrid supports Locked Columns, Locked Rows, Drag and Drop, Multiple Column Sort, and a lot more.  Flexicious has added better support for mobile use including support for drag column (you cannot drag and drop on mobile, because drag and scroll touch gestures overlap), preventing selection on scroll (since scrolling the default grid causes selection change), tap to unselect (since there is no control key to unselect on mobile), and more.


Other Changes:


Enhancements- All Products:

Ability to customize the name of the file generated by Alive PDF Export. Please download the new project, since the updated AlivePDFPrinter is also needed.

 

Enhancements- All Grids:

  • Support for footer export: All exporters (CSV, HTML, XML, TXT, XLS, XLSX) now support inclusion of footer values.  Added API to the column object to calculate the footer value: calculateFooterValue. Modified the Exporter API to include the data provider in the writeFooter method.  

 For those of you who have  customized exporters (or use the Sample code from Classic that customizes the export), you will need to modify the writeFooter method as such:

                          publicoverridefunction writeFooter(grid:IExtendedDataGrid, dataProvider:Object/*This was added in 3.1 remove it for prior to 3.1 library*/):String{

 For those of you who do not wish to export footers, please set:

exportOptions.includeFooters=false.

  • Addition of the MultiSelectComboBoxEx, which allows for searchable multi select combo boxes.
  • Watermark label for Filter Text Input position correction.
  • Better localization support for Date Picker popup.

 

Enhancements- Dashboard Framework:

  • Charts: All charts now expose and respect a property called interactionEnabled. Its prudent to set this to false in print view mode.
  • For Air applications that require the Native Drag Manager, code was added to support drag and drop using the Native drag manager.  Previously, you had to enable the Flex Drag Manager and disable the native drag manager for Drag and Drop support.
  • Added flag to all charts: autoSizeLabels. This is useful when you want to rotate labels, and set them to a fixed size so they do not appear jagged.

 

Enhancements- Ultimate:

  • Added the columnVisibleChanged event.
  • Added the drag selection behavior. Added a flag, enableDragSelect, when you set this to true, the user can draw a rectangle using the mouse and in row selection mode, all rows underneath that rectangle are selected. In cell selection mode, all cells underneath that rectangle are selected.
  • Added support to all cells for copy. Previously you could only copy data cells.
  • enableListData flag: This is a flag to enable MX DataGrid style listData behavior. If set to true, and if your item renderer is an IDropinItemListener, its listData will be set similar to how it is set in the MX DataGrid.
  • Exposed the getCellFromMouseEventTarget(target:Object):IFlexDataGridCell method, so if you have a mouse event, you can get the associated parent flex datagrid cell object. 

 

Bug Fix- Dashboard Framework:

  • Zoom Slider: For the Zoom Slider Chart, there were a number of issues that were fixed. First, the slider was extended to support resize operations, and to reposition the handles when a resize occurs so the content continues to represent the original slice. Second, a bug related to handles not moving or moving past the edges has now been fixed.
  • If you had collapsed dashlets in saved preferences, print caused an error.
  • Calculation of the item underneath mouse for mouse rollover actions was not taking into account the skin.
  • Charts did not respect the animate flag.
  • Calculation of the item underneath mouse for mouse rollover actions was not taking into account the skin.
  • Line chart was drawing the data provider in reverse order.
  • 3D Pie chart roll over slice was not getting reset.
  • For all cartesian charts, the line separator between the axes and the chart area was not respecting the color of the vertical or horizontal grid lines.

 

Bug Fix- Classic:

  • Filter Value not being cleared when data provider changed, resulting in inconsistent results
  • Added defensive code for a number of SDK bugs in the ADG

 

Bug Fix- Ultimate:

  • When using icon rollover callout, if you had a grid reference, it was being set to the Tooltip Behavior resulting in an RTE.
  • When using Filter with dot notation based fields, null values were being ignored.
  • On collection change, we were not considering replace events. 
  • clearErrors method was not resetting the hasErrors property.
  • selectionMode of Single Row will automatically set enableSelectionBubble and enableSelectionCascade to false, thereby preventing error conditions.
  • Filler rows were not being fully drawn all the way to the edge of the grid correctly when horizontal scroll is enabled.
  • Filler rows were not being fully drawn all the way to the edge of the grid correctly.
  • In print view, some times resizing the column left the active color on the header.

 



Flex Calendar Component - New with Flexicious 3.1

clock November 3, 2013 03:58 by author Flexicious

One of the many exciting additions to the Dashboard Framework in 3.1 is the addition of the Calendar component. As opposed to selling the Calendar component as a standalone component, we are including it with the Flexicious Dashboard Framework, so if you already own a license for our Dashboard Framework with a valid subscription, you are entitled to a license for our Calendar as well!

Here is a screenshot for some developer eye-candy.

Why did we write the Calendar component?

Starting with the DataGrid, and then the Dashboard, Charts, Gauges, and smaller controls like MultiSelect, DateComboBox, Date Time Picker, and numerous other extended components, our goal has been to make your application development as efficient as possible.  We take the most common use cases from our experience with library development and consulting, and package them up into reusable components that accelerate your development and save you time and money.  Calendar is another step in that direction.

From a technical standpoint, there are no good calendar components designed specifically for the Spark Framework with mobile support and skinning built in.  Some other calendar components have stopped being actively developed and are not being upgraded with new functionality or being updated for use with newer versions of Flex.   If you look at some of the screenshots, and review the sample code, you will be amazed at how easily and how efficiently you can skin the Flexicious Calendar component.  

Finally, we use a lot of our components (including this calendar component) for our consulting services division, and our consulting services customers have some of the most complex UI requirements (that’s why they come to us!). By authoring our own components, we’re able to bend it like Beckham!!

To see what is possible with the excellent skinning architecture that the calendar is based on, below is the same calendar component switched from an Office 2013 theme (default) to iOS 7 theme:


Introduction:

The Flexicious Calendar is a skinnable component built on the excellent Spark Architecture, to display an outlook-like Calendar UI. Out of the box, It supports

  • Month View
  • Week View
  • Work Week View
  • Day View

 

The core class that you would drop on your screen is the com.flexicious.components.calendar.Calendar.  The default skin class for this component is the com.flexicious.components.calendar.CalendarSkin class.  If you look at this class, you will find the declarations of the composited Month View and Week View.  The same Week View instance is used for Work Week as well as Day View.  The week view is nothing but an extended Spark DataGrid, with specialized renderers to render the time slot cells as well as the weekday header cell.  The most important piece of the WeekView is the ability to render calendar items on top of the cells.  The calendar items are rendered using the com.flexicious.components.calendar.CalendarItemRenderer class. If you need to customize this, you can do so via setting the calendarItemRenderer property on the Calendar component. Please make sure you extend from the CalendarItemRenderer class should you need to customize this.

 

The data provider for the calendar simply consists of an array of objects. You define the data provider by setting the calendarItems property on the calendar control.  If you make any changes to the calendar items, you can trigger a refresh of the calendar by calling the invalidateCalendarItems method.  The same calendar items array is used as a data provider for all views of the calendar.   There needs to be no special interface implemented for this object.  Although, it would have been elegant to provide such an interface as a requirement, we made the decision not to because a number of our customers simply get json data from the backend and this would have required additional steps to be able to render JSON data on the calendar component.  The only requirement for such a VO is that is have a startDate, endDate, a title (that matches the labelField of the Calendar Component), and an optional description that matches the descriptionField of the calendar component.

 

There are two main types of events that are dispatched from the calendar component.  The first is the interaction with individual date ranges.  This happens when the user interacts with a day on the calendar month view, or on a hour section on the week/day views.  These interactions do not occur in context of an individual calendar item, but on a date range.  The event has a dateRange property that tells you the details about the date range that was clicked on. These are the dateRangeClick and dateRangeDoubleClick events.

The other events occur specifically in relation to individual calendar items.  These are the calendarITemClick and calendarItemDoubleClick events.  These happen when the user interacts with the calendarItemRenderers on the screen.  The event has a pointer to the calendarItemRenderer which internally has a pointer to the calendarItem being rendered.

The default response to a double click on a date range is showing a popup to add new calendar items, and the default response to a double click on a calendar item is to show a popup to edit that calendar item.  On the touch version, the same behavior is applied to a double tap. If you wish you can prevent the default on the double click event, and wire up your own response.  Also, if you simply want to provide a custom popup, you can just define a calendarItemPopupRenderer factory and that will be used instead of the built in popup.  The only requirement for such a popup is that it have a calendarItem public property with an object data type. Also, when a new item is created, the calendarItemVOFactory is used to generate a new instance.  If you have a custom VO, you can provide a factory with that VO to this property, and that will be used.  The only requirement for such a VO is that is have a startDate, endDate, a title (that matches the labelField of the Calendar Component), and an optional description that matches the descriptionField of the calendar component.

The final piece we are going to cover in this blog post is the drag and drop support in the calendar component. There are three types of drag and drop operations that we support.

1)      Drag Resize:  On the Week, Work Week, and Day Views, you can drag the edges of the CalendarItemRenderer to extend the start and end dates of the Calendar Item

2)      Drag Drop :   On the Month, Work Week, Week and Day Views, you can drag and drop individual calendar items and drop them on other date ranges to change both the start and end dates.

3)      Drag Drop from other components:  The Calendar supports a dropEnabled property that lets you drop items on to the Calendar. By default, on drop, the calendar uses the calendarItemVOFactory to instantiate a new calendar item, picks up the location where the item was dropped to figure out the start and end dates, and then uses the labelField and descriptionField properties, if they exists on the source and the target objects to populate those properties and set them.

 

Other than that, since the Calendar and the constituent parts are all based on the Spark Skinning paradigm, it is extremely straightforward and efficient to customize the appearance as well as the behavior of the components. We provide an Outlook 2013, which is the default theme as well as a custom iOS7 (Apple iCal) like theme as an example of customizing the appearance completely.

 

We are open to feedback, since this is the initial release of the component, we have additional features planned.  We are keen to hear your feedback to further enhance the component to meet your requirements and save you time!

 

 



Flex Treemap component - New with Flexicious 3.1

clock November 2, 2013 22:46 by author Flexicious

As we announced a few days ago, Flexicious 3.1 includes 2 brand new additions to our Dashboard Framework: The Flex Treemap and The Flex Calendar/Scheduler components.  If you are an existing Dashboard customer, with a valid subscription, you get both these components at no additional cost! 

The Treemap is basically an extended Chart, so the API for it is quite similar to the rest of the charting components.  For those of you who are unfamiliar with what a Treemap is, here is a description from Wikipedia: << "Treemaps display hierarchical (tree-structured) data as a set of nested rectangles. Each branch of the tree is given a rectangle, which is then tiled with smaller rectangles representing sub-branches. A leaf node's rectangle has an area proportional to a specified dimension on the data. Often the leaf nodes are colored to show a separate dimension of the data." >>

Below is what the Flexicious 3.1 Treemap looks like. As you can quickly guess, it gives you the population (area) and the relative wealth (color darkness). This is real data, and paints quite an interesting picture of how many households exist and their relative wealth. 

Here is what this looks like if you drill down on all those rich folks in NJ:

We are open to feedback, since this is the initial release of the component, we have additional features planned.  We are keen to hear your feedback to further enhance the component to meet your requirements and save you time!  

For a full sample, along with the data, please request a trial here: