Dans cet article, nous allons voir comment personnaliser les interfaces utilisateurs d’une application CAS.
Comme vous le savez peut-être déjà, nous traitons de l’installation de la superposition WAR du projet CAS. Dans ce projet de superposition, il n’y a aucune page de vue que nous pouvons modifier. Donc, tout d’abord, nous devons supprimer toutes les vues CAS que nous devons modifier dans notre superposition à partir du code source CAS.
Comment personnaliser une vue CAS
Dans un premier temps, à l’invite de commande, accédez au dossier racine de votre projet de superposition CAS et donnez la commande suivante, afin de voir toutes les vues CAS disponibles :
gradlew listTemplateViews
Si vous souhaitez réduire la vue de connexion CAS à notre projet de superposition, utilisez la commande suivante :
gradlew getResource –P resourceName= casLoginView.html
Puis « casLoginView.html » devrait être disponible dans « src/main/resources/templates/” de votre overlay.
Si vous le souhaitez, vous pouvez décompresser l’application Web CAS et le fichier de ressources internes à l’aide de la commande suivante :
graldew explodeWar
Vous pouvez maintenant copier manuellement le fichier HTML requis dans « src/main/resources/templates/ » puis modifiez-le.
Remarque : Après avoir décompressé le fichier de ressources, la commande « getResource » peut échouer avec le message « cas-server-webapp-resources-XXX.jar‘ n’existe pas. Dans ce cas, toutes les vues peuvent être disponibles « buildcasWEB-INFclassestemplates » dossier.
Vous pouvez voir que les vues CAS sont constituées de fragments plus petits qui sont disponibles dans « src/main/resources/templates/fragments » dossier. Si vous devez modifier une partie spécifique de la page de connexion, par exemple l’en-tête ou le pied de page, vous devez modifier le fragment pertinent disponible dans ce dossier. Vous pouvez même ajouter votre propre fragment dans ce dossier puis modifier « casLoginView.html» de la manière suivante :
<div th:if="${headersList}">
<div class="row">
<div id="headers" class="headerlist-panel col-12" th:if="${headersList != null}">
<div th:replace="fragments/headerslist :: headerslist">
<a href="https://dzone.com/articles/fragments/headerslist.html">headers list goes here</a>
</div>
</div>
</div>
</div>
Dans l’exemple ci-dessus « headerList” est une liste d’éléments transmis par le backend (lors du chargement de la page de connexion). Si la « headerList” le paramètre a une valeur, puis “headerlist.html” sera affiché sur la page de connexion. À l’intérieur « headerlist.html” fragment, vous pouvez avoir un codage pour itérer la liste et les afficher.
Remarque : CAS utilise « Thymeleaf » pour le rendu du balisage. Donc, pour modifier la vue CAS, vous devez avoir un peu les bases de Thymeleaf.
Les fichiers CSS, images et JavaScript doivent être dans le « src/main/resources/static/ » et ils devraient avoir leurs propres dossiers respectivement « css », « Images » et « js ». Si vous souhaitez modifier le fichier « cas.css » par défaut, vous pouvez le faire en le faisant descendre et en plaçant ce fichier dans « src/main/resources/static/css » dossier. Au lieu de modifier le fichier « cas.css » par défaut ci-dessus, si vous souhaitez avoir votre propre fichier cutom.css, vous souhaitez modifier la propriété « cas.standard.css.file » à l’intérieur du « cas-theme-default.properties» situé dans le dossier « src/main/resources/ ».
Tous les messages de l’interface utilisateur apparaissant dans les vues sont disponibles « messages.properties » dans le dossier de ressources. Cependant, si vous souhaitez écraser ces messages par défaut ou ajouter des messages supplémentaires, la méthode recommandée par CAS consiste à les placer dans « custom_messages.properties » fichier que vous devez placer à l’intérieur « src/main/resources » dossier.
Voici comment la structure des dossiers du « src/main/resources » ressemblerait à un projet de superposition CAS.
Maintenant, nous avons une idée de la modification des vues CAS et de l’endroit où placer ces fichiers dans notre projet. La prochaine fois que nous construirons notre projet de superposition, il récupérera les fichiers disponibles (c’est-à-dire la modification des vues que nous avons effectuées) à l’intérieur de « src/main/resources” du projet de superposition. Ainsi, une fois qu’il sera opérationnel, nous pourrons voir la modification que nous avons effectuée.