step by step guide to basic web dynpro abap

57
Basic Web Dynpro ABAP Step by step guide Objective of this document: To give an understanding and knowledge on advanced technology to everyone who wanted to have knowledge in the area of Basic Web Dynpro ABAP

Upload: kranthi-kumar

Post on 16-Jan-2015

879 views

Category:

Documents


7 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Step by step guide to basic web dynpro abap

Basic Web Dynpro ABAPStep by step guide

Objective of this document:To give an understanding and knowledge on advanced technology to everyone who wanted to have knowledge in the area of Basic Web Dynpro ABAP

Page 2: Step by step guide to basic web dynpro abap

Ver 1.0

Agenda

What is Web Dynpro for ABAP?Objectives of Web DynproWeb Dynpro Component ArchitectureWeb Dynpro Component Development

Web Dynpro is the SAP Netweaver programming model for user interfaces (UIs).

The Web Dynpro programming model is based on the Model View Controller paradigm, and has the following features that build on the classic dynpro model:

Clear separation of business logic and display logic Uniform Meta model for all types of user interfaces Execution on a number of client platforms Extensive platform independence of interfaces

What is Web Dynpro for ABAP?

Web Dynpro for ABAP (WD4A, WDA) is the SAP standard UI technology for developing Web applications in the ABAP environment. It consists of a runtime environment and a graphical development environment with special Web Dynpro tools that are integrated in the ABAP Workbench (SE80).

Web Dynpro offers the following advantages for application developers: The use of declarative and graphical tools significantly reduces the

implementation effort Web Dynpro supports a structured design process Strict separation between layout and business data Reuse and better maintainability by using components The layout and navigation is easily changed using the Web Dynpro tools Stateful applications are supported – that is, if the page is changed and the

required data remains intact so that you can access it at any time throughout the entire application context.

________________________________________________________________________Page 2 of 48

Page 3: Step by step guide to basic web dynpro abap

Ver 1.0

Objectives of Web Dynpro

Model-based UI development Enforce clear separation between UI logic and business logic Little coding, lots of design Declarative UI development

Central implementation of user interface standards Accessibility support Adobe Forms integration Centrally provided UI elements Internationalization support

SAP Web Dynpro uses principles of MVC paradigmController: handle the user input and steers the applicationViews : define the layoutModel : holds and provides the business logic

See the MVC Architecture diagram:

Model View Controller (MVC)

________________________________________________________________________Page 3 of 48

Page 4: Step by step guide to basic web dynpro abap

Ver 1.0

Web Dynpro Component Architecture

A Typical Web Dynpro Component diagram is

Web Dynpro Component containsWindowsViews

UI elements Layout

Controllers Context Data Event Methods Attributes

Component Interface Interface Controller Interface View

View Is embedded into window Defines the visible layout via predefined UI elements Don’t contain any HTML or scripting

________________________________________________________________________Page 4 of 48

Page 5: Step by step guide to basic web dynpro abap

Ver 1.0

UI elements Are the smallest UI building blocks (button, input field) Available as provided UI element libraries Have properties which steer their behavior Can be nested with Container UI elements Are positioned in hierarchical structure

Controller Contains the logic of the UI layer Implements event handlers Implements action handlers Each view has its own view controller

Context Hierarchy of nodes and attributes Nodes and attributes can be bound to properties of UI elements Framework cares about updating the values

Each node can be a collection of elements.Min and max number of elements in a node is steered byCardinality (0...1) The node contains only one element instance, which must not be instantiated(1...1) The node contains only one element instance, which is instantiated automatically(0...n) The node can contain multiple element instances, of which none have to be instantiated(1...n) The node can contain multiple element instances, of which at least one must always be instantiated (and is instantiated automatically)

Component Controller Controller which is the backbone of the component Has its own Context Contains the logic for interaction with the model (ABAP class, function modules,

BAPIs, Web Services)

________________________________________________________________________Page 5 of 48

