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

Hello,
This is good tutorial.
I have a question.
In doPopup function ,i think ,you use the client identifier of TextField.
As i know from "JSF in Action",the client identifier of TextField must be "form1: textfield1" not "form1:textField1_field".
Can you explain what the _field is?
And also i looked at the source of the page (from browser) and i do not find neither a input element with id form1:textField1_field and nor with id
form1:textField1
I am confusing.
Thanks in advance.

Posted by guest on January 04, 2008 at 04:14 AM PST #

Hello 80.191.171.163,

You are correct that there is no input html element in the page source. Instead there is "dojo.addOnLoad(function() {webui.suntheme.widget.common.replaceElement("form1:textField1", {"widgetType":"webui.suntheme.widget.textField","value":"","required":false,"disabled":false,"style":"left: 24px; top: 72px; position: absolute","visible":true,"valid":true,"size":20,"readOnly":false,"id":"form1:textField1","autoValidate":false});});"
That is why I say to inspect the DOM. It is not sufficient to look a the page source.

The NetBeans Visual Web components are enhanced JSF components and thus the rule that you site from JSF in Action does not fully translate to Visual Web components. A Visual Web text field component is actually three html elements -- a span with nested span (label) and input elements - each with a unique id. If you inspect the DOM, you will see a structure like this:

Parent: span form1:textField1

First Child: span form1:textField1_label

Second Child: input form1:textField1_field

Posted by Diva #2 on January 04, 2008 at 05:02 AM PST #

Hi

This sample dont work properly in Netbeans 6 we must replace setVale method with this method :

function setVal(val){
destinationElement.setProps({"value":val});
}

best regard

bye

Posted by Saeed on January 04, 2008 at 12:22 PM PST #

Hello Saeed,

Thank you for your comment. I tested this using NetBeans IDE 6 and both Firefox and IE, and it works on both. Can you better define "doesn't work properly" and state what browsers you are testing on?

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

good work

Posted by guest on January 08, 2008 at 12:56 PM PST #

Hi

setVal() function does not work in Netbeans 6 and firefox browser.

because JSF componentn in Netbeans 6 are different from Netbeans 5.5 .

we must replace setVale method with this method :

function setVal(val){
destinationElement.setProps({"value":val});
}

Posted by Saeed on January 08, 2008 at 01:40 PM PST #

Very Goooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooood

Posted by guest on January 09, 2008 at 04:25 PM PST #

buen dia.

tengo un pequeño problemita y no sabia en donde pedir ayuda,

como le agrego un color de fondo a una caja de texto con vwp,
no funciona dandole style ni agregando una classname ni sobreescribiendo esta clases tomadas del ColorandMedia.css
.TxtFld_sun4

no se que mas hacer el diseñador de la empresa me esta hechando el proyecto que quiero hacer con esta tecnologia pero por esta bobada me tiene muy pero muy mal

agradezco cualquier ayuda

Posted by Jaider Rdoriguez on April 20, 2008 at 02:33 AM PDT #

Jaider,

I am afraid that I do not know much about setting styles and such. You should read Winston's blog, http://blogs.sun.com/winston/. He has some good tips on the subject.

Posted by guest on April 21, 2008 at 02:39 AM PDT #

Excelente

Tenia problemas por q estaba trabajando en netbean6
pero cambie la funcion setVal como mencionan y trabaja de maravilla

Sin embargo me muestra el siguiente Warning en la consola del tomcat

