Personnalisation des dessins Web Visio dans le composant WebPart Visio Web Access

Article
09/18/2014

Dernière modification : mardi 3 décembre 2013

S’applique à : SharePoint Server 2010

Dans cet article
Prise en main de la programmation du composant WebPart Visio Web Access
Création d’une page de composants WebPart
Ajout d’un composant WebPart Visio Web Access à une page de composants WebPart
Ajout d’un composant WebPart Éditeur de contenu à la page de composants WebPart
API ECMAScript Visio Services
Objets dans l’API ECMAScript Visio Services
Exemples dans le Kit de développement logiciel (SDK) SharePoint 2010

Visio Services dans Microsoft SharePoint Server 2010 vous permet de charger et d’afficher des documents Microsoft Visio 2010 hébergés dans une instance du composant WebPart Visio Web Access, ainsi que d’interagir avec ces derniers par programme sur une page Microsoft SharePoint Server 2010.

Cet article fournit des informations sur la façon d’ajouter un composant WebPart Visio Web Access à une page de composants WebPart SharePoint Server 2010, d’afficher un dessin Web Visio dans le composant WebPart et d’interagir avec ce dessin par programme à l’aide de l’API JavaScriptVisio Services.

Prise en main de la programmation du composant WebPart Visio Web Access

Avant que votre solution puisse interagir par programme avec un dessin Web Visio sur une page de composants WebPart SharePoint Server 2010, vous devez ajouter un composant WebPart Visio Web Access à la page, ouvrir un dessin Visio publié en tant que fichier .vdw dans le composant WebPart et ajouter à la page un composant WebPart Éditeur de contenu destiné à contenir votre code ECMAScript (JavaScript, JScript).

Cette procédure suppose que vous disposez des droits d’administration appropriés en tant que concepteur de page dans SharePoint Server 2010.

Pour commencer à programmer le composant WebPart Visio Web Access

Dans Visio, créez le dessin à afficher, puis enregistrez-le dans une bibliothèque de documents SharePoint sous la forme d’un fichier .vdw.
Créez le fichier JavaScript (.js) qui contient le code dont vous souhaitez vous servir pour interagir avec le dessin Web, puis enregistrez-le dans la bibliothèque de documents dans laquelle se trouve le fichier .vdw.
Créez une page de composants WebPart SharePoint Server 2010 destinée à afficher votre dessin et à contenir votre code.
Ajoutez un composant WebPart Visio Web Access à la page, puis affichez le dessin Web dans le composant WebPart.
Ajoutez un composant WebPart Éditeur de contenu à la page, puis liez-le au fichier JavaScript que vous avez précédemment créé.
Actualisez la page dans votre navigateur.

Les sections suivantes fournissent des informations plus détaillées sur certaines de ces étapes. Pour plus d’informations sur la publication de dessins Visio en tant que fichiers .vdw, voir l’aide Visio. Vous pouvez créer un fichier JavaScript dans Microsoft Visual Studio 2010 ou n’importe quel autre éditeur de texte ou de code.

Notes

Il existe de nombreux ouvrages et articles en ligne qui fournissent des conseils généraux sur le codage en JavaScript ; ces informations n’entrent pas dans le cadre de cet article.

Création d’une page de composants WebPart

Une fois que vous avez publié votre dessin Visio en tant que fichier .vdw, enregistré celui-ci dans une bibliothèque de documents, créé votre fichier JavaScript (.js) et enregistré celui-ci dans la même bibliothèque, l’étape suivante consiste à créer une page de composants WebPart.

Pour créer une page de composants WebPart

Dans le site SharePoint où vous souhaitez publier votre dessin, dans le menu Actions du site, cliquez sur Autres options.
Sous Pages et sites, cliquez sur Page de composants WebPart.
Dans la page Nouveau composant WebPart, Dans la zone Nom, tapez un nom de fichier pour la page.
Choisissez un modèle de mise en page et l’emplacement auquel vous souhaitez enregistrer le fichier de page, puis cliquez sur Créer.

