Creating A Simple Java Web Dynpro Pop-Up Window: Applies To

Creating a Simple Java Web
Dynpro Pop-up Window
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: Paul Nowyj

Company: Deloitte Consulting
Created on: 07 April 2008
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.
SAP DEVELOPER NETWORK | sdn.sap.com BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com

© 2008 SAP AG 1
Creating a Simple Java Web Dynpro Pop-up Window
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

© 2008 SAP AG 2
Creating a Simple Pop-up in Web Dynpro

There are many ways to open a pop-up window within SAP Web Dynpro. The particular advantage of using
the approach described here is the flexibility in calling and destroying the pop-up window. Once you’ve
created your pop-up window with this method you are free to change its size or appearance the same way
you would change any other view. You also have the ability to destroy the window from anywhere within the
application.
For more experienced Web Dynpro developers some sections of this tutorial will be obvious, but I’ve tried to
write it in such a way that someone just starting out with Web Dynpro would be able to work their way
through it with minimal help. More experience developers may want to jump ahead to the later steps in this
tutorial.
Creating your Web Dynpro Project

The first step is to create your Web Dynpro project. To do this you’ll need to create a Web Dynpro
Development Component Project.
Step 1: Create a Web Dynpro Development Component DC

Open your NetWeaver Developer Studio and click on File Æ New Æ Project…
The screen below will appear:
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.

© 2008 SAP AG 3
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.

© 2008 SAP AG 4
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.
Creating your Pop-up Application

Now that you’ve created a project it’s necessary to create an application within your project. The application
is what you’ll finally execute when it’s time to test your completed application.
Step 1: Create an Application within your Project

© 2008 SAP AG 5
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.

© 2008 SAP AG 6
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.
Step 2: Create your Views

Now that you’ve got a project with an application associated with it, it’s time to start creating the pieces that
you’ll need to make this application function. These pieces will include:
• A main application Window and View (which we have in “PopAppView”)
• A window which will appear when want to see our pop-up
• A context node to hold our pop-up window
• A component controller for the communication between the parent window and the pop-up window
• A method to destroy the pop-up window
To get started click on the “PopAppView” node in the Views section of your Web Dynpro Explorer. This will
open the screen show below.

© 2008 SAP AG 7
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.
Select Button from the list and choose Finish.

© 2008 SAP AG 8
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.

© 2008 SAP AG 9
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
Right click on the Context and select New Æ Value Node.

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

© 2008 SAP AG 11
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:

© 2008 SAP AG 12
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.

© 2008 SAP AG 13
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.

© 2008 SAP AG 14
Click OK. Then OK again. You should see the IWDWindow in the Type property for your Attribute.
Step 3: Code your Action

Now that you’ve created a context for your pop-up window, it’s time to create the window. The code for the
creation of the window will be entered in the action that you created earlier. To do this you’ll need to click on
the Implementation tab of your PopAppView and scroll until you find the line “OnActionCreatePopup” (this
can also be found in the lower left hand corner when you’re on the Implementation tab). In the action you’ll
want to insert the following code:
IWDWindowInfo windowInfo =
(IWDWindowInfo)wdComponentAPI.getComponentInfo().findInWindows("PopWin");
IWDWindow window =
wdComponentAPI.getWindowManager().createModalWindow(windowInfo);
window.setWindowPosition (300, 150);
window.show();
wdContext.currentPopupNodeElement().setPopupAttribute(window);

© 2008 SAP AG 15
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.
Step 4: Create your Pop-up Window and View

Now that we’ve got our action, it’s necessary to create the actual pop-up window. As you can see from the
code this window is going to be named “PopWin”. To do this navigate to the Windows section in the right
hand tree, right click on Windows and choose “Create Window”. The screen below will appear:
Choose “Embed new View” and click Next.

© 2008 SAP AG 16
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”.
Step 5: Interim Application Test

To test your application, navigate to the Applications branch of the tree on the upper left hand side of your
screen. Right click on the “PopApp” application and choose Deploy New Archive and Run. You should see
the following screen when you click the Start Pop-up Button on the initial view.
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.

© 2008 SAP AG 17
Step 6: Closing your 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:
Choose PopApp – popapp and then OK.
You should then see this screen.

© 2008 SAP AG 18
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:

© 2008 SAP AG 19
Right click on the Context and select New Æ Value Node
Name the Value Node PopupNode.
Choose Finish.
In the properties for the PopupNode change Cardinality to 1:1 and Selection to 1:1.

© 2008 SAP AG 20
Next Right click on the PopupNode and choose New Æ Value Attribute.
Name the attribute PopupAttribute.
Click Finish.

© 2008 SAP AG 21
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.
Repeat the steps above for the PopWinView.
1) Create a Value Node

