Principe

La structure des pages des portlets suit les mêmes principes que uPortal :

Utilisation des classes FLUID pour positionner les éléments et définir leur aspect général (colonnes, liste, barre d'outils, etc.)
Utilisation des classes uPortal (dérivées de la jsr-168) pour définir les rôles des éléments et leur style
Les rôles wai-aria commencent également à être utilisés pour les grandes sections

Structure générale

La page est composée d'un élément général de rôle "section", avec la classe "portlet". cet élément contient :

éventuellement un titre, de rôle "sectionhead"
un corps, de rôle "main"

<div class="fl-widget portlet" role="section">
    ...
    <div class="fl-widget-content portlet-body" role="main">
        ...
    </div>
</div>

Titre de portlet

Le titre de portlet est placé avant la section "main", il a un rôle "sectionhead" et une classe "portlet-title"

<div class="fl-widget portlet" role="section">
    <div class="fl-widget-titlebar portlet-title" role="sectionhead">
        <h2 role="heading">Titre Portlet</h2>
    </div>

Corps de portlet

Le corps de portlet a une classe "portlet-body", Il peut contenir les éléments suivants :

Barre d'outils

Classe "portlet-toolbar", rôle "toolbar" :

     <div class="portlet-toolbar" role="toolbar">

Les classes FLUID fl-col peuvent être utilisées pour disposer les outils en colonnes, mixées avec des listes (cf. portlet-structure)

Section

Une section de portlet est un élément de classe "portlet-section", qui a un rôle "menu" ou "section" (à compléter, voir wai-aria ?).

Une section peut avoir :

un titre, qui sera de classe "portlet-section-header" et avec un rôle "header"
des options de section
un corps, de classe "portlet-section-body"

Titre de section

     <div class="portlet-section" role="menu">
            <h3 class="portlet-section-header" role="heading">Sous-titre section</h3>

Options de section

     <div class="portlet-section" role="menu">
         <div>
                <a href="#"><span>Lien portlet-section-options</span></a>
         </div>

Corps de section

     <div class="portlet-section" role="menu">
            ...            <div class="portlet-section-body">

Un corps de section peut contenir :

Liste déroulante

Par application de la classe FLUID "fl-listmenu". La section doit avoir le rôle "menu"

     <div class="portlet-section" role="menu">
            <h3 class="portlet-section-header" role="heading">Sous-titre section</h3>
            <div class="portlet-section-body">
                 <ul class="fl-listmenu">
                    <li></li>
                </ul>
            </div>
     </div>

Onglet

Application de la classe FLUID "fl-tabs". La section doit avoir le rôle "menu"

     <div class="portlet-section" role="menu">
            <h3 class="portlet-section-header" role="heading">Sous-titre section</h3>
            <div class="portlet-section-body">
                 <ul class="fl-tabs" role="menubar">
                    <li></li>
                </ul>
            </div>
     </div>

Messages

Formulaire

Tout autre élément...

Exemples

Portlet avec titre, barre d'outils, un texte et des liens

  <div class="fl-widget portlet" role="section">
     <div class="fl-widget-titlebar portlet-title" role="sectionhead">
	<h2 role="heading">Titre Portlet h2</h2>
     </div>
     <div class="fl-widget-content portlet-body" role="main">
	    <div class="fl-col portlet-toolbar" role="toolbar">
		<ul>
		     <li>
			<a href="#">Lien portlet-toolbar</a>
		     </li>
		</ul>
	    </div>
        </div>
        <div class="portlet-section" role="region">
            <h3 class="portlet-section-header" role="heading">Sous-titre portlet h3 : Notes et messages</h3>
            <div class="portlet-section-body">
                <div class="portlet-section-note" role="note">
                        Ceci est une note explicative
                </div>
            </div>
        </div>
        <div class="portlet-section role="region">
            <h3 class="portlet-section-header" role="heading">Options de section et liste de liens simples</h3>
            <div class="portlet-section-options">
                <a href="#"><span>Lien portlet-section-options</span></a>
            </div>
            <div class="portlet-section-body">
                <ul>
                    <li>
                        <a href="render.userLayoutRootNode.uP?uP_fname=portlet-admin">Lien simple 1</a>
                    </li>
                    <li>
                        <a href="render.userLayoutRootNode.uP?uP_fname=groupsmanager">Lien simple 2</a>
                    </li>
                    <li>
                        <a href="render.userLayoutRootNode.uP?uP_fname=permissionsmanager">Lien simple 3</a>
                    </li>
                </ul>
            </div>
        </div>
     </div>
  </div>