Ajout d’un composant WebPart Visio Web Access à une page de composants WebPart

Avant de pouvoir interagir par programmation avec un dessin Web sur une page de composants WebPart SharePoint Server 2010, vous devez ajouter un composant WebPart Visio Web Access à la page de composants WebPart que vous avez créée, et ouvrir un dessin Visio publié en tant que fichier .vdw dans le composant WebPart.

Pour ajouter un composant WebPart Visio Web Access à une page de composants WebPart

Dans le Ruban serveur sur la page de composants WebPart SharePoint Server 2010, cliquez sur Modifier la page.
Dans la zone où vous voulez placer le composant WebPart, cliquez sur Ajouter un composant WebPart.
Dans la liste Catégories, cliquez sur Données métiers.
Cliquez sur Visio Web Access, puis cliquez sur Ajouter.
Cliquez sur la flèche en regard de Menu du composant WebPart, puis cliquez sur Modifier le composant WebPart.
Entrez l’URL du dessin Web (fichier .vdw) que vous voulez ouvrir, puis cliquez sur OK.

Ajout d’un composant WebPart Éditeur de contenu à la page de composants WebPart

Le composant WebPart Éditeur de contenu a deux objectifs : il contient votre code JavaScript et il fournit une interface d’affichage et de contrôle qui vous permet d’interagir en temps réel avec le fichier .vdw dans le composant WebPart Visio Web Access.

Pour ajouter un composant WebPart Éditeur de contenu à une page de composants WebPart

Si la page n’est pas déjà en mode édition, sur le Ruban serveur de la page de composants WebPart SharePoint Server 2010, cliquez sur Modifier la page.
Dans la zone où vous voulez placer le composant WebPart Éditeur de contenu, cliquez sur Ajouter un composant WebPart.
Dans la liste Catégories, cliquez sur Média et contenu.
Dans la liste Composants WebPart, cliquez sur Éditeur de contenu, puis cliquez sur Ajouter.
Cliquez sur la flèche en regard du menu Composant WebPart Éditeur de contenu, puis cliquez sur Modifier le composant WebPart.
Entrez l’URL du fichier .js que vous voulez ouvrir, puis cliquez sur OK.
Sur le ruban, cliquez sur Arrêter la modification.

API ECMAScript Visio Services

Le modèle objet JavaScript dans Visio Services vous permet d’accéder par programme aux dessins Visio affichés en tant que fichiers .vdw dans le composant WebPart Visio Web Access. À l’aide du modèle objet JavaScriptVisio Services, vous pouvez accéder aux données de forme, aux liens hypertexte de forme et aux coordonnées de cadre englobant de forme. Vous pouvez également créer des applications Web hybrides qui ciblent des pages de diagramme spécifiques, sélectionner et mettre en surbrillance les formes, placer des superpositions de marques de révision sur le diagramme, répondre aux événements de souris et modifier les propriétés de panoramique et de zoom de la fenêtre d’affichage. (Une application Web hybride est une application qui vous permet de combiner les fonctionnalités ou les données de plusieurs sources en un support, une application ou un service intégré unique.)

Comme de nombreuses API JavaScript, l’API ECMAScript Visio Services est basée sur les événements. Pour programmer le composant WebPart Visio Web Access, vous écrivez des gestionnaires qui appellent des fonctions en réponse aux événements déclenchés dans le diagramme.

Objets dans l’API ECMAScript Visio Services

L’API JavaScriptVisio Services contient uniquement quatre objets et leurs membres respectifs :

En outre, l’API JavaScriptVisio Services contient quatre énumérations :

Objet VwaControl

L’objet VwaControl représente une instance du composant WebPart Visio Web Access. À l’aide des méthodes de l’objet VwaControl, vous pouvez accéder à des informations sur le composant WebPart et sur le dessin Visio restitué dans le composant WebPart. En outre, ces méthodes vous permettent d’effectuer différentes actions, telles que l’ouverture d’un document Visio dans le composant WebPart, l’obtention et la définition de la page active affichée, l’ajout ou la suppression de gestionnaires d’événements, ainsi que l’affichage ou le masquage des messages personnalisés.