Context Root Node

Node Elements

Page 6: Step by step guide to basic web dynpro abap

Ver 1.0

Step by step guide to work on Web Dynpro ABAP.

1. Log into SAP system.

2. Enter transaction code SE80 (As shown in the above screenshot) to launch the Object Navigator, where you can create Web Dynpro Component or Web Dynpro interface.

Taking an example of a Web Dynpro Component, I will explain you the step by step procedure how to work on.

The Expected behavior of the application is to be:

Enter the Flight (Airline Code – CARRID).Enter Flight Connection Number-CONNID andEnter Flight date-FLDATE in the initial screen.Click on ‘Display Flights’ Button to see the List of available flights for given conditions.The list of available flights needs to be displayed on the WD table in the next screen.

________________________________________________________________________Page 6 of 48

Page 7: Step by step guide to basic web dynpro abap

Ver 1.0

3. Enter WD component name in ‘Z’ name space to create new one and press ‘ENTER’.

Presses “Yes” on popup to create new WD component.

________________________________________________________________________Page 7 of 48

Select the ‘Web Dynpro component / interface’ option from the dropdown list as shown here.

Page 8: Step by step guide to basic web dynpro abap

Ver 1.0

Enter the WD component description and press ‘OK’ button.Note: When WD component is crated, one view and window will get created default.

It will prompt to specify package and select “Local Object” button to store under local objects (temporary-> non transportable)

________________________________________________________________________Page 8 of 48

Page 9: Step by step guide to basic web dynpro abap

Ver 1.0

Now, your new WD component has been created.Activate the Created WD component to proceed with development.

________________________________________________________________________Page 9 of 48

Page 10: Step by step guide to basic web dynpro abap

Ver 1.0

How to create a view : Follow the screenshots shown below to create a view.

Views are embedded into windows and these actually displayed on the WD application screen when executed.

________________________________________________________________________Page 10 of 48

Page 11: Step by step guide to basic web dynpro abap

Ver 1.0

It will open a new popup to maintain the View name and description. Click on OK’ button.

Click on ‘SAVE’‘VIEW’ will contain following methods which can be controlled at view level. WDDOMODIFYVIEW - Method for Modifying the View before RenderingWDDOINIT - Controller Initialization MethodWDDOBEFOREACTION - Method for Validation of User InputWDDOAFTERACTION - Method for non-action specific operations before

NavigationWDDOEXIT - Controller Clean-Up Method

________________________________________________________________________Page 11 of 48

Page 12: Step by step guide to basic web dynpro abap

Ver 1.0

A view has exactly one view context, which contains the data required for the view.

WindowsIn the Window maintenance screen, If you right-click on window ZWD_EXAMPLE, you can choose ‘Embed View’ from the Context Menu. Embed the V_FLIGHT_DETAILS View.Note: View MAIN is already embedded in to the window, since it has assigned when WD component was created.

________________________________________________________________________Page 12 of 48

Page 13: Step by step guide to basic web dynpro abap

Ver 1.0

Select ‘Embed view’ it will open a popup to assign the view to be embedded Click on F4 to display the number of views that created select the view V_FLIGHT_DETAILS.

Click on OK then it will display the screen as shown below.

________________________________________________________________________Page 13 of 48

Page 14: Step by step guide to basic web dynpro abap

Ver 1.0

Navigation between ViewsTo define the navigation between two views, you need to create exit and entry points for each view using outbound and inbound plugs. It means you must create an inbound plug for one view and an outbound plug for the other view

Inbound plugs: define the possible starting points of a viewOutbound plugs: can be used to call a subsequent view.Every view created in the WD component will have only one inbound plug and multiple outbound plugs.In contrast, an inbound plug can be controlled by several outbound plugs.

Select the view ‘MAIN’ to define the inbound plugs as shown in the below screenshots.Inbound Plug is TARGET_PLUG_NAME

