Admin CliCours
Découvrez les contrôles ACT
Dans un premier temps vous devez télécharger le pack SP1 de L’ACT (Ajax Control Toolkit) via le lien suivant AjaxControlToolkit-Framework3.5SP1.zip
Une fois le fichier télécharger, décompressez-le et ouvrez-le. Double-cliquez sur la solution AjaxControlToolkit.sln. Un avertissement de sécurité peut s’afficher au cours de l’ouverture de la solution, vous devez donc sélectionnez l’option appropriée (qui décrit le fait que vous faites confiance au projet que vous allez ouvrir).
Vous obtiendrez ainsi sur une page vierge dans Visual Studio 2008 avec l’explorateur de solution ouvert contenant les 4 différents projets possible : AjaxControlToolkit, SampleWebSite, ToolkitTests et TemplateVSI.
– AjaxControlToolkit est un projet qui contient tout simplement le code-source des contrôles Ajax. Ainsi lorsque vous compilerez vous obtiendrez la dll contant tous les contrôles disponibles.
– SampleWebSite est un “projet-site” vous permettant d’avoir une démonstration des ACTs disponibles (ce que nous allons décrire ci-dessous dans le but de vous appropriez chaque contrôle que vous manipulerez préalablement).
– ToolkitTests est un projet permettant de tester les contrôles ACT dans le cas où l’on modifierait leur code-source.
– TemplateVSI est une extension de Visual Studio permettant dans un nouveau projet de créer vos propres extenders.
Remarque : Les extenders sont des contrôles qui étendent d’autres fonctionnalités de contrôles.
Nous allons donc nous intéresser au projet SampleWebSite, qui vous permettra d’accéder à une démonstration de chaque contrôle ACT. Pour accéder au site vous devrez développer le projet SampleWebSite comme dans le screen-shot suivant :
Ensuite, sélectionnez le ficher Default.aspx à l’aide du clique-droit et choisissez l’option “Afficher dans le navigateur”. Ainsi votre navigateur web s’ouvre et vous accéder ainsi à la page suivante :
Dans la partie gauche de votre page, nommée “Sample”, vous obtenez tous les contrôles de l’AjaxControlToolkit. Il vous suffit donc de sélectionner un contrôle et vous accéderez à la démonstration de celui-ci comme dans l’exemple ci-dessous (NumericUpDown)
Extenders
Un extender est un contrôle qui va étendre les fonctionnalités d’un autre contrôle. Par exemple il existe un contrôle, qui permet d’ajouter la possibilité d’afficher un calendrier grâce à un bouton accolé à un contrôle TextBox. Un autre permet de créer une zone de saisie, avec des boutons permettant d’augmenter ou diminuer la valeur numérique qu’elle contient (un nombre contenu dans la TextBox). Par conséquent il n’est pas possible de les utiliser seul dans notre page : ils ont besoin d’être lié à un autre contrôle (qu’ils étendent). Dans cette partie du cours, nous allons les présenter et les détailler. Vous pouvez aussi tout tester par vous-même via le site ASP.NET AJAX donné dans la partie précédente.
AlwaysVisibleControl
Définition :
Ce contrôle permet à un de vos contrôles de rester par-dessus le reste de la page (à un endroit que l’on aura défini) et de suivre le défilement de celle-ci.
Si vous ne remplissez pas les propriétés de placement du contrôle, le contrôle ciblé sera placé en haut à gauche de la page.
Exemple d’utilisation :
Le contrôle AlwaysVisibleControlExtender peut s’appliquer à n’importe quel contrôle de type bloc du moment qu’il possède la propriété runat= »server ».
ASP.NET
<body style= »background-color: Silver; »>
<form id= »form1″ runat= »server »>
<div>
<asp:ScriptManager ID= »ScriptManager1″ runat= »server »>
</asp:ScriptManager>
<p runat= »server » id= »essai » style= »background-color: Yellow; Width: 200px;
height: 65px; text-align: center; »>
test
</p>
<cc1:AlwaysVisibleControlExtender ID= »AlwaysVisibleControlExtender1″ runat= »server » TargetControlID= »essai » HorizontalSide= »Center » VerticalSide= »Top » />
<%–On associe ce contrôle avec la balise p et on défini la position en haut au milieu–%>
<p style= »height: 1500px; »>
Scrollez la page.
Le bloc de texte reste en haut au milieu.
</p>
Animation
Définition :
Il s’agit un contrôle qui permet la création d’animation sur votre page Web avec facilité. Ce contrôle possède un Template assez conséquent, par conséquence nous ne décrirons pas entièrement ici par soucis de clarté et de lisibilité. L’exemple vous donne cependant un aperçu de ce qu’il est possible de faire avec ce contrôle.
Propriétés du contrôle :
Nom Description Obligatoire
TargetControlID Prend comme valeur l’ID du contrôle ciblé (sur lequel OUI s’appliqueront les effets du contrôle AJAX).
Exemple d’utilisation :
Voici une animation qui va déplacer le bloc tout en le redimensionnant.
Page .aspx
<asp:Button ID= »StartAnimation » runat= »server » Text= »Button » /> <div ID= »AnimateDiv » runat= »server »
style= »border: solid black 2px; background-color: #d3dfee;width:
200px;height: 65px;position: absolute; » />
<cc1:AnimationExtender ID= »AnimationExtender1″ runat= »server »
TargetControlID= »StartAnimation »>
<Animations>
<%–Quand la souris survole l’élément. Il y a aussi OnMouseOut, OnMouseOver, OnLoad, OnHoverOut et OnHoverOver–%>
<OnClick>
<%–On créer une séquence d’animation pour le div AnimateDiv–%> <Sequence AnimationTarget= »AnimateDiv »>
<%–Ce qui suit s’éxecutera en même temps–%>
<Parallel Duration= »2″ Fps= »30″>
<%–Déplacer le bloc suivant les valeurs données–%> <Move Horizontal= »500″ Vertical= »300″ /> <%–Redimensionner le bloc–%>
<Resize Width= »400″ Height= »20″ />
</Parallel>
</Sequence>
</OnClick>
</Animations>
</cc1:AnimationExtender>
AutoComplete
Définition :
AutoComplete est un extender de TextBox qui fournira une auto-complétion de ce que qui est écrit dans la TextBox. Il fonctionne grâce à un service web qui doit avoir pour signature :
C#
public string[] RecupererListe(string Text, int count) { … }
Remarquez que l’on ne peut modifier que le nom de la méthode (RecupererListe) et son contenu.
Exemple d’utilisation :
Voici un petit exemple qui, tel quel, ne vous sera pas d’une grande utilité puisqu’il ne renvoi que le texte suivit d’un chiffre. En revanche si vous changez le code du web service pour qu’il recherche dans une base de données, un fichier XML ou autres, cet exemple prend tout son sens. C’est par soucis de compréhension que nous avons simplifié le web service et il vous sera plus facile de tester l’exemple sans base de données à gérer derrière.
Cet exemple est composé d’un web service (un fichier avec l’extension asmx dont nous vous fournissons le code behind) et du code de la page en .aspx. Le délai entre la fin de l’écriture dans la TextBox et le début de la recherche est d’une seconde.
C# du web service
[System.Web.Script.Services.ScriptService]
public class WebService1 : System.Web.Services.WebService
{
public WebService1()
{
}
[WebMethod]
public string[] RecupererListe(string prefixText, int count)
{
string[] tableau ={« », « », « », « », « », « »};
for(int i = 0; i < 5; i++)
{
tableau[i] = prefixText + i;
}
return tableau;
}
}
VB.NET du web service
<System.Web.Script.Services.ScriptService()> _ Public Class WebService1
Inherits System.Web.Services.WebService
Public Sub New()
End Sub
<WebMethod()> _
Public Function RecupererListe(ByVal prefixText As String, ByVal count As Integer) As String()
Dim tableau As String() = {« », « », « », « », « », « »} Dim i As Integer = 0
While i < 5
tableau(i) = prefixText + i
System.Math.Max(System.Threading.Interlocked.Increment(i), i –
1)
End While
Return tableau
End Function
End Class
ASP.NET
<asp:TextBox ID= »TextBox1″ runat= »server »></asp:TextBox>
<cc1:AutoCompleteExtender ID= »AutoCompleteExtender1″ runat= »server »
TargetControlID= »TextBox1″
ServiceMethod= »RecupererListe »
ServicePath= »WebService1.asmx »
CompletionInterval= »1000″
MinimumPrefixLength= »2″ />
Calendar
Définition :
Le contrôle Calendar n’est pas qu’un simple calendrier. En effet il s’agit d’un extender qui s’applique communément à une TextBox. Ce contrôle va afficher un calendrier à partir duquel on pourra récupérer le jour choisit par l’utilisateur.
1 Introduction
1.1 Présentation d’AJAX
1.2 Présentation d’AJAX Control Toolkit (ACT)
1.3 Installation des ACT
2 Découvrez les contrôles ACT
3 Extenders
3.1 AlwaysVisibleControl
3.2 Animation
3.3 AutoComplete
3.4 Calendar
3.5 CascadingDropDown
3.6 CollapsiblePanel
3.7 ConfirmButton
3.8 DragPanel
3.9 DropDown
3.10 DropShadow
3.11 DynamicPopulate
3.12 FilteredTextBox
3.13 ListSearchExtender
3.14 MaskedEdit
3.15 ModalPopup
3.16 MultiHandleSlider
3.17 MutuallyExclusiveCheckBox
3.18 NumericUpDown
3.19 PagingBulletedList
3.20 PasswordStrength
3.21 PopupControl
3.22 ResizableControl
3.23 RoundedCorners
3.24 Slider
3.25 SlideShow
3.26 TextBoxWatermark
3.27 ToggleButton
3.28 UpdatePanelAnimation
3.29 ValidatorCallout
4 Les contrôles autonomes
4.1 Accordion
4.2 NoBot
4.3 Rating
4.4 ReorderList
4.5 Tabs
5 Conclusion
Télécharger le cours complet
