JSF에서 mysql 데이터 활동을 나타내는 진행률 막대 구현

Question

제 질문 종류는 프라임 페이스 진행률 표시 줄에 적용되지만 바닐라 jsf 구현 (jquery 사용)은 도움이됩니다. 내 문제는 내가 또한 진행률 표시 줄을 렌더링 긴 mysql 쿼리를 시작할 때입니다. 문제는 데이터 쿼리가 완료된 후 진행이 시작된다는 것입니다. 렌더링 단계는 백엔드 항목이 완료 될 때까지 적용되지 않기 때문에 추측합니다. 다른 스레드에서 진행률 표시 줄을 시작해야합니까?

진행률 표시 줄에 쿼리가있는 위치를 반드시 표시 할 필요는 없습니다 (가능한 경우). 나는 단지 "생각하는"응용 프로그램을 보여주고 싶습니다. 어쩌면 텍스트 나 애니메이션 gif가있을 수 있습니다. 어떤 도움을 주셔서 감사합니다.

편집

이 내가 가진 것입니다.

 <p:ajaxStatus> 
      <f:facet name="start"> 
       <h:graphicImage value="/resources/images/ajax-loader-bar.gif" /> 
      </f:facet> 

      <f:facet name="complete"> 
       <h:graphicImage value="/resources/images/ajax-loader-bar-still.gif" /> 
      </f:facet> 

      <f:facet name="default"> 
       <h:graphicImage value="/resources/images/ajax-loader-bar-still.gif" /> 
      </f:facet> 
     </p:ajaxStatus> 

요청은 아약스가 아닙니다.

<p:commandButton value="Yes" update="growl" onclick="confirmation.hide()" 
          action="#{viewLines.downloadFile}" ajax="false" /> 

뒤에있는 방법입니다.

public void downloadFile() { 

    if (selectedPkgLine != null) { 

     ExcelSheet excelSheet = new ExcelSheet(); 
     FacesContext facesContext = FacesContext.getCurrentInstance(); 
     ExternalContext externalContext = facesContext.getExternalContext(); 

     String pkgLineName = StringUtils.removeSpaces(StringUtils.stripGarbage(selectedPkgLine.getShortname())); 
     StringBuilder builder = new StringBuilder(); 
     builder.append(pkgLineName); 
     builder.append(".xls"); 

     externalContext.setResponseContentType("application/vnd.ms-excel"); 
     externalContext.setResponseHeader("Content-Disposition", "attachment; filename=" + builder.toString()); 

     try { 
      excelSheet.writeExcelSheet(this, externalContext.getResponseOutputStream()); 
     } catch (WriteException ex) { 
      FacesUtils.addFatalMessage(ex.getMessage()); 
     } catch (IOException ex) { 
      FacesUtils.addErrorMessage(ex.getMessage()); 
     } catch (ServletException ex) { 
      FacesUtils.addErrorMessage(ex.getMessage()); 
     } 

     facesContext.responseComplete(); 
    } else { 
     submitDisabled = true; 
     FacesUtils.addErrorMessage("No packaging line was selected"); 
    } 
} 

Answer 1

잡아 http://ajaxload.info에서 일부 애니메이션 아이콘, CSS display: none;와 페이지에 포함하고 온 클릭 중에 display: block;를 만들기 위해 JS/jQuery를 사용합니다.

<h:commandButton onclick="$('#progress').show()" /> 

<img id="progress" src="progress.gif" style="display:none" /> 

그러나 이것은 동기식 요청에만 유효합니다. PrimeFaces를 사용하고 있으므로 비동기 (ajax) 요청을 고려하므로 p:ajaxStatus을 대신 사용하는 것이 좋습니다.

<p:ajaxStatus> 
    <f:facet name="start"><h:graphicImage value="progress.gif" /></f:facet> 
    <f:facet name="success"><h:outputText value="" /></f:facet> 
    <f:facet name="error">An error has occurred!</f:facet> 
</p:ajaxStatus> 

---

업데이트 : 당신의 갱신에 따라. <p:ajaxStatus>은 PrimeFaces에서 생성 한 ajax 요청에 대해서만 인터셉트합니다. 따라서 <p:commandButton> 또는 <p:commandLink>에ajax="false"이없는 경우에만.