[[CAS Themes]]
Trace: • CAS Themes • esup 3.2 C6
Show pageOld revisions
AdminRecent ChangesSitemap

* ancien site

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Next revision 		Previous revision
docpublic:systemes:ssocas:castheme [2010/09/27 09:18]
PROCACCIA created 		docpublic:systemes:ssocas:castheme [2011/09/08 13:36] (current)
PROCACCIA
Line 3: Line 3:
 ==== Référence ==== ==== Référence ====
  
-http://doc-cri.univ-nancy2.fr/public/?contentId=3841#AUTO_SECT0.2.1+ 
 +  * 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 ==== ==== Arborescence Custom ====
Line 18: Line 21:
 [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 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> </code>
  
docpublic/systemes/ssocas/castheme.1285579136.txt.gz · Last modified: 2010/09/27 09:18 by PROCACCIA
Show pageOld revisions
[unknown link type]Back to top
CC Attribution-Noncommercial-Share Alike 4.0 International
www.chimeric.de Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0