How to Create an Online Mobile Application with SAP Web Dynpro

How to Create an OnlineMobile Application with

SAP Web Dynpro

SAP AG 2004, SAP NetWeaver Mobile, Karin Schattka / 2

Introduction

In this tutorial, an online application using SAP Web Dynpro iscreated.

First, a simple web application is created and shown on a browser,either on a laptop or a mobile device.

This application is then extended so that it connects to a backendSAP R/3 system.

The application compiles a list of contact names from partnerorganisations. This is displayed in the top part of the browser.

On clicking on a partner or a contact name, the contact details areshown in the bottom half of the table.

Let‘s start with the first part of the application ....

.... a simple web application.


Simple Web Application

Create a new WebDynpro Projectfirst.


and give it a name.


Web Dynprocreates the projectand some newnodes in theproject explorer.


Create a newcomponent with aright mouse click.


and give it a name.


Web Dynpro automatically creates some more nodes and adefault view.


A default View was created with a UI element (user Interfaceelement) showing a title. The text can be edited in the lowerproperties panel.


With a right mouse click on the applicationnode. The application is deployed to the SAPWeb Application Server. A PC browser or asimulator can be used to test the application.

Copy the url into a mobile device browser tosee your first mobile application.

You have just created your first Web Dynproapplication.


Extend the application to connect to backend SAP R/3

You can develop the application youhave just created to access data froma backend SAP R/3 system

Start by adding a new View. Add anOutbound Plug to the view of the mainmenu and an Inbound Plug to the newview using drag and drop.


Right mouse click on theoutbound plug to show acontext menu. Create anavigation link and choose theinbound plug of the new viewas the target.

The navigation is showngraphically.


The Views are linked. But we need a button for the user fornavigation. A right mouse click gives you the option to apply atemplate to the view.


Choose an Actionbutton.


Give it a label and fire the Plug forthe new view.


The button is displayed in the view.


The user gets abutton and is ableto navigate.

Please note thatyou have notentered one line ofjava code so far.


Now it is time to create a connectionto the backend R/3 system to requestdata.

Create a new model with a RFC(Remote function call to a SAPsystem) or choose a connection viaWeb Services to any other backendsystem.


In the next step, enter theconnection information, andconnect to the backendsystem.


Search for theremote functionmodule you want tocall ...


and select it. All the neededjava classes and dictionaryentries are created by WebDynpro, and this give you aframeset to work with thedata.


Use the new model in the component.


Request

Response

As a reminder …. Model View Controller (MVC)

Controller

Model

View

Defines application dataUsually connected tobusiness functionality

Defines application dataUsually connected tobusiness functionality

Visualizes the applicationdataVisualizes the applicationdata

Handles eventsUpdates application dataDefines control flow

Handles eventsUpdates application dataDefines control flow


Double clicking on the component you will seethis MVC-concept for your application


Drag and drop a connection between the ComponentController and the model.


This opens a wizardshowing parts of the rfcwhich can be used.


including the fields.


On completing the wizard, a connection between thecomponent controller and the model is shows graphically


Proceed in the same manner to connect the view,which will show the data, and the ComponentController.


Jump to the view which willshow the data and apply atemplate to display the data asa table.


In the wizard, mark the fieldsto be displayed. Finishing thewizard creates a table in theview.


Proceed in a similarmanner to add somefields for a detailview of the selectedbusiness partner inthe table.


Now a little bit of java code is required to initialize the function call, to bindthe data and to catch exceptions. Place the code shown below in the wdInitmethod of the controller.

Alm_Merep_070_Getlist_Input materialInput = new Alm_Merep_070_Getlist_Input();wdContext.nodeAlm_Merep_070_Getlist_Input().bind(materialInput);

try {materialInput.setUser("AHLAND");materialInput.execute();wdContext.nodeOutput().invalidate();

}catch (Exception e) {

wdComponentAPI.getMessageManager().raiseException("BAPI Call failed "+e.toString(),false);

}


Deploying the application shows youa list of business partners. Clickingon a row automatically changes thedetail view in the lower part of thepage.

What is going on? Clicking on a newrow fires a round trip to the serverand changes the current selection.The detail view shows the currentselection which is updatedautomatically.


On a Blackberry it could look like this.

How to Create an Online Mobile Application with SAP Web Dynpro

Documents