Tutorial - Creating Pop Up Window
Using New Features in WebDynpro
Java CE 7.1 Ehp1
Applies to:
SAP Net Weaver CE 7.11. For more information visit the User Interface Home Page. For more information visit the Web Dynpro Java Home Page.
Summary
This article deals with creating different types of windows and how to add buttons and link the user defined action handlers to the window events dynamically below the waveline of a view with an example.
Author: Gayathri Kavi
Company: HCL Technologies Ltd. Created on: 2 June 2009
Author Bio
Gayathri Kavi is working as a Java developer in HCL Technologies Ltd on SAP Net Weaver Technology(WebDynpro Java, CAF and BPM).
Table of Contents
Introduction: ... 3
Create WebDynpro Component: ... 3
Creating the Confirmation Dialog Popup Window: ... 6
Creating the Popup Window of Window Type ERROR: ... 7
Creating the Popup Window of Window Type WARNING: ... 10
Output: ... 12
Related Content ... 15
Introduction:
In this article let us see how to add buttons and link the user defined action handlers to the window events dynamically below the waveline of a view with an example. In the example user has to enter the mandatory fields E Code, First Name, if the user doesn’t enter any of these then a pop up window showing the error message will be displayed. If he doesn’t enter the Last Name then a pop up window showing the warning message will be displayed. If he enters all the details then confirmation message will be displayed. WDWindowType is the new API introduced in CE 7.11.
Window types are SUCCESS, INFORMATION, NONE, WARNING and ERROR.
Create WebDynpro Component:
Open the controller editor of the ComponentController – WindowTypeComp and create the nodes and attributes as shown below.
Attribute Type Purpose
popUpInstance IWDWindow To store the instance
of the PopUp window and later retrieve it to close the window.
isInputNull boolean To check whether
the user entered all the input parameters.
textMessage String To display the error
message in the pop up window.
warningWindowInstance IWDWindow To store the instance
of the window – WindowTypeWarning and later retrieve it to close the window.
Now the Component Controller-WindowTypeComp context will be as shown below.
Create the following nodes and attributes in the WindowTypeCompView - View Controller
Create the following Methods and Actions in the “WindowTypeCompView”
Bind the “Save” action to the onAction property of “Save” button. The implementation of the “Save” action is as shown below.
CheckInputValues() method will return false if the user enters the ECode and First Name. The implementation of this method is shown below.
Creating the Confirmation Dialog Popup Window:
createConfirmationDialog() method will display the confirmation message “Employee Details saved successfully” in a popUpWindow. Using API IWDConfirmationDialog we can create both window and view. The implementation of the method createConfirmationDialog is as shown below.
The method wdComponentAPI.getWindowManager().createConfirmationWindow( String confirmationText, IWDAction action, String label ) will display a window.
Where
confirmationText is the text message
action is the event handler for the button placed in the view and label is the name of the button.
confirmationDialog.show() will make the confirmation pop up visible.
In the confirmationDialog window on clicking “OK” button the event handler method is called. The methods “destroy” and “destroyInstance” in the API IWDConfirmationDialog are deprecated which means that the webdynpro framework will take care of destroying the instance we need not implement this.
Creating the Popup Window of Window Type ERROR:
Create a view say “PopUpView” and design it as shown below. Create the following attributes and nodes in the “PopUpView”
The attribute text message is of type string.
Design the layout of the “PopUpView” as shown below
The “PopUpView” will look like this
If you observe this, the view doesn’t contain the waveline. We are going to create it in runtime using the doModify() method of the WindowController of “PopUpWindow”.
Create another window say “PopUpWindow”. “PopUpWindow” will be as shown below.
The context for the window should be as shown below.
Attribute Type
view IWDView title String
Create the following event handler methods in the WindowController of the PopUpWindow.
Open the java editor of the Window Controller – PopUpWindow and write the following code in the doModifyView() method.
In this method we will create the button “OK” and assign the actions to the button during runtime in the Java Editor of Window Controller “PopUpWindow”. – This is the new feature introduced in CE 7.11. In addition to this we can set the title of the “popUpWindow” during runtime.
Let’s see the implementation of the event handler method “OK”.
We will get the PopUpWindowInstance which is saved previously from the component controller and destroy the instance.
Creating the Popup Window of Window Type WARNING:
Create the view “WindowTypeWarningView”. Create the context and nodes as shown below.
Design the layout of the “WindowTypeWarningView” as shown below.
Now the view “WindowTypeWarningView” will look like this.
The waveline for this view will be created in the java editor of the window “WindowTypeWarning”. The attribute warningMessage is of type String.
Add the following implementation code in the doInit() method of “WindowTypeWarningView”.
Create the window “WindowTypeWarning”.
Embed the view “WindowTypeWarningView” in this window.
Create the following actions and methods in the window editor of “WindowTypeWarning”.
Open the java editor of the window “WindowTypeWarning”.
Write the following implementation code in the doModifyView. In this method we create the buttons and bind the actions created in the window “WindowTypeWarning” to the buttons dynamically and display it below the waveline of the view “WindowTypeWarningView”.
On clicking “OK” a confirmation window will be displayed. The implementation for this will be as shown below.
Output:
Deploy and Run the application you will get the below shown output.
Now enter ECode and click “Save”.
On clicking “OK” the popup window will get closed and it will go back to the Employee Details page. Now enter the First Name and click “Save”
Click “OK” .
Related Content
WebDynpro New Features in CE 7.11 User Interface Home Page.
Disclaimer and Liability Notice
This document may discuss sample coding or other information that does not include SAP official interfaces and therefore is not supported by SAP. Changes made based on this information are not supported and can be overwritten during an upgrade.
SAP will not be held liable for any damages caused by using or misusing the information, code or methods suggested in this document, and anyone using these methods does so at his/her own risk.
SAP offers no guarantees and assumes no responsibility or liability of any type with respect to the content of this technical article or code sample, including any liability resulting from incompatibility between the content within this document and the materials and services offered by SAP. You agree that you will not hold, or seek to hold, SAP responsible or liable with respect to the content of this document.
