Question

我有一个包含2个下拉菜单的页面（我们将调用然后删除1并删除2）。当用户从第1行中选择某些内容时，我有一个被调用的方法并运行一个查询，该查询将根据drop 1填充第2行。我需要做的是在更改drop 1时阻止UI，然后在查询返回并填充drop 2时取消阻止它。我有一个我认为它应该工作的存根但不确定如何从代码访问块UI。

public void onPrimaryQueryDataSourceChanged() {
    // ** Block UI **
    try {
        // Run query, get results, and populate dropdown
    } catch (SQLException e) {
        e.printStackTrace();

    } finally {
        // ** Unblock UI **
    }
}

我怎样才能做到这一点？

Answer 1

概念

您无法在java代码中显示blockUI。
您可以在JS脚本中显示blockUI。
您可以在java代码中指定JS脚本，以便在响应完成后运行。

指定java代码中的JS脚本在响应完成后运行PrimeFaces提供带有函数execute(String script)的RequestContext实用程序 - 在ajax请求完成或页面加载后执行脚本。

假设存根的问题

让我们看看你的存根：

public void onPrimaryQueryDataSourceChanged() {
// ** Block UI **
// To show blockUI you may write the following: 
   RequestContext.getCurrentInstance().execute("PF('myBlockUI').show();");
// Note that even it is called "execute"
// script "PF('myBlockUI').show();" will be executed AFTER RESPONSE COMPLETE.
// So here you need to return. 
// Then the response with included JS script to show blockUI will be send.
// Then client retrieves the response and runs your JS script.
// Then JS script shows blockUI. 
// So the remaining code below is misplaced.
try {
    // Run query, get results, and populate dropdown
} catch (SQLException e) {
    e.printStackTrace();

} finally {
    // ** Unblock UI **
}

解决方案

Ajax为您的案例提供基本技巧。你可以使用：

onstart //这里显示blockUI
操作本身（ajax请求）//在服务器端，您填充下拉列表的值
oncomplete //在这里隐藏blockUI

具体解决方案

只需混合PrimeFaces Showcase中的示例： http://www.primefaces.org/showcase/ui/ajax/dropdown.xhtml http://www.primefaces.org/showcase/ui/misc/blockUI.xhtml

所以你可以写下面的内容：

<h:panelGrid id="panelGridId" columns="2" cellpadding="5">
        <p:outputLabel for="country" value="Country: " />
        <p:selectOneMenu id="country" value="#{dropdownView.country}">
            <p:ajax event="change" listener="#{dropdownView.onCountryChange}"
                update="city" onstart="PF('myBlockUI').show()"
                oncomplete="PF('myBlockUI').hide()" />
            <f:selectItem itemLabel="Select Country" itemValue=""
                noSelectionOption="true" />
            <f:selectItems value="#{dropdownView.countries}" />
        </p:selectOneMenu>

        <p:outputLabel for="city" value="City: " />
        <p:selectOneMenu id="city" value="#{dropdownView.city}">
            <f:selectItem itemLabel="Select City" itemValue=""
                noSelectionOption="true" />
            <f:selectItems value="#{dropdownView.cities}" />
        </p:selectOneMenu>

        <p:blockUI block="panelGridId" widgetVar="myBlockUI" />
    </h:panelGrid>

其中onCountryChange - 用于填充cities城市下拉列表的功能。

这种行为是一种常见的情况，因此PrimeFaces提供了使用封装的onstart和oncomplete scipts显示blockUI的声明方式：

<p:blockUI block="panelGridId" trigger="country" />

其中trigger是ajax请求触发要显示的blockUI的组件ID的列表。

在托管bean中显示和隐藏p：blockUI

1 个答案:

概念

假设存根的问题

解决方案

具体解决方案