2017-01-12 2 views
0

IndicatingAjaxButton의 onSubmit을 사용하여 양식을 제출하는 동안 구성 요소를 업데이트 및 렌더링하려고합니다. 하지만 모든 구성 요소는 한 번 렌더링 된 후 제출됩니다. 양식이 제출되는 동안 업데이트 진행 상황 표시 줄을 표시하는 것과 같이 양식이 제출되는 동안 렌더링 할 수있는 방법이 있습니까? 나머지 호출이 실행될 때마다 진행 상황을 보여주고 싶습니다. 이것은 내가 뭐하는 거지 약이다 : 이것에 대한양식을 제출하는 동안 wicket 구성 요소를 렌더링합니다.

public class MyPage { 
    Form form; 
    int items; 
    WebMarkupContainer progressbar = new WebMarkupContainer("progressbar"); 
    int progress = 0; 
    MyData dataItems = new MyData(); 

    public MyPage() { 
     progressbar.setOutpuMarkupId(true); 
     items = 5; 
     setupForm(); 
    } 

    public void setupForm() { 
     form = new Form("form", new CompundPropertyModel(dataItems)); 
     form.add(new IndicatingAjaxButton("button") { 
      @Override 
      protected void onSubmit(AjaxRequestTarget target, Form<?> form) { 
       for (int i = 0; i < items; i++) { 
        progress++; 
        progressbar.add(new AttributeModifier("style", "width: " + progress + "%;")); 
        //rest post call goes here 
       } 
      } 
     }); 
    } 

    add(form); 
    add(progressbar); 

} 


//in html page 
<div wicket:id="progressbar" id="progressbar" style="width: 0% ; background-color:green;"></div> 
+0

제가 알고 계시다면, 귀하는 서버 백엔드에서 최대 수백 밀리 초로 빠른 전송 (서버 측 프론트 엔드에서 허용)과 긴 알고리즘에 대해 생각하십니까? –

+0

추측하기위한 두 번째 시도는 대용량 파일의 업로드입니다. 개찰구에는 몇 가지 해결책이 있습니다 (공식 사이트 안내) –

답변

2

가장 좋은 방법은 개찰구 기본 WebSocket을 사용하는 것입니다. IWebSocketRequestHandler을 사용하면 Wicket 구성 요소를 업데이트하고 오랜 작업 중에 원시 텍스트 (JSON, HTML)를 보낼 수 있습니다. 필요한만큼 푸시 할 수 있습니다 (예 : 진행율을 백분율로 표시합니다.

AjaxCallListener # onBeforeSend() 콜백을 사용하면 Ajax 호출 (양식 제출)을 만들기 전에 JavaScript로 UI를 업데이트 할 수 있습니다. 이 접근 방식을 사용하면 단 한 번의 발사 만 할 수 있습니다. 즉로드 표시기를 표시 할 수 있지만 현재 진행 상황을 표시 할 수는 없습니다.

관련 문제