2012-01-18 3 views
5

오늘 GWT를 배우기 시작했으며 자바 배경을 가지고 있기 때문에 이미 많은 일을했습니다. 내 다음 단계는 백엔드 서버에서 JSON 데이터를로드하는 것이지만로드가 완료되면 분명한 이유 때문에 진행 휠을 표시하려고합니다.일반 gwt 진행 휠

나는 "out of the box"위젯을 예상했지만 아무 것도 없다고 생각합니다. GWT를 완전히 처음 접했기 때문에 추가 프레임 워크와 함께 복잡성을 추가하고 싶지는 않으며 일반 GWT 만 추가하려고합니다.

제 3 자 코드를 찾지 못했기 때문에 코드 하나를 작성해야 할 것 같습니다. 누군가 올바른 방향으로 나를 가리킬 수 있습니까? 어떤 단계입니까? 하나의 이미지를 만든 다음 애니메이션으로 회전 시키거나 여러 이미지를 만든 다음 순환 방식으로 이미지를 교체해야합니까? 아니면 내가 완전히 여기 떨어져 있니?

+1

명백한 이유는 무엇입니까? :) 서버 측 코드는 일반적으로 ms로 응답하므로 진행 막대를 추가하고 100ms 후 제거하면 성가신 깜박임처럼 보입니다. – milan

+0

데이터 복잡성으로 인해 서버가 최대 3 초 내에 응답해야합니다. 나중에 SQL을 최적화하려고 시도하지만 일부 호출에서는 100ms 미만이되지는 않을 것입니다.당신은 저를 생각하게 만들었고, 필요가없는 곳에서 진행 휠을 보여주지 않으려 고 노력할 것입니다. 그러나 서버 호출 중 일부에서는 가장 확실하게 필요할 것입니다. –

답변

5

실제 진행 상황을 보여주지 않는 간단한 진행 휠 (응용 프로그램에서 무언가를하고있는 것)은 간단한 애니메이션 이미지 (예 : http://www.ajaxload.info/)를 사용하는 것이 좋습니다.

애니메이션 이미지/GIF가 옵션이 아닌 경우 :

간단한 해결책은 여러 이미지를 생성 및 순환 방식에 장착 될 것이다.

Timer updateAnim = new Timer() { 
    @Override 
    public void run() { 
     currentImage = (currentImage + 1) % NO_IMAGES; 
     setVisibilities(); 
     this.schedule(UPDATE_TICK); 
    } 
}; 

private void setVisibilities() { 
    img1.setVisible(false); 
    img2.setVisible(false); 
    switch (currentImage) { 
    case 0: 
     img1.setVisible(true); 
     break; 
    case 1: 
     img2.setVisible(true); 
     break; 
    } 

} 

setVisibilities()

다만, 다른 모든 보이지 않는 볼에 현재 이미지를 설정합니다 기본적으로 내가 당신이 자신을 호출 타이머를 만들어, 최근에 사용했다. 이미지 URL을 전환하는 것보다 (이미지 하나만 사용하고 img.setURL(String url);으로 전화하는 것보다) 더 빠른 것으로 느꼈습니다.

이제 updateAnim.schedule(UPDATE_TICK);으로 전화하면 실행됩니다.

(브라우저가 최적화 할 수 있기 때문에) 가장 빠른 것 같아요. 하나의 이미지를 만들고 회전하는 CSS 애니메이션을 사용하는 것이지만, 아마도 가장 복잡한 것일 수도 있습니다. 사실 내가 생각하는 것보다 실제로 더 간단하다.). CSS 회전 애니메이션에 대한 게시물을 this에서 확인하십시오.

실제로 진행률 표시 줄을 만들려면 진행 상황에서 호출되는 콜백이 필요합니다. 이 진행 콜백에서 이미지/CSS 전환을 업데이트하면됩니다.

0

아주 간단한 해결책이 pace.js을 사용하는 것입니다

는 "프리 로더"이미지를 생성하는 여러 웹 사이트가 있습니다. DOM에서 이벤트를 수집하는 진행률 표시 줄을 표시하는 javascript 스크립트입니다. 모든 GWT-RCP 이벤트를 수신 대기하도록 구성 할 수 있으며 클라이언트가 조각을로드 할 때도 수신 대기 할 수 있습니다. GWT 모듈이로드 된 html 파일에 script 태그를 추가하기 만하면됩니다.

GWT 활동 및 일반 아약스의 경우 "기본 제공"으로 작동해야합니다.

<script type="text/javascript" language="javascript" 
    src="js/pace.min.js" 
    data-pace-options='{"elements":{"selectors":["body","script"]},"ajax":{"trackMethods":["GET","POST"]}}'></script>