he SAP NetWeaver Development Environment SAP BASIS

The SAP NetWeaver Development Environment is used to develop both ABAP and Java applications. While the ABAP development is based on the SAP Web Application Server (SAP Web AS), the development environment for Java and Web Dynpro is based on Eclipse, which is implemented by SAP as the SAP NetWeaver Development Studio. From SAP Web Application Server release 6.30 and upward, Eclipse is the IDE (Integrated Development Environment) selected by SAP for the development of Java applications that makes up the SAP NetWeaver Developer Studio.

Although you can use any IDE to develop Java applications for SAP, the version of Eclipse included with SAP NetWeaver Developer Studio includes an open plug-in architecture to accelerate the Java development for SAP environments. You can use the release in the SAP NetWeaver software kits or, alternatively, download it from the SAP Developer Network Web site at www.sdn.sap.com. You need to be a registered user. The Eclipse IDE is one of the industry standards for establishing a development workbench. The official Web site is www.eclipse.org. On top of the Eclipse IDE, users can build development environments for any language, by implementing the necessary plug-ins.

The Eclipse plug-in architecture allows users to integrate several programming languages on top of the same IDE, to introduce other complementary applications such as

  • UML tools
  • Visual user interface editors
  • Online help

IDE Overview

The first time that the SAP version of Eclipse is run, you can see a similar screen to the one.

The SAP version of Eclipse (Copyright by SAP AG)

The SAP version of Eclipse (Copyright by SAP AG)

Let's briefly review the specific features of the developing environment, the way of organizing the work, and some of the additional tools included.

  • Editors. The main screen is known as the Editor, which is used to do the code writing. You can have several editors opened at the same time piled on top of each other.
  • Views. This is a type of "secondary" window. Views are used for many different tasks, such as to navigate within a hierarchy, show the content of a SQL statement, and others. Views can be considered as auxiliary windows to show information or request data.

With every plug-in you can define your editors and all the necessary views. In Figure there are several views. The vertical view to the left will normally show the directory tree for project (if any). The horizontal view shows a small agenda of pending tasks which can be entered directly by the users or automatically by Eclipse, depending on different events such as the compilation of a program.


The third component of the IDE are the toolbars. There are two types of toolbars:

  • Main tool bar, which contains shortcuts to the most common operation (Save, Open, and others) and buttons that allow users to launch external tools and tasks related with the active editor (run a program, debug, etc.).
  • Perspectives bar, which contains shortcuts to the perspectives being used in the project. A perspective is a set of windows (editors and views) that are related. For instance, there is a perspective Java that facilitates the development of Java applications and includes, besides the editor, views for navigating classes, packages, and so on. Users can also defined personalized perspectives. Besides the main toolbar, each view can have its own toolbar.

Programming with Eclipse

As stated previously, Eclipse is an IDE that is not oriented to any specific programming language. The use of a programming language depends if there is a plug-in to support it. The standard version of the Eclipse environment provides the required plug-in for the Java programming language, which is known as JDT. From the official Eclipse Web site you can also download the CDT plug-in for the C/C++ languages.

Code Completion

Code completion is the feature of the environment that automatically completes programming sentences being coded by the developer. The code completion feature in Eclipse is very similar to those implemented by other IDEs: when the developer stops writing for a time interval, the system shows all the possible continuations: reserved words, function names, variables, fields, and so on, starting with the written characters. Some specific characters, such as the period, automatically trigger the code completion mechanism without wailing for the time interval.


Eclipse also provides for the possibility of defining and using templates: code templates that are used often and that can be written automatically. Templates have two parts: a code block (or comment) frequently used and written automatically, and a siring that triggers the template. The JDT plug-in includes by default a significant number of templates, both for building code and for writing javadoc.

Code Formatting

Eclipse includes tools for performing automatically the formatting of the code according to some preestablished criteria. This function is the Source format included in the Context menu within the active editor. You can also manipulate code under the Source menu, including Comment and Uncomment, Add javadoc comment, Add import, Organize imports, and others.


