Bonjour !
Je vais vous présenter l'art et la manière d'incorporer les contrôles initiés par Speerio et repris par le Core Dotnetnuke.
La société Speerio a développé des contrôles qui permettent de modifier la taille des polices, leur style, ou encore la largeur du skin etc. En fait, il s'agit d'un contrôle qui permet au client de choisir une personnalisation de l'affichage portant sur nimporte quelle classe / Attribut CSS.
Je n'ai nullement programmé ces contrôles, j'ai simplement apporté quelques modifications.
Cas type : Le contrôle de la taille des polices (visible en haut à droite sur www.aricie.net)
Prérequis : Les fichiers source (contrôles, arborescence de dossiers, fichiers css) (Inscription requise)
Après avoir téléchargé les fichiers, décompressez le zip dans le répertoire de votre skin (par exemple Portals\_Default\Skins\MonSkin). Vous devriez avoir un dossier Controls, et un dossier Variations.
Pour notre exemple le dossier Controls contient le contrôle de taille du texte 'textsize.ascx' et un dossier images qui contient les trois bouttons associés dans leur état sélectionné ou non. Mais nous verrons que vous pouvez créer différents contrôles et images portant sur la personnalisation que vous souhaitez offrir sur votre site. Le dossier Variations contient deux fichiers CSS; l'un utilisé lorsqu'on choisi la typo moyenne, l'autre utilisée lorsqu'on choisi la typo grande.
Plaçons dans un skin le contrôle textsize.ascx.
Dans mon fichier Skin.ascx j'ajoute au début la déclaration du préfixe et le lien vers le controle ainsi appelé.
<%@ Register TagPrefix="dnn" TagName="TAILLEDESPOLICES" src="Controls/textsize.ascx" %>
J'ajoute ensuite les deux fonctions Javascript suivantes entre les balises HEAD.
<head>
<script language="Javascript">
function setSkinCookie(name, value, expires, path, domain, secure) {
var curCookie = name + "=" + escape(value) +
((expires) ? "; expires=" + expires.toGMTString() : "") +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
((secure) ? "; secure" : "");
document.cookie = curCookie;
}
function changeTexte(legend,statusTxt)
{
longueurCible = document.getElementById("changeTexte").firstChild.length;
document.getElementById("changeTexte").firstChild.replaceData(0, longueurCible, legend);
window.status=statusTxt
}
</script>
</head>
J'ajoute ensuite avant le début du code HTML du skin deux tags génériques utilisés par le controle pour insérer le code.
<asp:Literal id="DynamicText" runat="server" />
<asp:Literal id="DynamicLayout" runat="server" />
Ensuite je vais ajouter le contrôle qui va permettre la redimension des polices. J'ajoute le contrôle
<dnn:TAILLEDESPOLICES runat="server" id="dnnTEXT" /> à l'endroit souhaité.
J'ai personnellement ajouté une fonction permettant de voir clairement l'effet du boutton quand la souris est dessus. J'ajoute donc l'élément <span id="changeTexte" Class="obj_login"> </span>, juste en dessous des bouttons par exemple.
Note : Vous pouvez remplacer le tag SPAN par un DIV si cela convient mieux à votre skin.
Je peux enregistrer mon skin et l'afficher.
Voyons maintenant plus en détail le contenu de ce controle de taille des polices.
Si j'ouvre le fichier textsize.ascx, je trouve deux fonctions javascript, et trois liens image en bas.
La premiere fonction sert à récupérer / Définir la valeur stockée dans le cookie.
La deuxieme fonction sert à faire varier le texte lors qu'on passe la souris sur un des bouttons du controle.
Et enfin les trois liens. Voyons en détail la structure d'un lien.
<a href=" void(0)"><img src="[Chemin vers l'image]/[Préfixe du nom de l'image]<%= [Nom de la string associée au suffixe de l'image] %>.gif" onClick="sizeText([ID de l'evenement javascript])" onMouseOver="changeTexte('[Texte affiché dans le span d'id ChangeTexte]','');return true" OnMouseOut=changeTexte('[Texte affiché dans le span d'id ChangeTexte lorsque la souris sort du boutton]','');return true" width="17" height="17" alt="[Texte de l'infobulle]" border="0"></a>
Ce qui donne dans notre cas pour le premier élément : Le boutton petites polices choisi par défaut :
<a href=" void(0)"><img src="<%= TemplateSourceDirectory %>/images/icon_textsmall<%= IconSmall %>.gif" onClick="sizeText(0)" onMouseOver="changeTexte('Petite typographie','');return true" OnMouseOut=changeTexte(' ','');return true" width="17" height="17" alt="Petites Polices. Cliquez pour changer." border="0"></a>
note : Dans notre cas, chaque boutton est séparé d'un autre par un <BR>, mais on peut très bien remplacer <BR> par pour placer les bouttons en ligne et non les uns sur les autres.
Si on regarde la fonction javascript appellée au Page_Load, on comprend que :
Je peux définir le CSS qui sera appelé par défaut et l'image associée.
- en définissant le préfixe de l'image comme actif :
Public IconSmall As String = "_on" >> Ici l'image montrée comme active sera celle du plus petit style. (image appellée = icon_textsmall_on.gif)
Public IconMedium As String = ""
Public IconLarge As String = ""
- en définissant les valeurs par défaut dans mon fichier skin.css.
- en associant l'ID 0 à l'évenement javascript textSize :
onClick="sizeText(0)"
Avec ces trois éléments je peux donc choisir qui sera appelé par défaut.
Je peux également créer autant de bouttons que je le souhaite en dupliquant les bouttons et le code associé à l'ID appelé :
If (cookieValue = "[ID]") Then
selectedStyleSheet = "[Fichier Css à utiliser dans ce cas]"
[String] = "[Suffixe de l'image associée ou vide]"
End If
Le fichier CSS appelé va remplacer les attributs styles des classes dans skin.css. De ce fait, je n'ai qu'à déclarer la nouvelle taille de la police avec .maClasse { Font-size : [valeur]; }. On peut bien entendu remplacer Font-size par nimporte quel attribut CSS et ainsi faire varier ce que l'on souhaite, comme la couleur du skin, les images contenues dans le skin, la largeur de la page, etc...
Si vous avez des questions ou besoin d'autres exemples, n'hésitez pas à poster à la suite de ce message !
Edit 02/10/2007 : Cela nous a permi de faire un contrôle permettant de modifier la largeur de la page, la taille des polices, mais aussi la couleur générale ou même complètement de changer de skin ! On peut également l'utiliser comme TabStrip... Ce contrôle est vraiment utile. Je l'ai ajouté à la bibliothèque de documents sur www.aricie.com.
Sébastien