Applies to:
SAP Web Dynpro Java
Summary
There are many ways to open and close a pop-up window within Web Dynpro for Java. This tutorial gives a
step by step example of how to open and close a simple Web Dynpro window without using plugs.
Author Bio
Paul Nowyj has worked with SAP Technologies for the last 7 years, including time with both
SAP America and Deloitte Consulting. Paul’s prior experience has focused on SAP Portal
consulting, having worked with dozens of companies spanning four continents. As a
speaker at multiple SAP events including ASUG and SAP Portals/BI Conferences, Paul has
shared his experiences with business leaders and technologists around the world.
Table of Contents
Creating a Simple Pop-up in Web Dynpro..........................................................................................................3
Creating your Web Dynpro Project .................................................................................................................3
Step 1: Create a Web Dynpro Development Component DC ......................................................................................3
Creating your Pop-up Application ...................................................................................................................5
Step 1: Create an Application within your Project ........................................................................................................5
Step 2: Create your Views ...........................................................................................................................................7
Step 3: Code your Action ...........................................................................................................................................15
Step 4: Create your Pop-up Window and View ..........................................................................................................16
Step 5: Interim Application Test .................................................................................................................................17
Step 6: Closing your Pop-up Window ........................................................................................................................18
Step 7: Testing your Completed Application ..............................................................................................................27
Related Content................................................................................................................................................29
Disclaimer and Liability Notice..........................................................................................................................30
From this screen you’ll select Development Component on the left hand side and Development Component
Configuration in the right hand side. Click Next.
On this screen we’ll just be creating a Local Development Project, so you’ll only need to click Local
Development Æ MyComponents and click Next at the bottom of the screen.
On this screen you’ll need to supply a Vendor, Name, and Caption for your project. It’s also important that
you select a Web Dynpro project for the type given on the bottom portion of this screen. In this case I’ve
given a Vendor name of “test.com”, a Project name of “poptest”, and a Caption of “Pop-up Test Application”.
While you’re free to put in any information that you want here (and throughout this tutorial), it will be easier to
follow exactly what I use in the tutorial, since all code samples are based on these names.
Click Next when you’ve entered the necessary information on this screen.
Since we’re not importing any content for this project you can click Next here.
You’ve now entered all the necessary information for the creation of your project. When you click the next
button it should take a few seconds to generate your new project.
Following the creation of your project you should see the screen above without the New Application pop-up
showing. To get the New Application pop-up to appear you need to right click on the Applications node
under the Local Development~poptest~text.com Æ Web Dynpro in the Web Dynpro Explorer. In the menu
that appears click Create Application.
In the resulting window choose the option to “Create a new Component”. Click Next.
Here you’ll be required to give your application a Component Name and Component Package. These can
be whatever you’d like them to be, but if you’d like your application to match what I’ve created here you
should use “PopApp” as the Component Name and “popapp” as the Component Package. This will
automatically name the Windows and the Views for you. Choose Finish.
After some processing time you should see the screen above. Here you can see that a View named
“PopAppView” has automatically been created for you, and in the Windows section a “PopApp” Window has
been created.
To get started click on the “PopAppView” node in the Views section of your Web Dynpro Explorer. This will
open the screen show below.
Since you’ll need a button for the user to click in order to trigger the pop-up you’ll need to right click on the
RootUIElementContainer in the lower left hand corner of the screen above and choose Insert Child. The
screen below will appear.
You now have an unnamed button next to the Default Text View. Click on this and change the text property
in the Properties table to “Start Pop-up”. Now the words “Start Pop-up” will appear in the button on the view.
Now that we have a button for the user to click, we need to create an action behind the button. To do this
scroll down on the properties of the button until you see the row OnAction. Highlight this row and click on the
“…” button which appears to the far right. The following screen will appear:
This will allow you to create an action. Name the action “CreatePopup”. Click Finish.
Before we can code our action we need to create a context within our starting view to contain the pop-up
window. This context must be able to hold a java window.
Navigate to your PopupAppView and click on the Context tab. The following screen will appear
Give a name to your node and click finish. Click on the newly created node and change the properties for
Cardinality to 1:1 and for Selection to 1:1. The properties for your PopupNode should look like this:
Next right click on the Value Node which you just created and select New Æ Value Attribute
Give your Attribute a name and click Finish. You should see the following screen.
We must now edit the properties of the Attribute so that it can hold your pop-up window. To do this click on
the ‘type’ property of the PopupAttribute, this will create a “…” button. The screen below will appear:
Click on this button and you will see the following screen.
Click the radio button for “Java Native Type”. Then click the browse button and the following screen will
appear.
In the Choose a type field type in IWDWindow, this will result in a search help which will allow you to choose
the IWDWindow from a list.
Click OK. Then OK again. You should see the IWDWindow in the Type property for your Attribute.
IWDWindowInfo windowInfo =
(IWDWindowInfo)wdComponentAPI.getComponentInfo().findInWindows("PopWin");
IWDWindow window =
wdComponentAPI.getWindowManager().createModalWindow(windowInfo);
window.setWindowPosition (300, 150);
window.show();
wdContext.currentPopupNodeElement().setPopupAttribute(window);
Once you’ve inserted the code, your implementation code should look like this:
To get rid of the red errors you need to right click on them and select Source Æ Organize Imports.
*Keep in mind we haven’t created PopWin yet, so not all the red will go away.
Give your view a name, in this case I’ve named it “PopWinView”. Choose Finish.
You have now created the View which will appear when you click on your Start Pop-up button you created in
the initial view. You are now ready to test your application. At this point all we expect to happen is the
creation of a new window named “PopWinView”.
If this doesn’t work for you then it’s necessary to retrace your steps, pay attention to the context. If this
screen is what appears, then the next step is to insert a button into your “PopWinView” so that you can close
the pop-up window.
Closing the pop-up window is more complex than opening it because it requires communication between the
parent view, component controller, and the pop-up view. This means we’ll have to map interfaces to allow
for this communication. The following steps explain how this is done:
First navigate to the PopAppView in the view section of the tree. Double click on the PopAppView and open
it (it may already be open). From here click on the properties tab and you will see the following screen:
Click on the “Add” button under Required Controllers. You will see the following screen:
You will now need to repeat this same process on the PopWinView.
You have now connected both the PopAppView and the PopWinView to the Component controller. The next
step is to allow the component controller to access the context of the PopAppView so that it will be able to
destroy the PopWinView when you click the Close Pop-up button.
To do this we will need to map the context of the PopAppView to the Component Controller. First we’ll need
to create a context within the component controller. This will match exactly with what we created earlier in
this document when we built the context of the “PopAppView”.
Double click on the Component Controller in the left hand tree. Then click on the Context tab. This will
result in the following screen:
Choose Finish.
In the properties for the PopupNode change Cardinality to 1:1 and Selection to 1:1.
Next Right click on the PopupNode and choose New Æ Value Attribute.
Click Finish.
Now you need to change the type of the Value Attribute so that it can hold the IWDWindow. Follow the same
steps as above or cut and paste “com.sap.tc.webdynpro.services.session.api.IWDWindow” into the property
for type.
You now need to repeat these steps so that the PopWinView can tell the component controller to destroy it.
You’re now ready to map the context of the PopAppView to the Component Controller.
Double-click on the PopApp context mapping node under the PopAppView. This will open the screen shown
above. Click on the PopupAttribute on the right hand side of the screen and drag it to the Context on the left
hand side of the screen. The following screen will appear.
Follow the same steps to for the PopWinView by dragging the PopAttribute from the right hand side of the
screen to the Context on the left hand side of the screen.
We’ve now connected the PopWinView and the PopAppView through the Component controller. To make
sure that this has been done correctly you should double click on the arrows below the PopAppView and the
PopWinView, they should both have lines connecting the right hand window to the left hand window.
The next step is to create a method which can be called from the PopWinView to tell the PopAppView to
destroy it. Essentially we’re allowing the PopWinView to send a message to the PopAppView saying that it
wants to close itself, since it’s not possible for the PopWinView to destroy itself.
Navigate to the Component Controller in the tree and double click on it.
Click on the New button next to Methods and you will see the following screen.
Now click the Implementation tab and scroll until you find the “closePopup” method.
window.hide();
window.destroyInstance();
The next step is to create a button in the pop-up window which calls this method and closes the pop-up. To
do this you’ll navigate to the PopWinView so that it’s displayed as shown below:
In the PopWinView right click on the RootUIElementContainer and select Insert Child.
In the text property of the button you’ve just created type “Close Pop-up”.
In the OnAction property of the button you’ve just created click the “…” button which will allow you to create a
new action.
Highlight the OnAction property again and click the “Go” button which appears to the far right of the line.
This will take you to the implementation of the “ClosePopup” action. In this action enter the following code:
wdThis.wdGetPopAppController().closePopup();
What we’ve done here is call the method that you’ve created in the Component Controller, which tells the
PopAppView to destroy the IWDWindow instance in the context.
The following screen should appear and when you click the Start Pop-up button, then when you click the
Close Pop-up button, the window should be closed.
Now that you’ve designed a basic pop-up screen you’re able to fill out the rest of your application. Try to
think of ways that you can use this functionality throughout your application. Pop-ups are often used in areas
like search help, as part of a roadmap, or to supply a user with extra information to allow them to make
decisions.
Related Content
Java Web Dynpro on SDN
SAP Javadocs
SAP User Interface Technology