________________________________________________________________________Page 14 of 48

Page 15: Step by step guide to basic web dynpro abap

Ver 1.0

Select the view V_FLIGHT_DETAILS to define the inbound plugs as shown in the below screenshot.

Note: Outbound plugs can also be created here, but in our case we are creating the outbound plugs when buttons are created.Map the inbound plugs and outbound plugs to happen navigation between views as shown in the below screenshot. (Click here to see how outbound plugs has created)

________________________________________________________________________Page 15 of 48

Page 16: Step by step guide to basic web dynpro abap

Ver 1.0

Select the inbound plug (IN_FLIGHT_DET) of view V_FLIGHT_DETAILS and drag drop at the outbound plug (DISP_FLIGHTS) of view MAIN to make navigation from MAIN view to V_FLIGHT_DETAILS upon clicking ‘Display Flights’ button.Select the inbound plug (IN_MAIN) of view MAIN and drag drop at the outbound plug (BACK_TO_INIT) of view V_FLIGHT_DETAILS to make navigation back to MAIN view from V_FLIGHT_DETAILS upon clicking ‘BACK” button.

Here, we will describe each and every tab displayed in the Web Dynpro component controller.

Properties:Properties will contain details such as description, created by, created on...Etc...You can see them in the below screenshot.

Context:

________________________________________________________________________Page 16 of 48

Page 17: Step by step guide to basic web dynpro abap

Ver 1.0

The data used in the component or in the view are stored in the context.Each context has a root node, underneath which the individual data fields (attributes) are stored in a tree structure.This property of a node is known as its cardinality.

Context ProgrammingGlobal Interface methods that will be used to work with the contexts IF_WD_CONTEXT – the context itselfIF_WD_CONTEXT_NODE – a context nodeIF_WD_CONTEXT_ELEMENT – an element of a nodeIF_WD_CONTEXT_NODE_INFO – context node info

Follow below steps to create a context node in the current component.

________________________________________________________________________Page 17 of 48

Page 18: Step by step guide to basic web dynpro abap

Ver 1.0

Click on ‘node’

Mention all the details in the popup click on button to add the required elements to the current node.

________________________________________________________________________Page 18 of 48

Page 19: Step by step guide to basic web dynpro abap

Ver 1.0

Select the required elements whichever is used in the initial screen. Note: You can select as many as number of fields, but since we are going to use only CARRID, CONNID and FLDATE, we have selected only those.

Click ‘OK’ button.

Repeat the same steps to create another node (FLIGHT_DETAILS) which will display flight details on the WD table.

________________________________________________________________________Page 19 of 48

Page 20: Step by step guide to basic web dynpro abap

Ver 1.0

Select the required fields whichever you wanted to show them on the FLIGHT_DETAILS table.

________________________________________________________________________Page 20 of 48

Page 21: Step by step guide to basic web dynpro abap

Ver 1.0

Now, we have two nodes created for the current component controller.

The nodes whichever has been created at the component controller level can be used only at component controller level and the data stored in these nodes can be accessed only at component controller level.But, to make use of these nodes at view level, we have to map them irrespective of the views created in the current WD component.For that, we will call it as context mapping.

________________________________________________________________________Page 21 of 48

Page 22: Step by step guide to basic web dynpro abap

Ver 1.0

Context MappingNodes of Component Controller context can be mapped to nodes of other contexts(views)WD Framework cares about data transport (references)

Select a view ‘MAIN’ select ‘Context’ tab to do context mapping.

See the below screenshot to find, how does it displays when context mapping has been done to the current view.

________________________________________________________________________Page 22 of 48

Select the context node from here (right side) which you wanted to map with current view drag and drop to the view level (left side) context.Here, we wanted to have a mapping with context node ‘FLIGHT_INPUT’ since the view will be considered as an initial screen.

Page 23: Step by step guide to basic web dynpro abap

Ver 1.0

