Using Popup Windows in JavaServer Faces Applications

[Sergey Smirnov]

This example works with JSF RI 1.0 Final Release.


===

This example shows how to use a client-side script to control a form field rendered by JSF, how to launch a popup window and return a result back to the main window, and how to use the standard JSF Navigation Framework for navigation in a multiple-windows interface environment.
The example uses client state saving method. in case of using server state saving method the approach might be different.

Download: jsf-popup.zip (1.65Mb)


Download Instruction

1) Download zip archive and unzip it into any folder

Using with Eclipse

How to import it:
1. Copy jsf-popup folder under Eclipse workspace
2. Run Eclipse
3. Select File->Import->Existing Project into Workspace
4. Select jsf-popup for "Project contents" and click Finish
5. Select the jsf-popup project and build it (optional step if you set automatic rebuild on modification in Eclipse Preferences)

How to deploy it:
The jsf-popup project contains a folder 'ant' with a build.xml script in it.
1. In this script, set the deploy.dir property value to the folder name you want to deploy the WAR file in.
2. Run Ant on the build.xml script using the deploy target to deploy.

Using without Eclipse

1. Go to jsf-popup/ant folder
2. In build.xml script, set the deploy.dir property value to the folder name you want to deploy the WAR file in
2. Run ant deploy

For JSF-RI version 1.1:
read http://forum.exadel.com/viewtopic.php?p=7498#7498

[Sergey Smirnov]

This example works only with JSF RI 1.0 Beta
===

This example shows how to use a client-side script to control a form field rendered by JSF, how to launch a popup window and return a result back to the main window, and how to use the standard JSF Navigation Framework for navigation in a multiple-windows interface environment.

Download: jsf-popup_beta.zip (0.7Mb)


Download Instruction

1) Download zip archive and unzip it into any folder
2) Copy beta versions of jsf-api.jar and jsf-impl.jar to jsf-popup/WebContent/WEB-INF/lib

Using with Eclipse

How to import it:
1. Copy jsf-popup folder under Eclipse workspace
2. Run Eclipse
3. Select File->Import->Existing Project into Workspace
4. Select jsf-popup for "Project contents" and click Finish
5. Select the jsf-popup project and build it (optional step if you set automatic rebuild on modification in Eclipse Preferences)

How to deploy it:
The jsf-popup project contains a folder 'ant' with a build.xml script in it.
1. In this script, set the deploy.dir property value to the folder name you want to deploy the WAR file in.
2. Run Ant on the build.xml script using the deploy target to deploy.

Using without Eclipse

1. Go to jsf-popup/ant folder
2. In build.xml script, set the deploy.dir property value to the folder name you want to deploy the WAR file in
2. Run ant deploy

[marina]

[quote="Sergey Smirnov"][b]This example works with JSF RI 1.0 Final Release.[/b][/quote]


===

This example shows how to use a client-side script to control a form field rendered by JSF, how to launch a popup window and return a result back to the main window, and how to use the standard JSF Navigation Framework for navigation in a multiple-windows interface environment.
The example uses client state saving method. in case of using server state saving method the approach might be different.

[b]Download: [url=http://www.exadel.com/downloads/jsf/examples/jsf-popup.zip]jsf-popup.zip (1.65Mb)[/url] [/b]


[b][u]Download Instruction[/u][/b]

1) Download zip archive and unzip it into any folder

[u][b]Using with Eclipse[/b][/u]

[b]How to import it:[/b]
1. Copy jsf-popup folder under Eclipse workspace
2. Run Eclipse
3. Select File->Import->Existing Project into Workspace
4. Select jsf-popup for "Project contents" and click Finish
5. Select the jsf-popup project and build it (optional step if you set automatic rebuild on modification in Eclipse Preferences)

[b]How to deploy it:[/b]
The jsf-popup project contains a folder 'ant' with a build.xml script in it.
1. In this script, set the deploy.dir property value to the folder name you want to deploy the WAR file in.
2. Run Ant on the build.xml script using the deploy target to deploy.

[u][b]Using without Eclipse[/b][/u]

1. Go to jsf-popup/ant folder
2. In build.xml script, set the deploy.dir property value to the folder name you want to deploy the WAR file in
2. Run [i]ant deploy[/i]

[marina]

This example works with JSF RI 1.0 Final Release.
got error

===

This example shows how to use a client-side script to control a form field rendered by JSF, how to launch a popup window and return a result back to the main window, and how to use the standard JSF Navigation Framework for navigation in a multiple-windows interface environment.
The example uses client state saving method. in case of using server state saving method the approach might be different.

Download: jsf-popup.zip (1.65Mb)


Download Instruction

1) Download zip archive and unzip it into any folder

Using with Eclipse

