Each UI element has certain properties. With data binding, we define which node or attribute from the context will act as a data source for an UI element property.To exemplify the data binding mechanism, we create a component named Y_DATABINDING with a view named V_BIND and a window W_DEFAULT.
Structure of Y_DATABINDING component
In context view, we create a context node STUDENT with the same dictionary structure YSTR_PERSON.
Structure of STUDENT node
We create a WD component that reads the user inputs in the attributes FIRSTNAME,LASTNAME and DATEOFBIRTH. When the user presses the “SHOW” button, these data are shown by means of TextView UI Elements.
Example of data binding
We have many possibilities to make a data binding. For example, we can:
(a) Create a “Container Form” for a context node
(b) Use the Web Dynpro Wizard
(c) Create data binding for each attribute
(a) To create a “Container Form”, we add a Group UI element and then, by rightclicking,we choose from the contextual menu “Create Container Form”.
Creating container form
After this, we can choose which context node we use for data binding and which type of UI Element is associated to each attribute
As a result, the Framework generates for each context attribute an UI element InputField and a proper label, and makes the data binding between each UI element property (value) and the context attribute.
Data mapping among InputField UI Elements and the context attributes.
To create a “Container Form”, we can use each UI Element of container type.
(b) To create a data binding, we can use the Web Dynpro Wizard button(Fig) In case we use the Form option, the Framework generates a transparentContainer UI element that contains the UI elements that we have to choose inthe same way as we have shown at point (a).
Using wizard to create a form and the proper data binding
(c) To manually define a data binding for each attribute, we have to insert the proper UI Element and create data binding between an UI element property and a context attribute. We insert 3 TextView UI Elements and 3 Labels UI Elements.
We have to create the data binding between each text property of the TextView UI Element and the proper context attribute.
We repeat this step until we make data binding among the text property of all the three UI Elements and the proper context attributes.Then,we insert a Button UI Element in the Group GRP_STUDENT_WRITE and add an action.
Inserting a button and adding an action
In this case, we don’t need to enter coding in the generated event handler method onactionshow. After creating an application for our component, we are ready to run it. The result is presented.At runtime, the context attributes are empty. After the user enters values and pushes the SHOW button, the context attributes are populated with these values.At design time, we realised a data binding among the TextView UI Elements and the same context attributes (Firstname, Lastname and Dateofbirth). This is the reason why these UI Elements show the values entered by the user in the Input-Fields UI elements.
Running the application
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.