web-dev-qa-db-fra.com

Où dois-je placer mes fichiers statiques Vaadin 10+?

Dans Vaadin 10-14, où dois-je placer mes fichiers statiques, tels que CSS, JavaScript et les modèles Polymer? Et les fichiers statiques tels que les images?

De plus, comment importer ces fichiers dans Vaadin? Y a-t-il une différence entre Vaadin 14 avec npm et Vaadin 10-13 avec bower?

springpolymervaadinstylesheetvaadin-flow
9
Erik Lumme

Tous les chemins sont relatifs à la racine du projet, par ex. où se trouve le fichier pom.xml dans un projet Maven.

JavaScript importé en utilisant @JsModule Utilise mode strict . Cela signifie entre autres que les variables globales doivent être définies sur l'objet window, window.x = ..., Au lieu de simplement x = ....

Vaadin 14 avec npm

Projets non Spring Boot (emballage de guerre)

  • Fichiers CSS
    • @CssImport("./my-styles/styles.css")[1]
    • /frontend/my-styles/styles.css
  • JavaScript et Polymer modèles
    • @JsModule("./src/my-script.js")[1]
    • /frontend/src/my-script.js
  • Fichiers statiques, par ex. images
    • new Image("img/flower.jpg", "A flower")
    • /src/main/webapp/img/flower.jpg

Projets Spring Boot (emballage en pot)

  • Fichiers CSS
    • @CssImport("./my-styles/styles.css")[1]
    • /frontend/my-styles/styles.css
  • JavaScript et Polymer modèles
    • @JsModule("./src/my-script.js")[1]
    • /frontend/src/my-script.js
  • Fichiers statiques, par ex. images
    • new Image("img/flower.jpg", "A flower")
    • /src/main/resources/META-INF/resources/img/flower.jpg

Modules complémentaires (emballage en pot)

  • Fichiers CSS
    • @CssImport("./my-styles/styles.css")[1]
    • /src/main/resources/META-INF/resources/frontend/my-styles/styles.css
  • JavaScript et Polymer modèles
    • @JsModule("./src/my-script.js")[1]
    • /src/main/resources/META-INF/resources/frontend/src/my-script.js
  • Fichiers statiques, par ex. images
    • new Image("img/flower.jpg", "A flower")
    • /src/main/resources/META-INF/resources/img/flower.jpg

Vaadin 10-13, Vaadin 14 en mode de compatibilité

Projets non Spring Boot (emballage de guerre)

  • Fichiers CSS
    • @StyleSheet("css/styles.css")[2]
    • /src/main/webapp/frontend/css/styles.css
  • Modèles de polymères, styles personnalisés et styles de modules dom
    • @HtmlImport("src/template.html")
    • /src/main/webapp/frontend/src/template.html
  • JavaScript
    • @JavaScript("js/script.js")[3]
    • /src/main/webapp/frontend/js/script.js
  • Fichiers statiques, par ex. images
    • new Image("img/flower.jpg", "A flower")
    • /src/main/webapp/img/flower.jpg

Projets et modules complémentaires Spring Boot (emballage en pot)

  • Fichiers CSS
    • @StyleSheet("css/styles.css")[2]
    • /src/main/resources/META-INF/resources/frontend/css/styles.css
  • Modèles de polymères, styles personnalisés et styles de modules dom
    • @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
  • Fichiers statiques, par ex. images
    • new Image("img/flower.jpg", "A flower")
    • /src/main/resources/META-INF/resources/img/flower.jpg

Notes de bas de page

[1] Les annotations @JsModule Et @CssImport Peuvent également être utilisées pour l'importation à partir d'un package npm. Dans ce cas, le chemin d'accès est défini comme @JsModule("@polymer/paper-input") ou @CssImport("some-package/style.css"). Les chemins faisant référence au répertoire frontal local doivent être préfixés avec ./

[2] L'annotation @StyleSheet Peut également être utilisée dans Vaadin 14 avec npm. Les mêmes chemins que dans V10-V13 peuvent être utilisés, y compris le protocole context://@StyleSheet("context://style.css"), qui résout le chemin par rapport au chemin de contexte de l'application Web, comme les autres fichiers statiques. Les styles inclus de cette façon peuvent entraîner des problèmes avec les composants Web .

[3] L'annotation @JavaScript Peut également être utilisée dans Vaadin 14 avec npm. Le dossier V14 /frontend Doit alors être utilisé ,.

23
Erik Lumme

La réponse de @Tazavoo a été ajoutée à la documentation officielle de Vaadin 14:

Aide-mémoire sur les ressources Vaadin 14

Il fait également partie de la documentation Vaadin 15:

Aide-mémoire sur les ressources Vaadin 15

Je voulais juste le mettre ici parce que j'espère que cela restera à jour à l'avenir. Veuillez me pardonner que je ne poste pas les tableaux ici, mais cette réponse se répétera sinon.

3
Michael Kemmerzell