Principe de la charte

Charte graphique

La charte graphique est composé d'un ou de plusieurs thèmes, et d'un ou de plusieurs layouts. Le thème est l'ensemble des feuilles de style CSS ainsi que des scripts JavaScript spécifiques qui vont être ajoutés à l'entête de la page HTML. Le layout est le squelette de la page HTML, contenant les régions du portail et définissant sa structure en vues normale et maximisée.

Une charte contient également la présentation de la page et des portlets en erreur, ainsi que les éléments graphiques (images, régions, etc.) spécifiques à cette charte.

Thèmes

La définition des thèmes de la charte est enregistrée dans le fichier portal-themes.xml. Chaque thème est muni d'un nom ainsi que de dépendances vers les feuilles de style et scripts à injecter dans l'entête.

Afin d'assurer le bon affichage de tous les composants du portail, le thème doit être basé sur le framework Bootstrap. Il est alors possible de reprendre soit le style « Bootstrap » proposé par le portail, soit de créer un nouveau style. Le nouveau style doit être créé à partir des sources Bootstrap LESS modifiée par OSIVIA, qui peuvent alors être personnalisées (tailles, polices, couleurs, etc.).

Exemple de thème :

<theme>
    <name>demo-charte</name>
    <link rel="icon" href="/img/osivia.ico" />
    <link rel="stylesheet" href="/css/demo.min.css" title="Demo" />
    <script type="text/javascript" src="/js/demo.js"></script>
</theme>
Layouts

La définition des layouts de la charte est enregistrée dans le fichier portal-layouts.xml. Chaque layout est muni d'un nom, de chemins vers les pages en vues normale et maximisée, et du nom des régions modifiables dans le portail.

Le squelette du layout se présente sous la forme d'un fichier JSP produisant la page HTML finale. Il exploite alors la taglib portal-layout qui permet de positionner les régions et d'injecter les informations nécessaires à l'affichage dans l'entête de la page.

Exemple de layout à deux colonnes :

<layout>
    <name>demo-2-cols</name>
    <uri>/layouts/2-cols/index.jsp</uri>
    <uri state="maximized">/layouts/2-cols/maximized.jsp</uri>
    <regions>
        <region name="col-1" />
        <region name="col-2" />
    </regions>
</layout>

La feuille de style CSS de la charte graphique de démonstration est générée à partir du compilateur LESS et repose sur le framework Bootstrap.

Les thèmes et les layouts sont associés aux portails via le portal d'administration de Osivia Portal

Ils peuvent être spécialisés sur certaines pages pages via le menu PAGE > PROPRIETE