Interactive Statements Uncovered V2

Transcription

1 Page 1

2 Michael Hodgson, Sr. Enterprise System Specialist Adobe Systems, Inc. TABLE OF CONTENTS EXERCISE OVERVIEW... 4 EXERCISE 1: CONFIGURE AN INTERACTIVE STATEMENT PROJECT... 5 OBJECTIVES:... 5 ASSETS PROVIDED:... 5 TASKS:... 5 Task 1: Create an Interactive Document Project... 5 CHECK POINT... 8 EXERCISE 2: ADD ASSETS TO THE PROJECT... 9 OBJECTIVES:... 9 ASSETS PROVIDED:... 9 TASKS:... 9 Task 1: Add assets to the Interactive Statement navigator template... 9 CHECK POINT EXERCISE 3: ADD PROMOTIONAL CONTENT TO AN INTERACTIVE STATEMENT OBJECTIVES: TASKS: Task 1: Add a PromoImage Task 2: Add a PromoImageSlideShow Task 3: Add a PromoSWFLoader Page 2

3 CHECK POINT EXERCISE 4: ADD DATA TO THE INTERACTIVE STATEMENT AND TIE IN TO ACROBAT OBJECTIVES: ASSETS PROVIDED: TASKS: Task 1: In this task we will import the XML data that will make up the statement part of the Interactive Statement Task 2: Map data for the XMLDataLoader CHECK POINT EXERCISE 5: BUILD AN INTERACTIVE STATEMENT PROCESS OBJECTIVES: ASSETS PROVIDED: TASKS: Task 1: Move the Interactive Statement code into a LiveCycle application Task 2: Update the statement references Task 3: Create an Interactive Statement process CHECK POINT EXERCISE 6: ADDING A PRINT PDF OBJECTIVES: ASSETS PROVIDED: TASKS: Task 1: Move the template into a LiveCycle application CHECK POINT Page 3

4 Exercise Overview The following table provides a high-level overview of the activity and exercises, including estimated time to complete, contained in this guide. Activity / Exercise Exercise #1 Summary Configure an Interactive Statement project. Participants will use Flash Builder to create a new Interactive Statement project. Estimated Time 10 mins Exercise #2 Add supplied resources and configure the app for testing. 10 mins Exercise #3 Exercise #4 Exercise #5 Exercise #6 Add promotional content to an Interactive Statement. Participants will add promo images, slide shows and Flash applications to an Interactive Statement. Add data to the Interactive Statement and tie in to Acrobat. Participants will add XML data and set the Interactive Statement to communicate with the PDF shell using Acrobat Bridge Build an Interactive Statement process. Participants will build a LiveCycle workflow that produces an Interactive Statement PDF. Adding a print PDF. Participants will add a printable PDF document to the Interactive Statement that will use the same data stream. 15 mins 10 mins 15 mins 10 mins NOTE: This document is based on an early version of the Interactive Statement software. Some options and procedures may have changed in more recent builds. Page 4

5 Exercise 1: Configure an Interactive Statement project In this exercise you will learn about how to create a Flash Builder 4 project for Interactive Statement generation Objectives: By the end of this exercise you will be able to; Create an Interactive Statement project in Flash Builder 4 using the Interactive Statement plug-in Assets Provided: In addition to creating new assets, the following assets have been preconfigured for use in this exercise: 1. Interactive Statements Flash Builder plugin (already installed) Tasks: Task 1: Create an Interactive Document Project In this task, you will create a FB4 project for the Interactive Statement navigator. 1. Launch Flash Builder 4 2. Choose File New Other Page 5

6 3. Under Interactive Documents choose Interactive Document Project 4. Click Next 5. Enter a project name of: Experience Telecom istatement 6. Click Finish. 7. Now we need to do some minor configuration. Right click on the new project and choose Properties. 8. Choose Flex Compiler. 9. Set the SDK to Flex 3. Page 6

