Creating an Extended Web Dynpro Application 

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.

Purpose

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:

·        Visual

·        Declarative

·        Programmatic

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

 

Visual

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

 

Declarative

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

 

Programmatic

·        Context initialization

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

·        Navigation

·        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.

 

 Get an overview of the quiz application to be developed.