===== CAS Themes =====

==== Référence ====


  * http://doc-cri.univ-nancy2.fr/public/?contentId=3841#AUTO_SECT0.2.1
  * http://www.esup-portail.org/display/PROJESUPMOBILE/CAS+Mobile
  * http://wiki.esco-portail.org/index.php/Documents:Personnalisation_graphique_CAS_V3

==== Arborescence Custom ====

Nous allons créer une arborescence de personnalisation des themes et view pour notre institut (Telecom & Management SudParis , simplifié ici en tmsp1) 

=== Arbre FS ===

<code>
[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
</code>


au final on aura ce type d'arborescence dans custom

<code>
[root@cas3 custom]# tree -a 
.
└── webpages
    ├── themes
    │   ├── esup
    │   │   ├── cas.css
    │   │   ├── default-mobile-custom.css
    │   │   └── images
    │   │       ├── esup-logo.gif
    │   │       └── logos.gif
    │   └── tmsp1Theme
    │       ├── cas.css
    │       └── images
    │           ├── bandeau.jpg
    │           ├── flags
    │           │   ├── brazil.png
    │           │   ├── chinese.png
    │           │   ├── croatia.png
    │           │   ├── czech.png
    │           │   ├── english.png
    │           │   ├── french.png
    │           │   ├── german.png
    │           │   ├── italian.png
    │           │   ├── japonese.png
    │           │   ├── netherlands.png
    │           │   ├── poland.png
    │           │   ├── russian.png
    │           │   ├── slovenia.png
    │           │   ├── spanish.png
    │           │   ├── svenskt.png
    │           │   ├── turkey.png
    │           │   └── urdu.png
    │           ├── fond.png
    │           ├── it.png
    │           ├── tem.png
    │           └── tsp.png
    └── WEB-INF
        ├── classes
        │   ├── messages_fr.properties
        │   ├── tmsp1Theme.properties
        │   └── tmsp1Vues_views.properties
        ├── usersFile
        └── view
            └── jsp
                └── tmsp1Vues
                    └── ui
                        ├── casBlockedView.jsp
                        ├── casConfirmView.jsp
                        ├── casGenericSuccess.jsp
                        ├── casLoginView.jsp
                        ├── casLogoutView.jsp
                        ├── includes
                        │   ├── bottom.jsp
                        │   └── top.jsp
                        ├── serviceErrorSsoView.jsp
                        └── serviceErrorView.jsp

14 directories, 40 files


</code>

==== Theme ====

=== CSS ===

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)

<code>
[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>
</code>

cette directive @import  va chercher dans le config.properties le nom du theme parametré , ici tmsp1:

ce qui resultera au final en

<code>
<style type="text/css" media="screen">@import 'themes/tmsp1Theme/tmsp1cas.css'/**/;</style>
</code>

=== parametrage ===

Il faut indiquer a ant que nous allons utliser l'arborescence custom et les themes/views tmsp1:

<code>
[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
</code>

<code>
[root@cas3 cas-toolbox-3.4.7-1]# grep tmsp1 config.properties 
theme=tmsp1Theme
views=tmsp1Vue
</code>

=== Création ===

Préparer l'arborescence de custom

<code>
$ mkdir -p custom/webpages/WEB-INF/classes/
</code>

recopier le fichier esup.properties 

<code>
[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
</code>

Fichier tmsp1Theme.properties appel les css:

<code>
[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
</code>



==== arborescence de theme tmsp1 ====

<code>
[root@cas3 cas-toolbox-3.4.7-1]# mkdir custom/webpages/themes/tmsp1Theme
</code>

Recopie du modele de cas.css et ajout d'images, dont le logo" qui est chargé dans la css !:

<code>
[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;

</code>
Logo dans la section  #header


==== views JSP ====

Les views sont des pages statique (jsp) visibles dans /webpages/WEB-INF/view/jsp/theme/ui

=== modele ===

On reprend l'ensemble des jsp du theme par defaut pour les adapter à notre site.

<code>
[root@cas3 cas-toolbox-3.4.7-1]# mkdir -p custom/webpages/WEB-INF/view/jsp/tmsp1Vues/ui

[root@cas3 cas-toolbox-3.4.7-1]# cp -a build/cas/WEB-INF/view/jsp/default/ui/* custom/webpages/WEB-INF/view/jsp/tmsp1Vues/ui/

[root@cas3 cas-toolbox-3.4.7-1]# ls -LtR custom/webpages/WEB-INF/view/jsp/tmsp1Vues/ui/
custom/webpages/WEB-INF/view/jsp/tmsp1Vues/ui/:
includes            casConfirmView.jsp     casLoginView.jsp   serviceErrorSsoView.jsp
casBlockedView.jsp  casGenericSuccess.jsp  casLogoutView.jsp  serviceErrorView.jsp

custom/webpages/WEB-INF/view/jsp/tmsp1Vues/ui/includes:
bottom.jsp  top.jsp

</code>


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:

<code>
$ 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>
</code>

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>

==== Views tmsp1 ====

Pour chaque jsp il faut definir son appel dans *theme_name*_views.properties

<code>
[root@cas3 cas-toolbox-3.4.7-1]# cp build/cas/WEB-INF/classes/default_views.properties custom/webpages/WEB-INF/classes/tmsp1Vues_views.properties

</code>

On remplace toute occurence de "default" par "tmsp1Vues" ici, (cf vi ":1,$s/default/tmsp1Vues/" 7 substitutions on 7 lines )

<code>
[root@cas3 cas-toolbox-3.4.7-1]# 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
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

403.(class)=org.springframework.web.servlet.view.JstlView
403.url=/WEB-INF/view/jsp/tmsp1Vues/ui/casBlockedView.jsp
</code>


==== Messages ====

on peux aussi personnaliser les messages (intitulés) via messages_fr.properties 

<code>
[root@cas3 cas-toolbox-3.4.7-1]# cp update/webpages/WEB-INF/classes/messages_fr.properties custom/webpages/WEB-INF/classes/
[root@cas3 cas-toolbox-3.4.7-1]# vim custom/webpages/WEB-INF/classes/messages_fr.properties 
</code>

un ant init / deploy est necessaire apres chaque modification dans custom !

==== JSP Login ====

Adaptation de la page premiere de Login CAS; casLoginView.jsp

<code>
[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
</code>

Notament les images/drapeaux pour les langues et les logos en bas de pages:

<code>
<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&#233;l&#233;com home page"><img id="logo" src="themes/tmsp1Theme/images/it.png" alt="Institut T&#233;l&#233;com" title="Go to Institut T&#233;l&#233;com home page" /></a></div>
        <div id="logos">
                <ul>
                        <li id="TSP"><a href="http://www.telecom-sudparis.eu/" title="Go to T&#233;l&#233;com SudParis home page"><img src="themes/tmsp1Theme/images/tsp.png" alt="T&#233;l&#233;com SudParis"></a></li>
                        <li id="TEM"><a href="http://www.telecom-em.eu/" title="Go to T&#233;l&#233;com &#201;cole de Management home page"><img src="themes/tmsp1Theme/images/tem.png" alt="T&#233;l&#233;com Ecole de Management"></a></li>
                </ul>
        </div>
</form:form>
<jsp:directive.include file="includes/bottom.jsp" />
</code>