7 10. Under the Adobe Flash Player options select the Use minimum version require by the Flex SDK option. 11. From the list on the left select Flex Build Path. 12. Click Apply. 13. From the Framework linkage drop down, set the value to Merged into code. 14. Click OK. 15. From the Project menu choose Clean. 16. Make sure your project is selected and click OK. Page 7

8 Check Point This will create a predefined structure for the project. A package-orig.xml gets created. The necessary swc files are added to the lib folder. A test harness gets created in the com.adobe.icomm.assetplacement.utils folder, a DocumentMain module gets created, and a navigator file (nav) gets created in the bin-debug folder. Page 8

9 Exercise 2: Add assets to the project In this exercise you will add assets Interactive Statement and configure it for testing. Objectives: By the end of this exercise you will be able to; Add assets to the Interactive Statement project Test the Interactive Statement shell Assets Provided: In addition to creating new assets, the following assets have been preconfigured for use in this exercise: 1. Experience Telecom statement assets: C:\TestDrive\interactiveStatements\assets Tasks: Task 1: Add assets to the Interactive Statement navigator template To save some time we have already built some of the content you will need for this project. This task will bring this content into the project you have created and configured 1. Copy the C:\TestDrive\interactive Statements\ assets folder into the project s src folder. The assets folder contains all of the data, images and flash components that we will add to the Page 9

10 Interactive Statement. 2. Open the interactive statement navigator shell file called DocumentMain.mxml, in source mode. 3. Now we will insert some code into the navigator shell. Normally you would do this by adding script and visual objects with Flash Builder. To save time the basic code has already been created for you. Copy and paste the following code into the DocumentMain.mxml file in the script section after the last import. [Bindable] private var billingdata:xml; [Bindable] private var billitems:xmllist; [Bindable] private var newcharges:number; [Bindable] private var totalcharges:number; [Bindable] private var servicedata:xmllist; 4. Now add some visual elements after the script object: Page 10

11 <mx:canvas backgroundcolor="#bedccd" width="100%" height="93"> <mx:image x="10" y="10" <mx:label x="247" y="10" text="service address:"/> <mx:label x="406" y="10" text="{billingdata.service.custname}" fontweight="bold"/> <mx:label x="406" y="25" text="{billingdata.service.serviceaddress}" fontweight="bold"/> <mx:label x="406" y="55" text="{billingdata.service.accountno}" fontweight="bold"/> <mx:label x="247" y="55" text="account number"/> <mx:label x="564" y="10" text="billing date"/> <mx:label x="658" y="10" text="{billingdata.service.billingdate}" fontweight="bold"/> </mx:canvas> <mx:label x="210" y="101" text="here's what you owe" fontsize="12" fontweight="bold"/> <mx:label x="210" y="231" text="itemized Bill" fontsize="12" fontweight="bold"/> <mx:label x="242" y="116" text="balance Forward"/> <mx:label x="242" y="130" text="your new charges"/> <mx:label x="242" y="145" text="total amount you owe" fontweight="bold"/> <mx:hrule x="244" y="145" width="358"/> <mx:label x="484" y="116" text="{billingdata.billing.balanceforward}" textalign="right"/> <mx:label x="484" y="129" text="{newcharges}" textalign="right"/> <mx:label x="484" y="144" text="{totalcharges}" textalign="right" fontweight="bold"/> <mx:datagrid x="242" y="259" width="360" dataprovider="{billitems}" editable="false"> <mx:columns> <mx:datagridcolumn headertext="place" datafield="place"/> <mx:datagridcolumn headertext="period" datafield="period"/> <mx:datagridcolumn headertext="time" datafield="time"/> <mx:datagridcolumn headertext="charge" datafield="charge"/> </mx:columns> </mx:datagrid> <mx:label x="210" y="425" text="service Charges" fontsize="12" fontweight="bold"/> Page 11

