下载 Integration

'

R e l e a s e 7 0 0

Embedding Forms and

Interactive Forms in

Web Dynpro ABAP

Applications

Copyright

© Copyright 2004 SAP AG. All rights reserved.

No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP AG. The information contained herein may be changed without prior notice.

Some software products marketed by SAP AG and its distributors contain proprietary software components of other software vendors.

Microsoft®, WINDOWS®, NT®, EXCEL®, Word®, PowerPoint® and SQL Server® are registered trademarks of Microsoft Corporation.

IBM®, DB2®, DB2 Universal Database, OS/2®, Parallel Sysplex®, MVS/ESA, AIX®, S/390®, AS/400®, OS/390®, OS/400®, iSeries, pSeries, xSeries, zSeries, z/OS, AFP, Intelligent Miner, WebSphere®, Netfinity®, Tivoli®, Informix and Informix® Dynamic ServerTM are trademarks of IBM Corporation in USA and/or other countries.

ORACLE® is a registered trademark of ORACLE Corporation.

UNIX®, X/Open®, OSF/1®, and Motif® are registered trademarks of the Open Group. Citrix®, the Citrix logo, ICA®, Program Neighborhood®, MetaFrame®, WinFrame®,

VideoFrame®, MultiWin® and other Citrix product names referenced herein are trademarks of Citrix Systems, Inc.

HTML, DHTML, XML, XHTML are trademarks or registered trademarks of W3C®, World Wide Web Consortium, Massachusetts Institute of Technology.

JAVA® is a registered trademark of Sun Microsystems, Inc.

JAVASCRIPT® is a registered trademark of Sun Microsystems, Inc., used under license for technology invented and implemented by Netscape.

MarketSet and Enterprise Buyer are jointly owned trademarks of SAP AG and Commerce One. SAP, R/3, mySAP, mySAP.com, xApps, xApp and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP AG in Germany and in several other countries all over the world. All other product and service names mentioned are trademarks of their respective companies. Data contained in this document serves informational purposes only. National product specifications may vary.

Icons Used in Text

Icon Meaning

Caution Example

Note

Recommendation Syntax

More icons are used in the SAP Library documentation to help you identify different types of information. For more information, see Help on Help  General Information Classes and Information Classes for Business Information Warehouse on the first page of any version of the SAP Library.

Typographic Conventions

Format Description

Sample text Words or characters that appear on the screen. These include field names, screen titles, pushbuttons, menu names, menu paths, and menu options.

Cross-references to other documentation.

Sample text Emphasized words or phrases in the body text, titles of graphics and tables.

SAMPLE TEXT Names of system objects. These include report names, program names, transaction codes, table names, and key concepts of a programming language surrounded by body text - for example, SELECT and INCLUDE.

Sample text Output on the screen. This includes file and directory names and their paths, messages, source code, names of variables and parameters as well as names of installation, upgrade and database tools.

Sample text Exact user entry. This includes words or characters in the documentation that the user is instructed to enter on the screen.

<Sample text> Variable user entry. The user must replace the words and characters in brackets with appropriate entries before entering the text in the system. SAMPLE TEXT Keys on the keyboard, for example,

_F2

_ENTER

Embedding Forms and Interactive Forms in Web

Dynpro ABAP Applications

Web Dynpro for ABAP allows for the embedding of forms into a Web Dynpro view. On the one hand, these forms may be used for printing or archiving. On the other hand it is possible to use these forms in an interactive way, this means, a user can enter data into the form. This data will be transported to a Web Dynpro context node and then may be processed as context attributes.

Task

The following tutorial leads you through the necessary steps for embedding forms into your Web Dynpro application. The first part deals with using forms that do not accept user input (non- interactive forms). In the second part the application will be extended by an interactive form to gather input data into the Web Dynpro context.

Prerequisites

There are technical prerequisites to be adjusted in addition to the standard SAP NetWeaver installation. Please check the following list and make sure, that all necessary installations succeeded.

Systems, Installations, and Authorizations

You have access to SAP NetWeaver Release 2004s or higher.

You have authorization for transaction SE80 (development environment) of the Web Application Server.

