View Coquette Part 3 Icon Set
26
Apr
2008
Multiple page printing from a HTML Adobe AIR Application

Advertisement


Adobe AIR PrintingIt's been almost two months since Adobe released its first official version of Adobe Integrated Runtime -- AIR 1.0. AIR provides a pretty flexible way for development of desktop-like applications by the use of web technologies: HTML / JavaScript, and Flash / Flex. In other words AIR allows web programmers to develop desktop applications. I speak from my own experience when I say that web developers have a hard time developing desktop applications.

I'm not sure what is behind this mysterious fact, but it's so hard for most of the web geeks to develop a desktop apps (and perhaps vice versa). However, AIR seems to be something that all of us were waiting for a long time. It's still version numero uno, but it seems to be working quite well.
There are a lot of things to be done and we are positive that they gonna happen pretty soon, since the web development community became very fond of AIR. To leave a side the Flash developers who seem to adjust nicely in every OO environment, the even webbies can now go much deeper, and don't have to change their means.

Recently, we've got a project to develop a desktop application for "electronic reports" generation. Electronic reports are text files that contain a report in a specific predefined format.
Anyway, the application had to allow the user to enter data, and once the user would finish he'd be able to save the file and print the report on a paper. You can use SQLite as a Database with your AIR application, manipulate it through your JavaScript code and that seemed like a perfect solution. This was a great opportunity to actually dive into the AIR world. Everything went smooth till the print part.
First of all, HTML AIR applications don't support window.print() function. We've spent a lot of time looking for something on the net, someone that had similar experience and perhaps might found a solution. And we did find something (simulates window.print function) that simulates single page printing. However this is not what we needed since it is limited to a single page printing. Our reports were few pages long so we had to extend the solution, or come up with a different one. We did quite of experiments, and following is what came to as a possible solution.
AIR is based on Flash functionalities, and if you are developing HTML AIR application then the HTML is rendered through the WebKit open source web browser engine. Since the native window.print() functionality is not available, you'll have to use flash.printing tools. You can access it in your HTML/JavaScript AIR application through window.runtime.flash.printing.*. Also, you must bear in mind that you are able to print any Sprite, but in our case that's the window.htmlLoader. A great disadvantage is that you must explicitily state all the pages you want to print and define a rectangle area of the Sprite (htmlLoader). In other words you have to prepare and populate every single page that you want to print, and then send it to the printer by using addPage().
Here are the steps you must complete for a printing job:

  1. Create a printJob (new window.runtime.flash.printing.PrintJob;)
  2. Create/Define a print Sprite, in our case that's the window.htmlLoader
  3. Create printing options (new window.runtime.flash.printing.PrintJobOptions;)
  4. Start the printJob (pjob.start())
  5. Go through the pages you want to print, prepare them and add them for printing (pjob.addPage())
  6. Send the print job to the printer (pjob.send())

Important note is that you must set printAsBitmap to true in the printing options, since that is the only way to get something printed. The htmlLoader (all of your HTML) is printed as Bitmap, and that is quite a limitation since you get a blury print. Since we had to make quite of preprint preparations we decided to actually open a new application window which would handle the printing and actually never show that window. Once the printing was finished we'd close the window. Here is the complete code for such a solution:

 // You might find useful to pass some value, number of rows for instance
function multiplePagePrint(numRows)
{
  // Create the Print Job
  var pjob = new window.runtime.flash.printing.PrintJob;
  var psprite = window.htmlLoader; // Define the Sprite
  if ( pjob.start() ) // Start the Print Job
    {
      // Define the Print Job Options
      var poptions = new window.runtime.flash.printing.PrintJobOptions;
      poptions.printAsBitmap = true; // Must print it as Bitmap

      //after you've start the print job
      // you can get any print specifics (page size etc.)
      var pageHeight = pjob.pageHeight;
      var pageWidth = pjob.pageWidth;
      var paperHeight = pjob.paperHeight;
      var paperWidth = pjob.paperWidth;

      // Calculate the number of pages
      var pagesToPrint = /** Your logic here **/;

      // Add your pages:
      for(var i = 0; i < pagesToPrint; i++)
      {
	/** Your logic here for calculating RECT_HEIGHT **/
        var rect = new air.Rectangle(0, RECT_HEIGHT, pageWidth, pageHeight);

        try{
          pjob.addPage(psprite, rect, poptions);
        } catch(e) {
          air.trace(e);
        }
      }

      try
      {
        pjob.send();
        return true;
      }
      catch (err)
      {
        air.trace(err);
        return false;
      }
    }
    else
    {
      air.trace("PrintJob couldn't start");
      return false;
    }
}

