If you read part I of this series, you know some basic principles of Web Dynpro. If you have not yet, please take the opportunity to learn more about concepts and definition of SAP's new model-driven programming model (part I). Part II covers real development stuff, so you will learn how to program a simple Web Dynpro application.
28 May 2004
Development of a Simple Web Dynpro Application Using the Graphical Tools of the SAP NetWeaver Developer Studio
This simple example of a Web Dynpro application shows the check of a credit limit. It can be used, for example, by a company wanting to check the credit limit of a customer who placed an order. The application uses a Web service that was published in the Internet and that can be called from there as the data model.
What is a Web service? A Web service is a Web application that can be used in a program. The scope of these applications ranges from simple queries to complex business processes that, when bound to backend systems, are called enterprise services. Once a Web service has been implemented, it can be called from any application. Web services use different standards, such as Web Service Description Language (WSDL) and SOAP (Simple Access Object Protocol). These standards are not only supported by SAP; SAP works in a number of different organizations (such as Web Services Interoperability WS-I) to improve the quality of the standards for our customers, for example the security mechanisms. Web services are published on the Internet in a kind of “Yellow Pages“: Universal Description, Discovery and Integration (UDDI).
Back to the example for Web Dynpro and Web Service: The SAP NetWeaver™ Developer Studio – Web Dynpro is a set of tools containing graphical development tools, wizards and templates that support the entire development process. They are shown and explained using the example for checking the credit limit:
1. Data Modeler
The Data Modeler is a graphic tool included in the set of Web Dynpro tools. By using the Data Modeler, you get efficient support for a number of central development tasks, such as creating a view, defining a controller, declaring a model for the component, nesting components, creating data links, as well as working with the wizards for forms, tables and buttons.
Using the set of icons visible at the left, the application developer can combine the appropriate elements (model, view, controller) and link them with Drag&Drop. In the view area you can see two views: the input view and the output view. The data model used is a Web service called CLService (Credit Limit Service). The CLServiceController controls the flow of data between the UI and the model.
In the example of the application for checking the credit limit, a Web service is implemented as model. The developer selects the appropriate icon for adding a new data model from the set of icons:
Figure 1. Model types
After specifying the data model (CLService), a URL or a local file containing the WSDL must be entered.
For the credit limit example, the Data Modeler has the following appearance:
Figure 3. Data Modeler
2. Navigation Modeler
The Navigation Modeler supports the design of the views and the navigation between the views:
Figure 4. Navigation Modeler
A set of views containing the input window (CLInputView) and output window (CLOutputView) as well as the corresponding outbound and inbound plugs for the navigation is visible. Inbound plugs define the possible entry points of a view, and outbound plugs permit you to leave it with a different view. Plugs are always assigned to exactly one view.
3. View Designer
The View Designer graphically supports the creation and implementation of the interface layout of a Web Dynpro application. In the credit limit example, a wizard that greatly simplifies the development process was used because reusable, complex UI elements are provided:
Figure 5. Template wizard
Several templates are offered for selection. With the template form, you can define attributes for a PDF document that is part of the view; the wizard for the table properties supports the definition of the data binding for the tables created in the view; and the ActionButton wizard permits you to define the properties for a button. These templates enable you to create the views for checking the credit limit without any manual programming:
Figure 6. Table Properties Wizard
Figure 7. ActionButton Wizard
Users of this application enter the partner number and credit segment in the input fields of the application and then press the button:
Figure 8. Data entry
As the result, the credit limit is displayed in the appropriate currency:
Figure 9. Result
At this point you might expect some coding examples and sequences. This application was created with no source text whatsoever using wizards and the flexible set of Web Dynpro tools.
Part III of the series will cover the design of a complex Web Dynpro application. Please stay tuned!