如何在jsf中使用selectOneMenu渲染一个面板并停止渲染另一个面板

Question

我有以下代码：

<h:panelGroup rendered="#{UserAccessHandler.isAitfCompany}">
    <!-- For the dropdown sensorlist -->
    <h:outputLabel value="#{labelBundle.device}"
        style="font-weight:bold; padding-right:15px;" />
    <h:selectOneMenu id="testing"
        value="#{SystemHealthPageModel.selectedSensorId}"
        styleClass="facility_dropDown_list">
        <f:selectItem itemValue="----" /> 
        <f:selectItems
            value="#{SystemHealthPageModel.childFacilitySelectionList}" />
        <a4j:ajax event="valueChange" execute="@this"
            render="systemHealthAlert" />
    </h:selectOneMenu>


</h:panelGroup>

<rich:panel id="allSystemHealthAlert">
<alert:system_health_alert alertList="#{SystemHealthPageModel.allSystemAlerts}"
                numberOfRows="#{SystemHealthPageModel.numberOfAlertsToDisplayOnOnePage}"
                displayAssetRelatedData="true"
                moreThanOnePageOfResults="#{SystemHealthPageModel.showMoreThan1PageOfAlerts}"/>
</rich:panel>

<rich:panel id="systemHealthAlert">
<alert:system_health_alert alertList="#{SystemHealthPageModel.systemAlerts}"
                numberOfRows="#{SystemHealthPageModel.numberOfAlertsToDisplayOnOnePage}"
                displayAssetRelatedData="true"
                moreThanOnePageOfResults="#{SystemHealthPageModel.showMoreThan1PageOfAlerts}"/>
</rich:panel> 

实际上我有两个面板。当我当时使用 selectOneMenu 渲染“systemHealthAlert”面板时，我想停止渲染名为“allsystemHealthAlert”的其他面板。对于您的信息，“allsystemHealthAlert”会在初始页面加载期间自动加载。当我将使用 selectOneMenu 呈现“systemHealthAlert”面板时，我不想呈现此面板。有没有办法做到这一点。

谢谢

Answer 1

将您的面板包装在一个更宽的容器中，然后将其指向您的 <h:selectOneMenu />。然后，根据#{SystemHealthPageModel.selectedSensorId} 值执行<rich:panel /> 元素的条件渲染。

<h:selectOneMenu id="testing"
    value="#{SystemHealthPageModel.selectedSensorId}">
    <f:selectItem itemValue="----" /> 
    <f:selectItems
        value="#{SystemHealthPageModel.childFacilitySelectionList}" />
    <a4j:ajax event="valueChange" execute="@this"
        render="grouperPanel" />
</h:selectOneMenu>

<h:panelGroup id="grouperPanel">
    <rich:panel id="allSystemHealthAlert" rendered="#{empty SystemHealthPageModel.selectedSensorId}">
        <alert:system_health_alert alertList="#{SystemHealthPageModel.allSystemAlerts}"
            numberOfRows="#{SystemHealthPageModel.numberOfAlertsToDisplayOnOnePage}"
            displayAssetRelatedData="true"
            moreThanOnePageOfResults="#{SystemHealthPageModel.showMoreThan1PageOfAlerts}"/>
    </rich:panel>

    <rich:panel id="systemHealthAlert" rendered="#{not empty SystemHealthPageModel.selectedSensorId}">
        <alert:system_health_alert alertList="#{SystemHealthPageModel.systemAlerts}"
            numberOfRows="#{SystemHealthPageModel.numberOfAlertsToDisplayOnOnePage}"
            displayAssetRelatedData="true"
            moreThanOnePageOfResults="#{SystemHealthPageModel.showMoreThan1PageOfAlerts}"/>
    </rich:panel> 
</h:panelGroup>

Answer 2

我们将使用监听器方法然后重新渲染组件来实现这一点。

(1) 代码

您的 xhtml 页面：

<h:panelGroup id="panels">
    <rich:panel rendered="#{managedBean.showAllSystem}">
        <h:outputText value="ONEONE" />
    </rich:panel>
    <rich:panel rendered="#{not managedBean.showAllSystem}">
        <h:outputText value="TWOTWO" />
    </rich:panel>
</h:panelGroup>

还有

<a4j:ajax listener="#{managedBean.menuValueChanged}" render="panels" />

您的托管 bean：

int selectedSensorId;
boolean showAllSystem;

// getters and setters

public void menuValueChanged() {
    // business logic    
    // for example
    if(selectedSensorId == 0) {
        showAllSystem = true;
    } else {
        showAllSystem = false;
    }
}

(2) 工作流程

1- 首先，为了使用 AJAX 更新组件，您应该能够通过其客户端 ID 调用它。如果组件有时没有被渲染，它会得到一个你事先不知道的生成的客户端 ID。一种解决方案是用一个总是渲染的组件封装要渲染的组件（更好地解释here）

2- 在您的托管 bean 中，您将创建一个切换标志，我们称之为showAllSystem，如果它是true，它将显示allSystemHealthAlert 并隐藏systemHealthAlert。该标志将被面板的rendered 属性使用。

3- 然后您将创建侦听器方法，我们称之为menuValueChanged()，它将根据selectedSensorId 设置showAllSystem 标志，并将由您的a4j:ajax 标记中的侦听器调用