1. 홈
  2. 질의 응답
  3. GWT 코드 분할 진행률 막대 - Gmail처럼

GWT 코드 분할 진행률 막대 - Gmail처럼

2010-12-11 4 views
4

내 프로젝트에서 코드 분할을 사용해야합니다. 하지만 어쨌든 최초 다운로드를위한 몇 가지 코드가 있습니다.GWT 코드 분할 진행률 막대 - Gmail처럼

이제 Gmail 시작 진행 상황과 같은 코드 다운로드 (.cache.html 또는 다른 코드 분할) 진행 상황을 최종 사용자에게 보여 드리고자합니다.

도와 주시겠습니까?

RGDS

출처

2010-12-11 Nav

답변

0

GWT는 진행률 표시 줄 같은 어떤 위젯이 없습니다. 응용 프로그램에이 기능을 추가하려고했지만 할 수 없었습니다

인큐베이터 진행률 표시 줄을 사용할 수 있습니다.

http://google-web-toolkit-incubator.googlecode.com/svn/trunk/demo/ProgressBar/index.html

출처

2010-12-14 07:22:23

+0

답변 해 주셔서 감사합니다. 이 질문은 앱의 진행 표시 줄에 관한 것이 아니라 앱이 완전히로드되기 전에 표시되는 진행 막대에 관한 것이므로 사용자는 얼마나 오래 기다려야하는지 알 수 있습니다. –

+0

@Chris 귀하의 코멘트 주셔서 감사합니다. 나는 단지 progressbar와 그 사용법을 보여주고 싶다. –

1

어쩌면 당신이 시도 할 수 및 작동 여부를 경우 의견을주세요

나는 html 파일 만 보내드립니다. 당신은 당신의 코드에 따라 디자인 할 수 있습니다. 어떻게 작동하고 있습니까? "loading"을 포함하는 div 요소가 있습니다. 페이지가 처음으로 간단한 html 로딩되고 로딩 텍스트가 표시됩니다. html 파일을로드 한 후 nocache.js 파일이 시작됩니다 (여전히 로밍 텍스트가 표시됨). js 파일로드 후 onmoduleload 스크립트가 시작되고 (여전히 텍스트로드가 표시됨) 모든 창 부품이 작성되고 패널이 준비된 후. 아래 코드를 시도하고 화면에서 "로드 중"텍스트를 제거하십시오.

com.google.gwt.user.client.Element loading = DOM.getElementById("loading"); 
DOM.removeChild(RootPanel.getBodyElement(), loading);

proje.html;

<!doctype html> 
<!-- The DOCTYPE declaration above will set the --> 
<!-- browser's rendering engine into    --> 
<!-- "Standards Mode". Replacing this declaration --> 
<!-- with a "Quirks Mode" doctype may lead to some --> 
<!-- differences in layout.      --> 

<html> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 

    <!--                --> 
    <!-- Consider inlining CSS to reduce the number of requested files --> 
    <!--                --> 
    <link type="text/css" rel="stylesheet" href="<proje>.css"> 
    <link rel="stylesheet" type="text/css" href="resources/css/gxt-all.css" /> 

    <!--           --> 
    <!-- Any title is fine       --> 
    <!--           --> 
    <title><Proje></title> 

    <!--           --> 
    <!-- This script loads your compiled module. --> 
    <!-- If you add any GWT meta tags, they must --> 
    <!-- be added before this line.    --> 
    <!--           --> 
    <script type="text/javascript" language="javascript" src="<proje>/<proje>.nocache.js"></script> 
    </head> 

    <!--           --> 
    <!-- The body can have arbitrary html, or  --> 
    <!-- you can leave the body empty if you want --> 
    <!-- to create a completely dynamic UI.  --> 
    <!--           --> 
    <body> 

    <!-- OPTIONAL: include this if you want history support --> 
    <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe> 

    <!-- RECOMMENDED if your web app will not function without JavaScript enabled --> 
    <noscript> 
     <div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif"> 

     </div> 
    </noscript> 

    <div align="center" id="loading"> 
     <table style="height:600px;" border="0"> 
      <tr height="100%"> 
       <td align="center"> 
        <b>Loading...</b> 
       </td> 
      </tr> 
     </table> 
    </div> 

    <div id="main" style="display:none"> 
     <table border="0" width="100%" height="100%" align="center" cellspacing="0"> 
       <tr> 
       <td colspan="2" width="100%" id="ustMenuPanel"></td> 
       </tr> 
       <tr height="100%" valign="top"> 
       <td id="menuPanel" width="20%"></td> 
       <td id="modulPanel" width="80%"></td> 
       </tr> 
     </table> 
    </div> 
    </body> 