WARNING: executePhase(RENDER_RESPONSE 6,com.sun.faces.context.FacesContextImpl@7f641e) threw exception
javax.faces.FacesException
at com.sun.faces.lifecycle.RenderResponsePhase.execute(RenderResponsePhase.java:135)
at com.sun.faces.lifecycle.LifecycleImpl.phase(LifecycleImpl.java:251)
at com.sun.faces.lifecycle.LifecycleImpl.render(LifecycleImpl.java:144)
at com.sun.faces.extensions.avatar.lifecycle.PartialTraversalLifecycle.render(PartialTraversalLifecycle.java:106)
at javax.faces.webapp.FacesServlet.service(FacesServlet.java:245)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:290)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:206)
at com.sun.webui.jsf.util.UploadFilter.doFilter(UploadFilter.java:267)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:235)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:206)
at org.netbeans.modules.web.monitor.server.MonitorFilter.doFilter(MonitorFilter.java:390)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:235)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:206)
at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:233)
at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:175)
at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:128)
at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:102)
at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:109)
at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:286)
at org.apache.coyote.http11.Http11Processor.process(Http11Processor.java:844)
at org.apache.coyote.http11.Http11Protocol$Http11ConnectionHandler.process(Http11Protocol.java:583)
at org.apache.tomcat.util.net.JIoEndpoint$Worker.run(JIoEndpoint.java:447)
at java.lang.Thread.run(Thread.java:619)
Caused by: ClientAbortException: java.net.SocketException: Broken pipe
at org.apache.catalina.connector.OutputBuffer.realWriteBytes(OutputBuffer.java:358)
at org.apache.tomcat.util.buf.ByteChunk.flushBuffer(ByteChunk.java:434)
at org.apache.catalina.connector.OutputBuffer.doFlush(OutputBuffer.java:309)
at org.apache.catalina.connector.OutputBuffer.flush(OutputBuffer.java:288)
at org.apache.catalina.connector.Response.flushBuffer(Response.java:548)
at org.apache.catalina.connector.ResponseFacade.flushBuffer(ResponseFacade.java:279)
at javax.servlet.ServletResponseWrapper.flushBuffer(ServletResponseWrapper.java:166)
at com.sun.faces.application.ViewHandlerImpl.renderView(ViewHandlerImpl.java:203)
at com.sun.rave.web.ui.appbase.faces.ViewHandlerImpl.renderView(ViewHandlerImpl.java:320)
at com.sun.faces.lifecycle.RenderResponsePhase.execute(RenderResponsePhase.java:106)
... 22 more
Caused by: java.net.SocketException: Broken pipe
at java.net.SocketOutputStream.socketWrite0(Native Method)
at java.net.SocketOutputStream.socketWrite(SocketOutputStream.java:92)
at java.net.SocketOutputStream.write(SocketOutputStream.java:136)
at org.apache.coyote.http11.InternalOutputBuffer.realWriteBytes(InternalOutputBuffer.java:737)
at org.apache.tomcat.util.buf.ByteChunk.flushBuffer(ByteChunk.java:434)
at org.apache.tomcat.util.buf.ByteChunk.append(ByteChunk.java:349)
at org.apache.coyote.http11.InternalOutputBuffer$OutputStreamOutputBuffer.doWrite(InternalOutputBuffer.java:761)
at org.apache.coyote.http11.filters.ChunkedOutputFilter.doWrite(ChunkedOutputFilter.java:124)
at org.apache.coyote.http11.InternalOutputBuffer.doWrite(InternalOutputBuffer.java:570)
at org.apache.coyote.Response.doWrite(Response.java:560)
at org.apache.catalina.connector.OutputBuffer.realWriteBytes(OutputBuffer.java:353)
... 31 more

Alquien sabe a que se debe este error?

Posted by Roger on May 02, 2008 at 01:34 AM PDT #

Roger

Is the Tomcat a J2EE server?

Posted by diva #2 on May 02, 2008 at 11:37 AM PDT #

diva
Tomcat is not a full J2EE server.
but, what do you want to say with this question?

Posted by Roger on May 11, 2008 at 11:42 PM PDT #

Hi Roger,

The components that you use on the Visual Web pages useJ2EE technology and can only be deployed to J2EE technology compliant servers, such as GlassFish.

Posted by diva #2 on May 12, 2008 at 02:43 AM PDT #

NOTHING IS VISIBLE IN IE 6

Posted by Omar on June 01, 2008 at 07:13 PM PDT #

Omar, see also http://blogs.sun.com/divas/entry/adding_a_popup_window_to. I and others have successfully implemented this with IE, but none of us say which IE we used to test. I expect that in the original post (url above) I tested with IE6. Have you verified that it only doesn't work with IE6? That is, have you tested with IE7 and Firefox? It would help to determine what has changed with IE6 such that it didn't work then abut works now with IE7 (if indeed such is the case).

Posted by diva#2 on June 02, 2008 at 02:18 AM PDT #

hello,

i'd like to write the selected value from the popup to a tablecell. i don't know how to get the correct destination.

i think i have to change something here: doPopup('form1:textField1_field')...but i don't know how.

does anybody have any idea?
thx

Posted by Fu on July 06, 2008 at 06:35 PM PDT #

Fu,

I have never come up with a solution for writing the selected value into a table row. Maybe think about another solution such as dynamic faces, ajax code completion?

Posted by guest on July 08, 2008 at 03:45 AM PDT #

Hi All,
the link "http://blogs.sun.com/divas/entry/adding_a_popup_window_to" seems to be broken.
Does anybody know the correct url ?
Thanks anyway ...

Posted by Barney on September 02, 2008 at 07:17 PM PDT #

http://blogs.sun.com/divas/entry/adding_a_popup_window_to works fine for me

Posted by guest on September 02, 2008 at 08:51 PM PDT #

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