GRC
HR
SCM
CRM
BI


Article

 

Your "Easy Way In" to Web Dynpro Development: New Design-Time Tools Now Available with SAP Web Application Server 6.30

by Karl Kessler | SAPinsider

April 1, 2003

by Karl Kessler, SAP AG SAPinsider - 2003 (Volume 4), April (Issue 2)
 



Karl Kessler,
SAP AG

The most recent release of SAP Web Application Server (Web AS) is a major milestone, both for SAP’s development and runtime environment for Java and J2EE and for its robust technology stack for SAP applications. With Release 6.30, developers will find a number of enhancements to our Web AS offering, and one especially anticipated highlight — the integration of Web Dynpro technology.

To match its innovative technology, Web Dynpro is accompanied by powerful tools for developers. These tools directly reflect the Web Dynpro philosophy, so developers will find that the tools can help lead them, step by step, through successful Web Dynpro design and significantly speed up the learning curve for this new technology. This article provides a preview of the design-time tools for Web Dynpro that come along with the 6.30 delivery and are now available in the Web AS 6.30 developer’s edition (including the CRM and Flight Data demos described here). So if you haven’t had the opportunity for some hands-on testing of Release 6.30, you soon will!

How the Web Dynpro Philosophy Has Shaped These Design-Time Tools
Web Dynpro tools were first presented to SAP customers and partners at SAP TechEd 2002. Since then, you’ve likely encountered plenty of information and resources1 on the Web Dynpro approach, the Model-View-Controller programming model, the use of the Eclipse open-source development environment, and the SAP NetWeaver Developer Studio (formerly referred to as “SAP Java IDE”). But to understand why the Web Dynpro design-time tools are constructed as they are — and why they are absolutely essential to successful development for the Web Dynpro runtime — a quick sketch of the Web Dynpro philosophy is useful.

Web Dynpro offers a new programming model for Web user interface design and implementation on top of the SAP Web AS J2EE stack. Just as the Web Dynpro runtime is seamlessly integrated with SAP’s J2EE engine, the design-time environment for Web Dynpro applications is tightly integrated in SAP’s NetWeaver Developer Studio and development infrastructure.

As of Release 6.30, SAP NetWeaver Developer Studio is based on Eclipse.2 The various Web Dynpro development tools follow the basic principles of all Eclipse plug-ins, but are extended to offer a very rich graphical user interface experience with built-in modeling support. This is critical, because when you design a Web Dynpro application, you are moving away from code-based programming and the “quick and dirty” web design that often leads to unclear or confusing navigation flows.

Instead, in a Web Dynpro design you leverage models, not just for designing layout, but also for handling navigation, and even for binding data to underlying business models. Code is only added at a very late phase in the Web application design — a new mindset for Java developers or ABAP developers who have worked with BSPs. The result is an approach to Web application design that lends itself easily to reuse and modification.

What may be most unfamiliar to ABAP developers, and perhaps even to Java developers, is the adherence to the Model-View-Controller (MVC) principle.3 With Web Dynpro, each Web user interface is roughly divided into three layers, each of which can be developed and modified independently:

  • Presentation (the view)
  • Interaction (the controller)
  • Business data (the model)

The design tools included in Web AS 6.30 take their cues directly from this model. Each tool ensures that these layers remain separate within each project, so you can easily access an individual layer when it comes time for modifications, without necessarily affecting the entire project.

An Overview of Your Project: Eclipse Workbench, Web Dynpro Explorer, and SAP NetWeaver Developer Studio

Like all SAP plug-ins for Eclipse, Web Dynpro tools can communicate with SAP’s development infrastructure. In the developer’s edition of Web AS 6.30, source files are stored in the Eclipse Workspace folder and deployed from Eclipse directly to the locally running J2EE engine. To allow you to start right in, with the developer’s edition both designtime (IDE) and runtime (J2EE engine) are residing on your local PC.4

