Académique Documents
Professionnel Documents
Culture Documents
Applies to:
SAP NetWeaver Composition Environment 7.1, SR3 also the SDN downloadable SAP NetWeaver CE 7.1 trial version can be used for working this exercise.
Summary
Design, model and develop a typical Composite Application with SAP NetWeaver Composition Environment 7.1, SR3. This exercise shows with the help of the business scenario Project Management Process how a typical Composite Application can be created with the help of SAP NetWeaver CEs components: Visual Composer, Guided Procedures and Composite Application Framework (CAF). The exercise is accompanied by videos equipped with voice. Authors: Abdul Razack, Volker Stiehl
Authors Bios
Abdul Razack is a member of SAP NetWeaver Regional Implementation Group responsible for implementation activities, knowledge transfer, and feedback to development. His career spans 14 years in various areas of Information Technology including product development, integration, solution definition, solution architect, and pre-sales activities. Volker Stiehl is member of the product management team for a toolset supporting the efficient development of composite applications on top of an enterprise SOA landscape and is responsible for methodologies and best practices in the area of composite application development.
Table of Contents
Introduction to this exercise: Project Management Process ..............................................................................3 Prerequisite.........................................................................................................................................................4 Exercise Structure ..............................................................................................................................................5 Building the Guided Procedure Skeleton............................................................................................................6 Building the Visual Composer User Interfaces .................................................................................................13 Building the Business Objects ..........................................................................................................................41 Integrate the User Interfaces and service with Guided Procedure...................................................................65 Running the Composite Application .................................................................................................................87 Optional Exercise: convert the Visual composer User Interfaces to be Wizard based ....................................94 Related Content..............................................................................................................................................107 Copyright.........................................................................................................................................................108
The Program Lead requests a new project by entering the project data into a request form. He has the possibility to select an appropriate Project Lead from a list filled by an external service. After clicking submit the project request is forwarded to the next role, the Project Lead. The Project Lead decides between a rejection and an approval; if the request is approved a project will be created in the database.
Building such a scenario from scratch means that well get to know a wide variety of tools of SAP NetWeaver CE 7.1 which are needed to build up such a business process. During this exercise youll get an experience with following aspects: what it means to develop a composite Interplay of tools CAF for Business Object modeling with persistency and exposing methods as web services VC for UI modeling: with and without web service consumption Covering typical use case: consuming existing Java EE based service (in our case provided by CE reference application) GP for process modeling reusing existing UIs and web services Consuming CAF web service
Parameter handling Role handling Can be built out-of-the-box Discuss CA development best practices
You can use the attached recordings to be guided through the entire exercise. The recordings are equipped with voice so the steps of this exercise are explained and repeatable.
Prerequisite
As a prerequisite for this exercise you need to make available a web service of the so-called Education Data Model (EDM). The EDM is a so-called reference application that is delivered within the SAP NetWeaver Developer Studio. You find more information about this feature and its installation and configuration on the welcome page of the Developer Studio:
After the successful deployment of this EDM scenario, the following page should be available on your local server: http://<host>:<port>/EDMProjectWEB/ .
Exercise Structure
Building the Guided Procedure Skeleton Create the GP process for Project Management Process, consisting of one process, one block and three actions. Model and design the process flow. See also recording Building the Guided Procedure Skeleton (approx. 1 min).
Building the Visual Composer User Interfaces Create the both Visual Composer User Interfaces, one for the project request, used by the Program Lead and the other as an approval form, used by the Project Lead. See also recording Building the Visual Composer User Interfaces (8 min).
Building the Business Objects Prepare and create the needed Business Objects with the help of the Composite Application Framework (that is an essential part of SAP NetWeaver CE 7.1). You learn to work with the SAP NetWeaver Developer Studio and Java code. See also recording Building the Business Objects (5 min).
Integrate the User Interfaces and services into the GP Skeleton Assemble all the prepared components into the GP process that was prepared in the first step of this exercise. Recording Integrate the User Interfaces and services into the GP Skeleton (6 min).
Run the Composite Application Deploy, test and run the finished Composite Application! See recording Run the Composite Application (1 min).
Optional Exercise: convert the Visual composer User Interfaces to be Wizard based Adapt the Visual Composer User Interface for using of a wizard, see also recording Convert the Visual composer User Interfaces to be Wizard based (2 min) and the recording of the outcome (1 min).
Additional recording showing new features of SAP NetWeaver Developer Studio This recording shows new NWDS features that improves the design and handling with Composites within SAP NetWeaver CE: Additional recording showing new features of SAP NWDS (1 min).
4. Enter the following data Name: CE151 Description: CE151 and click Create
7. Provide the following info Name: Project Management Description Project Management
10. Highlight the block that was created and provide it with a name and description For. E.g Name:Project Management Block Description: Project Management Block Then click Save.
11. Create 3 New Actions by clicking(3 times) on the Create New icon after highlighting the block
13. Click on the first Action and give it a name and description Name: Enter Project Description: Enter Project
14. Click on the Second Action and give it a name and description Name: Approve Project Description: Approve Project
15. Click on the Third Action and give it the following name and description Name: Create Project Description Create Project
16. Highlight the Project Management Process and click on Save ALL. This completes the Guided Procedure skeleton. We will build on this as we go along.
1. Launch the Visual Composer Design Time using the url http://localhost:50100/VC and login as Administrator/abc123
3. Create a new Development Component by choosing the new Button as shown in the figure
4. Provide the development component a name and click ok Development Component : ce151
5. Choose the Composite View as the Model type and provide your view with a name and click ok Name: ProgramLead
6. Choose the Start Point from the palette and drag it to the Design Area
7. We will add 4 fields to the Start Point. The start point represents the parameters that this UI will accept .This is the data that will be transferred between the Program Lead and Project Lead, Right click on the start point and choose Define Data from the context menu.
8. Click on Add Field and choose the data type of the field. In this example we will add 4 strings
10. Repeat step 9 for fields (Description, Schedule and Comment) and click on close
11. Choose the Form View from the palette and drag it into the design area.
12. To map the parameters in the start point to show up in the form, we simple drag out of the start point and connect it to the IN port of the form
13. Right click on the Form and choose Define Data from the context menu
14. Check the first column of each field. This makes that data field on the Form and click on close Alternatively you could choose select all as well.
15. Rename the Form to Program Lead by choosing Rename from the context menu and provide the name
Alternatively you can click on the Layout icon at the bottom of the design area 17. Change the control type of the comment field from Text to Text Editor by choosing it from the context menu as shown in the figure.
18. Resize the comment field by dragging the field out. This is because the comment that the Program and Project Leads enter could be more than one line.
20. Double click on the button and change its properties from the panel on the right
Text: Submit Then click on the icon corresponding to Action to add the event
21. In the pop up window click on the Add Action icon and choose Submit
22. The submit Action is added and associated with the button. Click close
23. Choose the design perspective from the icon at the bottom left corner
24. Drag the out port to an end point. The end point represents the output data of the form. This is a similar concept to the start point that we added in step 7
25. Right click on the end point and choose Define Data to add the output parameters
26. In addition to the four parameters on the form we will add three more to determine the login and name. Add the following parameters in the pop up box firstName lastName login string string string
Please make sure you name the firstName and lastName exactly with starting lower case letter. This helps the mapping in a later step Click Close
27. Click on the connector between the form and the end point. Then right click on it and choose map data from the context menu
28. Notice that the output parameters have been mapped to the one on the form We will map the other parameters(firstName, lastName and login) later Click Close.
29. In the Configure Data Map panel on the right enter *submit for the event when the end point will be triggered.
Next we will add the data service to give us a list of employees 30. Click on the Search icon
Enter the following details Search : EDMProjectDestination Search for: * Type: WSDL Click on Search 31. All the operations that are part of the WSDL will appear. Choose the getAllEmployees operation and drag it over to the design area.
32. Drag the output port of the service and choose Table View from the context menu. This will display the results of our service call.
33. In the resulting Pop up, click on deselect all and only choose the following fields to be displayed in the table firstName lastName login Click Close
34. Rename the Table to EmployeeList and drag the out port from the table and connect it to the end point.
35. Right click on the connector and choose Map Data from the Context Menu
36. Notice that the firstName, lastName and login parameters have also been mapped. Note: If you dont see them automatically mapped, this is because in step 26 you did not name it exactly the same. If this is the case, you just have to map them manually. Click Close
37. Right click on the connector and choose configure from the context menu
38. Change the event name from select to *submit .from the Configure Data Map panel
39. Now drag the start point to the input port of the WebService(getAllEmploye es). This is required for the service to be executed when the UI launches.
40. Save the application by choosing the Save button on the Menu
43. Deploy the application by clicking on the deploy button If prompted for the confirmation dialog choose continue.
45. Enter some test data and click on Submit. After you click submit you should see an empty screen.
46. Now we will create another User Interface for the Project Lead to enter data Create a New Model by choosing the Create New Model Icon on the menu. 47. Enter ProjectLead for the name of the model. Make sure that ce151 is selected under Development component and click ok
49. Add fields to the start point by choosing the define data from the context menu
50. Enter the following fields (all string datatypes) by clicking on the add field icon Title Description Schedule FirstName LastName Comment Login Click Close
51. Drag a Form over to the Design Area and rename it to Project Lead
52. Connect the start point and the in port of the form
53. Choose Define Data from the context menu of the Form
54. From the resulting pop up, choose select all and unselect the login field
Click Close
56. Choose Define Data for the end Point from the context menu. Notice that all the fields on the form are automatically mapped to the end point. We will add two Boolean variables to represent whether the Project lead Accepted or Rejected the proposed project. Please make sure the names of the variables are ResultState_approve ResultState_reject Click Close
57. Go to the Layout perspective by choosing Layout Board from the context menu
58. Change the control type of the comment from text field to text editor and expand the comment field to accommodate multiple lines
59. Add a button to the Layout and change the name of the button to Approve. Hint: Double click on the button and change the name from the Configure Button panel on the right.
60. Add a custom action for approve by clicking on the small icon next to the action field In the resulting pop up window
62. Repeat step 59,60,61 to create a Reject button and action. Alternatively you can just type the event name into the action field on the Configure Button panel.
63. Since the Project Lead does not enter/change the project title, description etc we will disable these fields. In order to do this choose the fields and set the Read Only flag to true for the Configure panel 64. Repeat step 63 for Title Description, Schedule, FirstName, LastName fields
65. Go to the Design Perspective by choosing the icon in the lower left corner Then choose the connector from the form to end point and choose approve event from the drop down
66. Choose Map Data from the context menu of the connector
67. In the resulting Pop Up set the values for ResultState_approve to true and ResultState_reject to false
Click Close
68. Drag another connector from the output to the end point for the reject event
69. Choose the connector that was added in step 68 and set the event to reject
Hint: if you dont see your new connector, it is probably behind the approve connector. So drag it out a little. 70. Choose map data from the reject connectors context
71. In the resulting pop up set the ResultState_approve to false and ResultState_reject to true Click Close.
icon and deploy the application If prompted for confirmation choose continue.
In both cased you should see an empty screen. This denotes that an end point has been reached for both events.
3. Choose Development Component from the Development Infrastructure node and click Next.
7. For each Composite Application 5 subprojects are created. The screenshot lists the 5 projects. Choose Finish
8. To create a Business Object, expand the project xce151 from the Composite Application Explorer and Choose New Business Object from the modelled node as shown in the diagram
9. Name the business object as Project and choose the Create new structure option and click Finish
12. Expand the [LocalDevelopment]caf.cor e node and expand the primitive subnode. Choose the string data type and add it by clicking on the icon.
14. Repeat step 12 and step 13 to add the following attributes Description Schedule Firstname Lastname The resulting structure should look like the one shown.
15. Add one more attribute of type long text (from the services subnode) and name it comment
18. Highlight the create method and you will see the parameters (input, output and fault) in the middle pane
19. Notice that there are no input parameters(the input parameters node is empty). We need the create method to accept title, description etc as input parameters. In order to do this, go back to the structure tab and change the cardinality of the attributes from 0..1 to 1..1. Hint: To get to the structure perspective, click on the structure Tab and click the Edit main structure button.
20. Close the structure and go back to operations. Notice that the input parameters node is populated
21. Choose the Permissions Tab and uncheck the Permission checks enabled option
Notice that the Backend drop down is set to local. In the case of remote persistency you will set this to remote Also all the attributes you added have been added as columns to the table
23. We will expose this Business Object as a Web Service. In order to generate the remote interface, Click on the General Tab and enable the Generate Remote Interface option
24. Right click on the Project Business Object and choose Expose as Web Service from the context menu
25. Choose Yes in the Message Box. The framework will now generated all the required Java code
26. Provide the Web Service a name and choose the create and update methods to be exposed. Click OK.
27. Click on the Project and Choose Save Application from the context menu
28. Right click and choose Generate Application from the context menu Click ok on the message box.
29. Choose Build Application from the context menu You should see no errors in the build log.
31. Enter administrator/abc123 as the user name and password when prompted
33. Choose Test Service the the Business Objects context menu
35. Expand the tree and navigate to the Project business object
37. Enter some test data in the row that was inserted and Click Save
39. We will now test the webservice. In order to do this launch the WebService Navigator by opening a browser and enter http://localhost:50100/index .html and then click on Web Service Navigator
40. If prompted login as Administrator/abc123 and then click on webservice that was exposed
44. You can test if the data is persisted by going to the service browser and executing the findAll method.
1. Launch the Guided Procedure design time from the URL http://localhost:50100/irj. Login as administrator/abc123 and navigate to Guided Procedures -> Design Time
2. Navigate to the CE151 folder and choose the process that was created during the first exercise and click on open
5. Choose WD4VC Application from the User Interface category and provide the Callable object a name and description and choose next
6. Choose the model Program Lead and click next Be sure to pick the correct model, since the solution models will also be displayed.
9. Click Finish
10. Test the callable object that you created by highlighting it and choose the test tab
14. You should see the employees first name, last name and login id displayed on the next screen
16. Choose WD4VC Application , give it a name and description. Click next
21. Highlight the callable object and choose the Test tab to test it
26. You can repeat step 25 for reject result state by choosing the reject button.
28. Choose Web service from the service tree. Give the service a name and description and choose next
29. Enter http://localhost:50100/Proje ctWS/Project?wsdl in the WSDL url field and click GO
33. Expand the node Approve Project ->Result States-> reject and set it to Enter Project
34. Highlight the Project Management Block and choose the parameters tab
35. We will consolidate all the title parameters. In order to do this expand the Input Parameters (for Enter Project) and click on the title parameter as shown in the diagram.
36. Now expand the Output Parameters for Enter Project. Hold the CTRL Key and click on title. As a result both the parameters should be selected as shown
37. Expand the Input Parameters for Approve Project. Hold the CTRL Key and click on title. As a result 3 title should now be selected
38. Expand the Input parameters from Create Project. Hold the CTRL Key and click on title. To summarize 4 titles should now be highlighted. Now click on the Group button
40. The resultant title group should look like the one shown in the diagram
41. Repeat step 35 to step 39 to consolidate the description parameter. The resulting description group should look like the one shown.
42. Repeat step 35 to step 39 to consolidate the schedule parameter. The resulting group should be as shown in the diagram
43. Repeat step 35 to step 39 to consolidate the comment parameter. In this case we also have to take the comment from the output of Approve Project in order to capture the approvers comment. So you will see 5 parameters in the group as opposed to 4 for title and description. The resulting comment group is shown in the diagram
44. Repeat step 36 to step 39 to consolidate the first name parameter. Notice we skipped step 35 because the Enter Project Interface did not have firstname as a parameter. The resultant group is shown in the diagram
45. Repeat step 36 to step 39 to consolidate the lastname parameter as well. The result is shown
46. Consolidate the login parameter from the output parameters structure of Enter Project into the input parameter of Approve Project..
47. The resultant login group is shown in the diagram. This completes the parameter consolidation task.
48. Next we will consolidate the roles. We have a three step process and potentially each of these steps can be performed by a different role. In our scenario for this session, we will have two roles (Program Lead and Project Lead). Hence we will consolidate enter project step and create project step to the Program lead and the approve step for the Project Lead. In order to perform this choose the roles tab after highlighting the Project Management Block
49. Choose the Processor of Enter Project and Processor of Create Project (USE CTRL KEY). Enter Program Lead in the Consolidate To: Input field and click on the Go button
50. The processor for the approve Project we will fill in from the context parameter. In order to do this choose the Input parameters -> Login from the Filled from Context Parameter drop down. Save your block by choosing the Save All icon.
51. Now choose the Project Management Process and click on the roles tab
52. There are three default roles (Administrator, Overseer and Owner) that a process needs. We will set these to the role that initiated the process.
53. Repeat step 52 for all the roles(Administrator, Overseer, Owner and Program Lead). The final role consolidation should look like the diagram.
54. Click on the parameters Tab and uncheck all the exposed in check boxes
57. The resulting process should look like the one shown in the diagram
We have successfully built our composite application. Now it is time to test it.
1. Choose the Project Management Process and click on the instantiation tab
2. Choose the Start Process Automatically check box and click on the generate instantiate URL button
4. The composite application will open in a new browser window. Enter some data for the input fields and choose a project lead from the list of employees and click submit.
5. The first step of our composite application has been completed and the next step is ready to be processed. In step 50 of building the guided procedure, we had defined that the process of the approve step is determined from the login. You will see that this has now been assigned to Franco fall
6. Login as fallf/welcome123. Change the password if prompted and navigate to Guided Procedures.
7. From the runtime perspective choose task that require my action link
9. The details entered by the Program lead now appear. The project lead can enter some comments and click on the reject button. Logoff.
10. Login as the administrator/abc123 and go to the guided procedure/runtime. Choose tasks that require my action link
12. You can now see the comment enter by Franco. Enter another comment, change the schedule, choose franco as the project lead again and click submit Logoff as the administrator
13. Log back on as fallf and go to the runtime work center and choose the Approve Project task. Enter another comment and click approve.
14. The project will now be persisted. You can check the data from the service browser http://localhost:50100/caf. or Step number 36 of building business object exercise and choose the findall method to display a list of projects that have been created
Optional Exercise: convert the Visual composer User Interfaces to be Wizard based
In this exercise we will see how easy it is to convert the two steps that the Program lead does as part of entering the project (entering project details and picking the Project lead) in a wizard mode. Refer to recordings Convert the Visual composer User Interfaces to be Wizard based (2 min) and the recording of the outcome (1 min).
1. Launch the Visual Composer Storyboard from the url http://localhost:50100/VC and log on as the administrator/abc123. then Choose the Program Lead model.
2. Choose the Wizard container and drag it to the design area (Storyboard)
3. Click on the little rectangle in the wizard to add a step, because in this wizard we will have two steps.
4. Now drag the Program Lead Form onto the area Step1 and the Employee List table into Step 2.
6. Right click on the submit button and choose Configure. Since we are making this a two step we will perform the submit action at the end of the next step. We will change this submit button to simply navigate to the next screen(getting a list of employees)
7. In the configure button pane on the right, change the text and action to be Next
8. Now click Step2 from the roadmap control and select the Employee list table View
9. From the Configure Table View, enable the show toolbar checkbox
12. Drag another button onto the toolbar (one to go back to the previous step and one for submit)
13. Right click on the first button and choose configure from the context menu
14. Change the text to Back and Click on the small icon next to the Action Input field
15. Add an action and choose BACK as the action. Then click Close in the pop up window.
16. Choose Configure from the context menu of the Action 3 button
17. Change the text to submit and add an action called submit. Then click close.
20. Repeat Step 18 and 19 for Step1 and change the title to Enter Project Data
21. Go to the Design board by click on the design icon in the lower left corner.
22. Choose the Enter Project Data Step in the wizard and drag the node that reads Transition From here to the second step. As you drag over the second step you will see a Transition To here text pop up.
23. Release the mouse when you see the Transition to here
24. When you release the mouse, a context menu will open. Choose the next event as the transition from step 1 to step 2
25. The final model would look like the one shown
26. We are ready to deploy the application and test it. Click on the Deploy icon
27. Click on the Deploy button and choose continue when prompted to save changes.
29. Your application is now running. Enter some data in the first step and click next
30. In the second step, the list of employees who can be assigned as Project Leads is displayed
You have successfully changed the user interface to Wizard based. Now without any further changes you can rerun your composite application and it will now use this new wizard based UI as its first step.
Related Content
SDN Homepage: SDN Composition Homepage in SDN: Composition Homepage . Link to download of SAP NetWeaver CE 7.1, SR3: Download . Forums for CAF and GP, Composition, Visual Composer 7.0 . Composition e-leaning page in SDN: CE e-learning . Composition blogs in SDN: CE blogs . Articles in SDN: articles . CE online help: online help .
Copyright
2008 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, Outlook, and PowerPoint 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, System i, System i5, System p, System p5, System x, System z, System z9, z/OS, AFP, Intelligent Miner, WebSphere, Netfinity, Tivoli, Informix, i5/OS, POWER, POWER5, POWER5+, OpenPower and PowerPC are trademarks or registered trademarks of IBM Corporation. Adobe, the Adobe logo, Acrobat, PostScript, and Reader are either trademarks or registered trademarks of Adobe Systems Incorporated in the United States 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, ICA, Program Neighborhood, MetaFrame, WinFrame, VideoFrame, and MultiWin are trademarks or registered trademarks of Citrix Systems, Inc. HTML, XML, XHTML and W3C 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. MaxDB is a trademark of MySQL AB, Sweden. SAP, R/3, mySAP, mySAP.com, xApps, xApp, SAP NetWeaver, 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 the trademarks of their respective companies. Data contained in this document serves informational purposes only. National product specifications may vary. These materials are subject to change without notice. These materials are provided by SAP AG and its affiliated companies ("SAP Group") for informational purposes only, without representation or warranty of any kind, and SAP Group shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP Group products and services are those that are set forth in the express warranty statements accompanying such products and services, if any. Nothing herein should be construed as constituting an additional warranty. These materials are provided as is without a warranty of any kind, either express or implied, including but not limited to, the implied warranties of merchantability, fitness for a particular purpose, or non-infringement. SAP shall not be liable for damages of any kind including without limitation direct, special, indirect, or consequential damages that may result from the use of these materials. SAP does not warrant the accuracy or completeness of the information, text, graphics, links or other items contained within these materials. SAP has no control over the information that you may access through the use of hot links contained in these materials and does not endorse your use of third party web pages nor provide any warranty whatsoever relating to third party web pages. Any software coding and/or code lines/strings (Code) included in this documentation are only examples and are not intended to be used in a productive system environment. The Code is only intended better explain and visualize the syntax and phrasing rules of certain coding. SAP does not warrant the correctness and completeness of the Code given herein, and SAP shall not be liable for errors or damages caused by the usage of the Code, except if such damages were caused by SAP intentionally or grossly negligent.