2) Change the Cardinality and the Selection properties to 1:1
3) Create a Value Attribute
4) Change the type to “com.sap.tc.webdynpro.services.session.api.IWDWindow”
5) Double click on the Arrow below the PopWinView and drag the PopupNode on the left to the
PopupNode on the right. Then select the check boxes as shown below.
You’re now ready to map the context of the PopAppView to the Component Controller.

© 2008 SAP AG 22
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.
Check the PopupAttribute box and click OK.
Then click Finish.

© 2008 SAP AG 23
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.
Choose OK. Choose Finish.
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.
Select the Methods tab.
Click on the New button next to Methods and you will see the following screen.

© 2008 SAP AG 24
Select Method and click Next.
Name your method “closePopup” and click Finish.
Now click the Implementation tab and scroll until you find the “closePopup” method.
In the method enter the code:
IWDWindow window = wdContext.currentPopupNodeElement().getPopupAttribute();
window.hide();
window.destroyInstance();

© 2008 SAP AG 25
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 resulting pop-up select Button and choose Finish.
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.

© 2008 SAP AG 26
Name the action “ClosePopup”. Choose Finish.
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.
Step 7: Testing your Completed Application

You’ve now completed your pop-up test application. Launch the application by right clicking on the PopApp
Application and choosing Deploy New Archive and Run.

© 2008 SAP AG 27
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.

© 2008 SAP AG 28
Related Content
Java Web Dynpro on SDN
SAP Javadocs
SAP User Interface Technology

© 2008 SAP AG 29
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.

© 2008 SAP AG 30

Creating A Simple Java Web Dynpro Pop-Up Window: Applies To

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Creating A Simple Java Web Dynpro Pop-Up Window: Applies To

Uploaded by

Copyright:

Available Formats

Creating a Simple Java Web

Dynpro Pop-up Window

Author: Paul Nowyj

SAP DEVELOPER NETWORK | sdn.sap.com BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com

SAP DEVELOPER NETWORK | sdn.sap.com BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com

Creating a Simple Pop-up in Web Dynpro

Creating your Web Dynpro Project

Step 1: Create a Web Dynpro Development Component DC

SAP DEVELOPER NETWORK | sdn.sap.com BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com

SAP DEVELOPER NETWORK | sdn.sap.com BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com

Creating your Pop-up Application

Step 1: Create an Application within your Project

SAP DEVELOPER NETWORK | sdn.sap.com BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com

SAP DEVELOPER NETWORK | sdn.sap.com BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com

Step 2: Create your Views

SAP DEVELOPER NETWORK | sdn.sap.com BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com

Select Button from the list and choose Finish.

SAP DEVELOPER NETWORK | sdn.sap.com BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com

SAP DEVELOPER NETWORK | sdn.sap.com BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com

Right click on the Context and select New Æ Value Node.

SAP DEVELOPER NETWORK | sdn.sap.com BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com

SAP DEVELOPER NETWORK | sdn.sap.com BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com

SAP DEVELOPER NETWORK | sdn.sap.com BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com

SAP DEVELOPER NETWORK | sdn.sap.com BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com

SAP DEVELOPER NETWORK | sdn.sap.com BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com

Step 3: Code your Action

SAP DEVELOPER NETWORK | sdn.sap.com BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com

Step 4: Create your Pop-up Window and View

Choose “Embed new View” and click Next.

SAP DEVELOPER NETWORK | sdn.sap.com BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com

Step 5: Interim Application Test

SAP DEVELOPER NETWORK | sdn.sap.com BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com

Step 6: Closing your Pop-up Window

Choose PopApp – popapp and then OK.

You should then see this screen.

SAP DEVELOPER NETWORK | sdn.sap.com BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com

SAP DEVELOPER NETWORK | sdn.sap.com BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com

Right click on the Context and select New Æ Value Node

Name the Value Node PopupNode.

SAP DEVELOPER NETWORK | sdn.sap.com BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com

Name the attribute PopupAttribute.

SAP DEVELOPER NETWORK | sdn.sap.com BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com

Repeat the steps above for the PopWinView.

1) Create a Value Node

SAP DEVELOPER NETWORK | sdn.sap.com BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com

Check the PopupAttribute box and click OK.

Then click Finish.

SAP DEVELOPER NETWORK | sdn.sap.com BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com

Choose OK. Choose Finish.

Select the Methods tab.

SAP DEVELOPER NETWORK | sdn.sap.com BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com

Select Method and click Next.

Name your method “closePopup” and click Finish.

In the method enter the code:

IWDWindow window = wdContext.currentPopupNodeElement().getPopupAttribute();

SAP DEVELOPER NETWORK | sdn.sap.com BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com

In the resulting pop-up select Button and choose Finish.

SAP DEVELOPER NETWORK | sdn.sap.com BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com

Name the action “ClosePopup”. Choose Finish.

Step 7: Testing your Completed Application

SAP DEVELOPER NETWORK | sdn.sap.com BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com

SAP DEVELOPER NETWORK | sdn.sap.com BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com