Utiliser des comportements intégrés dans Blend pour ajouter de l’interactivité (HTML et JavaScript)

Avec Blend for Visual Studio, créez des applications interactives grâce aux comportements intégrés glisser-déplacer.

Dans cet exemple, vous utiliserez un des comportements intégrés JavaScript dans Blend pour modifier un message dans une application lorsque l'utilisateur commence à faire glisser un élément dans une liste, puis le changer à nouveau lorsque l'utilisateur arrête de faire glisser l'élément.

Pour poursuivre avec cet exemple, téléchargez ce projet depuis la galerie d'exemples. Ainsi, vous pouvez passer en revue non seulement le code mais aussi toutes ses ressources, ce qui vous permet de suivre son déroulement et de modifier le projet au fur et à mesure.

Cet exemple d'application comprend une vue Liste qui affiche une liste illustrée de versions. Vous pouvez réorganiser la liste en faisant glisser des éléments de leur emplacement existant vers un autre emplacement dans la liste. Cet exemple s'appuie sur l'exemple d'application en utilisant les comportements qui permettent d'afficher différents messages lorsque l'utilisateur fait glisser un élément, puis le dépose sur un nouvel emplacement.

Les comportements se composent de deux parties : un déclencheur et une action. Un déclencheur réagit à un événement (un clic, par exemple) et appelle une ou plusieurs actions.

Pour appliquer un comportement intégré dans Blend, vous devez commencer par ajouter le comportement à l'élément. Vous devez ensuite définir le déclencheur auquel le comportement doit répondre, puis l'action que vous souhaitez produire.

