Flexicious Ultimate - Flex DataGrid Right Click Support

clock July 18, 2014 06:32 by author Flexicious

This has got to be among the most requested features. For the longest time, there was no clean way to provide built in support for right click. Flex has always had a acrimonious relationship with right click. There are a few implementations that interact with the browser and do some javascript trickery to make this work, but nothing has been clean enough for us to provide as a out-of-the-box solution.

So finally when earlier this year we Flash player provided official support for right click, we were able to tap into this new feature and provide a nice way to get you right click support, with a few easy properties and events.

 

  1. Set enableCustomContextMenu="true"
  2. Define your customContextMenuItems="{['Sample Item']}"
  3. Optional, Define itemRightClick event. where you can customize the list of customContextMenuItems if it is different for each cell.
  4. Define itemRightClickMenuSelect event, where you handle the right click menu selection response. 
Lets see what this looks like:

And here is the code that makes this happen:


RightClick.mxml (2.94 kb)

 

Enjoy!



Flexicious Ultimate - Flex DataGrid with rapid inserts and updates

clock July 14, 2014 20:26 by author Administrator

Recently, while working with a customer on optimizing some performance issues, we came across a scenario, where the customer wanted to rapidly update the grid with new data coming from the server. This is a rather complicated use case to accomodate, since the default behavior of the grid is to rebuild itself in response to additions, deletions etc in the dataprovider. It also is quite resource intensive to do so, because usually additions or deletions means you have to rebuild the sort, rerun all filters, update page indexes, and a lot of internal cached information that makes the grid extremely performant needs to be rebuilt. 

We already have the TraderView example that demonstrates how to respond to rapid updates. We do this by turning off the rebuildGridOnDataProviderChange flag, which basically means grid will not respond to changes in dataprovider, and instead will depend on you to explicitly ask it to update via either the rebuild() method or the rebuildBody method. However, in that example, we simlpy call targeted refresh cell calls, to update specific cells that need to be updated. This makes it possible for the grid to respond to a numerous updates per second.

However, keep in mind that with updates to the rows already drawn, there is no need to rebuild the internal index (unless ofcourse, you want to sort, which means you will need to rebuild the index). Basically the caveat to keep in mind is that both for insert and updates, if you want to sort, page, or filter again, there is no way to consume a large number of such operation in subsecond time frames. And this is not a limitation of the grid, but just the amount of time it takes to sort, filter and page an array (even without a grid involved) make it prohibitively expensive to perform this operation multiple times a second.

This brings us to the actual implementation of this use case. Since for this customer, we are inserting rows at the top (as new data comes in, it pushes everything else down), it makes it a lot easier, since we simply do the same thing that the grid would have done, that is, update the index. 

Lets take a quick look at the code that does this:

protected function insertTimerHandler(event:TimerEvent):void

                  {

                        fdg.rebuildGridOnDataProviderChange=false;//so we dont rebuild the index when we change the dataprovider

                        var chg:Number=getRandom(-10,10);

                        //we add it to the dataprovider, this should not affect the grid.

                        //we are adding at index 0

                        var newStock:Object={"id":stocks.length,"symbol":"NEW TICK" + stocks.length, "name":"NEW Ticker with symbol"+stocks.length

                              ,"last":getRandom(20,30),"change":chg+"%","tickUp":(chg>0)};

                        stocks.addItemAt(newStock,0);

                       

                        var rowPos:RowPositionInfo = new RowPositionInfo(

                              newStock,//the data object

                              0, //row index of the data object (0 because we are adding it at the top, you can add it anywhere

                              0,//vertical position of the data object (rowIndex * rowHeight) assuming no variable row height. Or you could lookup the verticalPos of the item above me, and add his height to that number to get this number

                              fdg.rowHeight,//same height rows. For variable row height, you can calculate this

                              fdg.columnLevel, //the top level. If you are adding a child object, you can use the appropriate inner level

                              RowPositionInfo.ROW_TYPE_DATA //type of row. For inner level rows, you can add Header, footer, filter, pager ,renderer rows

                              );   

                        for each(var existingRowPos:RowPositionInfo in fdg.bodyContainer.itemVerticalPositions)

                        {

                              existingRowPos.rowIndex +=1;

                              existingRowPos.verticalPosition += fdg.rowHeight;//push everything down.

                        }

                        for each(var row:RowInfo in fdg.bodyContainer.rows){

                              //now go through all the drawn rows, and update their y property

                              row.y=row.rowPositionInfo.verticalPosition;

                        }

                        fdg.bodyContainer.itemVerticalPositions.splice(0,0,rowPos);//add item at index 0.

                        fdg.bodyContainer.recycle(fdg.columnLevel,false,fdg.rowHeight,false);//now make sure the body draws the row

                        fdg.bodyContainer.placeComponents();//update the cell positions

                        if(stocks.length%5==0){

                              //this will paint the cell background

                              //this is very slighty heavier than other methods, so dont call it as frequently.

                              //may be call it every 2 seconds or so

                              fdg.bodyContainer.invalidateCells();

                        }

                  }

 

                 

 