Now, select the second view V_FLIGHT_DETAILS where the flight details have been displayed, do the context mapping as required.

AttributesThe following screenshot have 3 attributes.WD_CONTEXT Reference to Local Controller Context (IF_WD_CONTEXT_NODE)WD_THIS Self-Reference to Local Controller Interface

________________________________________________________________________Page 23 of 48

Page 24: Step by step guide to basic web dynpro abap

Ver 1.0

WD_ASSIST Reference to the Instance of Assistance ClassWe also can create our own attributes here depends on the requirement.

EventsCurrently, we don’t have any events usedMethods

These methods are called as hook methods, which comes default when WD component is created successfully.

WDDOINIT is called automatically when a controller is initialized for the first time.

This method can contain the following steps, for example:

________________________________________________________________________Page 24 of 48

Page 25: Step by step guide to basic web dynpro abap

Ver 1.0

Creating instances of help classes Initializing controller attributes Triggering authorization checks (recommended for help classes) Setting initial values of the controller context Instantiation of used component

As we know this method is used for initializing, send the reference of WD_CONTEXT (reference of IF_WD_CONTEXT_NODE) to the assistance class.Method WDDOINIT.* ------------------------ Initialize Assistance Class --------------

  wd_assist->initialize (io_context = wd_context).

endmethod.

WDDOEXIT is called by the runtime when exiting the controller and can be used for releasing locks, for example.Depending on the controller settings, the local controller interface also contains the methods WDDOBEFORENAVIGATION, WDDOPOSTPROCESSING.

Designing the Layout:

Select the MAIN view here, which acts as initial screen for entering the flight details.

Step1: Inserting element in to the layout.

________________________________________________________________________Page 25 of 48

Page 26: Step by step guide to basic web dynpro abap

Ver 1.0

If you want to see the detailed documentation for the selected element type, follow the below screen shot.

Transparent Container UI element allows you to arrange its inserted UI elements through the specified layout. It makes you to manage the inserted elements very easily.

Repeat the same steps to design the MAIN view as shown here. (Step1 to insert an element in to the view)

________________________________________________________________________Page 26 of 48

Page 27: Step by step guide to basic web dynpro abap

Ver 1.0

Click on OK’ button.

________________________________________________________________________Page 27 of 48

Page 28: Step by step guide to basic web dynpro abap

Ver 1.0

Repeat the same steps to design the view layout to be displayed as shown in the below screenshot.

Alignment of fields displayed in the viewSelect ‘ROOTUIELEMENTCONTAINER’ to maintain the layout properties.Here, we have four different layouts.

Flow Layout Grid Layout Matrix Layout

________________________________________________________________________Page 28 of 48

Page 29: Step by step guide to basic web dynpro abap

Ver 1.0

Row Layout

A standard Web Dynpro layout (for Matrix Layout) is used to arrange the UI elements on the Web Dynpro view.

Select the ‘transparent container’ to set the layout property and recommended to use ‘Matrix layout’ across all the view elements.

________________________________________________________________________Page 29 of 48

Recommended to use ‘Matrix Layout’

Page 30: Step by step guide to basic web dynpro abap

Ver 1.0

________________________________________________________________________Page 30 of 48

Layout Data have two different properties:Matrix Data: View element will align to be in the same line.MatrixHeadData: To display the view element in next line.(As shown in this screenshot)

To display the proper label beside the input field, assign the proper input field name to ‘label for’ property

Page 31: Step by step guide to basic web dynpro abap

Ver 1.0

Follow the same steps to bind the corresponding ‘node elements’ to the other ‘view elements’.

________________________________________________________________________Page 31 of 48

Click on the value property displayed

toBind the node element to store the given value in this input field. Upon clicking, it will open a popup to bind the node element as shown here.

Page 32: Step by step guide to basic web dynpro abap

Ver 1.0

________________________________________________________________________Page 32 of 48

Page 33: Step by step guide to basic web dynpro abap

Ver 1.0

