The Making Of.. An Infragistics Reporting App

I have received a lot of positive feedback asking for the C# source code behind "An Infragistics Reporting Application" shown in the video on our Infragistics.Documents class library page.  In fact, the write-in campaign by some of you could probably get this demo on the Presidential Election ballot in some states of the union, and Guam.  It has really been that amazing.

Background

For those of you unfamiliar with this class library, Infragistics.Documents contains a complete object model for creating Adobe PDF and Microsoft XPS documents. With it, you can generate documents in these file formats from either your Windows Forms and even ASP.NET applications.

I was involved with producing this video for our NetAdvantage Windows Forms 2007 Vol. 2 release last summer, and I was helped by the excellent voice talents of one of our award-winning .NET trainer and all around good guys, Chris Lukose. We had a simple mission: show you guys (and ladies) the sorts of powerful reporting applications you can build using this new class library -- in three minutes or less!

Conspiracy Theories Abound

Speculation that there was some kind of conspiracy afoot to keep this demo from seeing the light of day couldn't be further from the truth. Like many great ideas, this one came late in the release cycle.  While there was time enough to produce a video that can do a great deal of good explaining to developers how the object model of layout elements in  Infragistics.Documents fit together visually, there isn't always the time to do thorough testing, translation into other programming languages (VB), localization into Japanese, and everything that goes into adding a sample to the SDK.

The demo code was just something that your (perhaps atypical) marketing person could through together at his desk in a morning or two that would show-off these great features for writing PDF and XPS files.  It didn't have all of the embellishments of a production piece, and not every submenu command did something.

Lights!

For "An Infragistics Reporting Application" I created a script/screenplay that directs the action captured on the screen as well as our narrator's dialog, just like in any other production. The concept for the application was front and center on this stage, because Infragistics.Documents had such a large and powerful object model that we wanted to give you a 10,000 foot high view of ... in three minutes or less.

The best way to get this across to you is to walk through how an end user might use your NetAdvantage-powered reporting application to create their own report. The actions of the user in creating their report in the demo all correspond to steps you would take in programming the Infragistics.Documents object model, which helps to get your head around the nested nature of Reports, Sections, Bands and Flow objects.

To make this work -- visually -- I needed an almost WYSIWYG-like GUI that could show the objects the user has already added to their Report in a canvas-like preview. How to design this? Now, I'm not so worried about the three minutes or less of running time for the video, because I'd already sketched out on my pad a quick and easy report of economic data (CPI inflation) somebody might put together, and that touches on the most important layout elements in the class library. I'm not even worried about the time it will take to barrel through the coding with our API of the tables and graphics, because that's easy, too. The concern mainly centered on how to quickly code up something to show a GUI view on what's inside the object model?

A Little Web-Sense for a Windows Forms Project

I conceded that coding a conventional GUI to do that would take much more time than I have to get this video produced. Besides, it wasn't the GUI we wanted to showcase (although I suspect many of you have wondered, "How'd he do that?") but the APIs. You'll notice that the video pans over all of the code that uses the APIs (you really do see all of it in the video, like I said the other submenu commands aren't implemented), but the code that actually handled the GUI mockup was in the collapsed regions.

The closest analogy to the box model that I wanted to illustrate in the GUI is how HTML elements nest within one another. So I could create a pretty good preview of the final XPS/PDF report in HTML using nested <table> and <div> tags, these are automatically rectangular and applying CSS style rules to give them a dashed border was easy if the GUI in "An Infragistics Reporting Application" could only display a regular HTML document.

Well, there's an out-of-the-box WebBrowser component that implements IWebBrowser2 and that lets you basically nest an Internet Explorer instance right into your own Windows Forms applications. This is what fills the client area you see in the main Form. I call the NavigateURL method of this browser component to load up a local file containing HTML pre-designed to simulate the objects that exist at that point in the Object Model as nested <table> and <div> tags, including a <link> to an external CSS file.  I'm halfway home.

Walking through the known sequence of how layout elements are added to the document engine, I created HTML files for each step. As an optimization, the separate HTML files are collated into one document and CSS class attributes are applied liberally to the HTML tags.

Swapping in the <table> and <div> tags as the demo progresses wasn't directed at the HTML content because when you nest something (as several layout elements are nested), you have to deal with the opening tag(s) as well as the closing tag(s) which are probably at another location in the file.  If you are accessing the file sequentially using a StreamReader instead of an XmlReader (not that this behind-the-scenes HTML was necessarily XHTML-conformant), finding the closing tag becomes a challenge.

Instead, the CSS class attributes on the HTML are used to selectively turn on/off or swap in/out different styles, entire <table> tags, or to perform string replacement (the Custom Text Form really allows you to enter custom text with a custom font, size and color). With these strategically placed CSS class names, I just need to activate and deactivate the CSS style rules for display and visibility.

Use the Source, Luke

Many of you have asked so I am including the C# project (122 KB) used when making the video for "An Infragistics Reporting App" (which if you haven't watched, I encourage you to take a look).  I have updated this project for the 2008 vol. 2 release Windows Forms assemblies, although it otherwise is little changed from what you see in the Visual Studio IDE during the video.