Bienvenue à Blogs CodeS-SourceS Identification | Inscription | Aide

Apprendre à développer avec le langage C#

Si vous voulez découvrir le nouveau langage de prédilection de Microsoft, vous pouvez faire confiance au nouveau coach C# pour vous y aider ! Pour l'instant un seul atelier est en ligne mais les autres vont suivre très bientôt !

A vous de jouer !

Posted: jeudi 10 mai 2007 14:46 par bianca | 0 commentaire(s)
Classé sous :
Tests blanc gratuits sur Dynamics CRM 3.0

Vous cherchez à évaluer vos compétences et vous préparer aux certifications sur Dynamics CRM 3.0 au travers de tests blanc gratuits et fiables ?

Ne cherchez plus smile_tongue !
Microsoft a mis en ligne des tests blancs pour les trois certifications Dynamics CRM 3.0. Entièrement gratuits, ces tests vous permettent d'évaluer vos compétences en ligne et vous préparent à affronter les certifications.
Voici les liens des questionnaires pour vous préparer respectivement aux examens :

Bonne chance !

Introduction à Visual Studio Team System

Vous êtes en charge d'un projet ?
Si vous êtes encore persuadé que Visual Studio Team System n'est pas pour vous, alors faites la connaissance du coach VSTS (rien que pour les vidéos sympas en introduction des ateliers ça vaut le détour...) et n'attendez plus pour découvrir ce produit qui va changer votre façon de travailler et vous aider à réussir à tous les coups vos projets de développement Cool !

Sachez également qu'une session était consacrée à la présentation de Visual Studio Team System lors des Techdays 2007 de Genève. Si vous n'avez pas eu l'opportunité d'assister à cet évènement, récupérez la présentation au format PDF ici ou au format PPT en pièce jointe de ce message.

Posted: lundi 2 avril 2007 14:38 par bianca | 0 commentaire(s)
Classé sous :
Introduction à Visual Studio nom de code Orcas

Lors des Techdays 2007 de Genève, une session était consacrée à la prochaine version de Visual Studio dont le nom de code est Orcas. Si vous n'avez pas eu l'opportunité d'assister à cet évènement, sachez que la présentation est d'ors et déjà disponible au format PDF ici ou au format PPT en pièce jointe de ce message.

Installer Visual Studio Codename Orcas (March 2007 CTP)

Peut-être avez-vous été informé de la disponibilité d'une toute nouvelle CTP (Community Technical Preview) de Visual Studio nom de code "Orcas" sortie en mars 2007.

Pour tous ceux qui n'ont pas encore installé Windows Vista et qui n'oseraient pas se lancer à installer cette nouvelle CTP, sachez que cette version de Visual Studio s'installe sur Windows XP. Vous trouverez en pièce jointe de ce message une procédure d'installation du produit dans un environnement Windows XP Professional en version anglaise. A vous de jouer !

Suis le coach...pour construire un formulaire dans une page web ASP.NET 2.0 à l'aide d'une feuille de style (CSS)

L’objectif est de construire un formulaire simple dans une page web ASP.NET 2.0, classiquement composé de zones de texte libellées, mais sans utiliser une table HTML, c'est-à-dire en utilisant uniquement les propriétés des feuilles de style (CSS). L'objectif de cet article est de voir les principes de base sur un formulaire simple.

Supposons qu’on veuille dessiner le formulaire suivant : 


Marche à suivre :

  • Sur une page ASP.NET vierge, dessiner un formulaire à l'aide des contrôles serveurs web ASP.NET 2.0 de type Textbox, DropDownList et Label :

<form id="form1" runat="server"> <asp:Label ID="lblCategorie" runat="server" Text="Catégorie"></asp:Label> <asp:DropDownList ID="ddlCategories" runat="server"></asp:DropDownList><br /> <asp:Label ID="lblIntitule" runat="server" Text="Intitulé"></asp:Label> <asp:TextBox ID="txtIntitule" runat="server"></asp:TextBox><br /> </form>

  • Créez une feuille de style avec une première règle portant sur la balise body pour définir un cadre globale pour le formulaire.

