I’ll be presenting at the IECFUG this Thursday the 9th. The session will be a hands-on tutorial on connecting ColdFusion and Flex. It should be a good time, so come on down if you’re in the area.
I’ll post the sample files here sometime after the meeting.
It’s a little late, but here are the links to the files and the presentation, enjoy Presentation Files Presentation on Adobe Connect
In the first article of this series, I discussed how to prevent users from printing directly from Flash’s default context menu. In the second article, I wrote about using the AlivePDF library to create PDFs from your application for printing or saving. Today I will be covering how to print application data from Flex.
The Flex framework comes with several classes to assist you in printing; however, they don’t tend to produce the greatest results. The PrintDataGrid class is probably your best option when it comes to printing data, but whenever I’ve worked with it in the past I’ve always ended up disappointed. Even after formatting, there are always issues; like rows getting cut off and pages breaks in weird places.
There have been talks about AlivePDF offering a Grid class to the library, which may be interesting, but it hasn’t been released and would probably only handle DataGrid data. So the best option I’ve found for printing data is to allow a server to generate a PDF, which can then be sent back to Flex and output however you want.
A great benefit of this option is the ability to easily format the print results. You can use simple HTML and CSS to customize the printout much easier than you could using ActionScript. You can also add custom styles, letterheads, and footers to fit your needs.
This will work with any server-side script that can generate PDF content. In this demo I am using a ColdFusion script which simply generates an HTML table and returns it in PDF format. You can view the ColdFusion code along with the rest of the source code here.
The data from the server is returned to Flex as a ByteArray. You can take that ByteArray and output it to the user in several different ways:
Using the Browser
Similar to the last article in this series, you can send the results to a server-side script to either display the PDF in the browser or prompt the user to open or save the document. This time, however, the AlivePDF library is no longer necessary since the PDF binary has already been created.
//result comes back as binary, create a new URL request and pass it back to the server var header:URLRequestHeader = new URLRequestHeader("Content-type", "application/octet-stream"); var urlString:String = "http://kalengibbons.com/assets/pages/pdfCreator.cfm"; if(method == "inline")
var sendRequest:URLRequest = new URLRequest(urlString);
sendRequest.requestHeaders.push(header);
sendRequest.method = URLRequestMethod.POST;
sendRequest.data = pdfBinary;
navigateToURL(sendRequest, "_blank");
}
Save locally from Flash
Thanks to new capabilities in Flash Player 10, you can also provide users the option to save the PDF directly from Flash. This eliminates the need for the second server-side script.
var fileRef:FileReference = new FileReference();
fileRef.save(pdfBinary, "yourPrintout.pdf");
}
If you plan to use the save functionality you’ll need to set the “Required Flash Player version” in your project preferences to 10.0.0 or higher or else Flex Builder will complain. You have to remember that only users with Flash Player 10 or above will be able to use this functionality, so some type of version validation is a necessity.
Another caveat is that the save method must be triggered by some type of user interaction, that’s why the sample application prompts for system access before saving. Although the user has clicked the “Print Data” button, that event is lost when the server call is made, so we need another interaction from the user.
In the first article of this series, Overriding Flash’s Built-In Print Option, I discussed how to prevent users from printing directly from Flash, by replacing the default context menu. I demonstrated how poorly Flash handles printing directly, and now we will start discussing what alternatives are available to developers.
In this article I will demonstrate how to print and save any part of your application by utilizing the AlivePDF library. AlivePDF is an ActionScript 3 open-source PDF library that easily creates PDF documents from your Flex application. The library is pretty robust and offers much more functionality than I will be able to cover here. In this article I want to demonstrate how simple it is to dynamically generate PDF documents using ActionScript and AlivePDF.
To give you a better understanding of what can be done with AlivePDF, let’s revisit one of the printing examples that was used in part 1 of the series. The two images below are printouts of the The Flex Store – one printed with Flash’s default print option and the other with AlivePDF.
Flex Store printed using Flash’s default print option
Flex Store printed using AlivePDF
In addition, here is a sample application for you to play with some of AlivePDF’s options. You can view the source here.
So now that you’ve had a taste of what AlivePDF can do, lets look at how it works:
Adding AlivePDF to your project
First, download the library from www.AlivePDF.org, and then add it to your project in one of two ways. The easiest way is to copy the AlivePDF.swc into your project’s lib folder. Flex Builder should automatically detect the swc and add it to the compile settings. The second approach is to add it manually in Flex Builder, by clicking Project >> Properties >> Flex Build Path >> Library Path >> Add SWC… and selecting the swc from the file system.
Displaying PDFs in the Browser
After the swc has been added to your project you can begin working with the AlivePDF library. The sample code below could be used to generate a PDF document from any UI component in your application. We simply turn it into an image (think of it as a screenshot) and publish it to a PDF for the user to save or print.
The code is fairly simple, we start by creating a new instance of the PDF class and adding a page to it. Then we add our UIComponent to the document as an image. Finally, we tell AlivePDF how we want to generate the PDF with the save() method. In this example, the third argument of the method, Download.INLINE, specifies that we want the PDF to be displayed in the browser instead of prompting the user to save (that will be covered in the next section).
Now that works great and all… but what if you want to prompt the user to save or open in Adobe Reader? Fortunately, AlivePDF makes that easy; all you have have to do is change Download.INLINE to Download.ATTACHMENT.
A PHP script is provided with the download of the AlivePDF library, but if you don’t like PHP you can use any other server-side language that can generate PDF content. For those of you who are ColdFusion fans, like myself, here is a basic example of a ColdFusion script that can be used.
<––– get the content from the http data –––> <cfset httpContent = GetHttpRequestData()>
<!––– make sure content was passed in –––> <cfiflen(httpContent.content)gt0>
<!––– write the content to local pdf –––> <cfheader name="Content-Disposition" value="#URL.method#; filename=#URL.name#"/> <cfcontent type="application/pdf"variable="#httpContent.content#">
<cfelse>
<!––– redirect to home page –––> <cflocation url="/" />
</cfif>
AlivePDF has a wide range of capabilities and we’ve barely scratched the surface here. I encourage you to take a good look at the library and utilize it to its full potential.
In the next article in this serious we will discuss how to print data from Flex. See you soon!
Posted in Coldfusion, How-To on July 12th, 2008 by Kalen Gibbons
If your a BlogCFC user but don’t post too often, like me, then you’ve probably seen the following message pop up on your blog:
Sorry There are no blog entries available.
By default, BlogCFC shows only entries posted within the last 30 days. If you’d like to extend this, simply locate the tags folder in your BlogCFC root and find getmode.cfm. Around line 68 you’ll find the following declaration:
params.lastxdays = 30
Simply change 30 to the number of days you’d like new entries to stay on the homepage and you’re set, your blog will no longer look sad and abandoned.
