Adding a Popup Window to a Java Studio Creator Web Page

Here is a mini-tutorial for creating a Popup window for the user to lookup values. One scenario that you might use this for is when the page visitor needs more information then can be displayed in a drop-down list.

Note: The original post of this blog entry had code that did not work in Internet Explorer. Escritorioooo posted a solution to the forum and I updated the code using Escritorioooo's solution. Thanks Escritorioooo!

  1. Create a project or open an existing one.

  2. Add a page named Popup.

  3. Add a Table component to the page.

  4. Drag VIR > Tables > State from the Servers window and drop it on the page.

  5. Right-click the Table component and choose Table Layout from the pop-up menu.

  6. In the column for the STATE.STATEID database field, set the Component Type to Hyperlink, and click OK.

  7. Select the Hyperlink component so that its properties appear in the Properties window.

  8. Set the value for the onClick property to doSave('#{currentRow.value['STATE.STATEID']}')

    (I got the value to pass to doSave() from the Value Expression in the Table Layout dialog).

  9. Click JSP in the editing toolbar to view the JavaServer Pages script.

  10. Add the following code shown in bold just under the opening tag for ui:body:

     
    <ui:body binding="#{Popup.body1}" id="body1" style="-rave-layout: grid">
    <script><![CDATA[
    function doSave(val) {
      window.opener.setVal(val);
      window.close();
    }]]></script>
    


    The Popup page is now ready for use by another page.

  11. Create a new page called Form1. Make it be the start page.

  12. Drop a Hyperlink component on the page and set the text property to State Code.

  13. Set the url property to /faces/Popup.jsp.

  14. Set the onClick property to doPopup("form1:textField1")

    Note: Here you are passing the id of the field to fill with the selected value. Determining the id can be tricky. For example, if you set the label property of the Text Field component, the id changes to form1:textField1_field.

    To determine what to use for the id, right-click in the page and choose View in Browser. When the page displays in the browser, choose View Source from the appropriate browser menu and look for the id setting for the component's <input> tag.

  15. Click the ... button for the target property to open the target property editor.

  16. In the property editor, click New and set both the Display and Value to popup. Click in some field and check that both values stuck. Then click OK.

    Later you add script to open a window named popup, and this setting causes the Popup.jsp page to display in that window.

  17. If the target property value is still blank, select popup from the combobox for that property.

  18. Drag a Text Field component and drop it under the Hyperlink component. By default, the component's id should be textField1. If not, change the id passed to doPopup() in step 14 to match. Use the View in Browser trick mentioned in Step 14 to determine the value to pass.

  19. Click JSP in the editing toolbar to view the JavaServer Pages script.

  20. Add the following code shown in bold just under the opening tag for ui:body:

     
    <ui:body binding="#{Popup.body1}" id="body1" style="-rave-layout: grid">
    <script><![CDATA[
    function doPopup(destination) {
      popup = window.open("", "popup", 
        "height=300,width=200,toolbar=no,menubar=no,scrollbars=yes");
        destinationElement=document.getElementById(destination);
      popup.focus();
    }
    
    function setVal(val){
      destinationElement.value=val;
    }]]></script>
    


    This script adds an instance field name openerDestinationElement to the popup window. The script for the Popup page uses openerDestinationElement to get to the Text Field component on the Form1 page.

  21. Run the project. Click State Code to open the popup window. Click a state code to select the code, close the popup window, and populate the text field.
Comments:

Hi Divas, I was wondering if we can put Javascript component in the table component. Because a lot of javascript component doesn't really work well in my table component such as calendar which only work ( the popup thing ) for a particular row. Thanks

Posted by willy on August 30, 2006 at 11:21 AM PDT #

hello!! great sample!! works perfectly with firefox but with Internet explorer 6.0 got this error: 'window.openerDestinationElement' es nulo o no es un objeto how can i run this great sample with IE? thanks in advance

Posted by Marcos Rojo on September 05, 2006 at 09:02 PM PDT #

Willy, I haven't tried it, so I can't say for sure. Try posting that question to http://swforum.sun.com/jive/forum.jspa?forumID=123 Marcos, I don't know off hand. I will have to investigate.

Posted by diva#2 on September 07, 2006 at 06:17 AM PDT #

Willy, This post was updated with code that works in Internet Explorer.

Posted by diva#2 on September 18, 2006 at 01:55 AM PDT #

It'll work with "popup" as parameter in the open function: mywindow = window.open("", "popup", "height=300,width=200,toolbar=no,menubar=no,scrollbars=yes");

Posted by Pierre on September 23, 2006 at 06:21 PM PDT #

Pierre, Fixed, thanks!

Posted by diva#2 on September 24, 2006 at 04:14 AM PDT #

Hi Divas! Thanks for your examples ! They are very useful! I wonder if this example can be changed using button in Form1 rather than hyperlink ? Another question is: when i return my value from popup window and populate textfield1 is there a way to trigger valueChangeListener of textfield1? Thanks mickgiu

Posted by mickgiu on September 27, 2006 at 12:09 AM PDT #

mickgiu, 1) The problem with the Button component is that it does not offer the target property or the url property. What you could do is use the Image Hyperlink component and have an image that looks like a button. 2) You can create a process value change method for the text field and associate it with the text field (the quickest way to do that is to double-click on the text field in the design view). When the form is submitted, the method will get invoked. If you want this to happen real-time (that is, you want to do some event when they return from the pop-up, and not wait for the form to be submitted), you have to either use JavaScript, or AJAX. To see how to do this with AJAX, see http://www.javapassion.com/handsonlabs/5655_ajaxcreator.zip.

Posted by diva#2 on September 27, 2006 at 02:42 AM PDT #

Thanks for your answer. mickgiu

