Thursday Jan 03, 2008

Adding a Popup Window to a NetBeans 6.0 Visual 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.

This is a rewrite of a previous blog entry that was written for the Sun Java Studio Creator IDE. I have modified the steps so that it works for the NetBeans 6.0 IDE.

  1. Create a web application project with the Visual Web JavaServer Faces framework.

  2. Add a page named Popup.

  3. Add a Table component to the page.

  4. Drag VIR > Tables > State from the Services window and drop it on the table.

  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. Drag a Script component from the Advanced section of the Palette and drop it on the page.

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

  11. In the JSP page, change the <webuijsf:script> tag as shown below.

     
    <webuijsf:script binding="#{Popup.script1}" id="script1">
    <![CDATA[
    function doSave(val) {
     window.opener.setVal(val);
     window.close();
    }]]>
    </webuijsf:script>
    


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

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

  13. Drag a Text Field component and drop it on the page. In the Properties window, make sure the id is set to textField1.

  14. Drop a Hyperlink component on the page, just above the text field, and set the text property to State Code.

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

  16. Set the onClick property to doPopup('form1:textField1_field')

    Note: Here you are passing the id of the field to fill with the selected value. Determining the id can be tricky. To determine what to use for the id, run the application, and use a tool such as Firebug to inspect the DOM.

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

  18. In the property editor, click New and set both the Display and Value to popup. Click OK and click OK again.

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

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

  20. Drag a Script component from the Advanced section of the Palette and drop it on the page.

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

  22. In the JSP page, change the <webuijsf:script> tag as shown below.

     
    <webuijsf:script binding="#{Form1.script1}" id="script1">
    <![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;
    }]]></webuijsf:script>
    


  23. 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.

Wednesday Aug 30, 2006

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.
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