Refactoring tools are used when the modifications or manipulations of code, or elements of the design, should involve several classes written in different files, belonging to the same project. These functions can be found under the menu Refactor.


Compilation is a task automatically launched when saving the changes made to the code. If required, there are the Rebuild Project or Rebuild All options in the Project menu option.


From the Run menu option in the toolbar, you can handle most execution options. The Run menu has two parts:

  • Run As allows the direct execution of the class that is being showed in the active editor, using the default run configuration.
  • Run ... allows for defining new run configurations. A run configuration is a set of parameters that will be used when launching a program. Some of these parameters can be a classpath, the specific JRE release being used of the parameters that will be passed to the class that is going to be run.

Debugging Applications

The main difference between a code editor and a good development environment is that the last one integrates a good visual tool for debugging the code being developed. Eclipse includes an easy, powerful, and user-friendly debugger. Launching the debugger is a task similar to running a program, but using the debugging pushbutton. The options are identical but when in debugging the program will make a step to step execution of the programs. When the debugger is launched, the system automatically opens the Debugging Perspective, in which users can see all the information regarding the program being debugged.

Developing Web Dynpros

The following are the basic concepts for developing Web Dynpro applications:

  • User Interface (UI) elements. UI refers to all the graphic elements that can be displayed and used in a Web Dynpro application.
  • Contexts. The context concept in Web Dynpro projects refers to a structured data repository that is used to save data. Each view has a corresponding context, which can save the local data of the view in a context, known as "view context."

Steps for the Creation Process of a Web Dynpro Application

Let's briefly describe the process of creating a basic Web Dynpro application, which includes three parts:

  • Concept, modeling, and visual design
  • Element declaration
  • Programming

Web Dynpro Concept and Modeling

This is the first step when developing a Web Dynpro application. It will consist in analyzing the application requirements and translating those requirements into visual elements for the Web Dynpro. The following tasks are involved:

  • Modeling: Creating a "view set" and inserting it in a window, creating views with visual content and empty view, defining a "view composition," creating the input and output of the view, and navigating among the views
  • Design: Designing the view layout and inserting the elements of the user interface in the views, assigning static values to individual attributes The visual elements that you can use when creating a Web Dynpro application are the following:
  • Web Dynpro window
  • View set
  • View area
  • View

The visual part of a Web Dynpro component is a Web Dynpro window, which is a group of views that can be organized in view sets. And these view sets can be divided in different view areas. In the Web Dynpro applications, views are the structures containing the visual elements of the user interface.

View Composition

This is the process to include views (with elements UI or empty) in the view areas of a view container and in the definition of structures of navigation between these views. For it, we have the tool Navigator Modeler within the Web Dynpro perspective.

Views Layout

In this step you have to define the view layout, that is, the UI elements that you want to appear within the views. These actions can be performed directly within the Web Dynpro perspective.

Basic Web Dynpro

This section shows a simple Web Dynpro application using the SAP NetWeaver Developer Studio. As we have already introduced, Web Dynpro is the SAP technology to develop Java applications using the same standards for all the SAP NetWeaver components and solutions. The following section shows a practical example creating a Web Dynpro with SAP NetWeaver Developer Studio 6.40. The application is made up of two "dynpros." The first one enters the name of the user for the application and the second one shows a dynamic and personalized greeting.

Basic Web Dynpro Application

In order to perform this practical example, there are some requirements:

  • Mandatory: You must have installed SAP NetWeaver Developer Studio in your workstation. This exercise assumes that the configuration options have the default values.
  • Mandatory: You must have access to the SAP J2EE engine.
  • Recommended: You need some good Java programming skills.

In this example we show all the steps required to develop, distribute, deploy, and run a basic Web Dynpro application. The user interface of our application will be composed by two views, which call each other. In the first view, the user is prompted to enter its name in an entry field. If the Go button is pressed within the view, the system will present a second view with a personalized greeting, using the name entered in the first view. When in the second view, pressing the Back button, the system will take us to the first view to interact again with the application.

