2010-12-30 17 views
6

私はGWT + AppEngineアプリケーションを使用して、オンライン投票を作成できます。投票作成者に投票のためにさまざまなテーマを選択させたいと思っています。投票者がサーバー上で選択したテーマを保存し、投票回答者が投票にアクセスするたびに、選択したテーマで質問を受け取ります。GWTでCSSスタイルの色を設定するには

私たちのテーマは、投票ページのスタイルを設定するために使用する4-5色のセットを意味します。当社のクライアント側アプリケーションはUiBinderサンプルメッセージにインラインで設定されたスタイルとGWTアプリケーションは、たとえば、要素をテンプレートです:

<ui:style> 
.header { 
background: color1; 
padding: 6px 6px; 
} 
.anothercssclass { 
background: color2; 
padding: 6px 6px; 
} 
</ui:style> 

我々は、サーバー上に保存されたテーマからカラー1とカラー2を設定する方法を提案してください。これはGWTモジュールテーマの質問ではないことに注意してください。

答えて

4

コンパイル時にjavascriptにコンパイルされ、実行時にはアクセスできないため、実行時にuibinderテンプレートを変更することはできません。

おそらく、gwtコードの色を手動で変更する必要があります(= .xmlファイルではなくjavaファイル)。ストレート前方

  1. あなたの色情報を格納するためのデータベース構造を作成
  2. データベースから色を取得するには、サーバーのコードを作成
  3. GWT-サービス(および非同期インターフェイスとサーブレット実装クラスを実装)を使用してクライアントにカラー情報を配信する
  4. gwtクライアントコードを実装します。クライアントコードは、色情報を求めてからgwt-componeの色を設定しますnts。このようにすることができます(http://www.francoismaillet.com/blog/?p=68で説明されているようにラクダのケースを使用してください)。

    widget.getElement()。getStyle()。setProperty( "background"、colorValueFromDatabase);

もちろん、多くのウィジェットを変更する必要があるときには、この解決法はかなり手ごたえがあります。

代替1:

データベースからカラーデータをロードしにCSS定義としてその色を返すCSSファイル(標準サーブレットを提供することができる(GWTなし)昔ながらのJavaサーブレットを実装ブラウザ)。 gwt-htmlの開始ページでそのサーブレットへのリンクを使用してください。

import java.io.IOException; 
import java.io.PrintWriter; 

import javax.servlet.ServletException; 
import javax.servlet.http.HttpServlet; 
import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 

public class CssServlet extends HttpServlet { 

    @Override 
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 

     // you somehow have to get your user's information out of the session 
     User user = (User) request.getSession().getAttribute("loggedInUser"); 
     PrintWriter writer = response.getWriter(); 

     // use saved color values and generate css 
     writer.append(".header {"); 
     writer.append(" background: " + getHeaderColorForUser(user) + ";"); 
     writer.append(" padding: 6px 6px;"); 
     writer.append(" }"); 
     writer.append(" .anothercssclass {"); 
     writer.append(" background: " + getAnotherCssClassColorForUser(user) + ";"); 
     writer.append(" padding: 6px 6px;"); 
     writer.append(" }"); 

     // finish request 
     writer.close(); 
     response.setStatus(HttpServletResponse.SC_OK); 
    } 

    private String getAnotherCssClassColorForUser(User user) { 
     // TODO Auto-generated method stub 
     return null; 
    } 

    private String getHeaderColorForUser(User user) { 
     // TODO Auto-generated method stub 
     return null; 
    } 

} 

この代替方法の問題は、即座に色情報を更新できないということです。ユーザーは、ページをリロードして、カラースタイルの変更を確認する必要があります。

オルタナティブ2:動的にCSSの設定を変更するには

使用javascriptの(ネイティブコード)。

// in java code: 
changeCssStyle("header", "background", colorFromDatabase); 

private native void changeCssStyle(String cssClass, String cssName, String cssValue) 
/*-{ 
    var children = document.getElementsByTagName('*') || document.all; 
    var elements = new Array(); 

    // iterate over ALL elements 
    for (i in children) { 
     var child = children[i]; 
     var classNames = child.className.split(' '); 
     for (c in classNames) { 

      // does this element use our css class? 
      if (classNames[c] == '.' + cssClass) { 

       // now modify this element: set the attribute with name "cssName" to the value "cssValue" 
       child.style.setAttribute(cssName, cssValue); 
      } 
     } 
    } 
}-*/ 
; 

結論あなたの問題のため

3つの回避策は、それらの非は本当にソリューションである - しかし、うまくいけば、それはあなたがあなたのコードを実装するのに役立ちます。がんばろう!

PS:私のコードがテストされていない...スタイルの間

+0

これらは使用可能な回避策ですが、CssResource開発者ガイドに記載されているGWTベースの解決策は不十分です。私の答えを見てください。 – LINEMAN78

0
  1. 切り替えは簡単です。 programmatically select inline stylesを参照してください。異なるCSSクラスの下であなたのカラースキームを宣言して、それをあなたの要素に割り当ててください。これは、要素がたくさんある場合は面倒です。

  2. 既存のCSSスタイルを操作するのは、GWTで直接サポートされていないAFAIKです。あなたはJSNIに頼る必要があります。このスレッドを参照してください:change css rules dynamically

2

反して何slartidanには、runtime substitutionにUiBinderサンプルメッセージのスタイルを延期することが可能であると答えました。これに唯一注意しなければならないのは、スタイルシートを挿入しようとする前に色の設定を読み込まなければならないということです。このスタイルシートは、作成とバインドのUIメソッドに対して行われます。

<ui:style> 
    @eval color1 com.module.UserPreferences.getColor1(); 
    .header { 
     background: color1; 
     padding: 6px 6px; 
    } 
    @eval color2 com.module.UserPreferences.getColor2(); 
    .anothercssclass { 
     background: color2; 
     padding: 6px 6px; 
    } 
</ui:style> 
関連する問題