JSF 1.1 中的面板弹出窗口

Question

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

我没有使用任何其他 JSF，如icefaces 或 richfaces，只是普通的 JSF 1.1。

任何帮助都是非常值得赞赏的。

谢谢

Answer 1

是的，这绝对有可能。只需引入一些 JavaScript 和/或 CSS 的好镜头即可显示/隐藏弹出窗口并设置其样式。这也是像 RichFaces 这样的普通组件库正在做的事情，唯一的区别是它全部包装在一个简单的 JSF 组件中。

最简单的是，您可以在单击按钮/链接时使用 JS window.open() 。

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

window.open() 允许对窗口进行细粒度的自定义，例如大小和要显示/隐藏的浏览器栏。阅读 MDN 文档以了解它们。必须返回 false 以防止按钮不必要地提交表单。

然后，在与 edit.jsf 关联的支持 bean 的构造函数中，您可以通过作为请求参数传递的 id 来获取项目。

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 支持的 标记。

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

<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 布尔值。

public void save() {
    // ...

    this.success = true;
}

还存在使用所谓的“覆盖窗口”对话框的解决方案，该对话框基本上是

，它使用 CSS position:fixed; 定位并跨越整个浏览器窗口具有透明背景，然后其中有另一个居中并包含真实形式的

。然而，这需要更多的 JS/CSS。这也是一般的 JSF 组件库和 JavaScript 框架/插件（例如 jQuery 或 YUI）基本上所做的事情。让它与 JSF 无缝协作只是比较棘手，因为您当然希望在弹出表单上发生验证错误等情况时重新显示弹出窗口。如果您使用支持 ajax 的 JSF 实现/库，那就容易多了。