2012-01-18 26 views
5

GWT'yi bugün öğrenmeye başladım ve java arka planım olduğu için çoktan yaptım. Bir sonraki adım JSON verilerini arka uç sunucusundan yüklüyor, ancak yükleme yapılırken bariz nedenlerle bir ilerleme çarkı göstermek istiyorum.düz gwt ilerleme tekerleği

Bunun için bir "kutudan çıkar" widget'ını bekliyordum ama hiçbiri yok gibi görünüyor (yanılıyorsam düzeltin). GWT'ye tamamen yeni olduğum için, ek çerçeve ile karmaşıklık eklemek istemiyorum, sadece düz GWT.

Bunun için bir üçüncü taraf kodu bulamadığım için kod yazmam gerekecek gibi görünüyor. Birisi bana doğru yönde işaret edebilir mi? Adımlar nelerdir? Bir resim oluşturup animasyonda döndürmeli mi, yoksa birkaç görüntü oluşturmalı ve sonra bunları dairesel bir şekilde mi değiştirmeliyim? Yoksa tamamen burada mıyım?

+1

Hangi bariz nedenlerden dolayı? :) sunucu tarafı kodu genellikle ms yanıtlar, bu yüzden bir ilerleme çubuğu ekleme ve 100ms sonra kaldırılması sinir bozucu titreşen gibi görünecek – milan

+0

Veri sunucumun karmaşıklığı nedeniyle yanıt vermek için 3 saniyeye kadar ihtiyacım var. SQL'i daha sonra optimize etmeye çalışacağım, ancak bazı çağrılar için 100 ms'nin altında olmayacak.Düşünmemi sağladın ve ihtiyacın olmadığı yerde ilerleme çarkı göstermemeye çalışacağım, ama bazı sunucu çağrıları için kesinlikle buna ihtiyacım olacak. –

cevap

5

Aslında, gerçek ilerlemeyi göstermeyen basit bir ilerleme tekerleği için olduğu gibi (uygulamanızın bir şeyler yaptığı gibi), basit bir animasyonlu resim öneririm (örneğin, http://www.ajaxload.info/ adresinden bir tane oluştur).

bir animasyonlu image/gif bir seçenek değilse:

basit bir çözüm birkaç resim oluşturma ve dairesel biçimde bunların yerine olacaktır.

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()

sadece tüm diğer görünmeyen görünür Geçerli resmi ayarlar: Ben temelde kendisini çağıran bir zamanlayıcı yapmak, son zamanlarda bu kullandı. Bunu, resim URL'sini değiştirmekten daha hızlı yaşadım (yalnızca bir Resim kullanarak, img.setURL(String url);'u arayarak).

Şimdi sadece updateAnim.schedule(UPDATE_TICK); numaralı telefonu arayın ve çalışacaktır.

Sanırım en hızlısı (tarayıcı bunu optimize edebilir) bir CSS animasyonu kullanmak (bir resim oluşturmak ve döndürmek) olurdu, ama muhtemelen aynı zamanda en karmaşık (o kadar fazla kullanmadıysanız) Sanırım aslında bence daha basit;). CSS rotasyon animasyonları hakkında this adresine bir göz atın.

Gerçek bir ilerleme çubuğu (aslında ilerlemeyi gösterir) yapmak istiyorsanız, ilerlemeye çağrılan bir geri aramaya ihtiyacınız vardır. Bu ilerleme geri bildirimde resimlerinizi/CSS geçişlerinizi güncellemeniz yeterlidir.

0

Çok basit bir çözüm pace.js kullanmaktır:

"preloader" görüntüler oluşturmak için çeşitli web siteleri vardır. DOM'den olayları toplayan ilerleme çubuklarını gösteren javascript komut dosyası. Tüm GWT-RCP olaylarını ve istemcinin parçaları yüklediğinde dinlemeyi yapılandırabilirsiniz. Sadece komut dosyası etiketini GWT modülünüzün yüklü olduğu html dosyasına ekleyin.

Bu, GWT etkinliği ve düzenli ajax için "kutunun dışında" çalışır.

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