Insider Scoop From the Tutorial Divas

« May 2008
Sun	Mon	Tue	Wed	Thu	Fri	Sat
				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	31

Today

Recent Entries

Links

Today's Page Hits: 486

Tag Cloud: ajax creator dataprovider dropdown jasperreports javaone jmaki jruby jsc jsf netbeans photohunt rails ruby table vwp

« Five-Minute Ruby on... | Main | Creating a Rails 2.0... »

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.

Create a web application project with the Visual Web JavaServer Faces framework.
Add a page named Popup.
Add a Table component to the page.
Drag VIR > Tables > State from the Services window and drop it on the table.
Right-click the Table component and choose Table Layout from the pop-up menu.
In the column for the STATE.STATEID database field, set the Component Type to Hyperlink, and click OK.
Select the Hyperlink component so that its properties appear in the Properties window.
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).
Drag a Script component from the Advanced section of the Palette and drop it on the page.
Click JSP in the editing toolbar to view the JavaServer Pages script.

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.

Create a new page called Form1. Make it be the start page.
Drag a Text Field component and drop it on the page. In the Properties window, make sure the id is set to textField1.
Drop a Hyperlink component on the page, just above the text field, and set the text property to State Code.
Set the url property to /faces/Popup.jsp.
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.
Click the ... button for the target property to open the target property editor.
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.
If the target property value is still blank, select popup from the value from the combobox for that property.
Drag a Script component from the Advanced section of the Palette and drop it on the page.
Click JSP in the editing toolbar to view the JavaServer Pages script.

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>

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.

Posted at 11:49AM Jan 03, 2008 in NetBeans Visual Web Pack | http://blogs.sun.com/divas/entry/adding_a_popup_window_to1 | Permalink | Comments[13]

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 80.191.171.163 on January 04, 2008 at 12:14 PM 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 01:02 PM PST #

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 08: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 09:37 AM PST #

good work

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

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 09:40 PM PST #

Very Goooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooood

Posted by 41.224.240.230 on January 10, 2008 at 12:25 AM 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 09: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 192.18.43.225 on April 21, 2008 at 09: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 08:34 AM PDT #

Roger

Is the Tomcat a J2EE server?

Posted by diva #2 on May 02, 2008 at 06:37 PM PDT #

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

Posted by Roger on May 12, 2008 at 06:42 AM 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 09:43 AM PDT #