2. En tête de page et Charte graphique
Via le fichier ONET.XML, il est possible de personnaliser d’avantage un site Sharepoint
Services pour l’adapter au mieux aux besoins de l’entreprise. Notamment par la prise en
charge d’une charte graphique (feuille de style CSS), et aussi une navigation personnalisée
(en-tête de page propre à l’entreprise).
Ajouter un en-tête au template de site
L’en-tête personnalisé se définit au niveau du Template. Il est ainsi le même pour toutes
les configurations du Template. Pour cela, il faut utiliser la propriété AlternateHeader de
l’élément racine
<Project
AlternateHeader="/_layouts/<%=System.Threading.Thread.CurrentThread.CurrentUICulture.LCID%>/projet1/header.aspx">
Le fichier aspx doit se trouver dans un dossier du type
C:\Program Files\Fichiers communs\Microsoft Shared\web server extensions\60\TEMPLATE\LAYOUTS\1036\projet1\OWS.CSS.
Le fichier doit juste être accessible depuis le chemin /_layouts/ depuis les sites web, mais il est préférable de
regrouper tous les éléments propres à un projet dans un dossier spécifique. Ceci pour des questions de maintenance et de clarté.
Le fichier aspx peut comporter du code behind. Ce code peut utiliser toutes les librairies utilisables dans le contexte sharepoint :
|
<%@ Page language="C#" %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls"
Assembly="Microsoft.SharePoint, Version=11.0.0.0, Culture=neutral,
PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities"
Assembly="Microsoft.SharePoint, Version=11.0.0.0, Culture=neutral,
PublicKeyToken=71e9bce111e9429c" %>
<%@ Import Namespace="Microsoft.SharePoint"
%> <%@ Register Tagprefix="WebPartPages"
Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint,
Version=11.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%
SPSite spServer = SPControl.GetContextSite(Context);
SPWeb spWeb = SPControl.GetContextWeb(Context);
%>
<tr>
<td>
<% if (spWeb.UserIsWebAdmin) {
%>
En tête pour les administrateurs de site
<% } else {%>
En tête par défaut
<% }
%>
</td>
</tr> |
Pour utiliser des librairies personnelles, il faut avoir placé préalablement les assemblies soit dans le GAC, soit dans le dossier
C:\Program Files\Fichiers communs\Microsoft Shared\web server extensions\60\TEMPLATE\LAYOUTS\BIN
Il est possible de remplacer l’en-tête par un user-contrôle. Pour cela, il est judicieux d’utiliser des contrôles web personnalisés,
afin d’éviter d’utiliser un fichier ascx pour le rendu html. Le rendu se fait alors dans la méthode Render du contrôle
Le fichier WebCustomcontrol1.ascx.cs :
|
using
System;
using
System.Web.UI;
using
System.Web.UI.WebControls;
using
System.ComponentModel;
namespace
HexagoneSearch.Web
{
[ToolboxData(
"<{0}:WebCustomControl1 runat=server></{0}:WebCustomControl1>"
)]
public
class WebCustomControl1 :
System.Web.UI.WebControls.WebControl
{
protected
override void
Render(HtmlTextWriter output)
{
output.Write("Template
header <b>here<b>");
}
}
} |
Le fichier Header.aspx :
|
<%@ Page language="C#" %>
<%@ Register TagPrefix="ACFCI" Namespace="HexagoneSearch.Web" assembly="HexagoneSearch,
Version=1.0.0.0, Culture=neutral, PublicKeyToken=6ec76bfb7b4ccba6"%>
<ACFCI:WebCustomControl1
id="myControl1"
runat="server">
</ACFCI:WebCustomControl1> |
Cependant, cet en-tête ne s’applique pas aux pages du Template, mais uniquement aux pages d’administration. Pour l’appliquer au
Template, il faut en modifier toutes les pages.
Deux types de modifications sont possibles. Soit on ajoute une partie de code pour conserver la logique des pages d’administration,
soit on remplace une partie du code pour appliquer un en-tête de manière obligatoire.
Ajout
L’ajout de code consiste en un encadrement de la région entre les commentaires Top bar
et Title dans une instruction
if. L’instruction test si un en-tête
personnalisé à été défini ou non, et l’affiche si elle existe.
|
<!--Top bar-->
<%
string alternateHeader = SPControl.GetContextWeb(Context).AlternateHeader;
if (alternateHeader == null || alternateHeader == "")
{
%>
<table
class="ms-bannerframe"
border="0"
cellspacing="0"
cellpadding="0"
width="100%>
<tr>
<td
nowrap
valign="middle"><img
ID=onetidHeadbnnr0
alt="Logo"
src="/_layouts/images/logo.gif"></td>
<td
class=ms-banner
width=99%
nowrap
ID="HBN100"
valign="middle">
<!--webbot
bot="Navigation"
S-Type="sequence"
S-Orientation="horizontal"
S-Rendering="html"
S-Btn-Nml="<a ID='onettopnavbar#LABEL_ID#' href='#URL#'
accesskey='J'>#LABEL#</a>"
S-Btn-Sel="<a ID='onettopnavbar#LABEL_ID#' href='#URL#'
accesskey='J'>#LABEL#</a>"
S-Btn-Sep="&nbsp;&nbsp;&nbsp;"
B-Include-Home="FALSE"
B-Include-Up="FALSE"
S-Btn-Nobr="FALSE"
U-Page="sid:1002"
S-Target startspan -->
<SharePoint:Navigation
LinkBarId="1002"
runat="server"/>
<!--webbot
bot="Navigation" endspan -->
</td>
<td
class=ms-banner> </td>
<td
nowrap
class=ms-banner
style="padding-right:
7px">
<SharePoint:PortalConnection
runat="server"
/>
</td>
</tr>
</table>
</TD>
</TR>
<%
} else {%>
<!--#include
file="header.aspx" -->
<ACFCI:TopBar
id="myTopBar"
runat="server"></ACFCI:TopBar>
</TD>
</TR>
<% }
%>
<!--
Title --> |
Dans cette exemple, le bloc else contient les deux solutions retenues : l’ajout d’une balise include, ou alors l’ajout direct d’un contrôle utilisateur.
Il faut bien faire attention qu’ici le fichier header doit être dans le même répertoire de la page. Cela reviendra à avoir deux copies distinctes de
ce fichier : une dans le dossier du Template, et l’autre dans celui des pages d’administration (
C:\Program Files\Fichiers communs\Microsoft Shared\web server extensions\60\TEMPLATE\LAYOUTS\1036
)
Remplacement
C’est une solution plus simple mais moins souple qui consiste à remplacer la région précisée plus haut
par une balise include ou un contrôle utilisateur. Dans ce cas, il faudra remodifier toutes les pages aspx ainsi que le fichier ONET.XML pour réactiver le menu standard :
|
<!--Top
bar-->
<!--#include
file="header.aspx" -->
<ACFCI:TopBar
id="myTopBar"
runat="server"></ACFCI:TopBar>
</TD>
</TR>
<!--
Title --> |
Appliquer automatiquement une feuille de style
L’application d’une feuille de style permet par exemple le respect de la charte graphique de l’entreprise.
Elle permet aussi de modifier l’aspect des pages et de « masquer » la fonction de recherche native.
Voici un exemple :
Pour plus de renseignement sur les éléments de la feuille de style sharepoint, consultez ce lien.
L’application systématique d’une feuille de style se fait par la copie du fichier
C:\Program Files\Fichiers communs\Microsoft Shared\web server extensions\60\TEMPLATE\LAYOUTS\1036\STYLES\OWS.CSS
Dans un dossier du type
C:\Program Files\Fichiers communs\Microsoft Shared\web server extensions\60\TEMPLATE\LAYOUTS\1036\projet1\OWS.CSS
Notons que le fichier copié doit juste être accessible depuis le chemin /_layouts/ depuis les sites web.
Ensuite, il faut utiliser la propriété AlternateCss de l’élément racine pour indiquer la feuille de style à utiliser
:
|
<Project
AlternateCSS="/_layouts/<%=System.Threading.Thread.CurrentThread.CurrentUICulture.LCID%>/projet1/ows.css"> |
Cependant, seuls les pages d’administration communes aux sites Sharepoint seront affectées par cette modification. Pour la rendre effectives sur les pages du
Template, il faudra réécrire une ligne dans toutes les pages aspx de celui-ci.
Au niveau de la balise HEAD, il faut remplacer la ligne :
|
<Link
REL="stylesheet"
Type="text/css"
HREF="/_layouts/<%=System.Threading.Thread.CurrentThread.CurrentUICulture.LCID%>/styles/ows.css"> |
Par :
|
<SharePoint:CssLink
DefaultUrl=""
runat="server"
ID="Csslink1"/>
|
|
|
 |
 Pour afficher ou poster un commentaire, cliquez sur ce lien : Forum-Microsoft
|
|
Mettre en place un modèle de site Windows SharePoint Services