12 <mx:datagrid x="242" y="453" width="360" height="129" editable="false" dataprovider="{servicedata}"> <mx:columns> <mx:datagridcolumn headertext="type" datafield="type"/> <mx:datagridcolumn headertext="charge" datafield="charge"/> </mx:columns> </mx:datagrid> 5. Save the file Check Point When you created the project a test app was created under the com.adobe.icomm.assetplacement.utils package. This will allow us to quickly test our statement before we go to the LiveCycle server. Run the Flash Builder debugger to test the file: Page 12

13 Exercise 3: Add promotional content to an Interactive Statement In this exercise you will add an Interactive Statement promotional content. Objectives: By the end of this exercise you will be able to; Add Interactive Statement promo objects to the Interactive Statement shell Populate the promo objects using the xml file Tasks: Task 1: Add a PromoImage Statements can contain static images as promotional objects. In this task you will add one to the shell and configure it to point to one of the supplied assets. 1. Open the DocumentMain.mxml file and switch to Design mode 2. In the Components panel locate the Asset Placement folder and expand it. Drag a PromoImage object to the lower left of the DocumentMain.mxml file Page 13

14 3. Change its id ID to PromoAd and set the width="180" height="300". You may need to reposition the object so it stays on the screen. 4. Save the file. 5. Now that we have an object we need to put some content into it. This is done using the packageorig.xml file located at the root of the project. This file was created when we created the project to be an Interactive Document Project project. Open the package-orig.xml file. 6. By default the package-orig.xml file will come up in Overview mode. Note that the promotional object PromoAd has been recognized and has an entry in the list. Switch to editing mode by clicking on the package-orig.xml tab at the lower left of the screen. 7. Right now there isn t much in the file. We will add a resource for the promo object. Modify the file to add a resource into the assets section. We will point to an image that is in the assets folder you added earlier: <?xml version="1.0" encoding="utf-8" standalone="no"?> <package xmlns=" <controllers xmlns:controller=" er"/> <assets> <resources controller="promoad"> <resource alttext="adobe Logo" contenttype="image/jpg" expiration=" " source="assets/images/perf_service.jpg" targeturl=" </resources> </assets> </package> 8. Save the file Page 14

15 Task 2: Add a PromoImageSlideShow Statements can also contain slide shows as promotional objects. In this task you will add one to the shell and configure it to point to the supplied assets. 1. Switch back to the DocumentMain.mxml file in Design mode. 2. Drag a PromoImageSlideShow object from the Components panel into the upper left of the mxml file. 3. Set the following: id="slidesad" delay="3000" width="180" height="150" Save the file 4. Now let s add some content. Switch back to the Package Definition Editor (package-orig.xml) in edit mode. 5. Add the following resources into the assets section: <resources controller="slidesad"> <resource source="assets/images/cleantransmission.png"/> <resource source="assets/images/cleanenergy.png"/> <resource source="assets/images/future.png"/> <resource source="assets/images/et_dish.png" targeturl=" </resources> 6. Save the file Page 15

16 Task 3: Add a PromoSWFLoader You can also add Flash content to the Interactive Statement. In this task you will add one of the supplied SWF files to your statement. 1. Switch back to the DocumentMain.mxml file in Design mode. 2. Drag a PromoSWFLoader object from the Components panel into the upper right of the mxml file. 3. Set the following: id="flashad" width="180" height="150" 4. Save the file. 5. Now let s add some content. Switch back to the Package Definition Editor (package-orig.xml) in edit mode. 6. Add the following resources into the assets section: <resources controller="flashad"> <resource contenttype="application/x-shockwave-flash" source="assets/swf/9_070_300x250_cube_mainv2.swf"/> </resources> 7. Save the file Page 16

17 Check Point Run the Flash Builder debugger to test the file. You should see the content in the promo objects: Note: You may get some minor errors/warnings regarding the PaperVision object. This is related to the cube object and some of the libraries that it uses. You can ignore these warnings for now. Page 17

