GWT：スタイルシートから文字列値を得る方法

当然だがGWTでもスタイルシートを使って見かけを様々に変更することができるのだが、どうせならページに表示される文字列もスタイルシートに書いてしまいたい。

これはもちろん、GWTに限った話ではなく、一般的なJavaScriptの話なのだが、特にGWTではどうするかを記述する。

HTMLによる方法

ちなみにHTMLのみでこれを行う方法がある。以下である。

ここでは、「スタイルシートに記述された文字列をGWTプログラムに取り込む」ことを考えるので、この方法は使えない。

スタイルシートに文字列を書ける属性

前述の例でも使われているが、文字列を記述できる属性としては「content」のみのようだ（探したのだが、他は見つからなかった）。また、当然だろうが自分勝手な名前の属性を作っても無視されてしまう。結局、何らかのセレクタにcontentを使用して文字列値を置くという方法しか無いものと思われる。

例えば以下のように書いておく。

.foo-bar-test {
  content: 'あいうえお';
}

GWTからcontent属性を取得する

JavaScriptでも同じやり方だが、GWTでは以下になる。このメソッドに”.foo-bar-test”を与えてやれば、そのcontentの値が取得できる。

  public static native String getContentValue(String selectors) /*-{
    var container = $doc.querySelector(selectors);
    return $wnd.getComputedStyle(container).getPropertyValue('content');
  }-*/;

取得できる条件

ただし、取得するには条件があり、（上の例の場合には）このクラスを指定したウィジェットがウィジェット階層にアタッチされていないとだめのようだ。これは非表示で構わない。例えば、以下を作成し、ウィジェット階層にアタッチする必要がある。

    HTML html = new HTML("");
    html.setVisible(false);
    html.getElement().addClassName("foo-bar-test");

技術メモGWT

Posted by ysugimura