As I've mentioned above the print is done in a separate application window which you can open with air.NativeWindow(), and here you can call your function. It handles all of the print activities, it is never being activated, that is, it is invisible to the user all the time, it starts the print, adds pages and prints, and once the print is done it is being closed. This way the user gets the system print interactive window for selecting the printer, number of copies to be printed etc.
Since our reports were mostly text reports we can't say that this solution is perfect. As a matter of fact it is not, and I'll advise you not to use it if you have to print text. However, it demonstrates the possibility of a multiple page printing in a HTML AIR application. The print results we got when printing in a Flash AIR application were far more superior. Some flash development in the current version of AIR is definitely recommended, at least if you need to print some text. I hope in future we gonna get improvements in AIR when it comes to printing in HTML AIR applications, and at least get the native window.print() functionality.

I strongly advice you to go through the ActionScript 3.0 Language and Components Reference even if you are a stubborn HTML / JavaScript developer, since the only thing that can happen is an extra benefit for your development skills.


Advertisement


17 Comments to Multiple page printing from a HTML Adobe AIR Application

1. Anirudh Sasikumar Says: April 28, 2008 05:04 GMT

Hi,Nice and useful article for HTML guys starting off with AIR. I had tried multi-page printing without success by changing htmlLoader.scrollV before each addPage. Moving the print area rectangle along the Y direction is a brilliant idea. The only limitation of this solution inherited from htmlLoader is that the maximum height of htmlLoader can only be 2880. If your content is more than that then even this brilliant solution will not work.I'll pass along your improvement suggestions to the AIR team here at Adobe.Cheers,Anirudh

Anirudh Sasikumar's Avatar
2. vssr Says: April 28, 2008 14:05 GMT

Thanks Anirudh!I've just noticed the limitation with the htmlLoader's height. Tried to print out a report longer than 4 pages (height greater than 2880) but it didn't worked out. It prints out only 3 and a half pages. Here goes out another improvement to be done in the later versions of AIR. Regards,vssr

vssr's Avatar
3. Jeff Battershall Says: April 28, 2008 14:13 GMT

I'm for sure hoping that the AIR and Flash Player engineering teams have printing as a complete priority. I've messed around with this a good bit and the results are NOT satisfactory. Jeff

Jeff Battershall's Avatar
4. vssr Says: April 28, 2008 14:20 GMT

I agree with you Jeff, and definitely hope the next version of AIR will bring printing we are used to since it is inevitable in most of the cases when it comes to desktop apps.Regards!

vssr's Avatar
5. Mike B. Says: May 19, 2008 15:57 GMT

Honestly, this 1 page printing restriction is really tiresome. Not just in Adobe Air, but also in "normal" Flash.
The one displayed on this page is the best workaround i have seen so far though.

I hope Adobe gets their act together, and starts developing a more useful printjob routine.

Mike B.'s Avatar
6. vssr Says: May 19, 2008 16:04 GMT

Hi Mike! We understand (y)our trouble air/flash is causing when it comes to printing. Even this solution is restricted to heights below 2880, as Anirudh Sasikumar stated above. I just hope this "print fix" we are all expecting will happen very soon.

cheers!

vssr's Avatar
7. JerryG Says: May 21, 2008 04:06 GMT

Hello Gents,

A couple of weeks ago Anirudh was good enough to send me a JavaScript solution for printing and I got it to work, but it doesn't really give us what we need.