When you start to develop your first Web Dynpro application (or want to familiarize yourself with an existing one), first open the Web Dynpro perspective from the Eclipse Workbench. In the Workspace (see Figure 1), you can view all project information, like a component in your application, in diagram form.

Figure 1 Eclipse Workbench: Viewing Your Project in Diagram Form

Any Web Dynpro applications stored in the Eclipse Workspace can be viewed in the Web Dynpro Explorer (see Figure 2). Eclipse itself does not offer much support for presenting logical hierarchies like these, so the SAP NetWeaver Developer Studio framework provides this level of abstraction.

NOTE!

You could also inspect a physical file hierarchy, but at this point that could be confusing. Because the Web Dynpro is so model-driven, a lot of Java code is generated automatically for you as you start to add components (e.g., Web Dynpro views) to your project.

Figure 2 Web Dynpro Explorer

Every Web Dynpro application consists of a Dictionary and a Web Dynpro part, as highlighted in Figure 2. When you select the Dictionary, you will see the common data types (field formats, input validations) that are used at different points in your application to enhance consistency.

The Web Dynpro consists of three categories: Applications, Components, and Models. Once you select an application, the Web Dynpro Explorer window opens and allows you to launch applications directly on the J2EE engine (see Figure 3). Under Applications, you can select, edit, run, and deploy the Web Dynpro application directly from the browser. Under Components you find all the reusable elements of a Web Dynpro application. A Web Dynpro component hosts all the Web Dynpro views and controllers. Models offers access to the underlying business data and business models. For example, in Figure 3, you can see that the business model is derived from BAPI methods (Bapi_Sflight_Getlist_Input, etc.).

Figure 3 Web Dynpro Explorer Connected to the Java IDE

Application Modeler: Overall Structure of the Web Dynpro Application

If you’re an ABAP developer, you can think of the Web Dynpro part of your application as a collection of Web Dynpro controls, such as labels and fields, that form a group similar to an ABAP subscreen. The overall structure of a Web Dynpro component is made visible in the Application Modeler (see Figure 4), which, as its name suggests, defines the model for a Web Dynpro application.

Figure 4 A Flight Data Example in the Application Modeler

The Application Modeler presents the various Web Dynpro views in the component’s main window (under Component/Windows/Main). Web Dynpro views are depicted as simple rectangles. The modeler shows the Web Dynpro views that make up the application — and the relationships between the different views — without actually displaying the view details.

Web Dynpro views can be organized as “viewsets” using layout containers such as the grid containers or so-called T layouts that are common in web user interfaces. From any view in Figure 4, you can drill down to obtain further details in the View Designer (see next section).

Figure 4 shows a very simple example. Of course, it is possible to display more than one Web Dynpro view in a particular pane in the browser. For any given area, the Application Modeler can help clarify which views are available for display. It also models how one view will trigger another, with “plugs” that are used to connect views. Every view has an inbound and an outbound plug. You can easily connect the outbound plug of one view with the inbound plug of a second view.

Let’s have a look at another, more complex example: a Customer Interaction Center (CIC). This example is also part of the demo in the SAP Web Application Server 6.30 developer edition, so you’ll be able to test it out for yourself as well.

As mentioned earlier, Web Dynpro is very model-driven. In this case, an employee is working in a call center. When a customer call comes in, the agent needs to find the customer’s record in the customer database. In the Application Modeler, the application models each step (see Figure 5). The agent enters search criteria in the search view BusinessPartnerSearch and triggers the list display of the customer contacts (SelectContactPersonFor...). By selecting a contact, the ContactDetail view is triggered. From here, the agent can display the orders, and for each order can drill down to the OEM details (ProductDetail). The agent is then ready to switch to a new viewset that contains a view to document the phone call (ContactDetail) and a view with the history for that customer (CustomerHistory), before moving on to the next call.

Figure 5 A CIC Example in the Application Modeler

