웹 애플리케이션 스타터 프로젝트에서 GWT 온로드 깜박임을 방지하는 방법은 무엇입니까?

StackOverflow https://stackoverflow.com/questions/2034673

  •  19-09-2019
  •  | 
  •  

문제

나는 GWT를 처음 접했고 이것이 어딘가에 답변 될 것이라고 확신하지만 아직 찾지 못했습니다.

GWT 2.0 Eclipse 플러그인을 다운로드했는데 스타터 프로젝트.

그러나 나는 그것을 실행할 때 불쾌한 깜박임이 있다는 것에 놀랐습니다 ...

  1. 텍스트는 먼저 CSS없이로드됩니다
  2. Select Box Apears까지 시간이 걸립니다

(깜박임이 보이지 않으면 시도하고 누릅니다. F5 새로 고침)

모든 성숙한 GWT 앱에는 그 전에 로더가있는 것처럼 보이지만 추가 할 수있는 쉽고 표준적인 방법을 찾지 못했습니다.

이 앱 이이 순서대로로드되는 것 같습니다.

  • 기본 레이아웃 HTML,
  • 모든 JavaScript 및 CSS
  • "Onload"이벤트에서 논리를 실행합니다 (컴파일 된 JavaScript가 시작될 수있는 가장 빨리 -?)

그래서 GWT가로드되기 전에 프로그래밍 방식으로 로딩 스피너를 추가 할 수는 없습니다.

내가 기본적인 것을 놓치고 있습니까? 초기 스피너를 추가하는 모범 사례 방법이 있습니까?

나는 단순히 애니메이션 GIF와 함께 div를 추가하고 Onload 이벤트에서 숨기고 있다고 생각했습니다.

그러나 나는 더 나은 것이 있다고 확신합니다.

이것이 중복 질문인지 알려주세요

업데이트 : 이것을 찾았습니다 관련 질문, 그래도 내 대답하지 않는다 ...

도움이 되었습니까?

해결책

GWT 모듈을 사용하여 CSS를로드하지 않고 태그 자체에 직접로드 하여이 문제를 처리했습니다. 이렇게하면 GWT JS가로드되기 전에도 브라우저는 항상 CSS를 먼저로드합니다.

이것은 당신이 약간의 유연성과 속도를 잃을 것이라는 것을 의미하지만, 지금까지 내가 사용한 유일한 해결 방법입니다.

편집 : 추가 정보 원인 바운티를 원합니다 : D

당신이 제거하지 않으면<inherits name='com.google.gwt.user.theme.standard.Standard'/> Module.gwt.xml 파일에서 GWT 표준 테마는 GWT가 작성하는 JS 파일에로드됩니다. 이 JS 파일은 HTML 페이지가 렌더링 된 후로드하고로드 후 CSS를 주입합니다. 따라서 깜박임.

깜박임을 피하기 위해 해당 라인을 주석하고 자신의 스타일 시트를 <head> HTML 파일의. 이렇게하면 HTML 렌더링 전에 CSS가로드되어 깜박임을 피합니다. 당신이 정말로 GWT 테마를 원한다면, 당신은 그것을 소스 코드.

GWT와 함께 스피너를 사용하는 것은 매우 쉽습니다. 한 가지 간단한 방법은 HTML 파일 자체의 ID와 함께 DIV에 보관하는 것입니다. 그런 다음 onModuleLoad(), 전화로 그 div를 숨기십시오 RootPanel.get("spinner").setVisible(false);

그것은 GWT가 자체로드 될 때까지 스피너를 보여 주어야합니다.

다른 팁

스피너를 구현하기 위해 우리가하는 일은 다음과 같습니다.

응용 프로그램을로드하는 스크립트 라인 바로 아래에 다음 HTML과 같은 것을 넣습니다 (즉, Nocache.js가있는 응용 프로그램). 예 :

    <div id="loading">
        <div id="loading-msg">
            <img src="icons/loading-page.gif" lt="loading">
            <span>Loading the application, please wait...</span>
        </div>    
    </div>

그런 다음 응용 프로그램 EntryPoint에서 DOM을 사용하여 페이지로 연락하여 해당 DIV를 제거합니다. 예를 들어

final RootPanel loading = RootPanel.get("loading");
if (loading != null) {
    DOM.removeChild(RootPanel.getBodyElement(),
                    loading.getElement());
}

Ehrann : 위의 답변에 언급 된 관행이 지금은 유일한 방법이라는 것을 두려워합니다. GWT는 플라이에 "로드"프레임을 표시/숨기는 비슷한 기능을 제공하지 않습니다. 그 이유 중 하나는이 요구 사항이 모든 GWT 사용자에게 "공통적 인"것이 아니기 때문입니다. 한 사람은 다른 사람과는 매우 다른 스타일의 "로드"를 원할 수 있습니다. 그래서 당신은 혼자서 그렇게해야합니다.

GXT Showcase 페이지 (GWT 기반)를 볼 수 있습니다. http://www.extjs.com/explorer/ 그들이 그렇게하는 방법에 대해. 그것의 출처는 Ext GWT 2.1.0 SDK를 여기에서 다운로드하십시오. http://www.extjs.com/products/gxt/download.php 샘플/탐색기 폴더를 추출한 후 확인하십시오. 자세한 내용은 아래 편집을 참조하십시오.

편집하다

소스 코드를 확인하십시오 http://www.extjs.com/examples/explorer.html 그리고 "로드"가있는 DIV를 볼 수 있습니다. 각 샘플 (확장 뷰포트)에 대해 gxt.hideloadingpanel (loadingpanelid)이 Onattach () (초기화)에서 호출되며 로딩 프레임을 숨 깁니다.

뷰포트 소스 코드를 점검하십시오 여기

gxt.hideloadingpanel의 소스 코드를 점검하십시오 여기

비슷한 방식으로 할 수 있습니다.

호스트 페이지에 HTML로드 메시지를 넣을 수 있습니다 (스타일 속성 사용 또는 헤더에 스타일 태그를 스타일을 포함하여 스타일을 포함시켜 모듈이로드되면 메시지를 제거 할 수 있습니다. ) .SetInnerHtml ( "") 또는 .removeChild ()를 사용하여 원하는대로 응용 프로그램을 프로그래밍 방식으로 제시합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top