How to import it:
1. Copy jsf-popup folder under Eclipse workspace
2. Run Eclipse
3. Select File->Import->Existing Project into Workspace
4. Select jsf-popup for "Project contents" and click Finish
5. Select the jsf-popup project and build it (optional step if you set automatic rebuild on modification in Eclipse Preferences)

How to deploy it:
The jsf-popup project contains a folder 'ant' with a build.xml script in it.
1. In this script, set the deploy.dir property value to the folder name you want to deploy the WAR file in.
2. Run Ant on the build.xml script using the deploy target to deploy.

Using without Eclipse

1. Go to jsf-popup/ant folder
2. In build.xml script, set the deploy.dir property value to the folder name you want to deploy the WAR file in
2. Run ant deploy

[Torajirou]

hi !

I would like to use parts of this example to apply it to my web application

when I try to do so, I get an error report from IE :

Code: Select all

'hform[...] has a Null value or is not an object'

happening at line

Code: Select all

hform[form+':'+target].value=form+':'+target;

here is the implicated parts of my .jsp :

Code: Select all

<f:view>
    <h:dataTable (...)>
        <h:column>
            <h:form id="whereForm">
                <h:commandButton id="find" action="showPlace" value="..." immediate="true" onmousedown="showPlaceList(this, 'placeList', 'find')" onclick="return false"/>
            </h:form>
        </h:column>
        (...)
    </h:dataTable>
    <h:form id="placeList" target="list">
        <h:inputHidden id="country" value="#{LibelleCodeRejetBean.codeRejet}">
        </h:inputHidden>
        <h:commandLink id="find" action="showPlace" value="">
            <f:verbatim></f:verbatim>
        </h:commandLink>
    </h:form>
</f:view>


I defined the "showPlace" navigation rule in my faces-config.xml and replaced the "getCountry" function call in "showPlaceList" function by an arbitrary value (for testing purpose)

What I don't get is that I didn't change anything regarding to the reported erroneous line... I sure am missing something here, but know little of Javascript

What's more, I'd like to replace the "commandButton" by a "commandLink" and pass to my hidden form the outputText of this link. How can I do that ?

thanks a lot in advance !

regards

EDIT :

problem solved : it's a (apparently) known bug of JSF 1.1... I thought I was going crazy ^^

since I switched back to JSF 1.0, everything just goes smoothly

hope this edit will help those who'll face the same problem !

[Zahraz]

Hi,
been through the example , basically u are using javascripting to show the poupup window and using hidden fieldz/forms to then transfer..the value of the choosen country.
My need is to make a pop menu , a right click popup menu , so following the example u have posted! i can do it by puttin in the javascript for right click poupup menuz which is very common...and using hidden fieldsz...
wht do u say?
thanx

[Sergey Smirnov]

1. About popup on the mouse right click: http://www.google.com/search?q=popup+menu+right+click

2. Latest MyFaces example shows how create popup menu using JSF (MyFaces implementation): http://www.myfaces.org/

[Victor]

Hello,

I am trying to get the popup to work on myfaces, has anyone successfully done that? I modified web.xml and the Javascript which alters the hidden form fields, but for some mysterious reason the first time I click to choose the place everything is ok, but on a second click I get a popup showing the original page (inputdata.jsp). Perhaps it is a navigation bug from myfaces, does anyone have any ideas?

Thanks a lot,

Victor

[Sergey Smirnov]

What kind of saving state method do you use: server or client?

[Victor]

Great idea, I switched from server to client and now it is working, thanks However it is really a shame that the Javascript has got to be modified in order for it to work with either myfaces or the RI. It would be a great idea to have the Js standardized in some way across implementations...

V.

[Sergey Smirnov]

I do not share your idea to shame javascript here. It is not a scripting problem, but the problem of approach how jsf implementation manages the situation when it receives request from the view that is not the same that was sent to the client previously.

[Victor]

Yes, what I meant with the Javascript commentary was not regarding your script in particular, but the fact that IMHO the JSF spec perhaps could be more specific regarding Javascript / HTML.

Regards,

V.

[Amit]

This is not actually just related to pop up windows but very evident for pop up windows. I have a list of records in a table and clicking on one of them I want to open the complete pre-populated record in a popup window for edit. I can pass the id to the popup window, but I want my backing bean to be populated for pre-populating my form.

Are there any good ways to acheive this using JSF only. I mean without using a struts controller. I am using MyFaces.

[Amit]

I think I got what i was looking for in this post. I was thinking exactly the same but wanted to confirm it.
http://www.mail-archive.com/myfaces-dev ... 00047.html

[SapsHaven]

Hello, it is not clear to me. Does this example work with myfaces? I got it working nicely with the JSF represented by the jars included in the zip. When I tried to get it to run with myfaces 1.0.8, it stops working. Specifically, the popup window is no longer populated. It remains bank, with no rendered html. Please help me out if you can.
Regards.