Dans votre code JavaScript, vous pouvez obtenir une référence à l’objet VwaControl en attachant un gestionnaire à l’événement load de la classe Sys.Application ASP.NET AJAX. Dans la fonction qui implémente ce gestionnaire, vous pouvez initialiser l’objet en lui transmettant l’identificateur (ID) HTML du composant WebPart Visio Web Access qui doit héberger l’objet. Vous pouvez obtenir cet ID en examinant le code source de la page HTML qui héberge le composant WebPart et en recherchant l’expression class="VisioWebAccess". Le format de l’ID est « WebPartWPQ*#* », où # représente le numéro d’identification du composant WebPart. L’exemple de code suivant montre comment effectuer cette opération. Il suppose que vous avez déterminé que l’ID du composant WebPart est WebPartWPQ3 et que vous avez ouvert un dessin Visio publié en tant que fichier .vdw dans le composant WebPart.

Sys.Application.add_load(onApplicationLoad)

var webPartElementID = "WebPartWPQ3";
var vwaControl;

function onApplicationLoad() {
        try{
                vwaControl= new Vwa.VwaControl(webPartElementID)
                vwaControl.addHandler("diagramcomplete", onDiagramComplete);
        }
        catch(err){
        }
}

Lorsque vous obtenez une référence à une instance de l’objet VwaControl, vous pouvez utiliser sa méthode openDiagram pour ouvrir, dans le composant WebPart Visio Web Access, un nouveau diagramme basé sur un fichier .vdw Visio publié. Toutefois, après avoir appelé la méthode openDiagram, vous ne pouvez pas référencer la même instance de l’objet VwaControl ou de tout autre objet dans l’espace de noms Vwa. En effet, la méthode openDiagram est une opération asynchrone, qui ouvre le diagramme sur le serveur, puis qui retourne immédiatement. En outre, l’opération asynchrone rend l’objet VwaControl actuel non valide. Pour plus d’informations, voir Vwa.VwaControl.openDiagram Method.

La meilleure façon de suivre un appel à openDiagram consiste à créer un gestionnaire pour l’Vwa.diagramcomplete Event, qui se produit lorsque le composant WebPart Visio Web Access a terminé de charger le diagramme Visio, et à placer votre code dans ce gestionnaire d’événements. Vous pouvez utiliser la Vwa.VwaControl.addHandler Method pour ajouter un gestionnaire d’événements pour l’événement diagramcomplete. Il est recommandé de programmer l’objet VwaControl en écrivant ces gestionnaires d’événements de manière à répondre aux événements déclenchés par des actions utilisateur dans le contrôle. Parmi les autres événements exposés par l’objet VwaControl figurent l’Vwa.shapemouseenter Event, l’Vwa.shapemouseleave Event et l’Vwa.shapeselectionchanged Event, qui vous permettent de répondre aux actions de souris utilisateur, ainsi que l’Vwa.diagramerror Event, qui vous permet de répondre aux erreurs retournées par SharePoint Server 2010.

Dans le gestionnaire de l’événement diagramcomplete, vous pouvez obtenir des références aux autres objets exposés par l’API, notamment l’objet Page et l’objet Shape, ainsi que la collection ShapeCollection. Dans le même gestionnaire, vous pouvez également créer des gestionnaires pour d’autres événements, comme le montre l’exemple de code suivant.

function onDiagramComplete() {
        try {
                vwaPage = vwaControl.getActivePage();
                vwaShapes = vwaPage.getShapes();
                vwaShape = vwaShapes.getItemAtIndex(0);
                vwaControl.addHandler("shapeselectionchanged", onShapeSelectionChanged);
        }
        catch(err) {
        }
}

Cet exemple de code montre comment accomplir les tâches de programmation suivantes :