Create a button ‘Display Flights’. Upon clicking this button we will navigate to next screen where we can see the list of available flights.

The UI element Button represents the pushbutton on the screen. Create an event handler to execute when button is pressed.Click on ONACTION event it will open a new popup maintain the action name and outbound plug as shown here in the below screenshot.

________________________________________________________________________Page 33 of 48

Page 34: Step by step guide to basic web dynpro abap

Ver 1.0

Click OK button it will ask you to create an outbound plug click YES.ONACTIONDISP_FLIGHTS event handler has been created in the view MAIN.

Use SOTR_EDIT transaction to create OTR text.

________________________________________________________________________Page 34 of 48

Page 35: Step by step guide to basic web dynpro abap

Ver 1.0

Click Create button to create a OTR text. Click ‘SAVE’ OTR text is created

Copy the Alias name from OTR text Specify the text property for view element as ‘$OTR:$TMP/DISP_FLIGHTS’ as shown in the below screenshot (Red colored circle).

________________________________________________________________________Page 35 of 48

Page 36: Step by step guide to basic web dynpro abap

Ver 1.0

Now, Activate the WD component

Select the view V_FLIGHT_DETAILS to design the layout.

________________________________________________________________________Page 36 of 48

Page 37: Step by step guide to basic web dynpro abap

Ver 1.0

Select the table element that created right click on it select ‘create binding’ property to create the table columns.

Click OK button on the ‘Define context binding’ popup now create binding to the table element.

________________________________________________________________________Page 37 of 48

Click on ‘Data source’ property to bind the node, where the selected elements from the node can be displayed as table columns.

Page 38: Step by step guide to basic web dynpro abap

Ver 1.0

It displays an popup as shown in the below screenshot do as shown in the screenshot check the checkboxes to make sure the number of columns displayed in the table.

Now, the view will be displayed as shown in the below screenshot.

________________________________________________________________________Page 38 of 48

Page 39: Step by step guide to basic web dynpro abap

Ver 1.0

Do the same to create a BACK button in this view (follow the same how created ‘Display Flights’ button created in the MAIN view)

________________________________________________________________________Page 39 of 48

Page 40: Step by step guide to basic web dynpro abap

Ver 1.0

Activate the WD component once again.

Working with the Assistance ClassFor each Web Dynpro component, you can create a uniquely assigned assistance class. This class should inherit from the abstract class CL_WD_COMPONENT_ASSISTANCE. The assistance class of a component provides the following advantages:

You can store coding there that is required within the component, but is not linked directly with the layout or with the function of a controller. This could be, for example, a call of the application layer or UI-based editing of the data.Method calls of the assistance class are much better from a performance point of view than calls of methods of a Web Dynpro controller.

The second important function of the assistance class is the management of dynamic texts. Texts that are combined at runtime only and/or contain variables can be stored in the text pool of the assistance class as text symbols.The assistance class is automatically instantiated when a component is called. The instance is available to each controller of the component through the attribute WD_ASSIST.

Select WD component (double click) Give an assistance class name in the place of input field. (Red Color circle from below screenshot)

________________________________________________________________________Page 40 of 48

Click on this button will open a popup to create an event for this action.

Page 41: Step by step guide to basic web dynpro abap

Ver 1.0

Press ‘ENTER’ button it will ask you to create an assistance class for this component click YES Save as local object save the WD component and activate. Now we can work with assistance class.Create 2 methods in the assistance class.GET_FLIGHT_DETAILS is to get the list of flight details andINITIALIZE is to initialize the assistance class

Write the following code in method INITIALIZE with one importing parameter (see below screenshot)Method INITIALIZE.   mo_context = io_context.

Endmethod.

________________________________________________________________________Page 41 of 48

Page 42: Step by step guide to basic web dynpro abap

Ver 1.0