The Adobe Document Server (ADS), which is pre-installed on the Java Server of the SAP NetWeaver, must be configured correctly. You can check the connection by executing a special program within the ABAP system. For details see below.

The Adobe Designer must be installed on your local pc, version 7.0 or higher.

Please note:

Using interactive forms in Web Dynpro ABAP Applications may have licensing connotations regarding Adobe software. More information is provided within the FAQs on

service.sap.com/adobe.

Checking the ADS-connection to your ABAP system Log on to the ABAP system

 Open the Object Navigator by choosing the link or submit the transaction code SE80

 Choose Program within the object list selection and enter the program name FP_PDF_TEST_00

 On the program entry in the Object list open the context menu by clicking the right mouse button and choose Execute -> Direct Processing.

 Confirm the dialog:

 If the ABAP server is able to connect to the ADS you will receive the following answer:

 If you receive an error message instead you have to contact the ABAP system administrator to set up the connection.

Prerequisites continued

Knowledge

Knowledge of programming language ABAP OO Knowledge of the ABAP development environment Knowledge about programming Web Dynpro applications Basic knowledge about form design with the Adobe Designer

Objectives

By the end of this tutorial, you will be able to:

Create a Web Dynpro Application with an embedded form e.g. for print purposes Create a Web Dynpro Application with an embedded interactive form

Process Flow

1. Create a Web Dynpro component. 2. Create a view.

3. Design the view. 4. Create the context.

5. Embed a form element into the view. 6. Create an appropriate template source. 7. Create an appropriate form interface. 8. Embed the view into the window. 9. Create a Web Dynpro application. 10. Active and execute the application.

Sample Application

Not yet available.

Creating a Web Dynpro Component

To work with development objects, such as Web Dynpro components, you have to create them in the Object Navigator (transaction SE80). Only once you have done this can you start to create views, or implement actions.

Prerequisites

You have opened the Object Navigator (transaction SE80).

Procedure

1. Choose Web Dynpro Comp./ Interf. “.

2. Enter a name (e.g. Z_form_test_xx) into the text field and select the glasses icon on the right.

3. As the object does not yet exist, you have to confirm the dialog box prompt, Create Object? with Yes.

4. Another dialog box appears in which you can maintain some settings. For the tutorial do not change the standard settings. You can enter a description if you want. To confirm your entries choose Save .

5. You then have enter the name of the packet where you want to save your new object. Store the packet locally (packet name $tmp).

Result

You have now created a Web Dynpro component called Z_FORM_TEST_XX which is the basis for the following steps.

Creating a View

To design the user interface you have to create a view. This view is used as a container for the UI elements.

Prerequisites

You have created a Web Dynpro component.

Procedure

1. With the right mouse button click on the name of the Web Dynpro component in the object list on the left.

2. From the context menu choose Create → View.

3. Name the view MAIN and enter a description if you want. 4. To confirm your entries either choose the pushbutton or Enter.

Result

Once you have created the view you can start to model it. Developers usually do this in the View Designer. The View Designer appears automatically on the right once you have confirmed you have created the view.

Modeling the View MAIN

In this unit you will create a context for the view MAIN. In a second step you will embed a special UI element into the layout of the view. The UI element library of the View Designer offers the element InteractivForm on the Adobe library tab. By using this UI element some Adobe

functionality will be integrated into the Web Dynpro view. Some additional elements will be used to complete the view.

Prerequisites

You have created a view called MAIN The Workbench is in change mode

Procedure

Maintain a Context

1. Go to the tab Context in the View Designer. Open the context menu of the root node and create a new node

2. Enter a name for the new node (e.g. node_1) and the name of the dictionary structure spfli into the following dialog box. Leave all other properties set to their default values. Then click the button “Add Attribute from Structure”.

3. From the table in the next dialog box choose the structure components CITYFROM and CITYTO and choose Confirm.

4. The context of the view MAIN now contains the node node_1 with two attributes. Change to the tab layout.

Maintain a View

1. The view always contains the ROOTUIELEMENTCONTAINER. Change the layout of the container to GridLayout:

2. Now add a textView element into this container (drag & drop the icon from the library to the view area of the View Designer):

