Question

Is it possible to have panel popup window in JSF 1.1 ? I would like to display a popup window when I click edit button and then would like to have few components in that panel popup window.

I am not using any other JSF like icefaces or richfaces, just plain JSF 1.1.

Any help is highly appreciable.

Thanks

Answer 1

Yes, it’s definitely possible. Just bring in some good shot of JavaScript and/or CSS to show/hide and style the popup window. That’s also what the average component library like RichFaces is doing with the only difference that it’s all wrapped in a simple JSF component.

At its simplest you can use JS window.open() on click of a button/link.

<h:commandButton value="Edit" onclick="window.open('edit.jsf?id=#{item.id}'); return false;" />

The window.open() allows for fine grained customization of the window, such as the size and the browser bars which are to be displayed/hidden. Read the MDN documentation to learn about them. Returning false is mandatory to prevent the button from unnecessarily submitting the form.

Then, in the constructor of the backing bean associated with edit.jsf, you can grab the item by the id which is been passed as request parameter.

private Item item;

public EditItemBean() {
    String id = (String) FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("id");
    this.item = someItemService.find(Long.valueOf(id));
}

Nasty, but that’s what you get with JSF 1.1 which doesn’t offer a JSF 1.2-supported @PostConstruct annotation or JSF 2.0-supported <f:viewParam> tag.

Finally, in the edit.jsf you need to bring in some conditionally rendered JavaScript piece which reloads the parent window (so that the edited data is redisplayed) and closes the popup window.

<h:form>
    ...
    <h:commandButton value="Save" action="#{editItem.save}" />
</h:form>
<h:panelGroup rendered="#{editItem.success}">
    <script type="text/javascript">
        window.opener.location.reload(true);
        window.close();
    </script>
</h:panelGroup>

Set the success boolean in the action method when the saving is successful.

public void save() {
    // ...

    this.success = true;
}

There exist also solutions using a so-called “overlay window” dialog which is basically <div> which is positioned using CSS position: fixed; and spans the entire browser window with a transparent background and then therein another <div> which is centered and contains the real form. This however requires a bigger shot of JS/CSS. This is also what the average JSF component library and JavaScript framework/plugin (such as jQuery or YUI) is basically doing. It’s only trickier to get it work seamlessly together with JSF as you would of course like to redisplay the popup when a validation error on the popup form occurs and that kind of things. It’s much easier if you’re using an ajax-enabled JSF implementation/library.