18 Exercise 4: Add data to the Interactive Statement and tie in to Acrobat In this exercise you will add XML data to the Interactive Statement. Objectives: By the end of this exercise you will be able to; Import and use XML data in an Interactive Statement Assets Provided: In addition to creating new assets, the following assets have been preconfigured for use in this exercise: 1. XML Data file: HandsOn Material\data\data.xml Tasks: Task 1: In this task we will import the XML data that will make up the statement part of the Interactive Statement. 1. Open the DocumentMain.mxml file in Source mode. 2. After the Script entry, add an XMLDataLoader. The XMLDataLoader is a non visual element that allows you to map data to your Interactive Statement. <ap:xmldataloader id="statementdata" xmldataready="statementdata_xmldatareadyhandler(event)" /> When the data is ready, the data loader will call the statementdata_xmldatareadyhandler function. The function will populate the necessary Flex component, in this case the statement feilds. Insert the following function into the Script section: protected function statementdata_xmldatareadyhandler(event:xmldatareadyevent):void{ billingdata = event.data; billitems = billingdata.itemizedbill.children(); servicedata = billingdata.services.children(); newcharges = Number(billingData.billing.newCharges.toString()); totalcharges = newcharges + Number(billingData.billing.balanceForward); totalcharges = Number(totalCharges.toPrecision(16)); } Page 18

19 3. The function uses an XMLDataReadyEvent, paste the following import at the top of the script section: import com.adobe.icomm.assetplacement.controller.xmldatareadyevent; 4. Save the file. Task 2: Map data for the XMLDataLoader 1. Now we need to map some data into the Interactive Statement. Open the Package Definition Editor (package-orig.xml) file. 2. Notice how there is now a statementdata Name in data grid. Switch to the package-orig.xml text edit mode 3. We will be using an xml file from the assets folder as data for our statement. Add the following lines under the assets section: <resources controller="statementdata"> <resource contenttype="text/xml" source="assets/data/data.xml"/> </resources> 4. Save the file. Page 19

20 Check Point Run the Flash Builder debugger to test the file. You should see the data: Page 20

21 Exercise 5: Build an Interactive Statement Process. In this exercise you will move your Interactive Statement to a LiveCycle application and build a LiveCycle process that will generate the Interactive Statement portfolio. Objectives: By the end of this exercise you will be able to; Create a LiveCycle application for Interactive Statements Use the Asset Placement components in a LiveCycle process Assets Provided: In addition to creating new assets, the following assets have been preconfigured for use in this exercise: 1. Asset Placement Component (already installed) Tasks: Task 1: Move the Interactive Statement code into a LiveCycle application. 1. Launch the LiveCycle Workbench and login as administrator/password. 2. Create a new application by choosing File-> New-> Application. Name it etelecomstatement and click Finish. 3. Right click on the ExperienceTelecomIstatement/1.0 object and choose New -> Folder. Create a folder called assets : Page 21

22 4. Copy the following assets from the FlashBuilder project by using Windows Explorer to {your project location}\src\assets folder and dragging the contents of the assets folder into the application: Experience Telecom istatement.nav (this is the compiled version of the mxml file) package.xml (this is the deploy version of the package-orig.xml file) data.xml (from the assets/data folder) Other assets, such as the images and the swf, will be picked up from the file system at run time. Page 22

23 5. Your Application should look like the following: Task 2: Update the statement references. 1. Now we need to change the package.xml files references to point to the repository objects. Double click on the package.xml file to edit it. Switch to Source mode. Modify all references to the assets objects to include references to the server s local file system: <?xml version="1.0" encoding="utf-8" standalone="no"?> <package xmlns=" <controllers xmlns:controller=" er"> <controller:promoimage height="300" id="promoad" width="180"/> <controller:promoimageslideshow height="150" id="slidesad" width="180"> <delay>3000</delay> </controller:promoimageslideshow> <controller:promoswfloader height="150" id="flashad" width="180"/> <controller:xmldataloader id="statementdata"/> Page 23