3. Enter a text into the value field of the property text, e.g.: “Please enter the city of departure and the city of arrival”. Press the Enter-key to see the text within the preview area in the View Designer.

4. Now open the tab Adobe in the library stack on the left hand side of the Designer area. Choose the only UI element available here, the InteractiveForm element, and drag & drop it to the preview area.

5. Mark the InteractivForm element to work on its properties:

a) First change the value for width to 600px.

b)

The name of the template must be unique in the system 6. Save the view and double click in the name of the form to create it.

7. The following dialog box asks you to specify an interface that will be related to the form template you are creating.

Enter a name and click the Context button. The name of the form interface also must be unique in the system.

8. A separate dialog box offers the context of the view and you choose the just created node node_1. Confirm the dialog box.

9. Choose the local package $tmp to save both, the interface and the form. Now the Adobe Designer should open up within the View Designer area.

a

)

b

)

Maintain the form

The Adobe Designer that is integrated in the Form Builder of the SE80 offers you the Data View tab on the left. If this tab is hidden, open the menu Palettes and choose Data View.

1. In the Data View you find the two elements that correspond to the two attributes of the view context. Choose these two data elements of the tab and drag & drop them into the layout area of the Designer. Make sure, that the Workbench is in change mode.

2. Save the created layout and click the back button in the SE80.

3. Now go to the window of the component by double-clicking the entry in the object list. Drag & drop the view MAIN from the object list into the window. Save the window. 4. Activate all parts of the component and the form (SFPF-object) as well as the interface

(SFPI-object). Both objects must be activated separately. .

Create an application

1. In the object list open the context menu of the Web Dynpro Component object.

Create a Web Dynpro Application and save it as a local object. 2. Test the application

Result

As result you should receive page like this:

The Adobe form is integrated into your Web Dynpro page, but the text fields are not yet ready to accept input. You can use the functions provided by the Adobe framework, such as printing or saving locally.

Creating an Interactive Form

In the next step, the new application will be enhanced to be interactive. In order to do this, the view MAIN must be extended in the following way:

1. Double-click the view MAIN in the object list to open it in the View Designer. Make sure, that the Workbench is in change mode.

2. Mark the UI element INTERACTIV_FORM in the UI element list to edit its properties. 3. Check the check box enabled. (The default value of this box in “unchecked”).

4. Save the view.

Now the text fields of the Adobe form accept input. In a second step you have to enable input values to be transported to the Web Dynpro context.

5. Double-click the name of the templateSource in the property table to open the form in the Form Builder.

6. Drag & drop the UI element Submit from the library tab WebDynpro on the right side of the form Builder into your form.

7. Save the form and use the back button in SE80 to go back to the View Designer. Now the fields of the form accept input and the entered values will be transported to the context attributes which are connected to the form data elements. To make this visible in your Web Dynpro application you must add two more UI elements of the type TextView to your view. The first one will show the entered city of departure, the second one will show the entered city of arrival.

8. Drag & drop the UI-element of type TextView into your view two times.

9. Mark the name of the first new UI element in the element list and change the ID in its property table to DEPARTURE

2x

10. In the property table a) go to the row text and click on the Binding button. In a separate dialog box the existing context of the view will be offered and you choose the attribute CITYFROM by double-clicking (b)).

11. In the same way rename the second UI element, TEXT_VIEW_2. Call it e.g. ARRIVAL and bind its property text to the second attribute CITYTO.

12. Save and activate all changed parts of the application.

13. Test the application.

a)

b)

Result

As result you should receive page like this:

As you haven’t entered anything yet, nothing will be displayed below the integrated form. So, enter a city name in each input field and click the Submit button.

Both entries should be displayed below the form.

Summary

This simple application tries to give you a basic understanding of how to deal with integrated Adobe forms within your Web Dynpro Application. Forms can either be integrated just to use their additional functionalities such as printing or local saving, or they can be used interactively to gather data from a user. Framework integration makes sure, that entered data can be sent to the Web Dynpro context and there the data may be processed as usual. In our example the two textView elements display the content of the two corresponding context attributes in order to show, that the values have been transported from the Adobe form into the Web Dynpro context.