Entering content frame

Process documentation Creating an Extended Web Dynpro Application Locate the document in its SAP Library structure


You can download the Web Dynpro project for the current tutorial from the Software Developer Network SDN (http://sdn.sap.com -> Web Application Server -> Web Dynpro -> Sample Applications and Tutorials) in two versions: one skeleton version you can use for exercises and one final version (solution) for an immediate build, deployment and run on the Java engine of the SAP Web Application Server.


You will now be familiarized with additional main concepts of Web Dynpro-based application development by creating a short quiz application. You will learn about the following aspects of the Web Dynpro programming model, for example:

        Creating a Web Dynpro application with multiple views and a navigation structure

        Working with event handlers (action event handlers, inbound plug event handlers) that you declare yourself

        Reading contents from the property resource bundles and storing them in a Web Dynpro context (value nodes, value node elements)

        Dividing data between view controllers and component controllers using context mapping

        Manipulating UI element attributes at runtime using data binding

        Integrating the Web Dynpro application in the SAP Enteprise Portal

Process Flow

In the following procedure, you learn how to create this Web Dynpro application. Again, you must first create a new Web Dynpro application in a Web Dynpro component.

The development process of a Web Dynpro application has the following categories:




The following table shows which development steps belong to which category.



View Modeling

        Creating a view set and inserting it into a window

        Creating views or empty views and inserting them into a window

        Defining a View Composition

        Creating inbound plugs and outbound plugs

        Defining Navigation Links

View Design

        Designing view layouts in the View Designer

        Inserting UI element into views and assigning a static value to individual attributes



Controller Contexts

        Defining a context value node with attributes for quiz data elements in the component controller

        Defining the use of the component controller in view controllers

        Defining context mapping between the view controller context and component controller context

View Contexts

        Defining layout-specific value attributes (for example, Visibility)

Data Binding

        Data binding of state-dependent UI element attributes to corresponding context value attributes

User Interaction

        Defining actions for user interaction in the view controllers

        Assigning actions to the event handlers of the corresponding UI elements

Interface View Controller

        Defining the exit plug GotoURL



        Context initialization

        Initializing different contexts in the corresponding wdDoInit() controller methods (for example, quiz data elements and layout-specific value attributes)


        Triggering navigation events in the corresponding action event handlers

        State Changes

        Customizing context data in action event handlers and inbound plug event handlers

        Changing the lead selection of a context value node with the cardinality 1 ..n (QuizData) to display a corresponding value node element using data binding


We recommend that you structurally subdivide the development process of a Web Dynpro application into the categories visual, declarative, and programmatic. The table shows that the Web Dynpro programming model provides good support of the visual and declarative approach, so the programmatical aspect can be reduced to a minimum. With the exception of the predated implementation of the navigation event handler, this structure reflects the sequential development process of the quiz example application.


This graphic is explained in the accompanying text Get an overview of the quiz application to be developed.


Leaving content frame