</html>

출처

2010-12-14 10:13:49

+0

"문제"는 얼마나 많은 것이로드되었는지를 알지 못한다는 것이다. "500kb에서 100kb로드"와 같은 것을 얻을 수있는 아이디어가 있습니까? –

+0

@Chris_Boesing 네가 맞다. 나는 단지 질문의 시작점으로 샘플을 보내려고한다. –

+0

네, 작동하지만 크리스가 말한대로 비율이 어떻게 완료되었는지 알고 싶습니다. – Nav

5

design은 (대략)에 따르면, 그것은 기술적으로 프리 페치를 지원하지 않기 때문에 의미가 분할 오프 모듈을 언급하고; GMail은 콜백을 통해 확인 된 모듈로드 진행률 (예 : GWT.runAsync())을 기반으로 진행 상황을 표시한다고 가정 할 수 있습니다. 모든 모듈은 같은 크기,하지만 당신은 "짐작으로 견적"각 모듈의 가중 비율을 할당 할 수 있습니다 (참조 GWT의 compile report)

  1. 초기 페이지 크기 다운로드가 큰 경우 (> = 1 MB), I 리팩토링 (refactoring)을 검토하고 디자인을 최적화하여 좀 더 가벼운 (스캐 폴딩) 수법을 제안합니다. 이는 서버로의 더 많은 이동을 의미하지만 초기 다운로드 크기를 제한합니다. 그러면 페이지가 "작동 중"이라는 사용자에게보다 정확한 피드백을 줄 수 있고 (예 : 불확실성 진행 막대) 불필요한 정밀도를 피할 수 있습니다.

  2. 전체 페이지 크기는 실제로 클라이언트/브라우저로가는 경로를 측정하기가 어렵지만 사용자에게이 값을 표시하는 것보다 문제가 많습니다. 은 일 수 있습니다. 경량 모듈을 여러 개 사용하여이 작업을 수행 할 수 있지만과 같이 생성 된 모든 리소스를 보완해야합니다. GWT가 각 브라우저 순열에 대해 특정 세트를 만들기 때문입니다.

(!) 참고 : (예를 들어, 이미지, 비디오, 음악 파일을 다운로드 할 때 (예를 들어) (6 % 완료 1.29MB의 80킬로바이트)가 일반적으로 사용하는 등의 파일 크기를 정밀 진전 등 실시간 피드백, et al)을 사용자의 하드 드라이브에 연결합니다.그 시점의 데이터는 더 이상 일시적인 것이 아니며 저장 공간이 문제가 될 수 있으며 캐시가 깨끗하고 플러시되므로 일반적으로 웹 페이지의 크기가 크지 않습니다.

출처

2010-12-14 11:07:15

0

Apache Hupa과 동일한 접근 방식을 취할 수 있습니다.이 방법은 응용 프로그램이로드되는 동안 애니메이션 GIF 만 보여줍니다. 응용 프로그램이로드되면 호스트 페이지의 DOM 구조를 통해 애니메이션 GIF가 제거됩니다.

출처

2010-12-17 11:50:47 crowne

관련 문제

 관련 문제