This example demonstrates the power of Web Dynpro. Only the changed views are rendered in the browser for a flicker-free web user interface. The flow of control is made visible in the Application Modeler, making the overall application modular for easier customizing, without the need to write code. Changing the layout of your web application is simplified; developers with a purely Java background are often impressed that changing the layout can be as easy as rearranging the existing views!

View Designer: Details and Relationships Among Views

While the Application Modeler focuses on the views and their relationships, the View Designer is a WYSIWYG tool that edits view details. For instance, for the detailed look shown in Figure 6, you can drill down directly from the view of the Flight Data demo shown back in Figure 4.

Figure 6

View Designer

To reach the View Designer, open a Context menu from within the application’s model. The list of Web Dynpro controls (labels, fields, tables, radiobutton groups, etc.) that make up your view is conveniently listed. The views layout is displayed in the layout pane that allows you to select individual controls with the mouse. A rich palette helps you to select controls and drag and drop them in the layout to the outline view. Alternatively, the Context menu can provide a structural view of the layout, if you prefer.

Controller and Context Editor: User Interactions

Web Dynpro offers a multilevel controller concept. Every Web Dynpro view has its own associated view controller that handles all user interactions on a particular view (i.e., clicking a button, adding a keyword to a search field, etc.). Any code that spans multiple views is implemented in custom controllers that belong to a specific Web Dynpro component. Each controller manages its own context, which is structured hierarchically. You define the controller’s context in the Context Editor (see Figure 7).

Figure 7 Context Editor

In Web Dynpro terminology, the context hierarchy of a controller consists of model nodes. Model nodes that belong to different controllers can be mapped. This allows data to be transferred between the controllers automatically.

For example, going back to our Flight Data demo, if you have a scenario with a selection page (to select the flight) and a detail page (displaying flight details), you can map the model nodes accordingly. This means that with some mouse clicks, and without a single line of code, you can take a value that was entered on a selection page and set it to be transferred automatically to your detail page.

Summary

Web Dynpro tools are a comprehensive set of highly graphical development tools tightly integrated in SAP NetWeaver Developer Studio. Web Dynpro tools offer a model-driven approach to Web applications where development is done in a declarative way for each layer of your web application.

For more information on Web Dynpro, available as part of SAP Web Application Server, visit www.sap.com/netweaver.


1 For example, see Franz-Josef Fritz’s article “Web Dynpro Is Just Around the Corner — Will It Revolutionize Your Web UI Development and Runtime Environments?” in this issue of SAP Insider, as well as my articles “Build More Powerful Web Applications in Less Time with BSP Extensions and the MVC Model,” (January/February 2003 SAP Professional Journal, www.SAPpro.com) and “SAP’s Strategy Toward an Integrated, Full-Featured Java Development Environment” (January-March 2003 SAP Insider, www.SAPinsider.com).

2 See my discussion of Eclipse and the Java IDE environment in “SAP’s Strategy Toward an Integrated, Full-Featured Java Development Environment” in the January-March 2003 SAP Insider (www.SAPinsider.com).

3 This article just touches on the MVC philosophy and the different layers of the MVC approach. For more information, see my article, “Faster Development and Greater Flexibility for Your Web Applications? Two New Enhancements to the BSP Model Pave the Way” in SAP Insider (October-December 2002), www.SAPinsider.com, and “Build More Powerful Web Applications in Less Time with BSP Extensions and the MVC Model” in SAP Professional Journal (January/February 2003), www.SAPpro.com.


Karl Kessler joined SAP in 1992. He is the Product Manager of the ABAP Workbench and the SAP NetWeaver Developer Studio and is responsible for all rollout activities. You can reach him via email at karl.kessler@sap.com.

 

An email has been sent to:






More from SAPinsider



COMMENTS

Please log in to post a comment.

No comments have been submitted on this article. Be the first to comment!


SAPinsider
FAQ