Developing Your First Web Dynpro
Application
In the following tutorial, you are introduced step by step to the basic concepts involved in implementing an elementary Web Dynpro application. The user interface for this Web application consists of only two views and allows you to switch between them. In the first view, the user is able to enter his or her name in an input field and navigate to the next view using a Go button. This name is then added dynamically to a text field and displayed in the welcoming text in the second view.
The user interface design for the tutorial application looks as following:
Objectives
By the end of this tutorial, you will be able to:
· Create a project for a Web Dynpro application and its associated development objects
· Create views and define a navigation scheme for the application
· Create actions for the views
· Implement event handlers
· Design a basic view layout
· Define data binding for user interface elements using context attributes
· Deploy and run a Web Dynpro application
Prerequisites
· A local instance of SAP NetWeaver Developer Studio is installed on your desktop
· You have access to SAP Application Server Java
· We recommend enhanced knowledge of programming language Java
Creating a Web Dynpro Project
To manage local development objects, you need a specific project in the Developer Studio. A Web Dynpro project serves as a container for Web Dynpro-specific resources and development objects such as Web Dynpro components, models, component interfaces, views, local dictionary data types. For this reason, you will use the appropriate wizard to generate a suitable project structure for the new Web Dynpro application.
Prerequisites
You have launched the SAP NetWeaver Developer Studio.
Procedure
1. Choose File → New → Project. The New Project wizard appears. From the list, select the Web Dynpro category, followed by Web Dynpro Project.
2. Choose Next. A dialog window appears informing you about restrictions and use cases for working with local Web Dynpro projects.
3. In the screen that appears, give your project the nameWelcome and leave the default settings for project contents and project language unchanged. Choose Finish.
Result
The wizard generates an initial structure for your new Web Dynpro project. The Web Dynpro Explorer provides a logical view of this project structure as opposed to a pure file and folder-based one. With this project view, you can access all Web Dynpro units. In addition, each Web Dynpro project provides access to local dictionaries, with the help of which you can create user-defined dictionary types. Additionally required projects resources, such as separate Java help classes, can be added to the Web Dynpro project through the resources node.
Creating The Application Unit
The project structure you have created does not yet include all the elements that enable you to define the specific functions of the whole Web Dynpro application. These additional elements are encapsulated in a Web Dynpro component that can contain any number of windows and views for visual representation and their corresponding controllers. Moreover, you also need an object that can be used to address and display the Web Dynpro component in the Web browser. This is why you create the logical unit application as an additional object. As an independent program unit it connects to an URL that can be accessed from the user via a window within the Web Dynpro component.
Prerequisites
Welcome project structure is displayed in Web Dynpro Explorer.
Procedure
...
1. Expand the Web Dynpro node in the structure of the Welcome project.
2. To start the relevant wizard, open the context menu of the Applications node, and choose Create Application.
3. Enter a name for the application unit, such as unit WelcomeApp, and specify the package name (example: com.sap.welcomeapp) in which the generated Java classes will be stored. Choose Next.
4. In the screen that appears, you must assign a Web Dynpro component to which the application is linked. Since a Web Dynpro component has not yet been created, the wizard creates a component at this point. Accept Create a new component and choose Next again.
5. In the next screen you specify some general values for the component. Enter the name WelcomeComp for your Web Dynpro component and specify the package name (com.sap.welcomeapp.comp). Accept the other suggested settings and choose Finish.
Result
The application wizard performs several generation routines. Once it has finished, it adds the new application object to the structure. Additionally, it inserts a substructure for the new Web Dynpro component. Furthermore the initial WelcomeView is automatically created for you; you find this view under the Views node in your Web Dynpro project.
Furthermore, a window unit with name <myproject>Window, in this example with name WelcomeWindow, has been generated; including the needed plug for application starting purposes. You will learn details about navigation definition in this tutorial lateron.
Now you can access all parts of the project using the graphical editor Component Modeler and use it for convenient top-down navigation through all of the layers and development objects.
Creating the Second View
Now you create a second view to provide an application that provides two different view layouts providing different information. You define the logical user interface unit with graphical support of the Component Modeler tool. Lateron, you will design the layout itself.
Procedure
...
1. To open the Component Modeler tool, double-click on the component name WelcomeComp within Web Dynpro Explorer.
2. Click once on Create View in the palette tool, then once into the graphical editor. Enter name ResultView for the new view.
3. Save your changes.
Result
When you double-click WelcomeComp in the project structure you will find two views defined for the application.
Specifying the Navigation Schema
In a Web Dynpro application, the views are connected by navigation links. One of these views is specified as the default view and is displayed the first time when the window is called for the first time. To define the view navigation, you create exit and entry points for each view using outbound and inbound plugs. Next you specify the navigation flow – always between an outgoing plug and an incoming plug - using navigation links. Also for data flow definition you get graphical support.
Prerequisites
· The two views WelcomeView and ResultView are available.
· A rebuild has been executed for the project (context menu entry in Web Dynpro Explorer)
· The Component Modeler tool has been started, and the logical application units created so far are displayed.
Procedure
The following procedure is split into two parts. First, you create the outbound and inbound plugs for both views. In a second step, you connect them using navigation links.
Creating Outbound and Inbound Plugs
...
1. Double-click on window WelcomeWindow To check the graphical WelcomeView reference now. To create a view usage for the newly defined ResultView, click once on Embed existing View, then once into the graphical editor. Select ResultView, next Finish.
2. Select the rectangle for the first view WelcomeView and open the context menu.
3. Choose Create Outbound Plug.
Alternatively you can use the corresponding function from the palette. Enter a name for the outbound plug, such as ToResultView, and choose Finish.
4. For the ResultView, do the analogous steps and choose Create Inbound Plug. Enter a name for the inbound plug, such as FromWelcomeView, leave the default settings for the event handler unchanged, and choose Finish. You have thus created the exit and corresponding entry point for navigation from the WelcomeView to the ResultView. These two plugs are displayed in the graphical modeling tool.
5. Repeat the previous steps to create the further plugs: A ToWelcomeView outbound plug for the ResultView and an inbound plug FromResultView for the WelcomeView are needed now. You have thus created the exit and entry points for navigation back from ResultView to the WelcomeView.
6. Save your changes.
Connecting the Plugs by Defining Navigation Links
...
1. To create a link for navigation from the first view to the second view, select icon Create Link from the palette and draw the line from the outbound plug of the WelcomeView to the inbound plug of the ResultView.
2. Repeat the procedure to create the navigation link back from the second to the first view.
3. Save the changes to keep editors synched.
Result
You have defined the navigation schema between the two views in the Web Dynpro application. An event handler with the name onPlug<NameOfPlug> has been automatically generated for each inbound plug, in this example with the names onPlugFromWelcomeView and onPlugFromResultView.
In one of the further steps that follow, you will implement the event handler onPlugFromWelcomeView so that it dynamically generates a text when the user navigates to the ResultView. In the next step, you define appropriate actions for the navigation.
Creating Actions and Implementing Navigation
To navigate from one view to the next, you need an appropriate action which you bind to a user interface element event, example: a button’s event with name onAction... You then implement the event handler which reacts to this action and triggers a view change by calling the outbound plug.
Procedure
...
1. To navigate to the View Editor for the first view, double-click WelcomeView in the graphical tool or the corresponding node in the WD Explorer project structure.
2. Choose the Actions tab.
3. Choose the New... pushbutton.
4. Now you create a new action in the wizard that appears: Enter the name Go for this new action. In field Text enter Go for the text to be displayed on all user interface elements with events bound to this action. Leave the event handler option unchanged. Assign plug ToResultView as a Fire Plug (to ResultView), finally choose Finish.
5. The new action Go and its associated event handler onActionGo are displayed in the list of actions.
6. Repeat the previous steps to create the Back action for the ResultView, this time assigning the plug ToWelcomeView as a Fire Plug and entering Back in the Text field.
7. Save the new entries by pressing the Save icon from the toolbar.
Result
You have created the Go and the Back action. The implementation of the navigation is automatically inserted into the associated event handlers.
To check the generated source code for event handler onActionGo(), open the Java Editor for the WelcomeView.java class (Editor → Open Java Editor, or choose Open → Java Editor on the view name in the Explorer). The method contains the following lines now at the end of the source code file:
public void onActionGo(com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent wdEvent ) { //@@begin onActionGo(ServerEvent) wdThis.wdFirePlugToResultView(); //@@end } |
To trigger navigation from theWelcomeView to the ResultView using outbound plug ToResultView, the application calls the outbound plug method wdFirePlugToResultView(). The predefined private variable wdThis is used for this method call. The wdThis variable is always required whenever you make method calls to the view controller’s private interface IPrivate<Name_of_View>, in this case IPrivateWelcomeView.
To check the generated source code for event handler onActionBack(), open the Java Editor for the ResultView.java class. It should look as follows:
public void onActionBack(com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent wdEvent ) { //@@begin onActionBack(ServerEvent) wdThis.wdFirePlugToWelcomeView(); //@@end } |
Designing the View Layout
You now create the layout for your user interface. You will add user interface elements to the two views as shown on the shots of this example application and then assign the appropriate element attributes.
The Layout tab in the graphical View Designer tool shows both views with a predefined default text “Hello World !”. Simultaneously, the Outline view displays a list of the current user interface elements included. All these elements are arranged under a root node; for the default view text, only one user interface element is needed: DefaultTextView. As soon as there are several elements needed for the view design, the element representation in the tree corresponds to their sequence in the layout. When you select a user interface element in the Outline view or in the graphical editor, its associated element properties are shown in the Properties view. There you would make further settings for the user interface elements.
Prerequisites
· The View Designer tool has been started by double-clicking the WelcomeView in the Component Modeler tool, or by double-clicking the corresponding view node in the project structure in Web Dynpro Explorer.
· The Layout tab containing the graphical View Designer editor is active.
Procedure
Designing the Layout for the WelcomeView
...
1. Choose element RootElement in the Outline view and assign the following properties for it (note that as soon as you place the cursor into the corresponding Value cell you will notice if you need to enter the value manually, or if there is a dropdown box containing the predefined values):
Property Value
layout GridLayout
cellPadding 5
colCount 3
stretchedHorizontally false
stretchedVertically false
2. Save your changes.
3. Choose the DefaultTextView that was initially generated and give it the following properties:
Property Value
design header2
text Welcome to your first Web Dynpro application!
colSpan 3
4. Again, save your changes.
5. Next, you add a new Label user interface element: In the Outline view, select RootElement and choose Insert Child from the context menu. Choose UI element Label, enter Label for the ID, press OK.
6. Create two more user interface elements: An InputField (for the name) and a Button (with Id go). Assign the following property values to the user interface elements:
For the label:
Property Value
text Your name
labelFor InputField
For the input field:
Property Value
tooltip Enter your name here
value <Leave this property blank. You will enter the value in a separate step.>
For the button:
Property Value
design emphasized
tooltip Go to the next view
Events onActionGo
Save your changes.
Designing the Layout for the ResultView
...
1. Next, you design a layout for the second view ResultView. So, open this view in the View Designer.
2. Choose RootElement from the Outline view and give it the following properties:
Property Value
layout GridLayout
cellPadding 5
colCount 2
stratchedHorizontally false
stratchedVertically false
3. Select the DefaultTextView that has been generated and assign the following properties:
Property Value
design header2
text
Delete the generated default value and leave this property blank. You
will find
out how to populate this value using data binding and will declare the
value retrospectively in the next step.
colSpan 2
4. In the Outline view, select RootElement again and choose Insert Child from the context menu. Add a new TextView UI element with the ID message. Create a button with nameback.
5. Assign the following property values:
For the TextView message:
Property Value
text <blank>your application is running successfully.
For the Back button:
Property Value
Text Go back to first view
Events onActionBack
6. Move up the message text view with context menu entry Move up in the Outline view on the element’s name.
Save the new data by choosing the Save icon from the upper toolbar.
Result
The View Designer displays the following layout for the first screen with name WelcomeView:
For the second screen, the designed layout for the ResultView looks as following:
You have now developed the basic parts of your application.
Defining the Controller Context
Each Web Dynpro component is supplied with a corresponding component controller. It serves as a global controller that is visible within the Web Dynpro component for all other controllers, and also for the view controllers. The data used in the Web Dynpro component and data from the views is stored in the context. Read-write access to this data is available using the controllers as a starting point.
In this step of the tutorial, you set the stage for data transport across the two views and map the context of the view controllers onto other controllers.
A Short Introduction to Context Theory
In the Web Dynpro concept, the term context is used to refer to a structured repository for saving controller data. This data from the contexts is managed in a hierarchical structure. Each context has a root node, underneath which the individual data fields (attributes) are stored in a tree structure. You create this tree structure according to the needs of your application.
Each view has a controller, which saves its local data in a context, known as the view context.
You can bind a user interface element to the context only if it belongs to the same view. However, the lifetime of a view context is too short, and its visibility too restricted for it to be suitable for saving data used across several views. This is where the standard context of the Web Dynpro application comes into play. This standard context belongs to the controller of the Web Dynpro component. Its lifetime is determined by the lifetime of the whole component. Moreover, this context can be made visible to some of the view controllers and not others. So that you do not have to copy data explicitly between two contexts, you can map the relevant elements of the two contexts to each other. This is known as context mapping. Whenever an element of a view context is mapped to the corresponding element of the component context, the data is stored in the (global) component context, not in the (local) view context.
Procedure
The following procedure is split into several parts. You start by creating a global data storage space using the component context. Then you create the necessary view contexts; either by mapping the view context to elements of the component context, or by creating the view context manually.
Defining a Context Attribute for the Component Controller
...
1. Open the Component Modeler tool by double-clicking WelcomeComp in Web Dynpro Explorer.
2. To navigate to the component controller editor from within the Component Modeler tool, double-click component ComponentController.
3. Within the Context tab, you now open the context menu for root node Context, and choose New → Attribute. Create a new value attribute in the wizard that appears. Select Manually since you need to create the context from scratch. Enter the name Username and keep string as attribute type. Press Finish. The value attribute is added to the context root node. Save your changes.
You will use this context definition for the Web Dynpro component later on when you implement the data transfer from the (local) view context.
Mapping WelcomeView Context to Component Controller Context
...
1. Switch back again to the graphical Component Modeler editor by double-clicking WelcomeComp. To determine that there shall be a mapping definition between the two contexts, choose Create Data Link from the palette and draw a line from WelcomeView to Component Controller. In the wizard that appears you now map context data between the view context and the component context.
2. Drag the Username node in the component controller context to the root node of the view controller context, and drop it.
3. Choose Finish. You have now created a new attribute element for the view context and mapped it to the corresponding component context element (check also direction of displayed arrow from left to right).
Mapping ResultView Context to Component Controller Context
...
1. Repeat the mapping steps you did for WelcomeView to enable data flow also between the second view ResultView and the component controller.
Mapping Component Controller Context to Window Controller Context
...
1. Open the modeling tool as usual by double-clicking WelcomeComp, and define a graphical data link from the Window Controller unit to the Component Controller unit. The mapping wizard opens.
2. Drag and drop attribute Username from the right to the left, and save your changes.
The graphical tool displays the component now as follows:
We recommend that before you go on with the next step, that you check your context mapping definitions by double-clicking on the graphical links. It is necessary that the username value is transferred within each dataflow definition. If you have missed one definition step, then it is no problem to do it subsequently.
Defining Data Binding for User Interface Elements
Now you need to make sure that the value from the input field in the WelcomeView is used when the welcome text is generated dynamically in the ResultView. However, you do not need to implement a data transport explicitly: The Web Dynpro concept allows you to implement this in a user-friendly way, using data binding to a context.
Procedure
...
1. Open the View Designer for the WelcomeView by double-clicking the view name in Web Dynpro Explorer or in the Component Modeler tool. Choose the Layout tab.
2. Mark the input field element with the cursor. In the Properties view, select the Value property cell and click the Bind button on the right. In the dialog box that appears, choose context attribute Username and confirm with OK.
3. Save the changes.
Implementing the Data Transport Across The Views
Using this sample application, a user is able to enter some text data (in this case the user name) in an input field in the first view and navigate to the next view using a Go button. This text data is then displayed in the welcoming text in the second view. Using data binding, the entered text can be added dynamically to a text field of the second view. This step has to be accomplished in the event handler for the inbound plug onPlugFromWelcomeView(). This event handler had automatically been created and assigned to the window unit (Remember: The window is the main user interface unit of the whole application which contains the single views as kind of integrated units).
Procedure
...
1. To generate a line of text dynamically using data binding, open the Java Editor for WelcomeWindow, and add the following lines to event handler method onPlugFromWelcomeView();to enter the source code, you can use the code assist function provided by the Java editor (Ctrl + space).
public void { //@@begin onPlugFromWelcomeView(ServerEvent)
//String headerText = "Congratulations "; //headerText += //headerText += "!"; //@@end } |
The event handler for the inbound plug with name onPlugFromWelcomeView() is called when the program enters the ResultView. You use this method to generate text content dynamically. The dynamic value is saved across local view contexts and made available by means of the associated context element.
2. Save the new data.
Building, Deploying, and Running the Application
You have now reached the last stage in this tutorial. However, some preparations are essential, before you can deploy and run the application successfully.
Prerequisites
· In the Developer Studio settings, the Application Server has to be correctly selected. To check the server settings, choose Window → Preferences → SAP AS Java.
· SAP Application Server Java has been launched.
Procedure
...
1. If not already done so, save the data for your Welcome project in their current state.
2. In WD Explorer, from the context menu of the project node Welcome, choose Rebuild Project.
3. To deploy the project to the application server – that means that you make all services known to server – choose context menu entry Deploy. You will get a success message in the Tasks view and additionally by a popup when deploying the project worked well. In the Tasks view there must not be any errors displayed before you go on with the next step to run the application.
4. In WD Explorer, open the context menu for the application object WelcomeApp and put the cursor on the application unit, then choose Deploy new Archive and Run.
Result
The Developer Studio launches the Web browser and chooses the active view WelcomeView, the application is running. In addition to the application itself, you get some session and request analysis information at the bottom of the browser window.