Write the following code in method GET_FLIGHT_DETAILS (see below screenshot)METHOD get_flight_details.

  TYPES: BEGIN OF ty_flight,          carrid      TYPE s_carr_id,          connid      TYPE s_conn_id,          fldate      TYPE s_date,          price        TYPE s_price,          currency    TYPE s_currcode,          planetype    TYPE s_planetye,          seatsmax    TYPE s_seatsmax,          seatsocc    TYPE s_seatsocc,          paymentsum  TYPE s_sum,    END OF ty_flight.  DATA: lo_nd_flight_input TYPE REF TO  if_wd_context_node,        lo_el_flight_input TYPE REF TO  if_wd_context_element,        lo_nd_flight_det   TYPE REF TO  if_wd_context_node, "FLIGHT_DET node reference        lo_el_flight_det   TYPE REF TO  if_wd_context_element,        ls_flight_input    TYPE         ty_flight,        lt_flight_det      TYPE STANDARD TABLE OF ty_flight.

***get the reference of node 'FLIGHT_INPUT'  lo_nd_flight_input = mo_context->get_child_node( name = 'FLIGHT_INPUT' ).  lo_el_flight_input = lo_nd_flight_input->get_element(  ).  CALL METHOD lo_el_flight_input->get_static_attributes    IMPORTING      static_attributes = ls_flight_input.

  IF ls_flight_input IS NOT INITIAL.

    SELECT  carrid            connid            fldate            price            currency

________________________________________________________________________Page 42 of 48

Page 43: Step by step guide to basic web dynpro abap

Ver 1.0

            planetype            seatsmax            seatsocc            paymentsum       FROM sflight    INTO TABLE lt_flight_det WHERE carrid = ls_flight_input-carrid OR                                connid = ls_flight_input-connid OR                                fldate = ls_flight_input-fldate.

  ELSE.***Raise an error message, if there are no input given in the main screen    RETURN.  ENDIF.***get the reference of node 'FLIGHT_DETAILS'  lo_nd_flight_det = mo_context->get_child_node( name = 'FLIGHT_DETAILS' ).***Bind the internal table to the node 'FLIGHT_DETAILS' to display in the next screen***which has list of flights available for the given conditions   CALL METHOD lo_nd_flight_det->bind_table    EXPORTING      new_items = lt_flight_det.

ENDMETHOD.

Click on the ‘pattern’ button to read the method from interface IF_WD_CONTEXT_ELEMENT.

Upon clicking the ‘Display Flights’ button we have to get the list of flights available for the given filter criteria call the method GET_FLIGHT_DETAILS.Since method can only be called (Reference of Assistance class (wd_assist) is not available at view level) from component controller method create a method at component controller level and then this method will be executed and then we can see the list of available flights in the next screen.

________________________________________________________________________Page 43 of 48

Page 44: Step by step guide to basic web dynpro abap

Ver 1.0

Write code as shown below at view ‘MAIN’ (see below screenshot)

At component controller level, there is a call given to the assistance class.

________________________________________________________________________Page 44 of 48

When this method is executed, it will return all the available flights for the given filter criteria.

Page 45: Step by step guide to basic web dynpro abap

Ver 1.0

Create an Application to execute and see the outputSelect the WD component rights click on it create WD application

Click OK Save it as local object we see below screen activate

________________________________________________________________________Page 45 of 48

Page 46: Step by step guide to basic web dynpro abap

Ver 1.0

If you don’t see the below screen, probably you can refresh or launch the WD component once again.

Now, Execute the WD application Do as shown in the screenshot to test it.

________________________________________________________________________Page 46 of 48

Page 47: Step by step guide to basic web dynpro abap

Ver 1.0

You can see the initial screen, where you will have to enter the filter criteria click on ‘Display Flights’ button.

________________________________________________________________________Page 47 of 48

Page 48: Step by step guide to basic web dynpro abap

Ver 1.0

Here, you can see the list of available flights for the given filter criteria.

________________________________________________________________________Page 48 of 48