24 </controllers> <assets> <resources controller="promoad"> <resource alttext="adobe Logo" contenttype="image/jpg" expiration=" " source="file:///c:/interactivestatements/assets/images/perf_service.jpg" targeturl=" </resources> <resources controller="slidesad"> <resource source="file:///c:/interactivestatements/assets/images/cleantransmission.png" /> <resource source="file:///c:/interactivestatements/assets/images/cleanenergy.png"/> <resource source="file:///c:/interactivestatements/assets/images/future.png"/> <resource source="file:///c:/interactivestatements/assets/images/et_dish.png" targeturl=" </resources> <resources controller="flashad"> <resource contenttype="application/x-shockwave-flash" source="file:///c:/interactivestatements/assets/swf/9_070_300x250_cube_mainv2.swf"/> </resources> <resources controller="statementdata"> <resource contenttype="text/xml" source="file:///c:/interactivestatements/assets/data/data.xml"/> </resources> </assets> </package> 2. Save the file Task 3: Create an Interactive Statement process 1. Our Interactive Statement portfolio will be generated in a workflow process. Right click on the Processes folder and choose New->Process. Name the process GenerateiStatement and choose Page 24

25 Finish. 2. Use the Activity Picker to add a new step to the GenerateiStatement process. Choose the Asset Placement - Generate Interactive Document operation from the list and click OK. 3. In the Generate Interactive Document properties open the Inputs section 4. Add the following: Your package definition: locate your package.xml file Your document template: locate the Experience Telecom istatement.nav file Page 25

26 Optional estatement template: leave this blank for now Your data: locate the data.xml file located in the assets folder 5. Open the Output section. Page 26

27 6. Create a new variable called istatementresult. Make sure its set as an Output type. 7. Save the file. 8. Deploy the application and all related files by right clicking on the application name and selecting Deploy. Then Check in all files in the Check In Assets dialog. Check Point Test the process by right clicking on the workflow and selecting Invoke Process There are no input variables. If all goes well you should get a PDF returned. Click on the View Document button and have a look at your Interactive Statement: Page 27

28 Page 28

29 Exercise 6: Adding a print PDF. Interactive Statements can be very engaging, but sometimes you still want a paper version to go into the file cabinet. This exercise will show you how to add one to your Interactive Statement Objectives: By the end of this exercise you will be able to; Add a printable PDF to the Interactive Statement that uses the same data. Assets Provided: In addition to creating new assets, the following assets have been preconfigured for use in this exercise: 1. The PDF template for the print version of the interactive statement C:\TestDrive\interactiveStatement\PrintVersion.pdf Tasks: Task 1: Move the template into a LiveCycle application. 1. To speed things up we have provided a PDF template for use as a print document. Open the PrintVersion.pdf file in Adobe LiveCycle Designer ES. 2. Look at the Data View and notice how the XML data is already mapped to the correct fields. This mapping uses the same XML data file as the Interactive Statement we created earlier. 3. Close Adobe LiveCycle Designer 4. Open Workbench (if it is not already open). 5. Copy the PrintVersion.pdf file into the etelecomstatement assets folder 6. Open the GenerateiStatement process and check it out. 7. Click on the Generate Interactive Document step and open the Inputs section. Page 29

30 8. Under the Optional print template field locate the PrintVersion.pdf file. 9. Save the file. 10. Deploy the application and all related files by right clicking on the application name and selecting Deploy. Then Check in all files in the Check In Assets dialog. Check Point Test the process by right clicking on the workflow and selecting Invoke Process There are no input variables. If all goes well you should get a PDF returned. Click on the View Document button and have a look at your Interactive Statement. Click on the List button (next to the house button). Notice that you now have a printdocument.pdf file. Double click to open that file. Notice the print version with the same data as the Interactive Statement: Page 30

31 Page 31