如何从PrimeFaces中包含的页面触发父页面中的事件

Question

我有一个parent.xhtml页面，其中包含了一个child.xhtml页面。在子页面中，我有一个按钮，在单击它时，我想触发父页面中的侦听器/操作事件(假设我想执行来自父页面bean的方法)。

编辑:我需要使子页面尽可能原子化，这样它也可以在其他父母/包装器中重用。这将意味着简单地使它广播一个事件，任何将成为父页面的人都可以收听。

parent.xhtml:

<ui:include src="/content/childPage.xhtml"></ui:include>

child.xhtml

<p:commandButton doSomething....>
</p:commandButton>

我使用的是PrimeFaces 6, JSF 2

Answer 1

您的两个'页面'是客户端只是一个html页面。所以你可以有一个非常简单的基于"事件"的解决方案，你可以将PrimeFaces remoteCommand与jquery事件处理结合起来

在client.xhtml中:

<p:commandButton type="button" value="Click me" onclick="$(document).trigger("myevent");" />

<script>
    $(document).on("myevent", rc);
</script>
<p:remoteCommand name="rc" update="msgs" actionListener="#{parentViewBean.execute}" />

父类可以完整且轻松地定义要调用的操作。缺点是，如果在父类中没有"事件"处理程序，按钮似乎不会做任何事情。如果这是一个问题，那是可以解决的。

将client.xhtml更改为:

<p:commandButton type="button" value="Click me" onclick="fireEventIfPresent" />
<script>
function fireEventIfPresent() {
    if($._data(document, "events")['myevent']) { // check if eventhandler is present
        $(document).trigger("myevent");         
    } else {
        alert('No event handler in parent page');
    }
}
</script>

Answer 2

要将数据信息从child.xhtml发送到您的parent.xhtml，您必须在ChildManagedBean中添加ManagedProperty，参考ParentManagedBean。

ChildManagedBean.java

@ManagedProperty(value = "#{parentManagedBean}")
private ParentManagedBean e;

现在让我们看看child.xhtml

child.xhtml

<p:commandButton actionListner="#{childManagedBean.doSomething()}"....>
</p:commandButton>

ChildManagedBean.java

public void doSomething(){
    Boolean test = Boolean.TRUE;
    e.methodGetInfof(test);
}

为了使其可重复使用，你必须将此添加到parent.xhtml

parent.xhtml

<ui:include src="/content/childPage.xhtml">
    <ui:param name="action" value="executeMethod"/>
    <ui:param name="bean" value="#{ManagedBean}" />
</ui:include>

并将其添加到child.xhtml

child.xhtml

<p:commandButton actionListener="#{bean[action]()}"....>
</p:commandButton>

希望对你有帮助。