[GWT] 使用外部 resource

使用外部 resource 是 Declarative Layout with UensureInjected()iBinder 其中的一個章節，並且已經由 PsMonkey 完成此文的翻譯。

我在實作這個章節所提及的方法時，遭遇了一點問題，因此提出來與大家分享。

在此說明一下我所遭遇的問題:

1. 我寫了一個名為 Resources 的 interface，打算在其他的 template file 中使用，內容如下。
   
   
   

   public interface Resources extends ClientBundle {
       @Source("Style.css")
       MyStyle style();
   
       @Source("Logo.jpg")
       ImageResource logo();
   
       public interface MyStyle extends CssResource {
           String red();
       }
   } 

2. 當然 Style.css 與 Logo.jpg 都是存在的，並且 Sytle.css 中也定義了 .red。
   
3. 然而當我使用如下的 template file 去使用 Resources 時，雖然 Image 能夠正常顯示，但是所有與 CssResource 相關的設定都沒有作用。
   
   
   

   <ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
       xmlns:g='urn:import:com.google.gwt.user.client.ui'>
   
     <ui:with field='res' type='com.my.app.widgets.logoname.Resources'/>
   
     <g:HTMLPanel>
   
       <g:Image resource='{res.logo}'/>
   
       <div class='{res.style.red}'>
         this text should be red
       </div>
   
     </g:HTMLPanel>
   </ui:UiBinder> 

4. 如果使用 Firebugs 等工具觀察， 會看到對應的 HTML 元素確實被指定了 CSS class，然而在 CSS file 內卻沒有對應的設定存在。
   

解決的方法為，建立一個 Resources 實體並呼叫 CssResource 的 ensureInjected() 方法，以確保 CssResource 有被加入 DOM 中。

Resources resources = GWT.create(Resources.class);
resources.style().ensureInjected(); 

值得注意的是，無論創造了幾個 MyStyle 實體(包含在 Resources 內)，也只需要執行一次 ensureInjected() 。所以合理的作法應該是在 EntryPoint 內呼叫 ensureInjected()，如果希望所有的頁面都能使用同一個 Resources 實體，可以將此處建立的物件傳給其他頁面，詳細作法參考同一篇文章中的 Share resource instances 章節(中譯: 共用 resource 的 instances)。