C'est ma première contribution sur ce site et j'espère que je serais à la hauteur par rapport aux excellents codes présent sur ce site.
Cet exemple nous montre comment générer le webcontrol TabStrip de manière totalement dynamique. On y trouve en autre :
- Plusieurs controls générer dynamiquement,
- Imbrication de ces controls entre eux,
- Utilisation des feuilles de style sur le control TabStrip,
- Utilisation du control Multipage,
- Utilisation du control PageView
Le tout est mis dans un PlaceHolder afin de faciliter la manipulation du code côté HTML et code behind.
J'ai fourni un zip dans lequel se trouve tous les fichiers nécessaires pour l'exécution de cet exemple (fichier code source, images et css).
Source / Exemple :
- Code sur la page HTML *****
<%@ Register TagPrefix="iewc" Namespace="Microsoft.Web.UI.WebControls" Assembly="Microsoft.Web.UI.WebControls, Version=1.0.2.226, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="tab.aspx.vb" Inherits="NetWork.tab"%>
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>TabStrip Control</title>
<link rel="STYLESHEET" href="essai.css" type="text/css">
</head>
<body ms_positioning="GridLayout">
<form id="Form1" method="post" runat="server">
<asp:placeholder id="PlaceHolder1" runat="server"></asp:placeholder>
</form>
</body>
</html>
Public Class tab
Inherits System.Web.UI.Page
#Region " Code généré par le Concepteur Web Form "
'Cet appel est requis par le Concepteur Web Form.
<System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent()
End Sub
Protected WithEvents PlaceHolder1 As System.Web.UI.WebControls.PlaceHolder
'REMARQUE : la déclaration d'espace réservé suivante est requise par le Concepteur Web Form.
'Ne pas supprimer ou déplacer.
Private designerPlaceholderDeclaration As System.Object
Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init
'CODEGEN : cet appel de méthode est requis par le Concepteur Web Form
'Ne le modifiez pas en utilisant l'éditeur de code.
InitializeComponent()
End Sub
#End Region
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
Dim Tab_Strip As New Microsoft.Web.UI.WebControls.TabStrip
Dim M_Page As New Microsoft.Web.UI.WebControls.MultiPage
Dim tdStyle As New Microsoft.Web.UI.WebControls.CssCollection ' TabDefaultStyle
Dim thStyle As New Microsoft.Web.UI.WebControls.CssCollection ' TabHoverStyle
Dim tsStyle As New Microsoft.Web.UI.WebControls.CssCollection ' TabSelectedStyle
Dim sdStyle As New Microsoft.Web.UI.WebControls.CssCollection ' SepDefaultStyle
Dim mpStyle As New Microsoft.Web.UI.WebControls.CssCollection ' Multipage
'--- Définition des styles pour le control TABSTRIP
tdStyle.CssText = "border-bottom:solid 2px #344C64; padding-top:4px; padding-left:15px; padding-right:5px; background-image:url(tabule_down.gif); background-repeat:no-repeat; width:110;"
tsStyle.CssText = "border-bottom:none; padding-top:4px; padding-left:30px; padding-right:5px; background-image:url(tabule_img.gif); background-repeat:no-repeat; width:110;"
thStyle.CssText = "color:#FFFFFF; background-image:url(tabule_over.gif);"
sdStyle.CssText = "border-bottom:solid 2px #344C64;"
Tab_Strip.ID = "TabStrip"
Tab_Strip.ForeColor = System.Drawing.Color.FromArgb(0, 0, 51, 102) ' Alpha, Rouge, Vert, Bleu
Tab_Strip.Font.Size = System.Web.UI.WebControls.FontUnit.Point(11)
Tab_Strip.Height = System.Web.UI.WebControls.Unit.Point(19)
Tab_Strip.Font.Name = "Verdana"
Tab_Strip.Font.Bold = True
Tab_Strip.TabDefaultStyle = tdStyle
Tab_Strip.TabHoverStyle = thStyle
Tab_Strip.TabSelectedStyle = tsStyle
Tab_Strip.SepDefaultStyle = sdStyle
Tab_Strip.SelectedIndex = 0
Tab_Strip.TargetID = "Multipage1"
'--- Définition des styles pour le control MULTIPAGE
M_Page.ID = "Multipage1"
M_Page.Height = System.Web.UI.WebControls.Unit.Point(100)
M_Page.CssClass = "MultiItem" ' Utilisation d'un fichier de style CSS définit dans le code HTML
M_Page.BackColor = System.Drawing.Color.FromArgb(0, 255, 255, 230)
Dim Cpt As Integer
For Cpt = 1 To 3
Dim Tab As New Microsoft.Web.UI.WebControls.Tab
Dim Tsep As New Microsoft.Web.UI.WebControls.TabSeparator
Tab.ID = "Tabule" & Cpt
Tab.Text = "Tab n° " & Cpt
Tab_Strip.Items.Add(Tab)
If Cpt = 3 Then
Tsep.DefaultStyle.CssText = "width:100%"
End If
Tab_Strip.Items.Add(Tsep)
Next
'--- Création d'un tableau dynamique
Dim M_Table As New HtmlTable
Dim M_TR As New HtmlTableRow
Dim M_TD As New HtmlTableCell
M_Table.Width = "60%"
M_Table.Align = "Center"
M_TD.InnerText = "Essai du control TABSTRIP totalement dynamique" ' Ajout dans la cellule d'un texte
M_TD.InnerHtml += "<br><hr>"
M_TD.Controls.Add(Tab_Strip) ' Ajout du control dynamique TABSTRIP dans la cellule
For Cpt = 1 To 3 ' Ajout de 3 tableaux dynamiques dans chaque PAGEVIEW
Dim P_View1 As New Microsoft.Web.UI.WebControls.PageView
Dim M_Table1 As New HtmlTable
Dim M_TR1 As New HtmlTableRow
Dim M_TD1 As New HtmlTableCell
M_TD1.InnerText = "Tabulation " & Cpt
M_TR1.Cells.Add(M_TD1)
M_Table1.Rows.Add(M_TR1)
P_View1.Controls.Add(M_Table1)
M_Page.Controls.Add(P_View1) ' Ajout du PAGEVIEW dans le MULTIPAGE
Next
M_TD.Controls.Add(M_Page) ' Ajout du control MULTIPAGE dans la cellule
M_TR.Cells.Add(M_TD) ' Ajout de la cellule dans la rangée
M_Table.Rows.Add(M_TR) ' Ajout de la rangée dans le tableau
PlaceHolder1.Controls.Add(M_Table) ' Ajout de tous les controls dynamiques dans le PlaceHolder
End Sub
End Class
Conclusion :
Ce code est écrit avec Visual Studio 2003 et un Framework version 1.1.4322.
Il est nécessaire de se munir avant tout des outils WebControls sur le site de Microsoft à l'adresse suivante pour la version francaise :
http://www.microsoft.com/downloads/details.aspx?displaylang=fr&FamilyID=FAC6350C-8AD6-4BCA-8860-8A6AE3F64448
Si vous avez des remarques ou si j'ai des erreurs de concept, je suis bien sûr à votre écoute et j'essayerais d'y répondre ou de mettre à jour cet exemple.
Merci de me communiquer vos remarques et de me noter.
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.