2

Vaadin6でプロジェクトを行っています。プロジェクトのすべてのレイアウトを作成しました。しかし、CSSのスタイリングに行き詰まりました。CSSスタイルをレイアウトに適用する簡単な方法が見つかりませんでした。

この例はBookofVaadinで見ました。

<body>
<div id="v-app">
<div>
   <div class="v-orderedlayout">
    <div>
       <div class="v-panel">
        <div class="v-panel-caption">Log In</div>
        <div class="v-panel-content">
           <div class="v-orderedlayout">
            <div>
               <div>
                <div class="v-caption">
                  <span>Username:</span>
                </div>
               </div>
               <input type="text" class="v-textfield"/>
            </div>
            <div>
               <div>
                <div class="v-caption">
                  <span>Password:</span>
                </div>
               </div>
               <input type="password"
                      class="v-textfield"/>
            </div>
            <div>
              <button type="button"
                      class="v-button">Login</button>
              </div>
           </div>
        </div>
        <div class="v-panel-deco"/>
        </div>
       </div>
    </div>
   </div>
</div>

その中で; 追加するすべてのコンポーネントのデフォルトのクラス名を取得しました。しかし、私のプロジェクトでは、追加したすべてのコンポーネントのデフォルトのクラス名を取得できませんでした。

クラスを介してスタイルを適用する代わりに、インライン関数を介してスタイルを適用しています。レイアウトをデザインするときにコンポーネントのサイズを調整したからだと思います。

私のコード：

<div style="height: 781px; width: 762px; overflow: hidden; float: left; padding-left: 6px; padding-top: 0px;">
<div style="float: left; margin-left: 0px;">
<div style="overflow: hidden; height: 781px; width: 762px;" class="v-verticallayout">
<div style="overflow: hidden; margin: 0px; width: 762px; height: 781px;">
<div style="height: 573px; width: 762px; overflow: hidden; padding-left: 0px; padding- top: 0px;">
<div style="float: left; margin-left: 0px;">
<div class="v-customcomponent" style="height: 573px; width: 762px;">
<div class="v-absolutelayout" style="height: 573px; width: 762px;">
<div style="position: relative; overflow: hidden; height: 573px; width: 762px;">
<div class="v-absolutelayout-wrapper" style="top: 0px; left: 0px; right: 0px; bottom: 0px;">
<div class="v-tabsheet v-tabsheet-hover-closable hover-closable" style="overflow: hidden; height: 573px; width: 762px;">
  1. これは、レイアウトを設計するときにコンポーネントのサイズを調整したために発生しましたか？またはこれは一般的ですか？
  2. このインラインスタイリングを回避するにはどうすればよいですか？
  3. Vaadinでのスタイリングは少し難しいようです。私が間違っている場合、誰かが私にスタイルを適用するための最良かつ標準的な方法を教えてもらえますか？
  4. また、インラインスタイルを回避するために、レイアウトを設計するための標準または方法に従う必要がありますか？。。。
4

1 に答える 1

3

Vaadin 6では、Javaコード内で行われるコンポーネントのスタイル設定（たとえば、component.setWidth（）など）は、インラインcssとして直接挿入されます。インラインにしたくない場合は、ディレクトリのstyles.css下のファイルでこれらのルールを手動で定義し、Applicationクラスに注釈VAADIN/themes/themename/を設定できます。@Theme("themename")

しかし、CSSスタイリングを行いたい場合は、Vaadin 7に移行する必要があります。Jouniなどはすべてを大幅にクリーンアップし（主にレガシーIEサポートを削除することで）、CSSを使用したスタイリングを実際に実用的にしています。また、SASSを使用できるようになりました。詳細については、VaadinWikiを参照してください。

編集：
あなたのリストの＃4に答えるために、私のアプローチは、基本レイアウトとして（リンクCustomComponent）を持つを作成することです。（または、CustomComponentを拡張する代わりに、拡張できると思います。）スケルトンまたはテンプレートとしてを使用し、ページのインタラクティブまたは変更可能な部分（ボタン、編集フィールド、グラフ、「表示」など）が必要な場合はどこでも使用します。タグを付けます。次に、必要なときにいつでも（初期化時、遅延読み込み時、サーバーイベントやユーザーの操作に応じて）これらのdivを入力し、必要に応じてそれらを削除して置き換えることもできます。CustomLayoutCustomLayoutpageXLayout.html<div location="componentY"></div>

だから、それはすべて明白すぎるかもしれません。ただし、このページの作成方法の優れている点は、サーバー側のサイズ変更やコンポーネントの視覚スタイルに影響を与える変更を行わない限り、インラインがまったくない最終的なhtmlページが作成されることです。スタイリング。既存のVaadincssクラスを変更するか、独自のID（component.setId("myId")）またはクラス（component.addStyleName("myStyle")）を追加することで、すべての視覚的なスタイル設定を行うことができます。<div location="componentY" class="myClass"></div>簡単な場合は、ロケーションdiv自体（）にIDとクラス名を追加することもできます。ただし、これらのスタイルは、コンポーネント自体のVaadinベースのcss（myTheme.scssまたはmyTheme.cssファイルで自分で変更できます）によってオーバーライドされる場合があります。

（前はVaadin 7. 6がまだインラインスタイリングを追加するかもしれないと仮定しています、私は忘れます。）

とにかく、それが私が本質的にデザイナーフレンドリーなhtmlとcssベースの単一ページのウェブアプリを簡単な方法で構築することになった方法です。必要なJavaScriptベースのフロントエンドChromeを追加することもできますが、GWTアプリがページの再読み込みと状態を処理する方法では、これはもう少し詳細で注意が必要です。

于 2013-03-27T14:42:12.253 に答える