This is an old revision of the document!
Nous allons créer une arborescence de personnalisation des themes et view pour notre institut (Telecom & Management SudParis , simplifié ici en tmsp1)
[root@cas2 cas-toolbox-3.3.5-3]# mkdir -p custom/webpages/themes/ [root@cas2 cas-toolbox-3.3.5-3]# cp -a update.esup/webpages/themes/esup custom/webpages/themes/ [root@cas2 cas-toolbox-3.3.5-3]# ls custom/webpages/themes/ esup [root@cas2 cas-toolbox-3.3.5-3]# ls custom/webpages/themes/esup/ cas.css images
Le theme est essentiellement le fichier css, ici ce sera tmsp1cas.css qui sera chargé par toutes les pages statiques (jsp) car elles inclus toutes top.jsp (et bottom.jsp)
[root@cas2 cas-toolbox-3.3.5-3]# grep css /root/cas-toolbox-3.3.5-3/update.esup/webpages/WEB-INF/view/jsp/default/ui/includes/top.jsp <style type="text/css" media="screen">@import '<spring:theme code="css" />'/**/;</style>
cette directive @import va chercher dans le config.properties le nom du theme parametré , ici tmsp1:
ce qui resultera au final en
<style type="text/css" media="screen">@import 'themes/tmsp1Theme/tmsp1cas.css'/**/;</style>
Il faut indiquer a ant que nous allons utliser l'arborescence custom et les themes/views tmsp1:
[root@cas3 cas-toolbox-3.4.7-1]# grep custom build.properties
custom.path=${basedir}/custom
cas.custom.webpage.path=${custom.path}/webpages
cas.custom.source.path=${custom.path}/source
[root@cas3 cas-toolbox-3.4.7-1]# grep tmsp1 config.properties theme=tmsp1Theme views=tmsp1Vue
Préparer l'arborescence de custom
$ mkdir -p custom/webpages/WEB-INF/classes/
recopier le fichier esup.properties
[root@cas3 cas-toolbox-3.4.7-1]# cp /root/cas-toolbox-3.4.7-1/update.esup/webpages/WEB-INF/classes/esup.properties custom/webpages/WEB-INF/classes/tmsp1Theme.properties
Fichier tmsp1Theme.properties appel les css:
[root@cas3 cas-toolbox-3.4.7-1]# cat custom/webpages/WEB-INF/classes/tmsp1Theme.properties mobile.custom.css.file=themes/tmsp1Theme/default-mobile-custom.css standard.custom.css.file=themes/tmsp1Theme/cas.css
[root@cas3 cas-toolbox-3.4.7-1]# mkdir custom/webpages/themes/tmsp1Theme
Recopie du modele de cas.css et ajout d'images, dont le logo“ qui est chargé dans la css !:
[root@cas3 cas-toolbox-3.4.7-1]# cp /root/cas-toolbox-3.4.7-1/update.esup/webpages/themes/esup/cas.css custom/webpages/themes/tmsp1Theme/ [root@cas3 cas-toolbox-3.4.7-1]# mkdir -p custom/webpages/themes/tmsp1Theme/images [root@cas3 cas-toolbox-3.4.7-1]# cp tmp/images/it.png custom/webpages/themes/tmsp1Theme/images [root@cas3 cas-toolbox-3.4.7-1]# grep it.png custom/webpages/themes/tmsp1Theme/cas.css background:#fff url(images/it.png) no-repeat scroll 99% 32px;
Logo dans la section #header
Les views sont des pages statique (jsp) visibles dans /webpages/WEB-INF/view/jsp/theme/ui
On reprend l'ensemble des jsp du theme par defaut pour les adapter à notre site.
[root@cas2 cas-toolbox-3.3.5-3]# mkdir -p custom/webpages/WEB-INF/view/jsp/tmsp1Vues/ui [root@cas2 cas-toolbox-3.3.5-3]# cp -a build/cas/WEB-INF/view/jsp/default/ui/* custom/webpages/WEB-INF/view/jsp/tmsp1Vues/ui/ [root@cas2 cas-toolbox-3.3.5-3]# ls -LtR custom/webpages/WEB-INF/view/jsp/tmsp1Vues/ui/ custom/webpages/WEB-INF/view/jsp/tmsp1Vues/ui/: includes casLoginView.jsp casGenericSuccess.jsp serviceErrorSsoView.jsp casBlockedView.jsp casConfirmView.jsp casLogoutView.jsp serviceErrorView.jsp custom/webpages/WEB-INF/view/jsp/tmsp1Vues/ui/includes: top.jsp bottom.jsp
Attention a top.jsp qui peut-etre ecrasé par la manip ci-dessus, s'assurer qu'il contient bien l'appel spring au parametage du theme:
$ grep css custom/webpages/WEB-INF/view/jsp/tmsp1Vues/ui/includes/top.jsp
<style type="text/css" media="screen">@import '<spring:theme code="css" />'/**/;</style>
et non le top.jsp par defaut qui force l'usage de css/cas.css autrement tout notre travail de personnalisation echoue. Initialement
<style type=“text/css” media=“screen”>@import 'css/cas.css'/**/;</style>
Pour chaque jsp il faut definir son appel dans *theme_name*_views.properties
[root@cas2 cas-toolbox-3.3.5-3]# cp build/cas/WEB-INF/classes/default_views.properties custom/webpages/WEB-INF/classes/tmsp1Vues_views.properties
On remplace toute auccorence de “default” par “tmsp1Vues” ici, (cf vi ”:1,$s/default/tmsp1Vues/“)
[root@cas2 cas-toolbox-3.3.5-3]# cat custom/webpages/WEB-INF/classes/tmsp1Vues_views.properties ### Login view (/login) casLoginView.(class)=org.springframework.web.servlet.view.JstlView casLoginView.url=/WEB-INF/view/jsp/tmsp1Vues/ui/casLoginView.jsp ### Login confirmation view (logged in, warn=true) casLoginConfirmView.(class)=org.springframework.web.servlet.view.JstlView casLoginConfirmView.url=/WEB-INF/view/jsp/tmsp1Vues/ui/casConfirmView.jsp ### Logged-in view (logged in, no service provided) casLoginGenericSuccessView.(class)=org.springframework.web.servlet.view.JstlView casLoginGenericSuccessView.url=/WEB-INF/view/jsp/tmsp1Vues/ui/casGenericSuccess.jsp ### Logout view (/logout) casLogoutView.(class)=org.springframework.web.servlet.view.JstlView casLogoutView.url=/WEB-INF/view/jsp/tmsp1Vues/ui/casLogoutView.jsp ### CAS error view serviceErrorView.(class)=org.springframework.web.servlet.view.JstlView serviceErrorView.url=/WEB-INF/view/jsp/tmsp1Vues/ui/serviceErrorView.jsp viewServiceErrorView.(class)=org.springframework.web.servlet.view.JstlView viewServiceErrorView.url=/WEB-INF/view/jsp/tmsp1Vues/ui/serviceErrorView.jsp viewServiceSsoErrorView.(class)=org.springframework.web.servlet.view.JstlView viewServiceSsoErrorView.url=/WEB-INF/view/jsp/tmsp1Vues/ui/serviceErrorSsoView.jsp ### Services Management Views addServiceView.(class)=org.springframework.web.servlet.view.JstlView addServiceView.url=/WEB-INF/view/jsp/services/add.jsp editServiceView.(class)=org.springframework.web.servlet.view.JstlView editServiceView.url=/WEB-INF/view/jsp/services/add.jsp manageServiceView.(class)=org.springframework.web.servlet.view.JstlView manageServiceView.url=/WEB-INF/view/jsp/services/manage.jsp serviceLogoutView.(class)=org.springframework.web.servlet.view.JstlView serviceLogoutView.url=/WEB-INF/view/jsp/services/logout.jsp viewStatisticsView.(class)=org.springframework.web.servlet.view.JstlView viewStatisticsView.url=/WEB-INF/view/jsp/services/viewStatistics.jsp
Adaptation de la page premiere de Login CAS; casLoginView.jsp
[root@cas2 cas-toolbox-3.3.5-3]# diff -ur custom/webpages/WEB-INF/view/jsp/tmsp1Vues/ui/casLoginView.jsp build/cas/WEB-INF/view/jsp/default/ui/casLoginView.jsp
Notament les images/drapeaux pour les langues et les logos en bas de pages:
<li class="first"><a href="login?${query}${not empty query ? '&' : ''}locale=en"title="English"><img src="themes/tmsp1Theme/images/flags/english.png" alt="English"></a></li>
...
<li class="last"><a href="${loginUrl}tr"title="Turkish"><img src="themes/tmsp1Theme/images/flags/turkey.png" alt="Turkish"></a>
</ul>
</div>
</div>
<div id="IT"><a href="http://www.institut-telecom.fr/fr_accueil.html" title="Go to Institut Télécom home page"><img id="logo" src="themes/tmsp1Theme/images/it.png" alt="Institut Télécom" title="Go to Institut Télécom home page" /></a></div>
<div id="logos">
<ul>
<li id="TSP"><a href="http://www.telecom-sudparis.eu/" title="Go to Télécom SudParis home page"><img src="themes/tmsp1Theme/images/tsp.png" alt="Télécom SudParis"></a></li>
<li id="TEM"><a href="http://www.telecom-em.eu/" title="Go to Télécom École de Management home page"><img src="themes/tmsp1Theme/images/tem.png" alt="Télécom Ecole de Management"></a></li>
</ul>
</div>
</form:form>
<jsp:directive.include file="includes/bottom.jsp" />