Has anyone had an assurance from Adobe that the next iteration of Flex/AIR will be able to print from the file system? Is there any indication to that effect? Maybe its just because of my searches, but this appears to be a major, major, major drawback in AIR. And it could be only one of two things: a business decision to lead printing to something else, or a major oversight.

I just want to know that AIR will be able to print documents in the way any other desktop app can print documents, even just point to a file and print it, or it's time to consider giving in to Microsoft.

JerryG

JerryG's Avatar
8. vssr Says: May 21, 2008 04:22 GMT

Hi Jerry,

I'm not sure that there is a solid (or of any kind for that matter) assurance that the next version of AIR/Flex would handle the printing as would be expected. However, it's pretty obvious that the community is getting kind of frustrated for this matter, and all the common logic suggests that the next version of AIR would handle printing properly. What's the point of having such a powerful tool in your hands, and yet not be able to perform a proper printing, when probability to print something in a Desktop app is pretty high.

vssr

vssr's Avatar
9. Ausfuhrung Says: July 04, 2008 06:17 GMT

hi jerry, please explain a little about javascript integration

Ausfuhrung's Avatar
10. Steve Thornton Says: August 26, 2008 21:51 GMT

Demo and source code of how to print reports in Flex and AIR

http://thorntononflex.blogspot.com/

Enjoy...

Steve Thornton's Avatar
11. babylon6 Says: September 12, 2008 14:09 GMT

Nice work vssr, you are a great dude, always bringing "surprises" :) and always hard working. Hate to say but it was pleasure learning the basics from you in development which helped me a lot.
Regards,
Keep up the good work.

babylon6's Avatar
12. Andy Says: September 16, 2008 16:56 GMT

I am trying to work with this and get it functional for an application I am developing, but I error out on the first line var pjob = new window.runtime.flash.printing.PrintJob.

Can someone help here?

Andy's Avatar
13. vssr Says: September 16, 2008 22:20 GMT

Hi Andy, I'm really sorry to hear that... especially the first line. Can you provide more details, perhaps some JS code of your app
Regards

vssr's Avatar
14. Steve Says: July 14, 2009 23:44 GMT

Andy, I realize this is late, but you probably have a print job that was started but never finished. "You cannot create a second PrintJob object while the first one is still active. If you create a second PrintJob object (by calling new PrintJob()) while the first PrintJob object is still active, the second PrintJob object will not be created. So, you may check for the my_pj value before creating a second PrintJob."

Steve's Avatar
15. Peter Parente Says: August 28, 2009 00:27 GMT

To get around the 2880 limitation, would it be possible to open one invisible native window per page, populate it with the information to print, set psprite = currentWindow.htmlLoader, and then add each window as a separate page with pjob.addPage(psprite, rect, poptions)? Or is there a limitation on PrintJob that requires all pages to come from the same sprite?

Peter Parente's Avatar
16. vssr Says: August 28, 2009 10:44 GMT

@Peter Yes, that might be a workaround. There isn't a limitation that all pages should come from the same sprite, one can add separate pages - sprite by sprite (page by page) to the printJob. It's much easier with ActionScript where you can control/evaluate the height of a sprite/page that you are adding to the printJob, while I'm not sure how you can achieve this with JavaScript/HTML

vssr's Avatar
17. Brett Kromkamp Says: October 04, 2009 21:21 GMT

I am developing a combined Adobe Flex and AIR application to manage and organize knowledge, based on topic maps: http://www.quesucede.com/page/show/id/polishedcode. Furthermore, the actual topic map engine was developed with ActionScript 3 and uses SQLite as a backing store (for object graph serialization and de-serialization). With Adobe AIR, I am hoping to provide a vastly improved user experience. Specifically, the availability of powerful graph visualization libraries that allow you to visually layout the relationships between topics contribute to making the whole topic map experience very intuitive and appealing.

Brett Kromkamp's Avatar

Post your comment

Capctha Code Enter the image code « Refresh image
Hungry?
Subscribe for RSS Feed.

