Each Web Dynpro application has at least one view. Each View has a view Layout, where we can add different UI (User Interface) elements that can be nested one in the other one, to create the screen. The positioning of the UI elements in a view is realized by using the layout and data layout.
Each View has a view controller that is automatically created for this view and each View has several tabs (Properties, Layout, Outbound Plug, Inbound Plug, Attributes, Context, Actions and Methods). This indicates that a View consist of many parts.
The screen content of a view is designed in the Layout tab. The View Layout is divided in three areas:
the UI Elements are grouped in a library to be accessed via the View Layout. We have several ways to add an UI element into the view layout. For example:
Adding UI elements into the view
All the UI Elements we enter into a screen are children of the node ROOTUIELEMENTCONTAINER and are represented as a hierarchy where ROOTUIELEMENTCONTAINER is the top of this hierarchy. With “Swap Root Element” we have the possibility to transform ROOTUIELEMENETCONTAINER from a Transparent Container into another UI element (Table, FlashIsland, Group, etc.).
In this way, we can use, for example, the FlashIsland UI element to integrate Adobe Flex into our web Dynpro component. This transformation is possible only if the ROOTUIELEMENTCONTAINER doesn’t have any child UI elements.
Adding UI elements into the view
In our ROOTUIELEMENTCONTAINER, we insert one Group UI element, one InputField UI element, one Label UI element, one TextView UI element and one Button UI element
If we select individual UI elements in the layout of a view, their properties are displayed in the Properties area. In this way, we can change the properties of each element. For example, we have changed the property design of the button UI element and the property state of the InputField UI element.
As a result of changing the property state of the InputField UI element from the Normal item to the required one, the label associated to this UI element becomes a red star and the end user knows that this value is mandatory.
For a property, we can create fixed character strings, we can choose from a list, or we can bind properties to context nodes or attributes by using the Binding button. For the text property of an UI element Button, we have created a fixed character string “Save”. For the design property, we have chosen from the list one of the supported designs.
UI element properties
We need to bind the value property of the InputField UI element and the text property of the TextView UI element. To be able to do this, we will create two context attributes
By using “Context Menus” we have the possibility to create, for an application, our own context menus displayed in the Browser when the user presses right click on an UI element. In standard mode, the web Dynpro Framework offers the default context menus with certain functionalities, e.g. hiding an UI element displayed into the Browser. After running the application, we can test this standard mode by rightclicking on the inputField UI element.
The data are stored in the context and the UI Elements are the only objects the userinteracts with.Every View has a Context View where we can create context nodes and attributes. Via data binding, the context of a view controller provides a view with all the required data. For our application, we create two context attributes named NAME and GREETING, of STRING type.
To put the data on the screen and to read data from user, we connect the properUI Elements properties with attributes or nodes.
In our case, we connect the property value of the InputField UI element with the NAME attribute. To create a greeting for the user and to show it after the user presses the Save button, we connect the property text of the TextView UI element with the GREETING attribute. These connections are known as data binding.
Creating an attribute in context view
The effect of the binding is that, at runtime, any data changes are transported in both directions and these changes affect all the properties bound to this element.
Some of the UI Elements have special events that are linked with the user actions. The UI element Button is one of these UI elements and that’s why we have to create an action that reacts to the user interaction. To do this, we use the Action tab.
Creating an action
As we can see, each action has a corresponding event handler method, automatically generated by the Framework. An event handler method is a special method of a view controller that has the ONACTION prefix followed by the action name. For the SAVE action, the Framework generates the ONACTION event handler.After creating an action, we can assign it to an UI element that has attached an event.
Assigning an action to an UI element
After generation, this method is empty, but we can fill it with source code by using the Methods tab.
In the Methods tab of a View, we can find some types of methods (e.g. event handler methods, Hook methods, user-defined instance methods).
In our case, in the Methods tab we can find the Hook methods, automatically generated by the Framework, and our event handler method ONACTIONSAVE
With double-click on the method name, we open the ABAP editor.In this way, we can insert the source code.
The user enters his name that we use to show a greeting message with the help of textView UI element. To create a greeting for the end user, we concatenate his name with the string “WELCOME” and we pass this string value in the GREETING attribute. After this, we reset the inputField UI element. To do this, we pass an empty string into the NAME attribute bound to the corresponding UI element
On action save event handler methodMETHOD onactionsave .
In the Properties tab, we can create a description text for our view, we have information about the view and about the person who created and changed this view. In this tab, we can set the view lifetime:
Additionally, Property tab offers the possibility to define the usages .
We can define a usage to be able to access the methods of another internal controller or of an interface controller, if the usage has been defined for an external component. To create a new usage in the Used Controller/Components table, we have to choose the Button Create Controller Usage. The table Used Controller/ Components includes a list with all the global controllers of our own component and, in case we define usages, this list includes the external component and its interface controller.
In our case, we don’t use any external components. In the list we have only the global controller COMPONENTCONTROLLER. We have to specify that, for each view controller, the usage of the corresponding component controller is automatically created.
Each View controller contains some attributes automatically generated by the Framework
The attribute WD_COMP_CONTROLLER is a reference variable of IG_ COMPONENTCONTROLLER type that we can use to access all the publicly accessible methods of the component global generated interface of the corresponding component controller.
The attribute WD_THIS is a self-reference to local controller interface. This self-reference works similarly with the self-reference me found in the ABAP Objects. We can use it, for example, to call a user-defined method.
The attribute WD_CONTEXT is a reference to the controller context. The IF_WD_CONTEXT_NODE interface provides several methods that enable us to obtain read and write access to a context node.
Additionally, we can create our own attributes. These attributes are used to store application data that are not relevant for the UI elements and we don’t store in the context. To access these attributes, we use the self-reference: wd_this -> attribute_name
SAP ABAP Web Dynpro Related Tutorials
|SAP ABAP Tutorial|
SAP ABAP Web Dynpro Related Interview Questions
|SAP ABAP Interview Questions||SAP ABAP Web Dynpro Interview Questions|
|Sap Abap Hr Interview Questions||SAP ABAP Dictionary Interview Questions|
|SAP ABAP Enhancement Interview Questions||SAP ABAP Module Pool Interview Questions|
|SAP ABAP Report Developer Interview Questions||SAP ABAP Data Dictionary Interview Questions|
|SAP ABAP ALV Reports Interview Questions|
Sap Abap Web Dynpro Tutorial
Sap Easy Access
Designing A Web Dynpro Component
Context Nodes And Attributes At Design Time
Data Binding, Context Mapping And Interface Methods
View Controller Methods
Layout Ui Elements
User Interface Elements (ui Elements) Static And Dynamic Programming
Messages, Exceptions And Web Dynpro Abap
Writing Multilanguage Applications
Alv And Select Options
Integrating A Web Dynpro Application Into The Sap Netweaver Portal
Web Dynpro And Authorization
Web Dynpro Mind Map
All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd
Wisdomjobs.com is one of the best job search sites in India.