gwt - 純粋な HTML を使用した GWT UI バインダー

Question

GWT UIBinder で純粋な HTML を操作する方法はありますか?

私が見ている問題は、中括弧でスタイルをラップする必要がある場所です。詳細に UIBinder を処理するリンク /article/book は役に立ちます。

私はすでにGSTのウェブサイトの記事を見ました

Answer 1

スタイル名 (CSS クラス名) は、中かっこで囲む必要があります。たとえば<div class="{style.example}">...</div>、名前が GWT によって難読化されている場合です。CssResourceを使用すると、GWT がこれを行います。これは、ファイル内の<ui:style>ブロックで宣言する場合にも当てはまります。.ui.xml

<ui:UiBinder ...>
  <ui:style>
    .example {
      ...
    }
  </ui:style>

  <div class="{style.example}">
     ...
  </div>
</ui:UiBinder>

対照的に、プレーン CSS ファイル (HTML ホスト ページから直接参照する) で CSS クラスを宣言する場合は、名前を中かっこで囲みません。その場合、次のように使用するだけです

<ui:UiBinder ...>
  <div class="example">...</div>
</ui:UiBinder>

Answer 2

純粋なHTMLに近いこの方法で使用できます。

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
  ui:generateFormat='com.google.gwt.i18n.rebind.format.PropertiesFormat'
  ui:generateKeys="com.google.gwt.i18n.rebind.keygen.MD5KeyGenerator"
  ui:generateLocales="default"
  xmlns:g='urn:import:com.google.gwt.user.client.ui'>

  <ui:style>

    ... CSS ...

  </ui:style>

  <g:HTMLPanel>

    ... HTML and GWT controls ...

  </g:HTMLPanel>

</ui:UiBinder>

Answer 3

この質問に対する答えをグーグルで探していて、ここにたどり着きました。
ここでうまくいった解決策を見つけました：
http://blog.sortedset.com/googles-app-engine-java/gwt-uibinder-helloworld-with-html/

必需品：

使用する

interface MyUiBinder extends UiBinder<Element, MobileUI>

それ以外の

interface MyUiBinder extends UiBinder<Widget, MobileUI>

使用する

setElement(uiBinder.createAndBindUi(this));

それ以外の

initWidget(uiBinder.createAndBindUi(this));

使用する

RootPanel.getBodyElement().appendChild(myUiBinder.getElement());

それ以外の

RootPanel.get().add(myUiBinder);