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关联的辅助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>

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

public void save() {
    // ...

    this.success = true;
}

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

面板弹出在JSF 1.1中

1 个答案: