Show TOC Start of Content Area

Procedure documentation Importing a Project Template  Locate the document in its SAP Library structure

To restrict the development of this example application to the actual content covered, there is a predefined Web Dynpro project template available in the SAP Developer Network (SDN) http://sdn.sap.com (Web Application Server | Web Dynpro | Code Samples |Sample Applications and Tutorials).

In the remainder of this tutorial, you will gradually add to this initial project template until is a complete Web Dynpro project, which is also available for separate download. 

·        TutWD_FlightList_Init.zip: Initial Web Dynpro project template

·        TutWD_FlightList.zip: Complete Web Dynpro project with access to ABAP functions

Prerequisites

·        You have access to the SAP Developer Network (http://sdn.sap.com) with a user ID and password.

·        The SAP NetWeaver Developer Studio is installed on your computer.

Procedure

Importing the project template into the SAP NetWeaver Developer Studio

...

1.       Call the SAP NetWeaver Developer Network using the URL http://sdn.sap.com and log on with your user ID and the corresponding password. If you do not have a user ID, you must register before you can log on.

2.       Navigate to Web Application Server area and then to the Sample Applications and Tutorials section.

3.       Download the ZIP file TutWD_FlightList_Init.zip, which contains the initial Web Dynpro project TutWD_FlightList_Init and save it in a local directory or directly in the work area of the SAP NetWeaver Developer Studio.

4.       Unzip the contents of the ZIP file TutWD_FlightList_Init.zip into the work area of the SAP NetWeaver Developer Studio or in local directory.

5.       Call the SAP NetWeaver Developer Studio.

6.       Import the Web Dynpro project TutWD_FlightList_Init.

The Web Dynpro project TutWD_FlightList_Init then appears in the Web Dynpro Explorer for further processing and editing in the context of this tutorial. The warnings triggered by the Web Dynpro project TutWD_FlightList_Init can be ignored at this time, since we will extend the Web Dynpro project during the remainder of this tutorial and will thus remove the displayed warnings. Without the additions we will make, the initial Web Dynpro project template TutWD_FlightList_Init cannot be executed.

Initial Project Structure

After you have imported the Web Dynpro project template TutWD_FlightList_Init, the following project structure is displayed in the Web Dynpro Explorer:

Web Dynpro project structure

 This graphic is explained in the accompanying text Web Dynpro project: TutWD_FlightList_Init

 This graphic is explained in the accompanying text Web Dynpro application: FlightListApp

The application FlightListApp displays the interface view of the Web Dynpro component FlightListComp in the browser window.

 This graphic is explained in the accompanying text Web Dynpro component: FlightListComp

 This is the Web Dynpro component that contains our entire application.

 This graphic is explained in the accompanying text Custom controller: FlightListCust

We will extend this controller with data and methods that you should not assign to a particular    view, but that concern both the following views.

 This graphic is explained in the accompanying text Views:

·      SearchView: In this view, the user can enter the departure and arrival cities in the appropriate input fields and trigger the display of the flight data using a Search button.

·      ResultView: As a result of this query, all the available flight data will be displayed as a table in the ResultView.

This graphic is explained in the accompanying text Window: FlightListWindow

Initially contains a view set with two view areas (ViewSetDefinition: GridLayout with one column and two rows). The two views SearchView and ResultView are already embedded.

 

In the Navigation Modeler, the initial Web Dynpro project looks as follows:

This graphic is explained in the accompanying text

The FlightListWindow contains a FlightListViewSet, which consists of 2 view areas.

The upper view area contains the SearchView and the lower one the ResultView.

 

 

Next Step:

Developing the Example Application – Steps

 

End of Content Area