x_TutWD_Dynamic_Solution.doc

solutionunit: adobe integration into web dynpro for javatopic: dynamically generated forms 1 add interactive form ui element 1-1 in the project structure, double-click the node for the dynamicformview (web dynpro - web dynpro components - dynamicformcomp - views - dynamicformview) and choose the layout tab.1-2 in the outline pane, insert a child of type interactiveform and id interactiveform1 in the group1.1-3 select the interactiveform1 element in the outline pane, switch to the corresponding properties page and change the properties as shown below. reference the correspon-ding datasource and pdfsource from the context and set the width and height:the datasource property is used to specify the data source. the data source encapsulates the data you can display in the form at runtime. for the datasource property, you need to specify the path to the context node providing the data. in this step we reference the datasource context node, which is already defined in the context structure of the used template (see context tab of the dynamicformview).the structure of the context node, which is referenced by the datasource property, will also be displayed in the data view tab of adobe designer. the corresponding context attributes of this node can be bound to the designer layout elements defined in the form (see step 6). the updatedatainpdf value of the mode property is used to update a pdf document with the data provided by the data source or to create a new pdf document from the data source and the form template if no pdf document exists. the pdfsource property specifies the path of the context element that contains the pdf document. you must bind this property to a context attribute of the type binary. in this tutorial, the context attribute has already been defined in the context structure (see graphic above).note: although not used in this tutorial, this property allows an application developer to access the binary file and download it to the local hard disk or read and send the data to a backend.the templatesource property specifies the unique name of the form template. the name is automatically generated when you insert the interactiveform ui element into the view.1-4 save the new metadata by choosing the (save all metadata) icon from the toolbar.2 define form layout with adobe designeryou use the adobe designer to set up the layout of your pdf form. start this tool by choosing edit in the context menu of the interactiveform ui element in the outline pane. you can enlarge the designer window by double-clicking on the interactiveform1 tab.note: before you begin to layout your form, click on the show grid and snap to grid buttons in the toolbar of adobe designer to facilitate your work. also ensure that object boundaries in the view menu is checked, in order to show the boundary that appears around objects on the page during design time.the following graphic shows the layout you will develop in this section:2-1 drag and drop the salutationtext from the data view tab to the body pages pane of the adobe designer. a text field representation of the salutationtext appears on the body pages pane. select this text field and edit the following properties: click on the layout tab and choose none for the caption position. click on the object and then on the field tab and choose none for appearance. click on the value tab and choose read only for the type field.2-2 repeat these steps for the preambletext and closingtext. enlarge the text field for the preambletext and choose allow multiple lines on the field tab. to ensure that the data of the salutationtext and closingtext will be displayed completely, specify the width of these elements generously.2-3 go through the same steps for the date. unlike the text fields used above, a date field represents the date. on the paragraph tab select align right for the date field.2-4 save the new metadata by choosing the (save all metadata) icon from the toolbar.2-5 switch to the dynamicformview and select the implementation page. the following coding lines initialize the context elements, which are bound to the corresponding text fields and visible in the form. add the source code to the wddoinit method:wdcontext.currentdatasourceelement().setdate(new date(system.currenttimemillis();wdcontext.currentorderdataelement().setfirstname(john);wdcontext.currentorderdataelement().setlastname(smith);string salutationtext = dear +wdcontext.currentorderdataelement().getfirstname() + + wdcontext.currentorderdataelement().getlastname() + ,;string preambletext = thank you very much for your order. please find + below the confirmation for your order, which includes your order + data and the items you ordered. we hope that you were satisfied +with our services. for any additional feedback or comment, +please contact us at your convenience.;string closingtext = best regards, sap online shop;wdcontext.currentdatasourceelement().setsalutationtext(salutationtext);wdcontext.currentdatasourceelement().setpreambletext(preambletext);wdcontext.currentdatasourceelement().setclosingtext(closingtext);2-6 on the implementation page of the dynamicformview, choose source - organize imports from the context menu, select java.sql.date and press finish.2-7 in the web dynpro explorer view, trigger deploy new archive and run for the dynamicformapp. the result should look like the screenshot below:3 enhance form layout for order datain this section we will layout the order data of the confirmation. the following graphic shows how we want the layout of the order data to appear:3-1 in order to enhance the form layout with the order data, switch back to the adobe designer view of the interactiveform1 element. drag and drop the static text element from the standard library tab to the body pages pane, select this element and change the text to order data. mark the whole text and set the style on the font tab to bold.3-2 drag and drop the line element from the standard library tab to the body pages pane and enlarge the line so that it covers the width of the page.3-3 drag and drop the firstname node from the data view tab to the body pages pane of adobe designer. a text field representation of firstname appears on the body pages pane. select this text field, add a colon at the end of the caption text and edit the following properties: click on the object tab, then the field tab and choose none for appearance. click on the value tab and choose read only for the type field. click on the paragraph tab, choose edit value under currently editing value properties. and select align right.3-4 repeat these steps for the lastname, customerid, orderid, orderdiscount, and orderprice nodes.3-5 save the new metadata by choosing the (save all metadata) icon from the toolbar.3-6 switch to the dynamicformview and select the implementation page. add the following source code at the end of the wddoinit method:wdcontext.currentorderdataelement().setcustomerid(1212);wdcontext.currentorderdataelement().setorderid(5245);wdcontext.currentorderdataelement().setorderdiscount(10%);wdcontext.currentorderdataelement().setorderprice(2345.67 usd);these coding lines initialize the order data context elements, which are bound to the corresponding text fields and visible in the form.3-7 in the web dynpro explorer view, trigger deploy new archive and run for the dynamicformapp. the result should look like the following screenshot:4 integrate tables into pdf formsin this section, we will layout the order items of the confirmation using a table. the following graphic shows the intended layout of the order data:4-1 in order to enhance the form layout with the order items, switch back to the adobe designer view of the interactiveform1 element. drag and drop the static text element from the standard library tab to the body pages pane, select this element and change the text to order items. mark the whole text and set the style on the font tab to bold.4-2 drag and drop the line element from the standard library tab to the body pages pane and enlarge the line so that it covers the width of the page. alternatively, you can copy and paste within the adobe designer the line used before for the oder data, and use the new instance for the order items.4-3 drag and drop the static text element from the standard library tab to the body pages pane, select this element and change the text to product id. mark the whole text and set the style on the font tab to underline.4-4 repeat the last step for static text fields named product name and product quantity.4-5 drag and drop a subform element from the standard library tab to the body pages pane. enlarge this subform over the whole width. drag and drop a second subform element from the standard library tab to the body pages pane within the first one. make the 2 subforms the same size.drag and drop the element productid from the data view tab to the body pages pane of the adobe designer within the second subform. a numeric field representation of the productid appears on the body pages pane within the second subform. select this numeric field and edit following properties: click on the layout tab and choose none for the caption position. click on the object tab, then on the field tab and choose none for appearance. click on the value tab and choose read only for the type field.4-6 proceed in the same way for productname and productquantity. 4-7 select the numeric field for productquantity and click on the paragraph tab, choose edit value under currently editing value propertiesand select align right.4-8 click on the hierarchy tab, select the subform1 and enter in the subform tab of the object tab flow content for the type and table for the flow direction. 4-9 select the inner subform2 in the hierarchy tab and enter in the subform tab of the object tab flow content for the type and table row for the flow direction. in the binding tab of the object tab activate repeat subform for each data item.4-10 enlarge the numeric field for productid, so that it will use the whole space under the static text labeled productid. do the same for productname and productquantity.4-11 save the new metadata by choosing the (save all metadata) icon from the toolbar.4-12 switch to the dynamicformview and select the implementation page. add the following source code at the end of the wddoinit method:iprivatedynamicformview.iorderitemselement orderitemselement =wdcontext.createorderitemselement();orderitemselement.setproductid(1002);orderitemselement.setproductname(trekking bike);orderitemselement.setproductquantity(1);wdcontext.nodeorderitems().addelement(orderitemselement);orderitemselement = wdcontext.createorderitemselement();orderitemselement.setproductid(1023);orderitemselement.setproductname(mountain bike);orderitemselement.setproductquantity(2);wdcontext.nodeorderitems().addelement(orderitemselement);orderitemselement = wdcontext.createorderitemselement();orderitemselement.setproductid(1046);orderitemselement.setproductname(bmx bike);orderitemselement.setproductquantity(1);wdcontext.nodeorderitems().addelement(orderitemselement);these coding lines initialize the order items context elements, which are bound to the corresponding fields and visible in the form.4-13 in the implementation page of the dynamicformview, choose source - organize imports.4-14 in the web dynpro explorer view, trigger deploy new archive and run for the dynamicformapp. the result should look like the following screenshot:5 integrate images into pdf formsin this section, we will integrate images into the confirmation. the following graphic shows how the images will be integrated:the left graphic represents an application-specific image that will be integrated dynamically, and the right one represents the company logo, which is a static image. 5-1 in order to integrate images in the form layout, switch back to the adobe designer view of the interactiveform1 element. drag and drop the static image element from the standard library tab to the body pages pane.5-2 select the static image element on the body pages pane, click on the object tab and select the sap_corporate.gif for the url entry under the component folder in the corresponding mimes folder of the project wd03_advanced_adobeforms ( wd03_advanced_adobeformssrcmimescomponentscom.sap.training.wd.adobe.dynamicformcomp). in addition, activate embed image data and select use image size for the sizing field.5-3 for the left image, drag and drop an image field element from the standard library tab to the body pages pane. select this image field and edit t