body { position : absolute; left : 50px; top : 20px; height : 80px; width : 400px; z-index : 20; background-color : #F1F1F1; border : solid 2px #D6D2C2; padding-top:10px; }

lightbulb Un truc sympa est d'utiliser le contrôle serveur web d'ASP.NET 2.0 de type Panel pour délimiter le formulaire. Le rendu de ce contrôle n'est rien d'autre qu'une balise <div> standard. L'intérêt est que vous pouvez facilement le faire apparaître et disparaître par programmation. Et pour le positionner et le dimensionner, il suffit de configurer l'attribut Class du contrôle pour qu'il pointe sur une règle d'affichage comme précédemment mais qui serait nommée div.NomDelAttributClassDuPanel{}.
  • Exécutez la page pour visualiser le cadre mis en place. Pour l'instant les contrôles ne sont pas alignés et c'est là où on a le réflexe d'utiliser une table html pour positionner les éléments les uns par rapport aux autres, alors que c'est très simple à mettre en place avec une feuille de style.
    Cadre initial.jpg
  • La première étape consiste à travailler les libellés du formulaire. L'astuce consiste à les caler sur une même largeur pour que les contrôles de saisie qui les suivent directement soient alignés à leur tour. Le rendu du contrôle serveur web de type Label étant une balise <span>, ajoutez la règle suivante à la feuille de style :

span { display : block; float : left; width : 150px; text-align : right; padding : 2px 0px 0px 0px; }

La propriété float est toute la clé de l'alignement puisque c'est elle qui provoque l’affichage du contrôle de saisie immédiatement à droite du libellé (voir l'article ici pour en savoir plus sur cette propriété). La propriété width cale la largeur des libellés à 150 pixels, alignant ainsi tous les contrôles de saisie du formulaire à partir de 200 pixels du bord gauche du panneau. Et enfin on cale les libellés sur la droite via la propriété text-align.

lightbulbUn autre truc sympa est d'utiliser la propriété AssociatedControlID du contrôle serveur web de type Label pour indiquer quel est le contrôle de saisie directement associé au libellé. Dans notre cas, le contrôle ddlCategories est associé à lblCategorie et le contrôle txtIntitule au contrôle lblIntitule
Lorsque la propriété AssociatedControlID est renseignée, au lieu de générer une balise <span>, le contrôle Label s’affiche sous la forme d’un élément <label> html (nouveau depuis la version 4.0 de l’html). L'attribut for de la balise <label> est alors affectée avec la propriété ID du contrôle serveur associé au libellé (généré à partir de la valeur de AssociatedControlID).
L’effet qui en résulte est qu’un clic de l'utilisateur sur le libellé provoque le déplacement du focus sur le contrôle de saisie associé Smile.

Vous pouvez ainsi modifier le source de la page et ajouter l'attribut AssociatedControlID comme ceci :

<form id="form1" runat="server"> <asp:Label ID="lblCategorie" AssociatedControlID="ddlCategories" runat="server" Text="Catégorie"></asp:Label> <asp:DropDownList ID="ddlCategories" runat="server"></asp:DropDownList><br /> <asp:Label ID="lblIntitule" AssociatedControlID="txtIntitule" runat="server" Text="Intitulé"></asp:Label> <asp:TextBox ID="txtIntitule" runat="server"></asp:TextBox> </form>

La règle d'affichage dans la feuille de style devient :

label { display : block; float : left; width : 150px; text-align : right; padding : 2px 0px 0px 0px; }

Vous obtenez le formulaire suivant. Les libellés sont calés à 150 pixels du bord gauche du cadre et les contrôles de saisie sont collés immédiatement derrière leur libellé dans le flux html de la page.

  • Il ne reste plus qu'à configurer l'affichage des contrôles de saisie eux-même. Ajoutez les règles suivantes à la feuille de style. Créez des classes pour catégoriser les éléments propres au formulaire :

input.ZoneDeTexte { width : 200px; } select { width : 205px; }

lightbulb Pour faire simple, aucun sélecteur de classe n'accompagne ici la règle select mais pour la règle input, c'est nécessaire de façon à pouvoir distinguer par la suite les zones de texte des contrôles bouton qui sont également des éléments input html. N'oubliez pas donc d'ajouter l'attribut Class à la définition du contrôle serveur web dans le source de la page pour indiquer le sélecteur de class défini dans la règle :

<asp:TextBox ID="txtIntitule" Class="ZoneDeTexte" runat="server"></asp:TextBox>

lightbulbNotez que la largeur prévue pour la liste déroulante est un peu plus importante que pour la zone de texte. Cela correspond à l'espace de la flèche à droite de la liste qui permet de dérouler celle-ci.
  • Lorsque vous exécutez la page, vous obtenez :

 

  • En utilisant le même procédé, ajoutez à la suite du formulaire deux boutons OK/Cancel. Pour aligner verticalement le premier bouton sur les contrôles de saisie, précédez les boutons d'un libellé avec un espace blanc comme ceci :

<asp:Label ID="lblBoutonStandard" runat="server" AssociatedControlID="btnOK" Text="&nbsp;"></asp:Label> <asp:Button ID="btnOK" runat="server" Text="Ok" /> <asp:Button ID="BtnAnnuler" Class="BoutonStandard" runat="server" Text="Annuler" />
input.BoutonStandard { color : Gray; background-color : #EBEADB; border : solid 2px #D6D2C2; }

lightbulbLe sélecteur de classe BoutonStandard permet d'identifier le style du bouton par rapport à celui de la zone de texte, les deux contrôles serveurs web de type TextBox et Button ayant tous deux pour rendu une même balise <input>.

  • Lorsque vous exécutez la page, vous obtenez :

Vous pouvez retrouver le code d'exemple présenté dans cet article en pièce jointe.

CRM, c'est de la dynamics ! Comment gérer les relations N-N dans Dynamics CRM 3.0 ?

L'équipe de Corp a écrit un article très intéressant sur le sujet :
http://blogs.msdn.com/crm/archive/2007/02/15/many-to-many-relationships-in-ms-dynamics-crm-3-0.aspx

J'ajouterai une cinquième approche :
Typiquement lorsqu'il s'agit de gérer des relations multiples entre des entités qui concernent des interlocuteurs de l'entreprise, tels que les banques, les fournisseurs, les consultants, les entités juridiques etc..., on se retrouve avec des relations N-N entre tous ces interlocuteurs.
Les clients ont des comptes dans plusieurs banques et chaque banque gère plusieurs comptes clients.
Un client a plusieurs fournisseurs et chaque fournisseur gère plusieurs clients...ainsi de suite.

Une solution consiste à considérer toutes ces entités comme une même entité standard Compte (ou Contact), et à jouer sur l'attribut "Nature de la relation" de l'entité pour typer chaque individu. Par exemple, la nature de la relation est un champ Picklist avec les valeurs "Fournisseur, Banque, Consultant...etc". Quelque part, une CRM ce n'est pas gérer seulement des comptes de type "client" (ou prospect), c'est gérer l'ensemble des contacts avec lesquels l'entreprise intéragit...

Pour mettre en relation l'ensemble de ces interlocuteurs et donc créer des relations N-N, utilisez les rôles de relation de CRM. Il suffit de créer une rôle par nature de la relation. Créez autant de "casquettes" que de type de compte. Ensuite, c'est très simple de lier les comptes les uns par rapport aux autres. Par exemple, vous pouvez tirer facilement une relation entre un compte de type client et un compte de type banque.

Comment rendre transparent le fond d'une image ?

Si vous cherchez comment en deux clics rendre transparent le fond d'une image pour l'intégrer dans une page web ou dans une présentation Powerpoint, voici un méthode simple avec le logiciel de traitement d'images Photofiltre :

  • Vous pouvez télécharger gratuitement une version de Photofiltre ici.
  • Ouvrez l'image à travailler.
  • Sélectionnez l'outil Baguette magique dans la Palette d'outils, puis cliquez n'importe où à l'extérieur de l'image sur la partie à rendre transparente. La zone de fond de l'image apparaît alors en pointillé.

coach01.jpg

  • Sélectionnez le menu Image > Transparence automatique > Région intérieure à la sélection (notez que la sélection de l'extérieur de la zone est aussi possible). Et voilà, le fond de l'image est maintenant transparent !

coach02.jpg

  • S'il reste des zones encore non transparentes sur votre image, reprenez la baguette magique et recommencez l'opération sur la (ou les) zone(s) restante(s).

Il ne vous reste plus qu'à enregistrer l'image. N'oubliez pas que seuls les formats gif et png supportent la transparence.

l'actu...Trois nouveaux ateliers sont en ligne sur le coach VSTS !

Pour dérouler les trois nouveaux ateliers N°4,5 et 6 avec le coach VSTS, suivez le guide ici !

  • L'atelier 4 concerne la mise en oeuvre d'une stratégie de contrôle de code source avec Team Foundation Server. Pour ceux qui utilisent Visual Source Safe, c'est l'occasion ou jamais de voir ce que vous pouvez y gagner Stick out tongue
  • L'atelier 5 est dédié aux développeurs et pose la question que l'on a tous "comment faire un développement de qualité ?". Vous y découvrirez une nouvelle façon de développer basée sur la mise en oeuvre de tests unitaires avec VSTS.
  • L'atelier 6 concerne des problématiques de tests, avec notamment un exemple de mise en oeuvre d'un test de charge sur une interface web et un exemple de test de performance (profiling) sur une interface windows.

Si vous croyez encore que Visual Studio n'est un qu'un éditeur de développement, il n'est pas trop tard pour changer d'avis. A vos claviers !!

Le placard ! <The operation could not be completed. Invalid FORMATETC structure.>

J'ai vu sur les forums que pas mal de gens avaient rencontré ce message :
...The operation could not be completed. Invalid FORMATETC structure...
et ce dans des conditions assez aléatoires et difficiles à diagnostiquer.

Pour ma part, le premier symptôme du problème a été qu'en voulant faire un glisser déplacer d'un contrôle standard de la boîte à outils de Visual Studio sur une page aspx en mode Design, rien ne se passait...Double clic sur le contrôle, idem.

Du coup, j'ai essayé de faire le glisser déplacer du contrôle directement sur la page en mode Source et là je récupère le message cité ci-dessus...

En cherchant une piste sur le web, je trouve quelqu'un qui suggère de fermer Visual Studio et de ré ouvrir ma solution.  Je recommence mes tests et là je récupère le message :

...Only one <configSections> element allowed per config file and if present must be the first child of the root <configuration> element...

En effet, j'ai malencontreusement inséré une section entre la section <configuration> et la section <configSections> dans mon fichier de configuration. En remettant les sections dans le bon ordre, mon problème s'est trouvé résolu !

Alors si vous avez ce message, cherchez peut-être du côté de votre fichier web.config !

CRM, c'est de la dynamics ! un nouveau blog en français avec des infos de toute première main...

MCS France a mis en ligne un blog en français dédié à Microsoft Dynamics CRM ! Il ne vous reste plus qu'à vous abonner Stick out tongue.

Leur premier post concerne la sortie de la nouvelle version V3C de CRM compatible avec Vista et Office en français !
Bonne lecture.

une idée sur l'IDE...Configurer le serveur de développement ASP.NET intégré à Visual Studio pour fonctionner toujours avec le même numéro de port

Parfois l'utilisation d'un numéro de port dynamique par le serveur de développement ASP.NET intégré à Visual Studio (lorsqu'on développe une application web ASP.NET basé sur le système de fichier pour éviter d'utiliser IIS) est un peu lourde voire gênante. C'est le cas notamment si vous utilisez des scripts de test sur l'application (typiquement avec Visual Studio Team System) ou tout simplement pour garder un raccourci sur le site dans IE.

Pour configurer l'exécution de votre application web avec toujours le même port, il suffit :

  • d'afficher la fenêtre de propriété de votre application web ASP.NET dans Microsoft Visual Studio (F4 sur le dossier racine de l'application web à partir de l'Explorateur de solutions).
  • de basculer la propriété Utiliser des ports dynamiques à False.
  • de fixer le numéro de port de votre choix via la propriété Numéro de port.

A vous de jouer !

suis le coach...pour synchroniser un contrôle de menu et un contrôle TreeView

L’idée est d’interconnecter les deux contrôles ASP.NET 2.0 Menu et TreeView à partir d’une même source de données gérée par un contrôle de source de données de type SiteMapDataSource pour que l’un affiche les rubriques enfants de l’autre.

Ce message est juste un petit mémo si le sujet vous intéresse et que vous n'auriez pas vu passer l'article sur MSDN au mois de décembre Smile

l'actu ! Découvrez ASP.NET AJAX en déroulant un tutorial...

Au cas où vous auriez manqué le post de Bernard, nous serons le 18 janvier 2007 à Lausanne pour vous présenter la nouvelle version d'ASP.NET avec AJAX. Il s'agit d'une demi-journée en matinée !

Le principe de cet évènement est très simple. Vous venez avec votre propre portable. Après une petite heure d'introduction sur le sujet, c'est à vous de jouer ! Nous vous proposons de dérouler sur votre propre environnement un tutorial d'initiation à ASP.NET AJAX. Nous serons là bien sûr pour vous aider !

J'espère que vous trouverez un peu de temps pour profiter de cette super occasion. Pour vous inscrire et en savoir plus, rendez-vous ici

l'actu...de nouveaux ateliers sont disponibles sur le site du coach ASP.NET !

Cette fois le coach ASP.NET vous entraine sur le thème des feuilles de style, toujours dans le contexte d'une page web ASP.NET 2.0. Les nouveaux ateliers sont dispos ici.

Franchement si vous n'osez pas vous mettre aux CSS et que vous êtes persuadé qu'il faut être un crac pour les utiliser, ou si vous n'êtes toujours pas convaincu que c'est beaucoup mieux que l'approche avec les table html...vous savez ce qu'il vous reste à faire Wink

 

CRM, c'est de la dynamics ! Microsoft sort une version de Dynamics CRM compatible avec Office 2007 et Vista !

Vous pouvez télécharger cette nouvelle version du client Microsoft Dynamics CRM 3.0 pour Outlook ici. Elle fonctionne sous Vista et/ou avec Office 2007.

Plus de détails avec l'équipe CRM de Corp qui en parle ici.

Y a plus qu'à !

CRM, c'est de la dynamics...Existe-il des correctifs pour Microsoft Dynamics CRM 3.0 ?

Le premier correctif de Microsoft Dynamics CRM 3.0 est disponible depuis début décembre. Vous pouvez le télécharger ici sous le nom de "Update Rollup 1".

Il corrige notamment le problème des activités de campagne de type Email qui ne sont pas envoyées de manière automatique lors de la distribution de l'activité sur les listes marketing. Ouf !

Pour retrouver tous les téléchargements associés à Dynamics CRM, rendez vous sur le site de téléchargement de Microsoft Corp et tapez 'crm' dans la zone de recherche. Vous y trouverez par exemple la toute dernière version du guide d'implémentation ou le SDK.

Un autre truc sympa pour avoir de l'info sur CRM est de vous abonner au flux RSS du blog de l'équipe CRM de Microsoft. C'est un excellent moyen pour être prévenu de la sortie du prochain correctif smile_wink !

toute la lumière sur...comment implémenter la sélection d'une ligne d'une GridView dans une webform comme dans une winform ?

Par défaut, la sélection d'une ligne dans un contrôle serveur web ASP.NET 2.0 de type GridView se fait au travers d'une colonne spécifique de type CommandField, ce qui donne à l'affichage une colonne avec un lien hypertexte Sélectionner (cf. grille du haut dans la Figure 1).

Comment faire pour gérer la sélection de manière plus classique comme dans une grille d'une winform, simplement en cliquant n'importe où avec la souris sur la ligne (cf. grille du bas dans la Figure 1) ?

S&#233;lection dans une  GridView

                                               - Figure 1 -

Voici le source de la page avec une grille implémentant une colonne "Sélectionner" de type CommandField :

<asp:SqlDataSource ID="dsAnnonces" runat="server" ConnectionString="<%$ ConnectionStrings:csAffairesSansRisque %>" SelectCommand="SELECT [Ann_Telephone], [Ann_Email], [Ann_Prix], [Ann_CodePostal] FROM [Annonces]"> </asp:SqlDataSource> <asp:GridView ID="gvAnnonces" runat="server" AutoGenerateColumns="False" DataSourceID="dsAnnonces"> <SelectedRowStyle BackColor="Blue" ForeColor="white" /> <Columns> <asp:CommandField ShowSelectButton="True" /> <asp:BoundField DataField="Ann_Email" HeaderText="email" SortExpression="Ann_Email" /> <asp:BoundField DataField="Ann_Prix" HeaderText="Montant" SortExpression="Ann_Prix" /> <asp:BoundField DataField="Ann_Telephone" HeaderText="T&#233;l" SortExpression="Ann_Telephone"/> </Columns> </asp:GridView>
Le principe consiste à :
  • remplacer les colonnes standards de type BoundField par des colonnes de type ButtonField. L'intérêt du type de colonne ButtonField est que son rendu en html dans la page de réponse renvoyée au navigateur est un lien hypertexte. D'où la sélection de la ligne simplement en cliquant sur une colonne avec la souris !
  • Attention, il faut également remplacer l'attribut DataField qui définit la liaison de données avec le contrôle de source de données de type SqlDataSource, par l'attribut équivalent nommé DataTextField.
  • pour terminer il faut ajouter sur chaque colonne l'attribut CommandName avec la valeur Select pour associer l'action de sélection équivalente à la colonne de type CommandField que vous aviez par défaut, c'est-à-dire pour exécuter l'ordre de sélection sur la ligne.

<asp:SqlDataSource ID="dsAnnonces" runat="server" ConnectionString="<%$ ConnectionStrings:csAffairesSansRisque %>" SelectCommand="SELECT [Ann_Telephone], [Ann_Email], [Ann_Prix], [Ann_CodePostal] FROM [Annonces]"> </asp:SqlDataSource> <asp:GridView ID="gvAnnonces" runat="server" AutoGenerateColumns="False" DataSourceID="dsAnnonces"> <SelectedRowStyle BackColor="Blue" ForeColor="white" /> <Columns> <asp:ButtonField DataTextField ="Ann_Email" CommandName="Select" HeaderText="email" SortExpression="Ann_Email" /> <asp:ButtonField DataTextField="Ann_Prix" CommandName="Select" HeaderText="Montant" SortExpression="Ann_Prix" /> <asp:ButtonField DataTextField="Ann_Telephone" CommandName="Select" HeaderText="T&#233;l" SortExpression="Ann_Telephone"/> </Columns> </asp:GridView>

Pour aller plus loin...
Etant donné qu'une colonne a pour rendu un lien hypertexte, vous vous retrouvez avec un style d'affichage pas terrible. En créant une règle d'affichage dans une feuille de style comme ci-dessous, vous pouvez vous débarrasser du soulignement usuel des liens hypertextes :

a, a:link, a:visited, a:active, a:hover { text-decoration:none; }

De la même manière, est-ce que vous avez remarqué que si l'utilisateur clique entre deux colonnes ou en dehors du texte de la ligne, la sélection ne se déclenche pas. Cela vient du fait que le lien hypertexte prend par défaut la dimension du texte associé. Pour étendre le lien hypertexte à la largeur complète d'une colonne, il suffit d'ajouter les deux propriétés suivantes à la règle d'affichage précédente :

a, a:link, a:visited, a:active, a:hover { text-decoration:none; display:block; width:100%; }

Et le tour est joué !

la FAQ...A quelle date ont lieu les Devdays 2007 ?

Cette année pas de Devdays...mais ne soyez pas déçus puisque Microsoft vous offre trois fois mieux avec les Techdays dont le site d'insription vient d'ouvrir cette semaine.
Trois jours entiers de conférence sur une palette de sujets tout aussi enthousiasmants les uns que les autres, et en plus cette année c’est vous qui vous faites votre programme !

De quoi vous bâtir un devdays sur mesure pour 2007 !

Suis le coach...pour construire une barre d'icônes dans une page web ASP.NET 2.0 à l'aide d'une feuille de style (CSS)

L’objectif est de construire une barre d’icônes dans une page web ASP.NET 2.0 à partir d’une liste non ordonnée de type <ul><li></li></ul> en utilisant les propriétés des feuilles de style (CSS). La barre d’icônes finalisée correspond à l'étape 5 de la figure 1. 

Etapes pour la construction d'une barre d'ic&#244;nes avec une CSS

Marche à suivre :

  • Sur une page ASP.NET vierge, créer une liste d’images à l'aide d'une liste non ordonnée :
    <ul> <li> <asp:LinkButton ID="liActualiser" runat="server"><img src="Images/actualiser.gif" title="Actualiser" border="0" /></asp:LinkButton></li> <li> <asp:LinkButton ID="liCreerDossier" runat="server"><img src="Images/creer dossier.gif" title="Ajouter un dossier" border="0" /></asp:LinkButton></li> <li> <asp:LinkButton ID="liCreerFichier" runat="server"><img src="Images/creer fichier.gif" title="Ajouter un fichier" border="0" /></asp:LinkButton></li> <li> <asp:LinkButton ID="liSupprimerDossier" runat="server"><img src="Images/supprimer dossier.gif" title="Supprimer un dossier" border="0" /></asp:LinkButton></li> <li> <asp:LinkButton ID="liSupprimerFichier" runat="server"><img src="Images/supprimer fichier.gif" title="Supprimer un fichier" border="0" /></asp:LinkButton></li> </ul>

Remarques :

Le contrôle serveur web ASP.NET 2.0 de type LinkButton est un moyen simple pour associer une action sur le clic de chaque image de la barre d’icônes.
Dans cet exemple, les images associées aux icônes sont placées dans un dossier Images.

  • Par défaut, les éléments <li> d’une liste s’affichent par lignes donc verticalement, avec une puce de type rond noir. Exécutez la page. Le résultat est donné dans l'étape 1 de la figure 1.
  • Créer une feuille de style en ajoutant un nouvel élément au projet web du type Feuille de style. Nommez-la par exemple Default.css.
  • Pour créer une référence à la feuille de style dans votre page web ASP. NET 2.0, il suffit de faire un glisser déplacer du fichier .css depuis l’Explorateur de solutions de Visual Studio sur le code source de la page dans la partie en-tête :
    <head runat="server"> <title>Page sans titre</title> <link href="Default.css" rel="stylesheet" type="text/css" /> </head>
  • Ajouter l'attribut Class avec la valeur Liste à la balise <ul> pour référencer une règle d'affichage dans la feuille de style.
    <ul class="Liste">
  • Définissez la règle d'affichage suivante dans la feuille de style : 
    ul.Liste { list-style-type : none; display : block; height : 24px; border-bottom : solid 1px #D1D1D1; border-top : solid 1px #D1D1D1; margin : 10px 0px 0px 0px; padding : 0px 10px 0px 10px; }

Remarques :

La propriété list-style-type définit le style de la puce. Dans notre cas, la puce est inutile donc le style utilisé est none.
La bordure définie par les propriétés border- permet d'isoler la barre d'icônes avec les autres éléments autour dans la page.

  • Enregistrez tout puis exécutez la page. La liste est toujours identique à ceci près que les puces noires ne sont plus visibles (Etape 2 de la figure 1).
  • Tournez maintenant la liste pour qu'elle soit horizontale plutôt que verticale. Pour cela, rajoutez la règle d'affichage suivante dans la feuille de style :
    ul.Liste li { display : block; height : 24px; float : left; }
  • Enregistrez tout puis exécutez la page. La liste est maintenant horizontale (Etape 3 de la figure 1).

L’astuce consiste à programmer un mode d’affichage flottant via la propriété float. Qu’est-ce que cela veut dire ?
Il faut savoir que lorsque vous positionnez un élément de manière absolue dans le flux html d’un document, il n’est pas possible de déterminer où se trouve précisément la fin de l’élément. C’est pour cette raison qu’il est particulièrement difficile de positionner des éléments à la suite les uns des autres…
La solution consiste à utiliser le mode d’affichage flottant. Il indique que les éléments sont placés à la suite les uns des autres dans le flux html. Les valeurs left ou right précisent si les éléments sont calés par la gauche ou par la droite du containeur.

  • Retravaillez l'affichage des images pour qu'elles soient plus espacées. En visualisant le source de la page dans le navigateur, vous constaterez que le contrôle ASP.NET de type LinkButton a pour rendu un simple lien hypertexte <a> standard :
<li> <a id="liActualiser" href="javascript:__doPostBack('liActualiser','')"><img src="Images/actualiser.gif" title="Actualiser" border="0" /></a></li>
  • Donc en ajoutant les règles d'affichage suivantes dans la feuille de style, vous contrôlez l'espacement entre les icônes dans la barre :
    ul.Liste li a, ul.Liste li a:link, ul.Liste li a:visited, ul.Liste li a:active { display : block; margin : 2px 2px 2px 2px; /* gère l’espacement extérieur au lien */ padding : 3px 3px 3px 3px; /* gère l’espacement intérieur au lien */ }
  • Enregistrez tout puis exécutez la page. Vous obtenez une barre d'icône qui commence à ressembler à quelque chose (Etape 4 de la figure 1).
  • Pour mettre en évidence le déplacement de l'utilisateur avec sa souris, vous pouvez dessiner un rectangle coloré autour de l'image survolée par la souris en ajoutant à la feuille de style la règle d'affichage suivante :
    ul.Liste li a:hover { background-color : #C1D2EE; border : solid 1px #316AC5; margin : 2px 2px 2px 2px; padding : 2px 2px 2px 2px; }
  • Enregistrez tout puis exécutez la page. Le tour est joué  (Etape 5 de la figure 1) !

-> Retrouvez cet exemple de page en pièce attachée de ce post.



Les 10 derniers blogs postés

- Merci par Blog de Jérémy Jeanson le 10-01-2019, 20:47

- Office 365: Script PowerShell pour auditer l’usage des Office Groups de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 11:02

- Office 365: Script PowerShell pour auditer l’usage de Microsoft Teams de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 10:39

- Office 365: Script PowerShell pour auditer l’usage de OneDrive for Business de votre tenant par Blog Technique de Romelard Fabrice le 04-25-2019, 15:13

- Office 365: Script PowerShell pour auditer l’usage de SharePoint Online de votre tenant par Blog Technique de Romelard Fabrice le 02-27-2019, 13:39

- Office 365: Script PowerShell pour auditer l’usage d’Exchange Online de votre tenant par Blog Technique de Romelard Fabrice le 02-25-2019, 15:07

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Stream Portal par Blog Technique de Romelard Fabrice le 02-21-2019, 17:56

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Video Portal par Blog Technique de Romelard Fabrice le 02-18-2019, 18:56

- Office 365: Script PowerShell pour extraire les Audit Log basés sur des filtres fournis par Blog Technique de Romelard Fabrice le 01-28-2019, 16:13

- SharePoint Online: Script PowerShell pour désactiver l’Option IRM des sites SPO non autorisés par Blog Technique de Romelard Fabrice le 12-14-2018, 13:01