web-dev-qa-db-ja.com

Vaadin 10以上の静的ファイルはどこに配置すればよいですか？

Vaadin 10-14では、CSS、JavaScript、およびPolymerテンプレートなどの静的ファイルをどこに配置する必要がありますか？画像などの静的ファイルはどうですか？

また、これらのファイルをVaadinにインポートする方法を教えてください。 npmのVaadin 14とBowerのVaadin 10-13の間に違いはありますか？

springpolymervaadinstylesheetvaadin-flow
9
Erik Lumme

すべてのパスは、プロジェクトのルート（例： _pom.xml_ファイルは、Mavenプロジェクトにあります。

_@JsModule_を使用してインポートされたJavaScriptは strict mode を使用します。とりわけ、これは、_window.x = ..._だけではなく、windowオブジェクト_x = ..._でグローバル変数を定義する必要があることを意味します。

Npm付きVaadin 14

非Spring Bootプロジェクト（warパッケージング）

  • CSSファイル
    • @CssImport("./my-styles/styles.css")[1]
    • _/frontend/my-styles/styles.css_
  • JavaScriptおよびPolymerテンプレート
    • @JsModule("./src/my-script.js")[1]
    • _/frontend/src/my-script.js_
  • 静的ファイル。画像
    • new Image("img/flower.jpg", "A flower")
    • _/src/main/webapp/img/flower.jpg_

Spring Bootプロジェクト（jarパッケージ）

  • CSSファイル
    • @CssImport("./my-styles/styles.css")[1]
    • _/frontend/my-styles/styles.css_
  • JavaScriptおよびPolymerテンプレート
    • @JsModule("./src/my-script.js")[1]
    • _/frontend/src/my-script.js_
  • 静的ファイル。画像
    • new Image("img/flower.jpg", "A flower")
    • _/src/main/resources/META-INF/resources/img/flower.jpg_

アドオン（jarパッケージ）

  • CSSファイル
    • @CssImport("./my-styles/styles.css")[1]
    • _/src/main/resources/META-INF/resources/frontend/my-styles/styles.css_
  • JavaScriptおよびPolymerテンプレート
    • @JsModule("./src/my-script.js")[1]
    • _/src/main/resources/META-INF/resources/frontend/src/my-script.js_
  • 静的ファイル。画像
    • new Image("img/flower.jpg", "A flower")
    • _/src/main/resources/META-INF/resources/img/flower.jpg_

Vaadin 10-13、互換モードのVaadin 14

非Spring Bootプロジェクト（warパッケージング）

  • CSSファイル
    • @StyleSheet("css/styles.css")[2]
    • _/src/main/webapp/frontend/css/styles.css_
  • Polymerテンプレート、カスタムスタイルおよびdom-moduleスタイル
    • @HtmlImport("src/template.html")
    • _/src/main/webapp/frontend/src/template.html_
  • JavaScript
    • @JavaScript("js/script.js")[3]
    • _/src/main/webapp/frontend/js/script.js_
  • 静的ファイル。画像
    • new Image("img/flower.jpg", "A flower")
    • _/src/main/webapp/img/flower.jpg_

Spring Bootプロジェクトとアドオン（jarパッケージ）

  • CSSファイル
    • @StyleSheet("css/styles.css")[2]
    • _/src/main/resources/META-INF/resources/frontend/css/styles.css_
  • Polymerテンプレート、カスタムスタイルおよびdom-moduleスタイル
    • @HtmlImport("src/template.html")
    • _/src/main/resources/META-INF/resources/frontend/src/template.html_
  • JavaScript
    • @JavaScript("js/script.js")[3]
    • _/src/main/resources/META-INF/resources/frontend/js/script.js_
  • 静的ファイル。画像
    • new Image("img/flower.jpg", "A flower")
    • _/src/main/resources/META-INF/resources/img/flower.jpg_

脚注

[1] _@JsModule_および_@CssImport_アノテーションは、npmパッケージからのインポートにも使用できます。この場合、パスは@JsModule("@polymer/paper-input")または@CssImport("some-package/style.css")として定義されます。 ローカルフロントエンドディレクトリを参照するパスの前には_./_を付ける必要があります

[2] _@StyleSheet_アノテーションは、npmを使用するVaadin 14でも使用できます。 _context://_プロトコル@StyleSheet("context://style.css")を含む、V10-V13と同じパスを使用できます。これは、他の静的ファイルと同様に、Webアプリケーションのコンテキストパスに関連するパスを解決します。 この方法でスタイルを含めると、Webコンポーネントで問題が発生する可能性があります。

[3] _@JavaScript_アノテーションは、npmを使用するVaadin 14でも使用できます。 V14 _/frontend_フォルダーを使用する必要があります,.

23
Erik Lumme

@Tazavooの回答がVaadin 14の公式ドキュメントに追加されました。

Vaadin 14リソースチートシート

これはVaadin 15のドキュメントの一部でもあります。

Vaadin 15リソースチートシート

私はこれをここに置きたかったのです。これが将来更新され続けることを願っています。ここにテーブルを掲載しないことをお許しください。ただし、この答えは他の場合には実行されます。

3
Michael Kemmerzell