The steps required for this example are the following:

  • Creating a Web Dynpro project
  • Creating a Web Dynpro component
  • Creating the views
  • Specifying the navigation options
  • Creating the actions and implementation of the navigation options.
  • Designing the views layout
  • Defining the Data Binding for the User Interface (UI) elements
  • Creating the Web Dynpro application
  • Building the application
  • Deploying the application
  • Running the application

Creating a Web Dynpro Project

In order to work with development objects within SAP NetWeaver Developer Studio, it is necessary to place them within a project. For this reason, the first step will be creating a project. We will use a wizard to generate our project structure, in this example, of the type Web Dynpro. Once the project is created, we will be able to place under it all the required components to develop the application. Launch the development environment, SAP Net Weaver Developer Studio, by doubleclicking on its icon.

Select File | New | Project to launch the wizard for creating new projects. Once you make this selection, the system will show the wizard for project creation. In the left panel, select the category Web Dynpro and in the right panel select the only existing project type, Web Dynpro Project. Then, press the Next button. Enter the project name, for example "Welcome" and leave the other entry fields with their default values. Next, press the Finish button. The wizard will generate an initial structure for the new Web Dynpro project and will automatically open the Web Dynpro perspective. The difference with the J2EE projects is that this perspective only allows us to see the project structure with two views, Web Dynpro Explorer and Navigator. If the system did not do it automatically, you should press the Web Dynpro Explorer tabstrip to see the project structure. This view will be the start point of all the actions that we must perform for completing this practical exercise.

Creating a Web Dynpro Component

The project structure was already created in the previous step but does not contain the elements that will be required to perform the application. These additional elements are encapsulated in what are known as Web Dynpro components. For that reason, before starting with the definition of layouts, navigation, or even handling, it is required to explicitly create a Web Dynpro component. The steps to create a Web Dynpro component are the following:

  • Expand the "Welcome" project structure until reaching the Web Dynpro Component node. To launch the creation wizard, open the Context menu and select the option Create Web Dynpro Component.
  • As component name, we enter "WelcomeComponent," and as packet name "com.offilog.examples.welcome" to specify where we want the Java classes to be generated. We also enter StartView as the name of the view. Leave the other suggested or default values and press the Finish button.
  • The wizard generates a Web Dynpro component in the project with a set of elements that we will be analyzing in the following steps in this example. We can see that the wizard has created the following:
    o A view with the name StartView. The view is the visual representations of our application.
    o A window with the same name as that of the created component, "WelcomeComponent." Windows include views.

    Creating a Web Dynpro Component

  • The system also opens the right panel of the Diagram view.
  • Save the current work by clicking on the Save button.

Creating Views

As we have already introduced, the views are the elements that allow users to interact with the application. The Web Dynpro projects allow users to organixe or divide the user interface in a set of views. We could consider each view as an independent entity, and together they make up all the elements of a graphical user interface. In our example application, we have two views. The first one, StartView, was already created with the wizard for the Web Dynpro components. Now we have to create the second one. The steps are as follows:

  • Expand the node Web Dynpro | Web Dynpro Components | WelcomeComponent | Windows.
  • Double-click on the window node WelcomeComponent of the Window node, so that you can see the diagram view in the right panel (in case it was not already active).
  • From the diagram view we are going to include a new view to our application. To do that, press the Embed a View button on the action palette (left side of the view).
  • Next, place the cursor on any position of the diagram and without releasing the mouse button, draw the rectangular area for the new view.
  • In the wizard that the system shows, select the option Embed New View, which is the default options, and click on the Next button.
  • Assign a name to the view, for example, ResultView, and leave the other fields with the default values. Click the Finish button. Now, in the diagram view, you have two areas that represent the two views. The first view, StartView, appears as the active view, while the new view ResultView shows as inactive. The difference is the color of the view. This means that when the application is executed, the first view to be shown is the one defined as active. We can also see that in the Web Dynpro Explorer a new view appears, ResultView, hanging from the WelcomeComponent window.

