Custom web control : imagesaleatoire

Soyez le premier à donner votre avis sur cette source.

Vue 11 488 fois - Téléchargée 510 fois

Description

Ce controle vous permet d'avoir d'ajouter dans votre site une image choisis au hasard dans un fichier xml.
Ce controle ressemble au controle Adrotator, on le lie à un fichier XML et une image arrive au hasard.

A l'interieur du zip se trouve le commentaire du code (et des fautes d'orthographes) en format word

Source / Exemple :


'Il faut rajouter la dll contenu dans le zip dans le dossier bin de votre application
'et mettre ce code dans votre page aspx : 

<%@ Register TagPrefix="cyril" Namespace="Cyril.Controls" Assembly="Cyril" %>

<cyril:imagealeatoire id=ImageAleatoire1 
		runat="server" 
		Width="310px" 
		CssClass="ImageAleatoire"
		XmlFile="data/ImageAleatoire.xml"
		/>

'Le code CSS correpondant est : 

<style>
		
	.ImageAleatoire {
		PADDING-RIGHT: 10px;
		PADDING-LEFT: 10px;
		PADDING-BOTTOM: 25px;
		MARGIN: 0px;
		WIDTH: 180px;
		PADDING-TOP: 0px;
    } 
    
    .ImageAleatoire DT {
		PADDING-RIGHT: 0px; 
		PADDING-LEFT: 9px; 
		BACKGROUND: url(Styles/Base/Menu/left.gif) no-repeat left top; 
		PADDING-BOTTOM: 0px; MARGIN: 25px 0px 0px; 
		PADDING-TOP: 0px; 
		HEIGHT: 25px; 
	} 
	
	.ImageAleatoire DT SPAN { 
		PADDING-RIGHT: 0px; 
		DISPLAY: block; 
		PADDING-LEFT: 0px; 
		FONT-WEIGHT: bold; 
		FONT-SIZE: 90%; 
		BACKGROUND: url(Styles/Base/Menu/right.gif) right top; 
		PADDING-BOTTOM: 0px; 
		MARGIN: 0px; 
		VERTICAL-ALIGN: middle; 
		WIDTH: 100%; 
		TEXT-INDENT: 10px; 
		LINE-HEIGHT: 25px; 
		PADDING-TOP: 0px; 
		WHITE-SPACE: nowrap; 
		HEIGHT: 25px;
	} 
	
	.ImageAleatoire DD { 
		BORDER-RIGHT: #b7ae88 1px solid; 
		BORDER-TOP: #b7ae88 1px solid; 
		MARGIN: 0px; 
		BORDER-LEFT: #b7ae88 1px solid; 
		BORDER-BOTTOM: #b7ae88 1px solid;
	} 
	
	.ImageAleatoire UL { 
		PADDING-RIGHT: 8px; 
		PADDING-LEFT: 8px; 
		PADDING-BOTTOM: 5px; 
		MARGIN: 0px; 
		PADDING-TOP: 5px; 
		LIST-STYLE-TYPE: none;
	}
	
	.ImageAleatoire A { 
		COLOR: #663300; 
		TEXT-DECORATION: none;
	} 
	
	.ImageAleatoire A:hover { COLOR: #ff0000 }
	
	.ImageAleatoire LI { 
		PADDING-RIGHT: 0px; 
		PADDING-LEFT: 0px; 
		PADDING-BOTTOM: 5px; 
		MARGIN: 0px; 
		PADDING-TOP: 5px; 
		LIST-STYLE-TYPE: none; 
		TEXT-ALIGN: justify;
	} 
	
	.ImageAleatoire P { 
		PADDING-RIGHT: 0px; 
		PADDING-LEFT: 0px; 
		PADDING-BOTTOM: 0px; 
		MARGIN: 0px; 
		PADDING-TOP: 0px; 
		TEXT-ALIGN: center;
	} 
	
	.ImageAleatoire IMG { 
		BORDER-RIGHT: #b7ae88 1px solid; 
		BORDER-TOP: #b7ae88 1px solid; 
		OVERFLOW: hidden; 
		BORDER-LEFT: #b7ae88 1px solid; 
		WIDTH: 140px; 
		BORDER-BOTTOM: #b7ae88 1px solid; 
		TEXT-ALIGN: center 
	}
	
</style>

Le code XML (data/ImageAleatoire.xml)

<?xml version="1.0" encoding="utf-8" ?>
<ImageAleatoire>
	<Proprietes>
	</Proprietes>
	<Photos>
		<photo>
			<Nom>Image 1</Nom>
			<Url>images/ImageAleatoire/(1).JPG</Url>
			<Description>Description de l'image N°1</Description>
			<Alt>Alt1</Alt>
		</photo>
		<photo>
			<Nom>Image 2</Nom>
			<Url>images/ImageAleatoire/IMG_0257.jpg</Url>
			<Alt>Alt2</Alt>
			<Description>Description de l'image N°2</Description>
		</photo>
	</Photos>
</ImageAleatoire>

Conclusion :


J'ai mis ici le code de l'integration du controle, je suis en train d'ecrire l'article qui explique le code de ce controle.
Il existe une autre propriété : HtmlTemplate cette propriété attent un nom de fichier HTML qui définit la structure du controle, si cette propriété est omise le fichier HTML par défaut est ce code la :

<div class="[Class]">
<dt>
<span>Images Aléatoires</span>
</dt>
<dd>
<ul>
<li>
<p>
<img src="[URL]" alt="[ALT]" />
</p>
</li>
<li>
[Description]
</li>
</ul>
</dd>
</div>

vous pouvez trouver le code complet ainsi que sa dll dans le zip.

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Messages postés
6814
Date d'inscription
dimanche 15 décembre 2002
Statut
Modérateur
Dernière intervention
13 octobre 2010
29
En ce qui concerne les Namespace, je met des noms diferents , car tout mes controles font parties d'une seule et meme dll, et la classe Photo/PhotoCollection pourra surement me servir ailleur dans un projet completement different, c'est pour ca que je ne les ai pas mis dans le meme namespace

Pour ce qui est que s'il manque un fichier, je ne suis pas d'accord, c'est la meme chose que la datagrid, s'il manque la source de donnée le datagrid fonctionne plus, le seul fichier necessaire est la source de données XML, il faut par contre en plus des images pour faire fonctionner ca, et comme pour le datagrid, les styles CSS ne sont pas obligatoires, et en ce qui concerne le fichier BasicImageAleatoireTemplate.htm de la propriété HtmlTemplate est facultatif, il permet de personnaliser le rendu final c'est tout.

Sinon j'ai essayé d'ajouter les styles dans la Dll, mais le problème c'est que l'on ne peut pas ecrire, dans le head de la page contenant le controle, et c'est le seul endroit possible pour les styles, sinon le controle n'est plus XHTML compliant, est c'est un point sur lequel j'insiste.

Mais je suis d'accord avec toi, qu'il faut beaucoup de fichier pour avoir un rendu correct, mais une fois ces fichiers au bon endroit, je trouve que le resultat vaut le coup.
Messages postés
1765
Date d'inscription
jeudi 12 octobre 2000
Statut
Modérateur
Dernière intervention
11 décembre 2013
6
Pas mal mais je reste mitigé sur la définition de ton outil. En effet le custom Web control fait parti d'un tout (gestion des photos, fichier xml, fixhier css, ...) et si un de ces fichiers manque ton outil ne marche pas.
Pour moi c'est une tu pourrais en faire une DLL à intégrer.

En revanche une tite question, pourquoi mettre des namespace différent pour quasiment chaque classe ?

F___

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.