Here is the sample :

 

TraderView.mxml (9.67 kb)

 

And here is the screenshot:

 

 



Flex Charts with multiple axes

clock June 16, 2014 06:08 by author Flexicious

This post might reveal a few goodies that are coming as a part of the upcoming 3.2 release, but it is something a number of you have asked for. Basically, the issue is that you want to have multiple axes in our chart components. The fact that our Charts are based upon the excellent Spark skinning framework makes this endeavour a lot easier. 

When you draw something on a chart, there is always an underlying series that tells the chart its bounds. That is, given a X position (or a Y Position) on a chart, what is the value associated with that point with reference to the series. The linear axis will always use the first series, regardless of how many you have to draw the ticks. The actual painting of the series is independant, since the series is the source of the truth, the axis is dependant on it. 

With 3.2, we are introducing a new variable on the axis, called associatedSeries. 

/**

* By default, the first series is used to paint the default axis.

* If you associate another series with this axis, that series will be used

       * to calculate the min and max values.

       */

 

      public function get associatedSeries():Series

 

This allows you to override the series associated with the axis. Combine this with the power of the Spark Skinning framework, you can embed additional axes easily!

A little eye candy:

 

 

We are a few weeks away from official 3.2 release, but this is just one of the many exciting additions coming to charts in 3.2!

Below are the files used for this demo. They will not run with version < 3.2, but we do have preview builds available for those of you who cannot wait!

DualAxisChart.mxml (4.11 kb)

CustomLineChartSkin.mxml (4.46 kb)



Flex Calendar Component Customization

clock June 16, 2014 04:17 by author Flexicious

 

Over the past few months, our consulting services team has been quite busy working on client projects. For those of you who don’t know, we do a lot of consulting work for our customers. We have a number of customer projects where our components are heavily used. Since we wrote the components, our customers often come to us to build their projects around our components. Once such project we are currently working on requires a fair bit of customization on our Calendar component. This is a part of our Dashboard framework. Basically what the customer wanted here was to implement categorization of the calendar events, and implement custom rendering mechanism for the events on the calendar, and on the popup for the calendar items, they wanted to be able to pick and choose which category to associate each calendar item with.

The first thing we did, and we recommend you do this as well, is to extend the base Calendar component as below:

This makes it a lot easier to access protected functions and variables. We almost never make anything private, as a library developer try to put as few restrictions as possible for extension and custmozation.

 

Note that we provided a custom popup renderer, as well as a custom calendar item renderer. The calendar item renderer is the actual rectangle that shows on top of the week, month and day views in the calendar, while the calendar popup renderer is the popup that shows up when you double click on a calendar item (edit mode), or when you double click on a time slot on the calendar anywhere (add mode) Note that for providing custom item renderer we extended the built in CalendarItemRenderer

 

The requirement here was to implement a custom color, and for the sake of simplicity we have shown some sample logic here to draw different colors. For rendering the calendar item in different color, we override the updateDisplayList method of CalendarItemRenderer, like shown above.

And then we associate the popup renderer with the Calendar as below:

this.calendarItemPopupRenderer = new ClassFactory(MRXCalendarItemPopup);

 

Once you have the custom calendar built, you can use it like below:

 

 

Finally, the results:

 

 

 

 

Below is the sample project that we created using some of the concepts covered in this blog post.

 

SampleCalendar.zip (48.15 kb)

 

If you have any questions, please feel free to reach out to our support team. If you are interested in leveraging our expertise to build Flex/HTML/Android/iOS projects, please do not hesitate to contact us using this form: http://www.flexicious.com/Home/ContactUs 



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. 

 

UPDATE 06/24 : Android DataGrid has been released!!

http://www.androidjetpack.com/Home/AndroidDataGrid



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!!