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/

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 © Vinay's Blog | Powered by Blogger

Design by | Blogger Theme by