Oct 10, 2009

PDF generation using flex LCDs and Life Cycle Designer tool

About Life Cycle Designer: This tool is use to design the PDF template. This template is constructed using components library provided by this designer tool. The file should be saved as PDF file with dynamic XML binding option. Components in the template are bind to a normal XML that contains custom tag. This XML structure should match with the one sent from Flex so that the helper class can map it perfectly to fit the data into the template.

Steps to successfully generate the PDF of client side data:

1. Design the template as per the requirement. This is very simple as it only requires one to drag and drop the component and position them as per your UI. This document should be saved as “Adobe Dynamic XML Form (*.PDF)”.

2. Create a XML file. This XML file structure should contain a valid tag hierarchy. For example, if you expect a text entry done in user, then XML will look like <root><text/><root>.

3. Bind the template with the XML. This is done in Designer tool. This requires creating a data connection by right click under Data View window è new data connection è select sample XML data è here select the XML that was created in step 2. Now, select a component in the template designed in step 1. This component has an object window on the bottom right. Select the binding tab and change the binding to the XML tag from active data connection as per the requirement.

4. Create a MXML file. Here you write your flex code. Each component or container in flex which is the part of the PDF generation is passed as value to XML element. Foe example, see the below code snippet. Create a component

clip_image002

Now this component can be either sent as a snap shot or its text value can be sent to server. This depends on your requirement. Below code snippet shows both the cases:

a) Send simple text. Create a XML and set the value of custom node as text box value. Note that the corresponding PDF template and XML should be in sync with this XML structure.

clip_image004

This XML is send to server as a request parameter.

b) Send the snapshot of the text input component to server as a request parameter.

clip_image006

Here the containerImage is a String Object. Note that the corresponding PDF template and XML should be in sync with this XML structure. Suggestion would be to bind an ImageField component in designer tool. This is compatible to decode the string back to snap shot.

clip_image008

After creating the XML, the task left is to send the data to server.

clip_image010

5. Server Side code. In Servlet, the XFAHelper object is created. This object takes the XML document received from flex and the PDF template created in step 1 to generate the PDF.

Details are:

The request received from flex is a complete XML document that was created in flex. This document is passed as a parameter to the Document Builder to build a similar Document on server side.

clip_image012

Create an object of XFAHelper class.

clip_image014

Create a String object that contains the real path of the PDF template saved location.

Pass the string object as a parameter to XFAHelper object’s open method.

clip_image016

Pass the XML document, from flex, as parameter to Helper class’s importDataSet method

clip_image018

Now at this point, our PDF is ready. Either save it to some location or send it to Servlet output.

Below code snippet display the PDF from Servlet output.

clip_image020

Here are some references that will give a detailed description of the complete cycle.

1. http://livedocs.adobe.com/livecycle/8.2/programLC/programmer/lcds/help.html?content=pdfgen_3.html

2. Redirect to Servlet without using HTTPService tag: http://stackoverflow.com/questions/378092/getting-progress-on-post-using-httpservice-in-flex-as3

3. Jar files that will be required can be download from http://svn.riaforge.org/weeki/trunk/WeekiServer/WEB-INF/lib/

4. Trial version of Life Cycle designer can be download from http://www.adobe.com/products/livecycle/designer/

Related Posts:

  • Silverlight Vs JavaFX Vs Flex/AIRNote : This Comparison is done for the Alpha version of JavaFX. The RIA world has been seeing intensified competition since last year's releases of Microsoft Silverlight and Sun JavaFX, which joined the Adobe Flex/AIR to beco… Read More
  • Use of Flex in Web ApplicationsAbstract: Flex is a highly productive, free open source framework for building and maintaining expressive web applications that deploy consistently on all major browsers, desktops, and operating systems. While Flex applicatio… Read More
  • Flex – Multi View Design PatternProblem Need to develop a flex web application which is going to be deployed in different environment say in mobile and web. Need to come up with different views for different devices and for different resolution. But… Read More
  • Dynamically Repeating Control/Container in Adobe FlexIntroduction Used for repeating simple UI components Repetition can be controlled by an array Repeater components look like containers in the code but they are not containers Repeaters don’t have automatic lay… Read More
  • PDF generation using flex LCDs and Life Cycle Designer toolAbout Life Cycle Designer: This tool is use to design the PDF template. This template is constructed using components library provided by this designer tool. The file should be saved as PDF file with dynamic XML binding optio… Read More

1 comments:

web informer said...

how to create canvas in to a pdf from a flex application. I have already made pdf for text and images. But if i want to claim for canvas will you please let me know the code for it

Text Widget

Copyright © 2025 Vinay's Blog | Powered by Blogger

Design by | Blogger Theme by