Utiliser la Vwa.VwaControl.getActivePage Method pour obtenir une référence à une instance de l’objet Page qui représente la page active.
Utiliser la Vwa.Page.getShapes Method de l’objet Page pour obtenir une instance de la collection ShapeCollection qui représente la collection de formes sur la page active.
Utiliser la Vwa.ShapeCollection.getItemAtIndex Method de cette collection pour obtenir une instance de la première forme dans la collection de formes sur la page active.
Ajouter un gestionnaire pour l’événement shapeselectionchanged.

Pour obtenir des informations supplémentaires sur le dessin affiché dans le composant WebPart, vous pouvez utiliser plusieurs méthodes de l’objet VwaControl. Par exemple, vous pouvez utiliser la Vwa.VwaControl.getAllPageIds Method pour obtenir les noms de toutes les pages contenues dans le diagramme. Vous pouvez utiliser la Vwa.VwaControl.getDiagramUrl Method pour obtenir l’URL du diagramme actuellement affiché dans le composant WebPart et la Vwa.VwaControl.getDisplayMode Method pour déterminer si la page de dessin Web actuelle est affichée à l’aide de la technologie de rendu matriciel ou de la technologie Microsoft Silverlight. Vous pouvez également utiliser la Vwa.VwaControl.getVersion Method pour obtenir la version du composant WebPart.

La Vwa.VwaControl.removeHandler Method vous permet de supprimer un gestionnaire d’événements que vous avez ajouté, tandis que la Vwa.VwaControl.clearHandlers Method vous permet de supprimer tous les gestionnaires. Pour afficher et masquer les pages de messages d’erreurs HTML personnalisées, utilisez la Vwa.VwaControl.displayCustomMessage Method et la Vwa.VwaControl.hideCustomMessage Method. Vous pouvez également utiliser la Vwa.VwaControl.setActivePage Method pour modifier la page actuellement affichée dans le composant WebPart et la Vwa.VwaControl.refreshDiagram Method pour actualiser la page de dessin Web actuelle avec des données provenant du serveur.

Objet Page

L’objet Page représente la page de dessin Web active actuellement affichée dans la zone de rendu du composant WebPart Visio Web Access. Vous pouvez utiliser les méthodes de l’objet Page pour sélectionner des formes sur la page et pour accéder à des informations sur les formes, notamment l’ID d’une forme, la position de la forme et la taille du cadre englobant autour de la forme. Vous pouvez également obtenir et définir le niveau de zoom et la position de la page dans l’affichage.

Les méthodes de l’objet Page sont les suivantes :

Outre la méthode getShapes illustrée dans l’exemple de code précédent, la Vwa.Page.getSelectedShape Method, la Vwa.Page.setSelectedShape Method, la Vwa.Page.centerViewOnShape Method et la Vwa.Page.isShapeInView Method vous permettent d’accéder à des informations sur les formes contenues dans la page ou d’interagir avec celles-ci.
La Vwa.Page.getZoom Method vous permet d’obtenir le niveau de zoom de la page, tandis que la Vwa.Page.setZoom Method vous permet de le définir.
La Vwa.Page.getPosition Method vous permet d’obtenir la position de la page dans l’affichage, tandis que la Vwa.Page.setPosition Method vous permet de la définir.
La Vwa.Page.getId Method obtient l’ID de la page actuellement affichée, tandis que la Vwa.Page.getSize Method obtient la hauteur et la largeur de la page restituée.

Objet ShapeCollection

L’objet ShapeCollection représente la collection d’objets de forme sur la page active dans le dessin Web actuellement affiché dans la zone de rendu du composant WebPart Visio Web Access.

Les méthodes de l’objet ShapeCollection sont les suivantes :

La Vwa.ShapeCollection.getCount Method, qui retourne le nombre de formes sur la page active.
Quatre méthodes qui vous permettent d’obtenir des formes spécifiques dans la collection en fonction de leurs noms de forme Visio (Vwa.ShapeCollection.getItemByName Method), de leurs ID de forme de dessin Web (Vwa.ShapeCollection.getItemById Method), de leurs ID uniques Visio (Vwa.ShapeCollection.getItemByGuid Method) et de leur position d’index dans la collection (Vwa.ShapeCollection.getItemAtIndex Method).

Objet Shape

L’objet Shape représente une forme unique sur la page de dessin Web active. Les méthodes de l’objet Shape vous permettent d’obtenir des informations sur une forme spécifique sur la page active et d’interagir avec cette forme :

Les méthodes qui fournissent des informations sur les formes comprennent la Vwa.Shape.getName Method, qui retourne le nom de la forme dans Visio, la Vwa.Shape.getId Method, qui retourne l’ID de la forme dans le dessin Web, la Vwa.Shape.getGuid Method, qui retourne le GUID de la forme dans Visio, la Vwa.Shape.getHyperlinks Method, qui retourne un tableau de tous les liens hypertexte associés à la forme, la Vwa.Shape.getBounds Method, qui retourne la position, la hauteur et la largeur du cadre englobant de la forme, et la Vwa.Shape.getShapeData Method, qui retourne un tableau de tous les éléments de données de forme associés à la forme.
Les méthodes qui vous permettent d’interagir avec une forme comprennent la Vwa.Shape.addHighlight Method et la Vwa.Shape.removeHighlight Method, grâce auxquelles vous pouvez ajouter et supprimer des surbrillances associées à la forme, et la Vwa.Shape.addOverlay Method, la Vwa.Shape.addPredefinedOverlay Method et la Vwa.Shape.removeOverlay Method, grâce auxquelles vous pouvez ajouter et supprimer des superpositions de formes visuelles.

Exemples dans le Kit de développement logiciel (SDK) SharePoint 2010

Le fichier de téléchargement du SDK SharePoint 2010 (Référence SharePoint 2010 : Kit de développement logiciel (SDK) (éventuellement en anglais)) fournit trois exemples de fichiers JavaScript qui illustrent les meilleures pratiques pour la programmation du composant WebPart Visio Web Access et que vous pouvez utiliser dans vos propres pages de composants WebPart. Chaque exemple a une rubrique correspondante dans le Kit de développement logiciel (SDK) qui explique comment utiliser l’exemple, et le code dans chaque exemple de fichier inclut des commentaires d’explication détaillés. Pour télécharger le SDK SharePoint 2010, y compris ces exemples, voir Référence SharePoint 2010 : Kit de développement logiciel (SDK) (éventuellement en anglais). Après avoir installé le Kit de développement logiciel (SDK), vous pouvez rechercher les exemples dans un fichier (.zip) compressé dans le dossier suivant : C:\Program Files (x86)\Microsoft SDKs\SharePoint Server 2010\Samples\Visio Services.

Exemple d’annotations

L’exemple Annotations montre comment annoter une page de dessin Web de deux façons : à l’aide de superpositions de formes et à l’aide de mises en surbrillance de formes. Dans un composant WebPart Éditeur de contenu, l’exemple de code ajoute quatre contrôles de liste permettant aux utilisateurs de choisir des paramètres de dessin pour les annotations. Il ajoute également un bouton qui permet aux utilisateurs de soumettre leurs choix et de dessiner l’annotation.

Exemple de messages d’erreur personnalisés

L’exemple Messages d’erreur personnalisés montre comment utiliser le composant WebPart Visio Web Access pour afficher ou masquer des messages d’erreur HTML personnalisés. Il crée une interface utilisateur pour l’exemple de code composée de deux zones de texte qui servent à capturer le titre et le corps du message d’erreur, et de deux boutons qui servent à afficher ou masquer le message d’erreur.

Exemple d’interaction avec la souris

L’exemple Interaction avec la souris montre comment déclarer des gestionnaires d’événements pour les divers événements Visio Web Access liés à la souris et comment gérer ces événements lorsqu’ils se produisent. Il affiche les notifications d’actions de souris qui se produisent dans un composant WebPart Éditeur de contenu Web, telles que l’entrée d’une forme, la sortie d’une forme ou la modification de la forme sélectionnée.