Les éléments graphiques du portail sont inclus dans un encadrement aux cotés arrondis. Cet encadrement peut prendre plusieurs couleurs et afin d'optimiser les développements j'ai réalisé un CustomControl très simple qui permet d'y inclure vos éléments. Nous allons donc voir comment ce CustomControl est utilisé dans l'interface graphique, ces implications au niveau des feuilles de style et la construction du CustomControl.
1. Utilisation du CustomControl
<elgee:Frame ID="FR12" runat="server" Couleur="jaune" Taille="275">
<div class="billet_titre">Rechercher sur ce site</div><br />
<div id="container_search_controls">
<div id="google_search_form"></div>
<div id="google_search_control"></div>
<div id="live_search_container">
<div id="live_search_query"></div>
<div id="live_search_control"></div>
</div>
</div>
</elgee:Frame>
Je prend l'exemple de la zone de recherche. Mon CustomControl s'appelle Frame et comme vous pouvez vous en rendre compte il inclut des éléments externes en son sein. Il dispose de 2 attributs, sa taille et la couleur à appliquer.
2. La gestion de l'apparence
On se basera donc sur une feuille de style. En se basant sur la valeur de l'attribut Couleur, on déclinera l'ensemble des éléments nécessaires au rendu graphique de l'encadrement.
.jaune_haut_gauche {border-style: none; width:12px; height:21px; background-image: url(/App_themes/default/pics/box/jaune/haut_gauche.png);background-repeat: no-repeat; line-height:0; font-size:0;}
.jaune_haut {border-style: none; height:21px; background-image: url(/App_themes/default/pics/box/jaune/haut.png);background-repeat: repeat-x; line-height:0; font-size:0;}
.jaune_haut_droite {border-style: none; width:14px; height:21px; background-image: url(/App_themes/default/pics/box/jaune/haut_droite.png);background-repeat: no-repeat; line-height:0; font-size:0;}
.jaune_gauche {border-style: none; width:12px; background-image: url(/App_themes/default/pics/box/jaune/gauche.png);background-repeat: repeat-y; line-height:0; font-size:0;}
.jaune_contenu {border-style: none; background-color: #FFFFCC;}
.jaune_droite {border-style: none; width:14px; background-image: url(/App_themes/default/pics/box/jaune/droite.png);background-repeat: repeat-y; line-height:0; font-size:0;}
.jaune_bas_gauche {border-style: none; width:12px; height:21px; background-image: url(/App_themes/default/pics/box/jaune/bas_gauche.png);background-repeat: no-repeat; line-height:0; font-size:0;}
.jaune_bas {border-style: none; height:21px; background-image: url(/App_themes/default/pics/box/jaune/bas.png);background-repeat: repeat-x; line-height:0; font-size:0;}
.jaune_bas_droite {border-style: none; width:14px; height:21px; background-image: url(/App_themes/default/pics/box/jaune/bas_droite.png);background-repeat: no-repeat; line-height:0; font-size:0;}
Il y a donc une classe pour chaque coin de l'encadrement, pour chaque coté et le contenu. La règle de nommage consiste à commencer par le nom de la couleur, suivi de sa localisation. Comme vous le voyez, j'ai choisi un format PNG, qui gère mieux la transparence que le GIF. Mais attention aux surprises sur les navigateurs de type IE6 qui ne gère pas la transparence du format PNG.
3. Le code du CustomControl
Dans les attributs de la classe du CustomControl on définit la propriété par défaut et l'apparence coté designer en indiquant le nom du tag, ici Frame. Ne pas oublier les accesseurs publiques des propriétés.
[DefaultProperty("Taille"), ControlValueProperty("Taille"), PersistChildren(true), ParseChildren(false),
ToolboxData("<{0}:Frame runat=server></{0}:Frame>"), PersistenceModeAttribute(PersistenceMode.InnerProperty),
Designer(typeof(System.Web.UI.Design.ContainerControlDesigner))]
public partial class Frame : System.Web.UI.WebControls.WebControl
{
public int Taille
{
get { return _taille; }
set { _taille = value; }
}
public string Couleur
{
get { return _couleur; }
set { _couleur = value; }
}
private string _couleur = "blanc";
private int _taille = 200;
int _width = 0;
Il est ensuite nécessaire de surcharger les deux méthodes RenderBeginTag et RenderEndTag pour ajouter notre code. Vous noterez que la taille fournie au CustomControl est la taille totale, à laquelle je retire 26, car mes deux bordures ont 13 pixels de large. J'opte plutôt pour une table, plus fiable qu'un DIV dans ce cadre là.
public override void RenderBeginTag(HtmlTextWriter writer)
{
base.RenderBeginTag(writer);
//Controls.Clear();
_width = _taille - 26;
writer.AddStyleAttribute(HtmlTextWriterStyle.Width, _taille.ToString() + "px");
writer.AddAttribute("cellpadding", "0");
writer.AddAttribute("cellspacing", "0");
writer.AddAttribute("border","0");
writer.RenderBeginTag("table"); // Table container
writer.RenderBeginTag("tr"); // TR de la premiere ligne
writer.AddAttribute("class", _couleur + "_haut_gauche");
writer.RenderBeginTag("td");
writer.RenderEndTag();
writer.AddAttribute("class", _couleur + "_haut");
writer.AddStyleAttribute(HtmlTextWriterStyle.Width, _width.ToString());
writer.RenderBeginTag("td");
writer.RenderEndTag();
writer.AddAttribute("class", _couleur + "_haut_droite");
writer.RenderBeginTag("td");
writer.RenderEndTag();
writer.RenderEndTag(); // Fin du TR de la premiere ligne
writer.RenderBeginTag("tr"); // TR de la seconde ligne
writer.AddAttribute("class", _couleur + "_gauche");
writer.RenderBeginTag("td");
writer.RenderEndTag();
writer.AddAttribute("class", _couleur + "_contenu");
writer.AddStyleAttribute(HtmlTextWriterStyle.Width, _width.ToString());
writer.RenderBeginTag("td");
}
public override void RenderEndTag(HtmlTextWriter writer)
{
writer.RenderEndTag();
writer.AddAttribute("class", _couleur + "_droite");
writer.RenderBeginTag("td");
writer.RenderEndTag();
writer.RenderEndTag(); // Fin du TR de la seconde ligne
writer.RenderBeginTag("tr"); // TR de la troisieme ligne
writer.AddAttribute("class", _couleur + "_bas_gauche");
writer.RenderBeginTag("td");
writer.RenderEndTag();
writer.AddAttribute("class", _couleur + "_bas");
writer.AddStyleAttribute(HtmlTextWriterStyle.Width, _width.ToString());
writer.RenderBeginTag("td");
writer.RenderEndTag();
writer.AddAttribute("class", _couleur + "_bas_droite");
writer.RenderBeginTag("td");
writer.RenderEndTag();
writer.RenderEndTag(); // Fin du TR de la premiere ligne
writer.RenderEndTag(); // Fin de la table
base.RenderEndTag(writer);
}
}
Le tour est joué, votre CustomControl d'encadrement est fait. Reste plus qu'a jouer sur le panel de couleurs disponibles dans les feuilles de styles. Pour plus de fiabilité, on peut s'appuyer sur une énumération pour la liste des couleurs.