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 documentation 了解它们。必须返回 false 以防止按钮不必要地提交表单。

然后，在与edit.jsf关联的backing 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 支持的 <f:viewParam> 标记。

最后，在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>

保存成功时在action方法中设置success布尔值。

public void save() {
    // ...

    this.success = true;
}

也存在使用所谓的“覆盖窗口”对话框的解决方案，该对话框基本上是 <div>，它使用 CSS position: fixed; 定位，并以透明背景跨越整个浏览器窗口，然后在其中另一个 <div>居中并包含真实的形式。然而，这需要更多的 JS/CSS。这也是一般的 JSF 组件库和 JavaScript 框架/插件（例如 jQuery 或 YUI）基本在做的事情。让它与 JSF 无缝协作只会更棘手，因为您当然希望在弹出表单上发生验证错误时重新显示弹出窗口等等。如果您使用的是支持 ajax 的 JSF 实现/库，这会容易得多。