Save the current work by pressing the Save button.

Specifying the Navigation Options

In order to define the navigation among the views, we must first create the entry and exit points of each view. We can only define the navigation between the options using those points. The procedure is therefore divided in two steps:

  • Defining the entry and exit points (inbound and outbound)
  • Defining the navigation scheme

The next sections explain these topics.

Defining the Inbound and Outbound Points

The steps to be performed are the following:

  • In the diagram view we have two rectangular areas that represent the two views of our application. Select the rectangle on the first view, StartView, open its Context menu, and select Create Outbound Plug (creating an exit point).
  • The system will show a new dialog to request the name for the outbound plug. You will see in the diagram view that the first rectangle area includes now a new graphical element representing the outbound or exit point.
  • Next, select the second view, ResultView, in the diagram view, open its Context menu, and select Create Inbound Plug (create entry point).
  • Enter the name for the inbound plug in the Name field FromStartView, and leave the other fields with their default values. Press the Finish button.

With this simple procedure we have created the necessary plugs or points to navigate from the StartView to the ResultView. We are going to create additional navigation inbound and outbound plugs, proceeding as specified previously. The blue elements represent the inbound plugs, whereas the red ones represent the outbound ones. Save the project by pressing the Save button.

Defining the Navigation Scheme

To create a navigation link from the first view to the second, select the Create a Navigation Link icon from the actions palette and draw a line in the diagram view, from the outbound plug from the StartView up to the inbound plug for the ResultView. Repeat the same procedure to link the outbound plug for the ResultView with the inbound plug of the StartView.

The outbound plug for ResultView is linked with the inbound plug for StartView

The outbound plug for ResultView is linked with the inbound plug for StartView

You can also see these modifications from the Web Dynpro Explorer. With these actions we have defined the navigation scheme between the views of the application. The system also automatically created an event handler with the name onPlug<plugname> for each defined inbound plug. In the next section we will show how to implement the event handler onPlugFromStartView from the ResultView to generate dynamic text from the information entered in the view StartView. Save your work by pressing the Save button.

Creating Actions and Implementing Navigation

To navigate from view to view, we need an action to be generated within our view. This action can be activated by a graphical element such as a form button. Next we must implement the event handler that will react to this action and will implement the changes within the view. These actions are performed from the Designer View.

The steps are as follows:

  • To open the design view, double-click on the node representing the view in the Web Dynpro Explorer. A new view will show up in the right panel of the screen.
  • Select the Actions tabstrip and press the New button to create, with the help of a wizard, a new action.
  • As an action name, enter Go, and leave the other fields of the Event Handler with the default values. Select the outbound plug ToResultView as Fire Plug. Finally, click on the Finish button.
  • After pressing the Finish button, the Go action and its associated event handler onActionGo will show up in the actions list.

Repeat the previous steps to create the Back action for the ResultView view. In this case, the outbound plug ToStartView will be assigned as Fire Plug. Save all the work performed, but on this occasion press the Save All Metadata button (save all metadata) of the application toolbar. With the previous steps we have created the actions Go and Back. The necessary implementation for performing the navigation has been automatically inserted in the associated event handlers. For example, to verify the source code generated for the event handler onActionGo() we can press on the Implementation tabstrip in the designer view for the StartView view. This method contains only one line. To activate the navigation from the StartView view to the ResultView, we use the associated method with the outbound plug, wdFirePlugTo ResultView(). The predefined private variable wdThis is used when invoking the method and it is always mandatory if we need to make calls to methods within the view controller.

The source code for the event handler onActionBack is the following:

In the next step we will assign these actions to the view layout buttons. With this last action, the navigation between the views of the application will be completely defined.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status