Dans cet exemple, vous définirez deux comportements (deux comportements EventTriggerBehavior). Vous définirez ensuite un déclencheur d'événement pour chaque comportement. Le premier déclencheur est un événement itemdragstart (fait glisser l'élément) et le second est un événement itemdragend (dépose l'élément).

Chaque déclencheur produit deux actions SetStyleAction : l'une, SetStyleAction, définit la propriété divvisibility sélectionnée sur hidden et l'autre, SetStyleAction, définit la propriété divvisibility sélectionnée sur visible.

Dans l'application finie, lorsque l'utilisateur commence à faire glisser l'élément dans la liste, le message « Mix it up! » est visible, et le message « Pick a flavor! » est masqué. Lorsque l'utilisateur arrête de faire glisser l'élément, le message « Mix it up! » est masqué et le message « Pick a flavor! » est visible.

Lorsque vous ouvrez l'exemple d'application, les deux messages (« Mix it up! » et « Pick a flavor! ») sont visibles. Par défaut, vous souhaitez que le message « Pick a flavor! » soit visible et que le message « Mix it up! » soit masqué. Pour ce faire, définissez la propriété visibility par défaut pour #mixitdiv (qui contient le message « Mix it up! ») sur hidden.

Pour masquer le message « Mix it up! »

  1. Si vous avez téléchargé le projet, ouvrez le dossier Sample ListView Drag and Drop for Blend Behaviors, puis ouvrez le dossier JavaScript. Cliquez avec le bouton droit sur le fichier Controls_ListViewReorderDragDrop.sln, puis cliquez sur Ouvrir avec, puis sur Blend for Visual Studio.

  2. Dans le volet DOM en direct, trouvez le #mixitdiv en tapant mix dans la zone de texte Rechercher, ou en cliquant sur le message « Mix it up! » dans l'aire de conception.

    Conseil Conseil

    Il vous faudra peut-être développer les objets dans la hiérarchie pour trouver le #mixitdiv dans le volet DOM en direct.

  3. Dans le volet Propriétés, tapez vi dans la zone de texte Rechercher pour trouver la propriété visibility. Dans la liste déroulante visibilité, cliquez sur masqué.

    Blend behaviors #mixit visibility: hidden

Le message « Mix it up! » n'est plus visible dans l'aire de conception.

Vous pouvez ajouter un comportement intégré de l'une des manières suivantes :

  • Vous pouvez faire glisser un comportement à partir du volet Ressources dans l'élément du volet DOM en direct ou sur l'aire de conception.

  • Appliquez un comportement à l'élément sélectionné en cliquant sur Ajouter nouveau comportement dans la catégorie Comportements dans le volet Attributs HTML.

Dans cet exemple, utilisez le volet Attributs HTML pour ajouter et définir les comportements.

Pour ajouter le comportement

  1. Dans le volet DOM en direct, dans la zone de texte Rechercher, tapez list pour trouver listView dans la hiérarchie d'objets.

  2. Après avoir sélectionné listView dans le volet DOM en direct, dans le volet Attributs HTML, sous la catégorie Comportements, cliquez sur Ajouter nouveau comportement Blend Add new behavior button.

  3. Dans la boîte de dialogue Ajouter nouveau comportement, cliquez sur EventTriggerBehavior, puis sur OK.

    Blend Add new behavior dialog box

    Notez qu'un marqueur bleu s'affiche dans le volet DOM en direct, sur listView, afin d'indiquer qu'un comportement lui est attaché.

    Blend behaviors - ListView - Objects and Timeline

Le EventTriggerBehavior appelle une action lorsqu'un événement est déclenché. Maintenant que le comportement a été ajouté, vous pouvez choisir à quel événement le comportement doit répondre. Dans cet exemple, vous utilisez l'événement itemdragstart. L'événement itemdragstart est déclenché lorsqu'un utilisateur commence à faire glisser un élément à partir d'un contrôle ListView. Pour plus d'informations, consultez ListView.onitemdragstart event (ListView.onitemdragstart, événement).

Pour définir l'événement itemdragstart pour le comportement EventTriggerBehavior

  • Après avoir sélectionné EventTriggerBehavior dans la catégorie Comportements du volet Attributs HTML, dans la liste déroulante événements, cliquez sur itemdragstart. Laissez sourceSelector vide.

    Conseil Conseil

    Pour faciliter sa recherche dans la liste, vous pouvez également taper le nom de l'événement dans l'éditeur de valeurs.

    Blend behaviors Add event trigger

SetStyleAction définit une nouvelle propriété pour l'élément sélectionné lorsque le déclencheur est activé. La première action SetStyleAction de l'événement itemdragstart masque le message « Pick a flavor! » lorsque l'utilisateur commence à faire glisser l'élément.

Pour ajouter et définir la première action SetStyleAction pour l'événement itemdragstart

  1. Sous la catégorie Comportements, cliquez sur Ajouter une actionBlend behaviors Add new action à droite d'Actions déclenchées.

  2. Dans la boîte de dialogue Ajouter nouveau comportement, cliquez sur SetStyleAction, puis sur OK.

    Blend behaviors Add New Action dialog box
  3. Dans la liste déroulante styleProperty, cliquez sur visibilité. Appuyez sur Entrée.

    Blend behaviors visibility property

    La valeur de l'attribut styleValue s'affiche.

  4. Dans la liste déroulante styleValue, cliquez sur masqué.

    Blend behaviors stylevalue visibility: hidden
  5. Dans la zone de texte targetSelector, tapez #pickit.

    Blend behaviors targetselector #pickit

La seconde action SetStyleAction de l'événement itemdragstart affiche le message « Mix it up! » lorsque l'utilisateur commence à faire glisser l'élément.

Pour ajouter et définir la seconde action SetStyleAction pour l'événement itemdragstart

  1. Cliquez sur Ajouter une actionBlend behaviors Add new action à droite d'Actions déclenchées.

  2. Dans la boîte de dialogue Ajouter nouveau comportement, cliquez sur SetStyleAction, puis sur OK.

  3. Dans la liste déroulante styleProperty, cliquez sur visibilité. Appuyez sur Entrée.

    La valeur de l'attribut styleValue s'affiche.

  4. Dans la liste déroulante styleValue, cliquez sur visible.

  5. Dans la zone de texte targetSelector, tapez #mixit.

    Blend behaviors targetselector mixit

Vous avez désormais défini le comportement se produisant lorsque l'utilisateur commence à faire glisser un élément (l'événement itemdragstart). La prochaine étape consiste à définir le comportement produit lorsque l'utilisateur arrête de faire glisser l'événement (l'événement itemdragend).

Pour ajouter le second comportement

  1. Assurez-vous que le listView est toujours sélectionné dans le volet DOM en direct. Dans le volet Attributs HTML, sous la catégorie Comportements, cliquez sur Ajouter nouveau comportement Blend Add new behavior button.

  2. Dans la boîte de dialogue Ajouter nouveau comportement, cliquez sur EventTriggerBehavior, puis sur OK.

Ensuite, définissez l'événement itemdragend pour le second EventTriggerBehavior. L'événement itemdragend est déclenché lorsque l'utilisateur dépose un élément qu'il a fait glisser à partir d'un contrôle ListView. Pour plus d'informations, voir ListView.onitemdragend event (ListView.onitemdragend, événement).

Pour définir l'événement itemstartend pour le comportement EventTriggerBehavior

  • Après avoir sélectionné EventTriggerBehavior dans la catégorie Comportements du volet Attributs HTML, dans la liste déroulante événements, cliquez sur itemdragend. Laissez sourceSelector vide.

    Blend behaviors Add event trigger

La première action SetStyleAction de l'événement itemdragend affiche le message « Pick a flavor! » lorsque l'utilisateur arrête de faire glisser l'élément.

Pour ajouter et définir la première action SetStyleAction pour l'événement itemdragend

  1. Sous la catégorie Comportements, cliquez sur Ajouter une actionBlend behaviors Add new action à droite d'Actions déclenchées.

  2. Dans la boîte de dialogue Ajouter nouveau comportement, cliquez sur SetStyleAction, puis sur OK.

  3. Dans la liste déroulante styleProperty, cliquez sur visibilité. Appuyez sur Entrée.

    La valeur de l'attribut styleValue s'affiche.

  4. Dans la liste déroulante styleValue, cliquez sur masqué.

  5. Dans la zone de texte targetSelector, tapez #pickit.

    Blend behaviors targetselector #pickit

La seconde action SetStyleAction de l'événement itemdragend masque le message « Mix it up! » lorsque l'utilisateur arrête de faire glisser l'élément.

Pour ajouter et définir la seconde action SetStyleAction pour l'événement itemdragend

  1. Cliquez sur Ajouter une actionBlend behaviors Add new action à droite d'Actions déclenchées.

  2. Dans la boîte de dialogue Ajouter nouveau comportement, cliquez sur SetStyleAction, puis sur OK.

  3. Dans la liste déroulante styleProperty, cliquez sur visibilité. Appuyez sur Entrée.

    La valeur de l'attribut styleValue s'affiche.

  4. Dans la liste déroulante styleValue, cliquez sur visible.

  5. Dans la zone de texte targetSelector, tapez #mixit.

    Blend behaviors targetselector #mixit

Vous pouvez à présent utiliser le mode interactif pour exécuter l'application ou appuyer sur F5 pour générer et exécuter votre application. Si vous faites glisser un élément dans la vue Liste, le message qui s'affiche devient « Mix it up! ». Lorsque vous arrêtez de faire glisser l'élément, le message qui s'affiche redevient « Pick a flavor! ».

Appuyez sur Alt+F4 pour fermer l'application.

Afficher: