jsf - 同一组件内有多个 JSF 进度条

Question

我正在尝试使用每个批处理的进度条来显示多个批处理的进度。问题是只有一个进度条被发送到服务器端(最后一个)。这是代码...

我为进度创建了一个 RequestScoped 命名 bean，因为我读到对于多个进度条，每个进度条都需要一个 bean 实例，但这并不能解决我的问题。

我正在使用 Primefaces 6.1 和 JSF 2.2。

有什么想法吗？谢谢!

<h:form id="formExecutions">        
        <p:dataGrid id="jobs" value="#{jobExecutorController.jobExecutions}" var="job" rows="5" paginator="true" emptyMessage="#{MessageResources['text.noRecordsFound']}"
        paginatorPosition="bottom" columns="1" layout="grid">
            <f:facet name="header">
                #{MessageResources['text.batchProcesses']}
            </f:facet>

                <p:outputPanel layout="block" >
                    <p:panelGrid  cellpadding="5" styleClass="vf-panelGrid">            
                        <p:row style="width:100%">  
                            <p:column>                  
                                <p:outputLabel for="executionId" value="#{MessageResources['text.executionId']}:" style="font-weight:bold"/>                    
                            </p:column>
                            <p:column>                              
                                <h:outputText id="executionId" value="#{job.executionId}" />
                            </p:column>
                            <p:column>                      
                                <p:outputLabel for="name" value="#{MessageResources['text.name']}:" style="font-weight:bold"/>
                            </p:column>
                            <p:column style="width:10%">                        
                                <h:outputText id="name" value="#{job.name}"/>
                            </p:column> 

                            <p:column  style="width:50%" rowspan="2">                           
                                <p:progressBar id="progressBar" widgetVar="progressBar" ajax="true" value="#{progressController.progress(job)}" labelTemplate="{value}%" styleClass="animated" style="height: 20px; line-height: 20px;" global="false" interval="3000">
                                    <p:ajax event="complete" listener="#{progressController.onCompleteJob(job)}" update="messageDisplay" process="@this"/>
                                    <p:ajax update="jobInfo"/>
                                </p:progressBar>                            
                            </p:column>                                 

                            <p:column  style="width:4%" />

                            <p:column rowspan="2" style="text-align:right">                                 
                                <p:commandButton id="restart" onclick="PF('confirmRestartJob').show()" styleClass="coloured-icons-batch restart-image-icon blink" 
                                    disabled="#{not job.enableRestartAbandon}" immediate="true" title="">
                                    <f:setPropertyActionListener value="#{job.executionId}" target="#{jobExecutorController.executionIdSelected}" />
                                    <f:setPropertyActionListener value="#{job.name}" target="#{jobExecutorController.executionNameSelected}" />
                                </p:commandButton>
                                <p:tooltip for="restart" value="#{MessageResources['text.restartJobExecution']}" position="top"></p:tooltip>                                    

                                <p:spacer width="10" />

                                <p:commandButton id="stop" onclick="PF('confirmStopJob').show()"  styleClass="coloured-icons-batch stop-image-icon blink" 
                                     disabled="#{not job.enableStop}" immediate="true" title="">
                                    <f:setPropertyActionListener value="#{job.executionId}" target="#{jobExecutorController.executionIdSelected}" />
                                    <f:setPropertyActionListener value="#{job.name}" target="#{jobExecutorController.executionNameSelected}" />                             
                                </p:commandButton>
                                <p:tooltip for="stop" value="#{MessageResources['text.stopJobExecution']}" position="top"></p:tooltip>

                                <p:spacer width="10" />

                                <p:commandButton id="abandon" onclick="PF('confirmAbandonJob').show()" styleClass="coloured-icons-batch abandon-image-icon blink" 
                                     disabled="#{not job.enableRestartAbandon}" immediate="true" title="">
                                    <f:setPropertyActionListener value="#{job.executionId}" target="#{jobExecutorController.executionIdSelected}" />
                                    <f:setPropertyActionListener value="#{job.name}" target="#{jobExecutorController.executionNameSelected}" />                             
                                </p:commandButton>
                                <p:tooltip for="abandon" value="#{MessageResources['text.abandonJobExecution']}" position="top"></p:tooltip>

                            </p:column>             
                        </p:row>        
                    </p:panelGrid>

                    <h:panelGroup id="jobInfo" >
                        <p:panelGrid columns="4" cellpadding="5" styleClass="vf-panelGrid">                     

                            <p:outputLabel for="creationDate" value="#{MessageResources['text.creationDate']}:" style="font-weight:bold"/>                          
                            <h:outputText id="creationDate" value="#{job.formattedDate(job.createdDate)}" />

                            <p:outputLabel for="startDate" value="#{MessageResources['text.dateStartProcess']}:" style="font-weight:bold"/>                         
                            <h:outputText id="startDate" value="#{job.formattedDate(job.startedDate)}" />

                            <p:outputLabel for="lastUpdate" value="#{MessageResources['text.lastUpdate']}:" style="font-weight:bold"/>                          
                            <h:outputText id="lastUpdate" value="#{job.formattedDate(job.lastUpdate)}" />

                            <p:outputLabel for="toProcess" value="#{MessageResources['text.itemsToProcess']}:" style="font-weight:bold"/>                           
                            <h:outputText id="toProcess" value="#{job.itemsToProcess}" />

                            <p:outputLabel for="endDate" value="#{MessageResources['text.ended']}:" style="font-weight:bold"/>                          
                            <h:outputText id="endDate" value="#{job.formattedDate(job.endedDate)}" />

                            <p:outputLabel for="processed" value="#{MessageResources['text.itemsProcessed']}:" style="font-weight:bold"/>                           
                            <h:outputText id="processed" value="#{job.itemsProcessed}" />

                            <p:outputLabel for="status" value="#{MessageResources['text.state']}:" style="font-weight:bold"/>                           
                            <h:outputText id="status" value="#{job.status}" />

                        </p:panelGrid>
                    </h:panelGroup>
                </p:outputPanel>

            <p:spacer width="5"/>   
            <p:separator />
            <p:spacer width="5"/>                                   
        </p:dataGrid>

我的 RequestScope 支持 bean...

@Named("progressController")
@RequestScoped
public class ProgressController
{    
    @EJB
    private EJBJobRepositoryLocal ejbJobRepository;

    public Long progress(DMJob jobExecution) throws VfCmsSqlException
    {
        if (jobExecution.getStatus().equals(BatchStatus.STARTED.name())) {
            jobExecution.setProgress(ejbJobRepository.getJobProgress(jobExecution.getExecutionId()));
        }

        PrimeUtil.get().update("formExecutions:jobInfo");

        return jobExecution.getProgress();
    }

    public void onCompleteJob(DMJob jobExecution)
    {
        Object[] parameters = {jobExecution.getName(), jobExecution.getExecutionId()};

        Messages.displayInfoMessage("text.jobComplete", parameters);
    }
}

Answer 1

好的。问题在于，PrimeFaces().start() 方法并未在 JSF 生成的所有组件上执行。所以，我所做的是一个 javascript 函数，该函数在页面完全加载时执行。就我而言，我需要初始化的组件是几个进度条。我的组件位于表单内的数据滚动器内，这就是我连接这些 id 的原因。 “i”是页面中每个渲染进度条的索引。

<script type="text/javascript">
        $(window).load(function() {
            startProgress();
        });

        function startProgress(){
            var pid = document.getElementsByClassName('ui-progressbar');
            var pidLength = pid.length;
            for (var i = 0; i &lt; pidLength; i++) {
                var id = "formExecutions:scroller:".concat(i).concat(":progressBar");
                PrimeFaces.getWidgetById(id).start();
            }
        }
    </script>

仅此而已!