Tutorial - Creating Pop Up Window Using New Features in WebDynpro Java CE 7.1 Ehp1

Transcription

1 Tutorial - Creating Pop Up Window Using New Features in WebDynpro Java CE 7.1 Ehp1 Applies to: SAP Net Weaver CE 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) SAP AG 1

2 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: Output: Related Content Disclaimer and Liability Notice SAP AG 2

3 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 Window types are SUCCESS, INFORMATION, NONE, WARNING and ERROR. Create WebDynpro Component: Create the WebDynpro Component as shown below 2009 SAP AG 3

4 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 Design the view WindowTypeCompView as shown below SAP AG 4

5 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 SAP AG 5

6 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 SAP AG 6

7 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 SAP AG 7

8 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 SAP AG 8

9 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 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 SAP AG 9

10 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 SAP AG 10

11 On clicking OK a confirmation window will be displayed. The implementation for this will be as shown below. On clicking cancel the window instance will be destroyed SAP AG 11

12 Output: Deploy and Run the application you will get the below shown output. Here ECode and First Name are mandatory. Don t enter input values and click Save SAP AG 12

13 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 In the Warning Message Window click OK SAP AG 13

14 Click OK. Now enter all the input parameters and click Save SAP AG 14

15 Related Content WebDynpro New Features in CE 7.11 User Interface Home Page. For more information visit the Web Dynpro Java Home Page SAP AG 15

16 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 SAP AG 16