Démarrer

Maven

La première chose à faire est d'ajouter la librairie au fichier pom.xml.

<dependencies>
    <!-- ... -->
    <dependency>
        <groupId>fr.kosmos.web.kore</groupId>
        <artifactId>kuik</artifactId>
    </dependency>
    <!-- ... -->
    <!-- optionnellement -->
    <dependency>
        <groupId>fr.kosmos.web.kore</groupId>
        <artifactId>kuik-documentation</artifactId>
    </dependency>
    <!-- ... -->
</dependencies>

Ensuite, il faut intégrer la chaîne de build.

Utilisation dans une jsp

Première chose ajouter la tld :

<%@ taglib prefix="kuik" uri="kuik" %>

Ensuite utiliser un composant :

<kuik:button priority="secondary">Cliquer ici</kuik:button>

Création d'une bibliothèque de composants custom

Il faut tout d'abord créer un fichier tld, le nom du fichier doit correspondre au format project-.*\.tld :

<?xml version="1.0" encoding="UTF-8" ?>
<taglib xmlns="http://java.sun.com/xml/ns/javaee"
            xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
            xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-jsptaglibrary_2_1.xsd"
            version="2.1">

    <tlib-version>1.0</tlib-version>
    <short-name>projet</short-name>
    <uri>projet</uri>

    <tag-file>
        <name>rich-content</name>
        <path>/META-INF/tags/projet/rich-content/rich-content.tag</path>
        <description>Composant projet</description>
        <display-name></display-name>Organisme</display-name>
    </tag-file>
</taglib>

puis le fichier tag :

<%@ tag pageEncoding="UTF-8" trimDirectiveWhitespaces="true" dynamic-attributes="dynattrs" %>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<c:set var="classes" value="rich-content"/>

<c:set var="attributes">
    <c:forEach items="${dynattrs}" var="a">
        <c:choose></c:choose>
            <c:when test="${a.key == 'class'}">
                <c:set value="${classes} ${a.value}" var="classes"/>
            </c:when>
            <c:otherwise>${a.key}="${a.value}"</c:otherwise>
        </c:choose>
    </c:forEach>
</c:set>

<div class="${classes}" ${attributes}>
    <jsp:doBody />
</div>

Déclaration d'un script pour un composant custom

Dans le cadre de l'éco-conception, il n'est pas nécessaire d'ajouter un script pour un composant custom s'il n'est pas présent dans la page consultée par l'utilisateur.

Étant donné que, par défaut, le script en question est absent, il est donc nécessaire de l'ajouter dès que le composant est inclus dans la page.

Pour cela, il y a 2 scénarios possibles : l'ajout systématique depuis le composant lui-même ou le repérage du composant dans la page.

Ajout systématique depuis le composant

Depuis le fichier du composant (*.tag), il est possible de faire appel à une balise dédiée à l'ajout d'un script JS :

<%@ taglib prefix="resources" uri="resources" %>

<resources:addScript src="/static/js/mon-script.js" type="module" />

L'appel à cet élément permet d'indiquer, lors de la génération de la page, que le script en question est requis.

Il sera ajouté plus tard, à la fin de la génération de la page (généralement après le footer) :

<%@ taglib prefix="resources" uri="resources" %>

<resources:getScripts />

L'avantage de cette solution est double :

• Pouvoir n'injecter le script que s'il est nécessaire
• Possibilité d'appeler plusieurs fois le composant sans risquer d'ajouter le script plusieurs fois : l'unicité d'appel est garantie.

Repérage de composants dans la page

L'autre possibilité consiste à repérer la présence d'un composant dans la page, côté navigateur, une fois la page générée.

Pour cela, il est nécessaire de déclarer une configuration comme dans le modèle ci-dessous :

import(/* webpackIgnore: true */ `/static/js/autoloader-handler.js?t=${Date.now()}`).then(({ defineConfigurations }) => {
    defineConfigurations({
        condition: () => !!(document.querySelector('.ckeditor-accordion')),
        scripts: [ '/static/js/legacy/ckeditor-accordion.js' ]
    });
});

La méthode defineConfigurations est une méthode qui peut prendre (théoriquement) une infinité d'arguments.

Chaque configuration est composée de deux éléments :

• condition : une fonction qui retourne un booléen (true si le script du composant doit être importé, false sinon)
• scripts : un tableau de scripts à importer si le composant est présent dans la page

NOTE : Le script /static/js/autoloader-handler.js est fourni par Kuik. Il doit être importé de la même façon que l'exemple le montre (avec webpackIgnore: true et un import dynamique).