Licensing

Free License Commercial License Extended License
* Mouseover for more info
Use our Works with the Free License if you agree not to modify, distribute or sell them. All you have to do is to put a publicly accessible back-link to our website: http://dryicons.com.

Click to see full legal notes
Use our Works with the Commercial License if you don't want to put a back-link to the DryIcons website. Or, as the name suggests, the Commercial License is intended to be used in commercial/advertising purposes/products that are not intended to be sold, or are intended to be sold but only to one (1) of your clients. Example, you have a client that requires a website, or a software application, and you are going to sell this website / software only one time, to your client.

Click to see full legal notes
Use our Works with the Extended License if you want to sell your product to an unlimited number of clients. The basic purpose of the Extended License is to allow you to use our Works within any product/software/application that's going to be sold or distributed both physically and electronically.

Click to see full legal notes

Recent
Free Icon Sets
November 05, 2009 Colorful Stickers Part 3 Free Icons Set 20 Icons
October 07, 2009 Colorful Stickers Part 2 Free Icons Set 20 Icons
September 07, 2009 Colorful Stickers Free Icons Set 20 Icons
August 06, 2009 Coquette Part 7 Free Icons Set 50 Icons
July 23, 2009 Artistica Part 2 Free Icons Set 60 Icons
Recent
Free Graphics
November 06, 2009 Flower Card Free Vector Graphic beautiful, card, design, flower, greeting, hello, swirly
November 04, 2009 Retro Background Free Vector Graphic background, banner, design, frame, grunge, retro, swirly
November 03, 2009 Anniversary banner Free Vector Graphic anniversary, banner, frame, ornament, pattern, stylish, swirly
November 02, 2009 Grungy Plant Free Vector Graphic floral, flower, grunge, ornament, plant
October 30, 2009 Colorful Sale Stickers Free Vector Graphic beautiful, colorful, decoration, discount, free, sale, stickers, swirls, vectors
Recent
Blog Posts
November 03, 2009 Second Anniversary and Icons Giveaway Posted by Orchida
August 14, 2009 A simple algorithm for generating Sudoku puzzles Posted by vssr
July 07, 2009 Creativity at it's best Posted by Orchida
February 28, 2009 Logo Design Process Tutorial Posted by designer
February 23, 2009 Great use of pop music in great films Posted by Orchida
Recent
Comments
November 07, 2009 hello thank you alot ^^ Posted by lili
November 07, 2009 Another awesome theme once again :) simply beautiful. Great job DI. BTW: Happy Birthday :) Posted by Mia
November 07, 2009 Marvellous! Posted by Solomon Abyssinian
November 07, 2009 very very good drawings Posted by joji devasia
November 07, 2009 This is a truly awesome artwork, thank you! Posted by Shkaev

@Fri 06 Nov, 2009 22:42Flower Card: 06 November, 2009Flower Card Vector Graphic http://bit.ly/4pwlxr

@Fri 06 Nov, 2009 00:44Colorful Stickers Part 3: 05 November, 200920 Icons The third part of the "Colorful Stickers" icon set comes as.. http://bit.ly/jgNeE

@Thu 05 Nov, 2009 02:36Retro Background: 04 November, 2009Retro Background Vector Graphic http://bit.ly/2CnLcv

@Wed 04 Nov, 2009 01:02Second Anniversary and Icons Giveaway: 03 November, 2009 Dear friends of DryIcons, We are very happy to share.. http://bit.ly/KsaIR

@Tue 03 Nov, 2009 12:58Anniversary banner: 03 November, 2009Anniversary banner Vector Graphic http://bit.ly/405Eli

Home | Free Icons | Custom Icons | Free Graphics | Free Templates | Blog | About | Contact Us | FAQ | Terms of Use | Advertise | Sitemap

Copyright © 2007-2009 DryIcons.com. All rights reserved.

Rabotilnica Rabotilnica

Advertisement

Advertise here
Advertise here

Tippers

Advertise here

Advertise here