2014-02-09 113 views
0

如何在GWT中實現像這樣的這樣的星級功能?圖書館是否存在?GWT中的星級評分功能:如何實現部分滿星星?

主要場景:顯示小數評分爲部分填滿的星星。

  • 對服務器的調用返回一個[0,5]小數評分/等級,比如3.4。
  • 用戶界面顯示3.4/5滿星,看起來像這樣的東西

默認情況下,我能想到的最好的辦法是在與一個給定等級的分辨率的客戶端包創建許多小的預填充的圖像,比方說0.5(〜10個圖像)或0.1(〜50 ) 圖片。然後編寫映射邏輯以顯示適當的星形圖像。 是最有效的方法嗎?

也許優化版本這種方法將有一個部分填充星圖像,然後在顯示邏輯將組裝分作爲等級的函數 - 例如,對於3.4,3完全填充星,一個部分充滿星星0.4級,一顆空星。

補充場景:輸入一個整數評級{0,1,2,3,4,5}星。

  • 顯示五顆空白的星星。
  • 當用戶將鼠標移到星號上時,左側的星號和所有星號填滿。
  • 當用戶點擊時,整數評級被註冊。

使用上述類似的方法,雙圖像就足夠了:一個沒有背景,一個沒有填充。

再一次,是否有一個窗口小部件/庫包裝這種常見的網絡應用程序功能呢?

這似乎並不難實現,但不需要重新發明輪子!一個這樣一個常見的網絡應用程序功能的好庫可以有更多的嵌入式功能,如按評級管理評級列表及其相應的顯示,進入評論面板等,所有性能都得到優化。

回答

1
  1. 創建三個星形圖像:完整,空白和半滿。
  2. 創建一個自定義小部件。使用FlowPanel作爲包含星形圖像的容器。
  3. 在這個小部件創建方法showRating():

(一)如果清除星星,你已經有了他們。 (b)爲每個圓點添加完整的星形圖像。 (c)如有必要,添加半空星形圖像作爲半點。 (d)如有必要添加空白星圖,共計5星。

這是一個相當簡單的小部件。你不需要一個庫。