Posted by mickgiu on September 28, 2006 at 04:39 PM PDT #

Hi, i've another question about this tutorial. I've made some changes : 1) i use a image link 2) i populate 2 field from popup. All is ok if i take field from popup table one of first 10 rows. (i have 1600 rows). If i get field from over 10 rows, popup show me first rows. This happens also i use pagination. Thanks for your attention. mickgiu

Posted by mickgiu on October 09, 2006 at 01:25 AM PDT #

mickgiu, I will have to try this and get back to you. It will be awhile, unfortunately.

Posted by diva#2 on October 09, 2006 at 01:33 AM PDT #

mickgiu, after careful reading, I am not sure I understand exactly what you are doing. Here is what I think. The pop-up has a table. You have turned pagination on for the table (to only show the first 10 rows). If the user goes to the popup and pages to the second page, and selects something, the program returns back a value from the first page?

Posted by diva#2 on October 09, 2006 at 01:36 AM PDT #

i made a bit of confusion ( i'm sorry for my english) the problem is that when i choose a row 1 - 10 all is ok when i go to second page and click link it does nothing. I've forgotten a thing: my resultset is filtered by a condition "where field like %" thanks very muck mickgiu

Posted by mickgiu on October 09, 2006 at 02:28 AM PDT #

Hello Divas, I was wondering if I can use this with JSR-168 JSF Portlet Project. I did create a jsr-168 jsf project and in my portlet page, i have a simple hyperlink which open a pop-up showing some company policy. Its a simple PoPup just clicking on hyperlink from the portlet page. What should I do for this portlet page? Please advise, Thanks! -Hiten

Posted by Hiten on October 31, 2006 at 07:12 AM PST #

good

Posted by guest on November 15, 2006 at 12:27 PM PST #

Hi Divas! Thanks for your examples !

I have a question : I can't pass parameter to popup window using SessionBean ???

Thanks

Posted by Nghialt on October 08, 2007 at 08:00 PM PDT #

Hello Nghialt,

I am not a JavaScript expert so I am not a good person to ask that question. What I do know is that the JavaScript is exercised on the client side. That is, when the pop-up appears, it is done without sending anything to the server and without exercising any server-side code, such as code to save a value to a session bean. You might want to send this question to a JavaScript/JSF mailing list.

Posted by Diva #2 on October 09, 2007 at 03:17 AM PDT #

Thanks for reply. nghialt

Posted by Nghialt on October 09, 2007 at 11:52 AM PDT #

Nghialt,

I just remembered that you can use Ajax or Dynafaces to store the value in the session bean without submitting the form. We did a hands on lab about using Ajax in Visual Web apps at JavaOne 2006 -- http://developers.sun.com/learning/javaoneonline/j1lab.jsp?lab=LAB-5655&yr=2006&track=8. There is a tutorial about Dynafaces at http://nbstaging.czech/kb/55/vwp-instcurrencytrader.html.

Posted by Diva #2 on October 10, 2007 at 02:24 AM PDT #

Hi Mr.Divas,
Sir, i wish to dynamically make url which is a query string, with the selected submit values from multiple select list box without any involvement of java action listener interference. Like http:// ...jsp/?key=value&a=1&b=2... , where 1, 2 ...are all the values selected from multi select box. Can i do this ? if so how ? If I cannot its fine! any help on this issue is extreamely useful and I ove my humble gratitude all those who can add a bead to this thread!

Posted by shambhu on October 29, 2007 at 05:41 AM PDT #

Hello Shambhu,

I am not understanding what you mean by "without any involvement of java action listener interference". Do you mean that you do not want the user to have to submit the form (and thus you cannot do any server side processing)?

We, the tutorial divas, can help with JavaServer Faces and Visual Web questions, but we do not know very much about JavaScript. I learned jsut enough JavaScript to figure out how to make this popup work, but no more. If you want a JavaScript answer, then I am sorry we cannot help you. I suggest that you go to a JavaScript forum with this question.

You might want to investigate dynamic faces. See http://www.netbeans.org/kb/55/vwp-instcurrencytrader.html.

Another option is to use a jMaki widget. See http://blogs.sun.com/divas/entry/using_jmaki_9_3_with and http://www.jmaki.com/.

Posted by Diva #2 on October 29, 2007 at 09:25 AM PDT #

Hi
this example dont work in netbeans 6
please help me .

Posted by saeed on December 31, 2007 at 07:12 PM PST #

[Trackback] Here is a mini-tutorial for creating a Popup window for the user to lookup values. One scenario that you might use this for is when the page visitor needs more information then can be displayed in a drop-down list. This is a rewrite of a previou...

Posted by Insider Scoop From the Tutorial Divas on January 03, 2008 at 04:09 AM PST #

Saeed,

I just posted a NetBeans IDE version. See http://blogs.sun.com/divas/entry/adding_a_popup_window_to1

Posted by Diva #2 on January 03, 2008 at 04:16 AM PST #

Dear Diva:
I am learning some tutorials from your blog, but I don't have a State Table under the VIR database in my Glassfish Server. Where can I find or download the State table please?
Best regards,
Wai-chi

Posted by Wai-chi Lau on January 07, 2008 at 12:48 AM PST #

Hello,

The VIR database is includes with Sun Java Studio Creator, and with the Web and Java EE NetBeans IDE 6.0 or the Full NetBeans IDE 6.0.

If you don't have either of those versions, here are some suggestions:

To quickly try out this tutorial, use any database table and replace STATE.STATEID with the table name and column name.

Or, you can add a table to an existing database. Call the table STATE and add a STATEID column and a STATENAME column.

Posted by Diva #2 on January 07, 2008 at 01:26 AM PST #

Post a Comment:
Comments are closed for this entry.
About

divas

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today