Importing Assets

Ouvrir dans ChatGPT

Les annotations d'assets fournissent une approche déclarative pour intégrer des ressources externes et en ligne telles que JavaScript et CSS dans une application de façon statique. Ces annotations simplifient la gestion des ressources en garantissant que les dépendances sont chargées au bon moment d'exécution, réduisant la configuration manuelle et améliorant la maintenabilité.

Importation des fichiers JavaScript

L'inclusion déclarative de JavaScript est prise en charge par l'annotation @JavaScript, permettant un chargement automatique des dépendances. L'annotation peut être appliquée à la fois au niveau du composant et au niveau de l'application.

@JavaScript("ws://js/app.js")
@JavaScript("https://cdn.example.com/library.js")

L'annotation accepte un chemin relatif ou complet à charger dans l'application. Cela sera inséré dans le DOM sous la forme d'une balise <script>. De plus, l'annotation prend en charge les propriétés suivantes :

Propriété	Type	Description	Par défaut
top	Boolean	Spécifie si le script doit être injecté dans la fenêtre de niveau supérieur	false
attributes	Object	Un ensemble d'attributs à appliquer au script.	{}

Exemple :

@JavaScript(value = "ws://my-component.js",
  attributes = {@Attribute(name = "type", value = "module")})

info

Les fichiers ne sont chargés que lorsque le composant déclarant l'annotation est attaché à un conteneur. Si plusieurs composants chargent le même fichier, le fichier est injecté une seule fois.

Injection de JavaScript

Dans certains cas, vous souhaiterez peut-être injecter directement du code JavaScript dans le DOM au lieu de fournir un chemin JavaScript. L'annotation InlineJavaScript vous permet d'injecter du contenu JavaScript.

@InlineJavaScript("alert('Je suis un script en ligne !');")
@JavaScript("context://js/app.js")

Propriété	Type	Description	Par défaut
top	Boolean	Spécifie si le script doit être injecté dans la fenêtre de niveau supérieur	false
attributes	Object	Attributs à appliquer au script	{}
id	String	Un identifiant de ressource unique pour garantir une seule injection	""

avertissement

Les scripts peuvent être injectés plusieurs fois en utilisant InlineJavaScript à moins qu'un ID spécifique ne soit assigné en utilisant la propriété id.

Importation des fichiers CSS

L'inclusion déclarative de CSS est prise en charge par l'annotation @StyleSheet, permettant un chargement automatique des dépendances. L'annotation peut être appliquée à la fois au niveau du composant et au niveau de l'application.

@StyleSheet("ws://css/app.css")
@StyleSheet("https://cdn.example.com/library.css")

Propriété	Type	Description	Par défaut
top	Boolean	Spécifie si la feuille de style doit être injectée dans la fenêtre de niveau supérieur	false
attributes	Object	Attributs à appliquer à la feuille de style	{}

Exemple :

@StyleSheet(value = "ws://my-component.css",
  attributes = {@Attribute(name = "media", value = "screen")})

info

Les fichiers ne sont chargés que lorsque le composant déclarant l'annotation est attaché à un conteneur. Chaque fichier est chargé une seule fois.

Injection de CSS

L'annotation InlineStyleSheet vous permet d'injecter directement du contenu CSS dans une page web à la fois au niveau du composant et au niveau de l'application.

@InlineStyleSheet("body { background-color: lightblue; }")
@InlineStyleSheet(value = "h1 { color: red; }", id = "headingStyles", once = true)

Propriété	Type	Description	Par défaut
top	Boolean	Spécifie si la feuille de style doit être injectée dans la fenêtre de niveau supérieur de la page.	false
attributes	Object	Un ensemble d'attributs à appliquer à l'élément de style.	{}
id	String	Un identifiant de ressource unique. Si plusieurs ressources ont le même ID, elles seront regroupées dans un seul élément de style.	""
once	Boolean	Détermine si la feuille de style doit être injectée dans la page une seule fois, quel que soit le nombre d'instances de composants.	true

conseil

Pour un meilleur surlignage de la syntaxe lors de l'écriture de CSS en ligne pour vos composants, vous pouvez utiliser l'extension webforJ VS Code : Java HTML CSS Syntax Highlighting.

Ressources dynamiques à l'exécution

La gestion dynamique des ressources est possible grâce à l'injection programmatique de JavaScript et CSS à l'exécution. Vous pouvez charger ou injecter des ressources en fonction du contexte d'exécution.

Chargement et injection de JavaScript

Chargez ou injectez dynamiquement du JavaScript à l'exécution en utilisant l'API Page. Cela vous permet de charger des scripts depuis des URL ou d'injecter des scripts en ligne directement dans le DOM.

Page page = Page.getCurrent();

// Chargement des fichiers JavaScript
page.addJavaScript("ws://js/app.js");
page.addJavaScript("https://cdn.example.com/library.js");

// Injection de JavaScript en ligne
page.addInlineJavaScript("console.log('Injection à l'exécution');");
page.addInlineJavaScript("alert('Ce script s'exécute en ligne');");

Paramètre	Description
script	Le contenu du script URL ou en ligne à injecter. Les URLs commençant par context:// se résolvent dans le dossier racine des ressources de l'application.
top	Détermine si le script doit être injecté en haut de la page.
attributes	Une carte d'attributs à définir pour le script.

Chargement et injection de CSS

Chargez ou injectez dynamiquement du CSS à l'exécution en utilisant l'API Page. Cela vous permet de charger des feuilles de style depuis des URL ou d'injecter des styles en ligne directement dans le DOM.

Page page = Page.getCurrent();

// Chargement des fichiers CSS
page.addStyleSheet("ws://css/app.css");
page.addStyleSheet("https://cdn.example.com/library.css");

// Injection de CSS en ligne
page.addInlineStyleSheet("body { background-color: lightblue; }");
page.addInlineStyleSheet("h1 { font-size: 24px; color: navy; }");

Paramètre	Description
stylesheet	Le contenu de la feuille de style URL ou en ligne à injecter. Les URLs commençant par context:// se résolvent dans le dossier racine des ressources de l'application.
top	Détermine si la feuille de style doit être injectée en haut de la page.
attributes	Une carte d'attributs à définir pour la feuille de style.