gładkie koło postępu gwt

Question

Zacząłem uczyć się GWT dzisiaj i już zrobiłem dużo, ponieważ mam tło javy. Kolejnym krokiem jest ładowanie danych JSON z serwera zaplecza, ale gdy ładowanie jest zakończone, chcę pokazać koło postępu z oczywistych powodów.

Spodziewałem się widżetu "out of the box" dla tego, ale wydaje się, że nie ma (popraw mnie, jeśli się mylę). Ponieważ jestem całkowicie nowy w GWT, nie chcę dodawać komplikacji z dodatkowymi frameworkami, tylko zwykłym GWT.

Wygląda na to, że będę musiał je zakodować, ponieważ nie znalazłem kodu strony trzeciej dla tego. Czy ktoś może wskazać mi właściwy kierunek? Jakie są kroki? Czy powinienem utworzyć jeden obraz, a następnie obrócić go w animację lub utworzyć kilka obrazów, a następnie zastąpić je w sposób cykliczny? Czy jestem całkowicie tutaj?

Answer 1

Cóż, jak na proste koło postępu, które nie pokazuje faktycznego postępu (tylko, że twoja aplikacja coś robi), poleciłbym prosty animowany obraz (generowanie na przykład na http://www.ajaxload.info/).

Jeśli animowany image/gif nie jest opcją:

Prostym rozwiązaniem byłoby stworzenie kilku obrazów i wymienić je w okrągłym mody. Kiedyś to niedawno, w zasadzie zrobić timer, który nazywa się:

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() prostu ustawia bieżący obraz jako widoczny, wszystko inne się niewidoczne. Doświadczyłem, że jest to szybsze niż zmiana adresu URL obrazu (przy użyciu tylko jednego obrazu, wywołanie img.setURL(String url);).

Teraz wystarczy zadzwonić pod numer updateAnim.schedule(UPDATE_TICK); i zostanie uruchomiony.

Przypuszczam, że najszybszy (ponieważ przeglądarka może to zoptymalizować) byłby użycie animacji CSS (tworzenie jednego obrazu i obracanie go), ale prawdopodobnie także najbardziej złożonego (nie używano go tak dużo, więc może cóż, być może jest to prostsze niż myślę;). Zajrzyj do this posta o animacjach rotacji CSS.

Jeśli chcesz zrobić prawdziwy pasek postępu (który faktycznie pokazuje postęp), potrzebujesz wywołania zwrotnego, które zostanie wywołane przy postępie. Po prostu zaktualizuj swoje obrazy/przejścia CSS w tym wywołania zwrotnym postępu.

Answer 2

Z mojego punktu widzenia lepiej jest uzyskać animowany obraz (taki jak gif) i pokazać go podczas ładowania danych.

Istnieje kilka stron internetowych do generowania „preloader” obrazów: http://www.preloaders.net/ http://www.ajaxload.info

Answer 3

Bardzo prostym rozwiązaniem jest użycie pace.js. Jest to skrypt javascript wyświetlający paski postępu zbierające zdarzenia z DOM. Można skonfigurować, aby nasłuchiwał wszystkich zdarzeń GWT-RCP, a także, gdy klient ładuje fragmenty. Po prostu dodaj znacznik script do pliku html, w którym masz załadowany moduł GWT.

Powinno to działać "po wyjęciu z pudełka" w przypadku aktywności GWT i zwykłego ajaxu.

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