Display PDF in Flex client December 4, 2010

LiveCycle Enterprise Suite provides capabilites and services for developing easily a client application especially by using Flex. In our case, LiveCycle Content Services module has been installed and then contents, each of which is a PDF document, are needed to be uploaded to the content space. Briefly the usage scenario is that an user is only responsible for uploading original document and the another user is responsible to view the document content and add metadata information for it. At Content Services module side, we have developed a custom content model and alfresco application module package(AMP) for handling domain specific metadata information. At user side, we have developed a client application with Flex 4 by using remote services of LiveCycle server.

Rendering PDF in Flex Client

Rendering PDF in Flex Client

The main problem with Flex client application was that displaying PDF document in a popup window. I have read almost every articles about displaying PDF in Flex application and then I realized that the best way to achieve the same is using google’s iframe component. But, the problem about iframe was that it crashes once direct URL of PDF document is assigned as its source. So as required in the usage scenario, PDF documents are the contents stored in the system and they should be viewed directly. Generally, the solution is that using a temprorary HTML, which gets rendered to initialize Iframe instance, and then the direct URL of PDF can be provided as its source. Please find the solution’s detail below.

- Define an IFrame instance in Flex by making it disabled. 

<flexiframe:IFrame id="iframe" source="docViewer.html" backgroundColor="gray" width="100%" height="100%" visible="false"/>

- Generate an HTML resource by including only a couple of mandatory HTML tags

<html>
    <body>
    <h1>Creasis - HTML Test</h1>
   </body>
</html>

- Develop a popup window function to display IFrame instance

private function showDocumentAction(doclink:String):void {
	var showContDoc:DocumentViewer=DocumentViewer(PopUpManager.createPopUp(
		this, DocumentViewer , true) as spark.components.TitleWindow);
	showContDoc.addElement(outerDocument.iframe);
	outerDocument.iframe.visible = true;
	outerDocument.iframe.source = doclink
}

<s:Button label="Show Doc" width="75" click="showDocumentAction(data.documentLink)"/>

As you can easily see that, temprorary HTML resource is just used to help rendering IFrame instance. So the solution can be thought as ineffecient one and it will be invalid once the IFrame is improved for displaying PDF’s URL directly. I also aggree with the idea that IFrame should not be used for displaying a document within Flex application. To overcome such problems, AIR based client application should be considered seriously.

Post this to Twitter

Relevant Posts:
  • Content Services client
  • Working with AMP files in LiveCycle Content Services
  • Adobe’s Reply on: Spark Form Components and Android Keyboard Problem
  • Spark Form Components and Android Keyboard Problem
  • Flex 4 Spark and MX Font-Face Problem, Not!