Now is the time to define the layout for our user interfaces (UI). We are going to add UI elements in the two views created, according to the result we have defined at the start of this exercise. We will first define the layout for the StartView and then the same process with the ResultView.
As the starting point, we must have active the design view for the StartView. Selecting the Layout tabstrip, we can see the output text that the system will generate by default with the name of the view. Simultaneously, we can see in the Outline view (under the Web Dynpro Explorer view) the list of UI elements included, lined up under the root node and with a tree representation. If we select an element in this view, or in the Layout tabstrip of the design view, the system shows the element properties in a new view, known as the properties view.
We can see that all the active views within the screen have their role when developing Web Dynpro applications. From the Outline view, we select the root element Root UI Element Container and set the following properties:
Note While we have not selected the layout type, some properties do not show on the property view. Some properties can only accept certain values. When this happens, in the column of values there is a button that will show up the list of possible values. We can select the value with keyboard arrow keys or with the mouse . The default value for the properties with an asterisk to the right of the field.
Selecting a value using keyboard arrow keys or using the mouse
Next, let's modify the element DefaultTextView, which was automatically generated, using the following values:
Text Welcome to the WEB DYNPRO World ...
In the Outline view, let's select the root element, RootUIElementContainer, open the Context menu, and select Insert Child.
The root element is selected in the Outline view
As Element ID enter Label and select also Label in the Type field. Next, press the Finish button.
Update the properties as follows:
Text Enter your name
Using the same procedure, let's create two new graphic elements using the following properties:
First element: ID: "Name," Type: InputField
Tooltip Your name
For the moment, we will leave blank (no value) within the "value" property. We will see a way to fill it up in the following step of the procedure.
Second Element: ID: "go," Type: Button.
Tooltip Go to the next view
event | onAction Go
In the design view Layout tabstrip, we can see the result of these actions.
First Web Dynpro application
Save your work by clicking on the Save All Metadata button. We should not worry at this stage in case you see some information or warning messages in the task list.
Open the view ResultView from the design view.
In the Outline view, select the root element RootUIElementContainer and modify the following properties:
Select the element DefaultTextView that was automatically generated and update the following properties:
design header 2
Leave the "text" property with a blank value. We will later see the way to fill out this field automatically. In the Outline view, select the root element RootUIElementContainer, open its Context menu, and select insert Child. Enter the name "message," of the type TextView, and click the Finish button. Let's do the same procedure to create a new element of type Button with the ID "back." Let's assign the following properties to the fields we have just created:
First element: ID: "message", Type: TextView
Text The application works fine ...
Second element: ID: "back," Type: Button.
Tooltip Back to the first screen
Event | onAction Back
In the design view Layout tabstrip, you can see the output.
Output of procedure to create a new element
Save your work. Although using wizards, we have already developed the basic parts of our application. Now, we only need that the value entered in the first view should be processed and displayed in the second view. To do that, it is not required to implement an explicit data transfer. The Web Dynpro applications allow us to implement this requirement in a very simple way, making a data link on a "context."
Data Binding Definition in UI Elements
For implementing data transfer between the views of a Web Dynpro application, the method to use is called data binding. This can only be done with UI elements that have properties that can accept this type of binding. If this is the case, as a value of the property there will be a reference to a corresponding context element. Refer to the definition of context given previously.
The following procedure has several parts:
Creating a Component Context
From the Web Dynpro Explorer, expand the node Web Dynpro | Web Dynpro Components | WelcomeComponent and double-click on the node Component Controller.
In the displayed editor, select the Context tabstrip.
Open the Context menu of the root node Context and select the option New | Value Attribute.
Now we can create a new attribute from the wizard that is displayed. Enter the name "Username" and press the Finish button. An attribute node is added to the root node of the context.
We will use this context definition in the following points to implement the data binding in the local view contexts.
Auditing and Additing Dependencies to the Views
Open the design view of StartView, select the Property tabstrip, and under the label Required Controllers, press the Add button. In the new screen, select WelcomeComponent - com.offilog.examples.welcome and confirm it by pressing the OK button.
Repeat the last steps, but in this case with the view ResultView. With these actions we have created the appropriate dependencies for each view in our project "Welcome."
Creating the View Contexts
Let's open again the StartView in design mode and select the Context tabstrip. In the Context menu of the root node, select the option New | Value Attribute.
Enter the value "Name" and press the Finish button. from the Context menu of the Name attribute just created, select Edit Context Mapping.
From the component context, select the element Username and click the Finish button. After this action, we can see that the icon that shows up next to the Context attribute has changed, so that we can easily see that the attribute has been mapped with an element of the component context.
Now, we have to repeat the last steps to do the same procedure in the view ResultView. The attribute to create we can name it Header Text and on this occasion we will not map the attribute with any element of the component context.
Assigning UI Elements to Contexts
Open again the StartView in design mode, and select the Layout tabstrip. Select as input field "name." In the "value" property in the properties window, assign the appropriate context attribute by selecting the possible entries from a list box. In the dialog box that is displayed, select the context attribute "Name" and click the OK button. Let's go know to the ResultView. In the design view, select the view ResultView and click the Layout tabstrip. Select the text element DefaultTextView and, in the properties window, update the value of the "text" property with the corresponding context element HeaderText.
Now, in the design window, we can see the layout shown.
With these last actions we have defined the "data binding" between the UI elements and their corresponding context attributes.
Dynamic Generation of a Text Line Using Data Binding
Select the view ResultView in design mode and click the Implementation tabstrip. Now, we enter some coding (the first one in the whole exercise) on the method of the event handler onPlugFromStartView().
The event handler of the entry point onPlugFromStartView is launched when the view ResultView is processed. We can use this event, as in this case, to generate text dynamically. The dynamic value is saved in the contexts of the local views and it can be available for all the associated context elements. Remember that to enter code we can use the code wizard, which is automatically activated when we enter a period sign (.) after the name of an object.
Save your work up to now by clicking on the Save All Metadata button. As a result of the previous actions, we have established data transfer between the UI elements of different views. Now, the remaining work is to create the Web Dynpro application, to deploy it, and ... to test it!
Creating the Web Dynpro Application
Before launching the compilation of the complete project and its distribution to the J2EE engine, we first need an object that can be identified as a deployable entity and that includes the whole project. This is the object that we are going to create at this point, the Web Dynpro application. To open the corresponding wizard, from the Web Dynpro Explorer node, select Applications, open its Context menu, and select the Create Application option.
Enter the name for the application, for example, "WelcomeApplication," and specify a package, for instance, "com. offilog. examples.welcome," for the Java class that will be generated. Then, continue by pressing the Next button. In the following dialog screen, select the default value Use Existing Component and continue by clicking on the Next button.
In the following dialog box, leave the three values proposed by the system and click on the Finish button.
In the Web Dynpro Explorer you can see the new created object.
The generated Web Dynpro application object is what completes the structure of our project. Now, we are in good shape to launch the distribution of our application. The Welcome Application object allows us to refer to the Web application as a whole set, and therefore it will be used in the next step for the deployment.
Building the Application
Before deploying and distributing the application, we need a final step of building it. Save your work up to now by clicking on the Save button. This will make all the objects to be saved before building the application. From the Web Dynpro Explorer window, select the Welcome node, open the Context menu, and select the option Rebuild Project.
Make sure that there are no error or warning messages in the tasks window for the "Welcome" project. We are referencing the "Welcome" project because it is possible to have more than one project opened.
Deploying the Application
In the window Web Dynpro Explorer, select the object Welcome Application, activate its Context menu, and select Deploy New Archive and Run.
After the deployment, which can take some time, the SAP NetWeaver Developer Studio will launch the associated browser and run the application.
Running the Application
In the browser we can interact with the application by pressing the appropriate buttons. Enter a name in the input field and click on the Next button.
In the second page, press the Back button to return to the first screen.
With this simple example we have seen how to
SAP BASIS Related Interview Questions
|SAP CRM Interview Questions||SAP HR Interview Questions|
|SAP ABAP Interview Questions||SAP HANA Interview Questions|
|SAP Crystal Reports Interview Questions||SAP SOLMAN Interview Questions|
|SAP Security Interview Questions||SAP BPC Interview Questions|
|SAP Netweaver Interview Questions||SAP UI5 Interview Questions|
|SAP Smart Forms Interview Questions|
Sap Basis Tutorial
Sap: From Sap R/3 To Sap Netweaver
The Architecture Of The Sap Web Application Server
Sap Netweaver: An Overview
Using Sap Systems
Upgrading To Sap R/3 Enterprise: The First Step Into Sap Netweaver
The Change And Transport System
Development Options With Sap Solutions: Abap Engine
User Management And Security In Sap Environments
Web Application Server System Management
Performance And Troubleshooting With Sap Solutions
Sap For It Managers: Implementation, Planning, Operation, And Support Of Sap Systems
All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd
Wisdomjobs.com is one of the best job search sites in India.