Wednesday, 19 May 2010

Infragistics Killer App Contest. Reveille Realtime

OK so the 'Show us yours' popup along with the picture did indeed catch my eye on Infragistics homepage: http://infragistics.com/Default.aspx. The chance of winning the TV was nice as well.

Last year we released Reveille Management Consoles V5.1. A component of this is called Realtime which is a web dashboard:

http://www.reveillesoftware.com/managementconsoles.html

When evaluating a controls product we were initially drawn to Infragistic's 3D charts and gauges. The other controls included in the product came as a bonus. Over a period of time, we found several other Infragistics controls to be of value in the look of our realtime product. With our extensive use of Infragistics controls, AJAX and jQuery, we were able to produce a pure web product without using Flash or Silverlight. It works on IE7+, Firefox, Chrome and Safari as well.



The homepage of Realtime utilizes several Infragistics controls:
  • WebSplitter
  • ultraWebTree
  • webImageButton
  • webGroupBox
  • UltraGauge
All of the data values on the homepage are automatically refreshed at a time set by the user. Instead of an ASP.Net postback, we used a webservice call to an asmx and then updated the values using javascript. To further give the user a smooth refresh look (no postback flickering), we use Infragistic's AsyncRefresh feature on the Ultraguages. When we update the guages, the image is updated smoothly on the screen and does not flicker when the guage image is updated on the screen. A very nice feature! I wish the charts had the same feature!


Clicking on one of the ultraWebTree items, which was loaded from our asp.net web.sitemap file, the target url is loaded into the viewer panel of the websplitter.
Utilizing ASP.Net's AJAX update panels, the ultraWebCharts are drawn using the filter criteria in the top section. Each dropdown list fires an async postback to redraw the charts. Sure would be nice to have the asyncrefresh on the charts like the Ultraguage has. One nice thing that we do on this page is handle a window resize event and redraw the charts to fit. For example, if you click the hide pane of the WebSplitter to hide the navigation tree, the charts will be redrawn to fit the content window's new size. Using jQuery functions to recalculate the height and width of the 4 chart containers, we redraw the charts to fit nicely in its window:


For our reports section, we used the UltraWebGrid to create an HTML view of the report.

We allow the user to save this report in either the database or to their local machine. Using Infragistic's Grid DocExporter, we are able to convert the grid to a PDF,Excel or Text file. The Date dropdown controls on the page? A combination of Infragistic's Webcalendar and WebDateTimeEdit field! In NetAdvantage 10.1 for ASP.Net, they have released a WebDatePicker which is supposed to replace using these 2 controls and a javascript function.

No comments: