JSF 1.1中的面板弹出窗口 [英] Panel Popup In JSF 1.1

问题描述

在JSF 1.1中是否可以有面板弹出窗口?我想在单击编辑"按钮时显示一个弹出窗口，然后希望该面板弹出窗口中只有几个组件.

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.

我没有使用任何其他JSF(例如icefaces或richfaces)，而只是使用普通的JSF 1.1.

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

任何帮助都是非常重要的.

Any help is highly appreciable.

谢谢

推荐答案

是的，肯定有可能.只需引入一些JavaScript和/或CSS的好镜头就可以显示/隐藏和设置弹出窗口的样式.这也是像RichFaces这样的普通组件库所做的事情，唯一的不同之处在于它们全部封装在一个简单的JSF组件中.

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.

最简单的方法是单击按钮/链接即可使用JS window.open().

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;" />

window.open()允许对窗口进行细粒度的自定义，例如要显示/隐藏的大小和浏览器栏.阅读 MDN文档以了解它们.强制返回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.

然后，在与edit.jsf关联的辅助Bean的构造函数中，您可以通过id抓取该项目，该项目作为请求参数传递.

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));
}

令人讨厌，但这就是JSF 1.1所提供的，它不提供JSF 1.2支持的@PostConstruct注释或JSF 2.0支持的<f:viewParam>标记.

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.

最后，在edit.jsf中，您需要引入一些条件渲染的JavaScript片段，该片段重新加载父窗口(以便重新显示已编辑的数据)并关闭弹出窗口.

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>

保存成功后，在操作方法中设置success布尔值.

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

public void save() {
    // ...

    this.success = true;
}

也存在使用所谓的覆盖窗口"对话框的解决方案，该对话框基本上是<div>，使用CSS position: fixed;进行定位，并使用透明背景覆盖整个浏览器窗口，然后在其中使用另一个<div>居中并包含真实形式.但是，这需要对JS/CSS有更大的了解.这也是一般JSF组件库和JavaScript框架/插件(例如jQuery或YUI)所做的事情.使它与JSF无缝协作只是一件棘手的事情，因为您当然想在弹出表单上发生验证错误等情况时重新显示弹出窗口.如果您使用的是启用了Ajax的JSF实现/库，则要容易得多.

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.

这篇关于JSF 1.1中的面板弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！