CMenu
Création d'un menu contextuel SharePoint
09/11/2010
1307 lectures
1 commentaire
5/5 (4 votes)
SharePoint contient un grand nombre de fonctionnalités non exposées explicitement au public. Parmi celles-ci se trouve la possibilité de créer des menus contextuels au look and feel de SharePoint. Par exemple, prenez un « People Editor ». Si vous tapez le nom approximatif d’un utilisateur, celui-ci va vous proposer un menu avec les différents utilisateurs correspondant à ce que vous avez entré :
Ce type de menu se trouve à plusieurs endroits (dans l’EditControlBlock par exemple) et est généré dynamiquement en JavaScript. Effectivement, le fichier « CORE.js » de SharePoint 2007 contient quelques fonctions permettant de générer et d’afficher un menu de ce type. Avant de voir comment s’en servir, nous allons voir comment connaitre le nom de ces fonctions. Effectivement, il n’y a pas beaucoup d’informations sur Internet sur les menus SharePoint, ce qui porte à croire que ce n’est pas très documenté de la part de Microsoft. Nous allons donc voir nous-même comment retracer la construction de ce menu.
Pour cela, nous allons encore utiliser la console de développement d’Internet Explorer, donc si vous ne l’avez pas, téléchargez-la ici. Rendez-vous maintenant sur une page où se trouve un « People Editor ». Par exemple Site Actions > Site Settings > People And Groups > New. Entrez maintenant un nom approximatif dans le « People Editor » pour que celui-ci vous propose un menu de correction. Une fois que le nom de l’utilisateur devient italique, ouvrez la « Developer Toolbar », cliquez sur le curseur et cliquez ensuite sur le nom en italique de l’utilisateur. Le résultat suivant devrait vous être affiché :
Vous pouvez voir que le « span » contenant le nom de l’utilisateur en italique possède 2 événements « JavaScript ». Si nous regardons « onmousedown », nous voyons que la fonction appelée est « onMouseDownRw() ». Ouvrez maintenant le fichier « CORE.js » de SharePoint (12\TEMPLATE\LAYOUTS\1033\CORE.js) et recherchez cette fonction.
Cette fonction permet simplement d’initialiser la variable « g_oSelRw » par la sélection du contenu du « span » du « People Editor ». Vous vous doutez bien évidemment que ce n’est pas cette fonction qui affiche le menu. Penchons-nous donc du côté de la fonction « onContentMenuSpnRw ». Recherchez-la également dans le « CORE.js » :
Remarquez que la première ligne de cette fonction initialise une variable avec le contenu de « g_oSelRw ». Souvenez-vous que cette variable a été initialisée dans la fonction « onMouseDownRw » expliquée précédemment. Nous n’allons pas passer en revue cette fonction, nous allons juste nous attarder sur l’appel à la fonction « onClickRw ». Cette fonction, comme son nom l’indique, est appelée lors d’un clic sur une ligne (Rw = Row = ligne). Le code de cette fonction étant trop conséquent, nous n’allons afficher que le contenu important.
Nous avons supprimé le début de la fonction et garder uniquement la fin. Celle-ci va être responsable de l’affichage du menu. Tout d’abord, il faut savoir que SharePoint a besoin d’avoir une référence à l’élément HTML qui est responsable de l’affichage du menu. Ainsi, il sera capable de positionner ce menu sur base de la position de cet élément. Ensuite, la fonction « DeferCall » va appeler la fonction « CMenu ». C’est cette fonction qui va être responsable de la création du menu (CMenu = CreateMenu). Le deuxième paramètre de cette fonction est l’id du « div » qui va contenir le menu. Une variable globale qui s’incrémente après chaque appel à cette fonction est donc utilisée pour s’assurer que l’id sera unique.
Les quelques lignes qui s’ensuivent permettent de récupérer le texte à afficher dans le menu. Par exemple « More items », « Remove »,… Une fois ces différentes valeurs récupérées, cette fonction va se charger d’insérer les différents éléments dans le menu. En l’occurrence, le nom des utilisateurs correspondant à la valeur rentrée dans le « People Editor ». La boucle « for » va permettre de faire cela en appelant la fonction « CAMOpt ». Cette fonction est responsable de l’ajout d’entrée dans le menu. Nous verrons plus loin à quoi servent ses différents paramètres. La fonction « CAMSep » est ensuite appelée. Celle-ci permet simplement d’ajouter une ligne de séparation dans le menu. Deux éléments supplémentaires sont rajoutés au menu. Ceux-ci affichent simplement les labels « Remove » et « More Items… » dans le menu. Enfin, la fonction « Omenu » affiche le menu en question.
Voyez maintenant la déclaration de la fonction « CAMOpt » :
En gros, cette fonction appelle la fonction « CMOpt » pour créer l’élément de menu. Une fois cet élément créé et renvoyé, la fonction se charge de l’ajouter au menu passé en paramètre. La déclaration de « CMOpt » est la suivante :
Vous voyez qu’ici, la fonction crée un élément de menu et en définit les différents paramètres. Nous voyons donc que « wzText » sera l’attribut « text » de l’entrée, donc le texte affiché. Le paramètre « wzAct » sera la fonction appelée pour l’événement « onMenuClick » de l’entrée de menu. « wzDesc » sera la description et « wzSeq » la séquence de l’élément de menu. La fonction « AImg » est également appelée pour afficher une image à gauche de l’entrée. Cette image est contenu dans l’argument « wzISrc » et son texte alternatif est contenu dans l’argument « wzIAlt ».
La fonction « CAMSep » fonctionne approximativement de la même manière pour afficher une ligne de séparation. Quant à la fonction « OMenu », celle-ci fait appel à beaucoup de fonctions « JavaScript » pour afficher le menu. L’étudier entièrement prendrait beaucoup trop longtemps, nous nous contenterons donc de dire que cette fonction est responsable de l’affichage du menu.
Ce qu’il faut retenir de tout cela est donc :
- CMenu : Création du menu
- CAMOpt : Appelle CMOpt
- CMOpt : Crée une entrée de menu et apelle AImg
- AImg : Ajoute une image à l’entrée de menu
- OMenu : Affiche le menu
Maintenant que nous connaissons tout cela, nous pouvons démarrer notre projet. Celui-ci sera une WebPart affichant deux « Textbox » suivi chacun d’une image permettant de sélectionner une valeur. L’ensemble des valeurs sélectionnables seront affichées dans un menu. Le but de la « WebPart » sera de créer des sessions de cours. Pour cela, nous nous baserons sur 4 listes.
Cette liste ne contient pas de champ additionnel. Le champ « Title » contiendra le nom des différentes technologies visées par les cours.
En plus du champ « Title », cette liste contient un champ « Technologie » de type « Lookup » pointant sur la liste « Technologies ». Cette liste contiendra des matières de cours liées à une technologie.
Cette liste contiendra 2 champs supplémentaires. Le champ « Technologies » qui est un « Lookup » vers la liste « Technologies » et le champ « Genre » qui est de type « Choice » contenant les valeurs « Homme » et « Femme ». Cette liste contiendra les différents professeurs pouvant être affectés à des sessions de cours. Ici, pour simplifier les choses, nous n’entrerons qu’une seule technologie dans le champ « Technologies ».
Enfin, cette liste contiendra les différentes sessions de cours créées par notre « Web part ». Elle contiendra donc un champ « Cours » étant un « Lookup » vers la liste des cours et un champ « Professeur » étant un « Lookup » vers la liste des professeurs.
Ouvrez maintenant Visual Studio 2008 et créez un nouveau projet de type « WSPBuilder Project » que vous nommerez « AreaProg.CMenu » :
La première chose que nous allons faire est de créer la « WebPart » qui affichera l’interface utilisateur. Faites donc un clic droit sur votre projet et choisissez Add > New Item > WebPart Feature et nommez-la « CMenuWp ».
Donnez alors un nom et une description à votre « Web Part » et définissez son « Scope » sur « Site ». Faites ensuite un clic droit sur le dossier « TEMPLATE » de votre solution et choisissez Add > New Folder. Nommez ce dernier « IMAGES » et ajoutez-y les images contenues dans ce fichier. Ces dernières seront utilisées par notre « Web part ».
Pour pouvoir interagir avec nos contrôles HTML en JavaScript, il est plus simple de ne pas passer par des contrôles ASP.NET et d’utiliser des contrôles HTML simples. Pour faire cela, nous allons créer un fichier « ascx » simple que nous chargerons dans notre « Web Part ». Ce genre de fichiers doit être stocké dans le répertoire 12\TEMPLATE\CONTROLTEMPLATES. Faites donc un clic droit sur le dossier « TEMPLATE » de votre solution, choisissez Add > New Folder et nommez-le « CONTROLTEMPLATES ».
Refaites maintenant un clic droit sur ce dossier et choisissez Add > New Item. Dans la fenêtre qui s’affiche, sélectionnez « General » dans la partie gauche de la fenêtre et « Text File » dans la partie droite. Nommez ensuite ce fichier « CMenu.ascx » et validez.
Insérez ensuite le code suivant dans ce fichier :
Celui-ci sert simplement à afficher l’interface utilisateur de notre « Web Part ». Remarquez que nous faisons appel à 3 fonctions JavaScript différentes : showCoursMenu, showProfesseurMenu et AddItem. Nous implémenterons ces fonctions plus loin dans ce cours. Pour l’instant, ouvrez le fichier « CMenuWp.cs ». Commencez par supprimer tout le contenu de la classe « CMenuWp ». Supprimez ensuite « Microsoft.SharePoint.WebPartPages » du nom de la classe de laquelle la nôtre hérite. Cela nous permettra d’hériter de la classe « WebPart » du « namespace System.Web.UI.WebControls.WebParts » (conseillé). Enfin, implémentez les fonctions suivantes :
Dans la fonction « onPreRender », nous allons charger les fichiers « JavaScript » que notre « Web part » va utiliser. La fonction « CreateChildControls », elle, permettra simplement de charger notre contrôle utilisateur dans la « Web Part ».
Passons maintenant au code « JavaScript » de notre projet. Pour cela, commencez tout d’abord par créer un dossier « LAYOUTS » dans le dossier « TEMPLATE » de votre solution. Ajoutez ensuite dans ce dossier le fichier « JavaScript » contenant le code de « JQuery ». Ce dernier peut être téléchargé sur le site officiel de JQUery. Enfin, faites un clic droit sur le dossier « LAYOUTS », choisissez Add > New Item > JScript File et nommez-le « CMenu.js ».
Nous sommes maintenant fin prêt à implémenter nos fonctions. Commencez par déclarer ces quelques variables globales :
Les deux premières variables sont des tableaux qui contiendront les différents cours et professeurs contenus dans les listes SharePoint. Les deux autres variable contiendront le cours et le professeur sélectionné pour la session que nous voulons créer.
Au chargement de la « Web part », il va falloir charger les différents cours dans le tableau contenant ceux-ci. Pour ce faire, tapez cette fonction dans votre fichier « JavaScript » :
« $(document).ready » permet simplement de lancer une fonction une fois que la page a fini de charger. Ici, nous appelons la fonction « getListItems ». Cette fonction permet de récupérer les éléments d’une liste (premier paramètre). Le deuxième paramètre définit la fonction à exécuter une fois que ces éléments sont récupérés et le troisième paramètre indique les « viewFields » de la requête. Voici cette fonction :
Ici, nous allons discuter avec le « Web Service Lists.asmx » pour récupérer les éléments qui nous intéresse. Dans le code HTML de notre contrôle « ascx », nous avons inséré deux images à côtés des « TextBox ». Celles-ci se nommaient « imgCours » et « imgProfesseurs ». Lorsque nous chargerons les éléments correspondants (donc les cours ou les professeurs), nous modifions cette image sur un curseur de chargement déjà présent dans les fichiers de SharePoint : 12\TEMPLATE\IMAGES\loading.gif. C’est le but de la première ligne de la fonction.
Ensuite, nous construisons la requête sur base du nom de la liste et des « ViewFields » et nous plaçons le résultat dans la variable « request ». Notez que nous n’ajoutons l’élément « Query » que si le paramètre « query » a été mentionné. Enfin, nous utilisons l’objet « .ajax » de « JQuery » pour appeler le « Web Service » et lui faire passer la requête. Deux choses sont importantes dans cet appel. Premièrement, il ne faut pas oublier le « beforeSend » qui permet de modifier l’entête « SOAPAction ». Ensuite, remarquez que la fonction appelée en cas de réussite de l’exécution est celle passée en paramètre de la fonction. Donc, dans le cas du premier appel à la fonction « getListItems » (celui du $(document).ready), c’est la fonction « createCoursMenu » qui sera appelée.
Nous allons donc définir cette fonction :
Nous commençons par initialiser le tableau des cours. Ensuite, nous parcourons tous les éléments « z:row » de la réponse renvoyée par le « Web Service » et nous les ajoutons dans tableau sous forme « ID ;#Title ;#Technologie ». Enfin, nous modifions l’image en conséquence. Si le tableau est vide, nous affichons « showMenu_disabled », dans le cas contraire, nous affichons « showMenu_enabled ».
Déclarez ensuite la fonction suivante :
Cette fonction est quasiment la même que « createCoursMenu » à l’exception faite que celle-ci initialise le tableau des professeurs et non celui des cours. Nous verrons où cette fonction sera appelée dans notre code.
Pour l’instant, nous avons déclaré la fonction qui permettait de charger le tableau des cours et celle permettant de charger le tableau des professeurs. Nous allons maintenant devoir implémenter la fonction permettant d’afficher le menu des cours lorsque nous cliquons sur l’image correspondante.
Nous commençons par créer un menu avec l’id « mnu_cours ». Nous parcourons ensuite le tableau des cours et plaçons chacun de ceux-ci dans la variable « item » au fur et à mesure de l’exécution de la boucle ». Le principe va être que lorsque nous cliquons sur un élément de ce menu, nous appelons le « Web Service » pour qu’il récupère les professeurs susceptibles de pouvoir donner le cours en question. Pour cela, nous allons nous baser sur le champ « Technologies » qui définit la technologie dont le professeur est responsable. Pour chaque élément, nous créons donc une requête « CAML » qui va se charger de récupérer les professeurs pour lesquels le champ « Technologies » est égal à la technologie du cours identifié par l’élément de menu.
Pour chaque élément, nous devons appeler la fonction « CAMOpt » pour ajouter l’entrée de menu. Le premier paramètre définit le menu auquel nous voulons ajouter l’entrée. En l’occurrence, celui que l’on vient de créer. Nous faisons passer en deuxième paramètre le titre du cours. Enfin, le troisième paramètre définit le code « JavaScript » à utiliser lorsque nous cliquerons sur l’élément du menu. Premièrement, nous appelons la fonction « getListItems » pour récupérer les professeurs pouvant donner ce cours (grâce à la requête « CAML » créée précédemment). Ensuite, nous modifions la valeur du « TextBox » devant contenir le cours sélectionné. Enfin, nous modifions la valeur de la variable « cmt_selectedCours » par l’ID et le titre du cours sélectionné. Voyez que nous utilisons la fonction « STSScriptEncode » pour échapper les apostrophes et guillemets.
Pour l’instant, l’exécution des différentes requêtes JavaScript est logique (espérons qu’elle le reste :-p). Au chargement, tous les cours sont chargés dans le tableau correspondant. Lorsque nous cliquons sur l’image pour afficher le menu des cours, celui-ci est construit à partir du tableau. Chaque élément de ce menu va appeler la fonction « getListItems ». Cette fonction récupérera les professeurs pouvant donner ce cours (en se basant sur le champ « Technologies ») et exécutera la fonction « createProfesseursMenu » une fois ces éléments récupérés (nous avons défini cette fonction précédemment).
Nous devons encore définir la méthode qui sera appelée lorsque nous voudrons afficher le menu des professeurs.
Nous vérifions tout d’abord que le tableau des professeurs contient bien des valeurs. Si ce n’est pas le cas, nous quittons la fonction. Nous créons ensuite le menu avant de parcourir tous les professeurs du tableau. La requête passée à la fonction va trier les professeurs selon le champ « Genre » pour avoir d’abord les femmes et ensuite les hommes. Les deux « if » vont permettre d’afficher une ligne de séparation entre la dernière femme et le premier homme. Pour cela, nous utilisons simplement la fonction « CAMSep » à laquelle nous faisons passer une référence au menu que nous avons créé.
Nous créons ensuite les éléments du menu grâce à la fonction « CAMOpt » que nous avons déjà utilisée précédemment. Le code « JavaScript » a exécuter lorsque nous cliquerons sur l’élément du menu permet simplement d’initialiser la valeur du « TextBox » et la variable « cmt_selectedProfesseurs » par le professeur sélectionné. Nous passons également deux arguments en plus à la fonction « CAMOpt ». Le premier définit l’image à afficher à gauche de l’élément, ici, soit « Homme.png », soit « Femme.png », cela dépend de la variable du champ « Genre ». Le derniere paramètre définit simplement le texte alternatif à afficher dans le cas où l’image ne peut être trouvée.
A ce stade du développement, tout fonctionne bien sauf l’ajout de l’élément. Pour cela, nous devons déclarer les fonctions suivantes :
La première fonction est celle qui va ajouter l’élément. Tout d’abord, elle vérifie la valeur des deux variables contenant le cours sélectionné et le professeur sélectionné. Ensuite, nous faisons simplement appel au « Web Service » pour créer l’élément dans la liste. Voyez que le format de la requête à passer est un « Batch » qui créera l’élément. Pour plus d’informations sur ce format, lisez ce cours : http://www.areaprog.com/SP2007/cours-406-sharepoint-2007-processbatchdata-utilisation-des-requetes-batch.
Si l’ajout réussi, nous exécutons la fonction « itemAdded » qui va simplement réinitialiser toutes les variables et afficher un message indiquant que l’ajout s’est bien passé.
Si nous déployons et testons notre « Web Part » voici ce que vous obtiendrez :
Comme vous le voyez, les menus sont bien générés et affichés.
Ce cours était un petit peu plus difficile à expliquer (et surement à comprendre) que les autres, donc si vous avez la moindre question, n’hésitez pas à laisser un commentaire pour la poser et je tâcherai d’y répondre le plus clairement possible.
Télécharger
Ce type de menu se trouve à plusieurs endroits (dans l’EditControlBlock par exemple) et est généré dynamiquement en JavaScript. Effectivement, le fichier « CORE.js » de SharePoint 2007 contient quelques fonctions permettant de générer et d’afficher un menu de ce type. Avant de voir comment s’en servir, nous allons voir comment connaitre le nom de ces fonctions. Effectivement, il n’y a pas beaucoup d’informations sur Internet sur les menus SharePoint, ce qui porte à croire que ce n’est pas très documenté de la part de Microsoft. Nous allons donc voir nous-même comment retracer la construction de ce menu.
Pour cela, nous allons encore utiliser la console de développement d’Internet Explorer, donc si vous ne l’avez pas, téléchargez-la ici. Rendez-vous maintenant sur une page où se trouve un « People Editor ». Par exemple Site Actions > Site Settings > People And Groups > New. Entrez maintenant un nom approximatif dans le « People Editor » pour que celui-ci vous propose un menu de correction. Une fois que le nom de l’utilisateur devient italique, ouvrez la « Developer Toolbar », cliquez sur le curseur et cliquez ensuite sur le nom en italique de l’utilisateur. Le résultat suivant devrait vous être affiché :
Vous pouvez voir que le « span » contenant le nom de l’utilisateur en italique possède 2 événements « JavaScript ». Si nous regardons « onmousedown », nous voyons que la fonction appelée est « onMouseDownRw() ». Ouvrez maintenant le fichier « CORE.js » de SharePoint (12\TEMPLATE\LAYOUTS\1033\CORE.js) et recherchez cette fonction.
Cette fonction permet simplement d’initialiser la variable « g_oSelRw » par la sélection du contenu du « span » du « People Editor ». Vous vous doutez bien évidemment que ce n’est pas cette fonction qui affiche le menu. Penchons-nous donc du côté de la fonction « onContentMenuSpnRw ». Recherchez-la également dans le « CORE.js » :
Remarquez que la première ligne de cette fonction initialise une variable avec le contenu de « g_oSelRw ». Souvenez-vous que cette variable a été initialisée dans la fonction « onMouseDownRw » expliquée précédemment. Nous n’allons pas passer en revue cette fonction, nous allons juste nous attarder sur l’appel à la fonction « onClickRw ». Cette fonction, comme son nom l’indique, est appelée lors d’un clic sur une ligne (Rw = Row = ligne). Le code de cette fonction étant trop conséquent, nous n’allons afficher que le contenu important.
Nous avons supprimé le début de la fonction et garder uniquement la fin. Celle-ci va être responsable de l’affichage du menu. Tout d’abord, il faut savoir que SharePoint a besoin d’avoir une référence à l’élément HTML qui est responsable de l’affichage du menu. Ainsi, il sera capable de positionner ce menu sur base de la position de cet élément. Ensuite, la fonction « DeferCall » va appeler la fonction « CMenu ». C’est cette fonction qui va être responsable de la création du menu (CMenu = CreateMenu). Le deuxième paramètre de cette fonction est l’id du « div » qui va contenir le menu. Une variable globale qui s’incrémente après chaque appel à cette fonction est donc utilisée pour s’assurer que l’id sera unique.
Les quelques lignes qui s’ensuivent permettent de récupérer le texte à afficher dans le menu. Par exemple « More items », « Remove »,… Une fois ces différentes valeurs récupérées, cette fonction va se charger d’insérer les différents éléments dans le menu. En l’occurrence, le nom des utilisateurs correspondant à la valeur rentrée dans le « People Editor ». La boucle « for » va permettre de faire cela en appelant la fonction « CAMOpt ». Cette fonction est responsable de l’ajout d’entrée dans le menu. Nous verrons plus loin à quoi servent ses différents paramètres. La fonction « CAMSep » est ensuite appelée. Celle-ci permet simplement d’ajouter une ligne de séparation dans le menu. Deux éléments supplémentaires sont rajoutés au menu. Ceux-ci affichent simplement les labels « Remove » et « More Items… » dans le menu. Enfin, la fonction « Omenu » affiche le menu en question.
Voyez maintenant la déclaration de la fonction « CAMOpt » :
En gros, cette fonction appelle la fonction « CMOpt » pour créer l’élément de menu. Une fois cet élément créé et renvoyé, la fonction se charge de l’ajouter au menu passé en paramètre. La déclaration de « CMOpt » est la suivante :
Vous voyez qu’ici, la fonction crée un élément de menu et en définit les différents paramètres. Nous voyons donc que « wzText » sera l’attribut « text » de l’entrée, donc le texte affiché. Le paramètre « wzAct » sera la fonction appelée pour l’événement « onMenuClick » de l’entrée de menu. « wzDesc » sera la description et « wzSeq » la séquence de l’élément de menu. La fonction « AImg » est également appelée pour afficher une image à gauche de l’entrée. Cette image est contenu dans l’argument « wzISrc » et son texte alternatif est contenu dans l’argument « wzIAlt ».
La fonction « CAMSep » fonctionne approximativement de la même manière pour afficher une ligne de séparation. Quant à la fonction « OMenu », celle-ci fait appel à beaucoup de fonctions « JavaScript » pour afficher le menu. L’étudier entièrement prendrait beaucoup trop longtemps, nous nous contenterons donc de dire que cette fonction est responsable de l’affichage du menu.
Ce qu’il faut retenir de tout cela est donc :
- CMenu : Création du menu
- CAMOpt : Appelle CMOpt
- CMOpt : Crée une entrée de menu et apelle AImg
- AImg : Ajoute une image à l’entrée de menu
- OMenu : Affiche le menu
Maintenant que nous connaissons tout cela, nous pouvons démarrer notre projet. Celui-ci sera une WebPart affichant deux « Textbox » suivi chacun d’une image permettant de sélectionner une valeur. L’ensemble des valeurs sélectionnables seront affichées dans un menu. Le but de la « WebPart » sera de créer des sessions de cours. Pour cela, nous nous baserons sur 4 listes.
Technologies
Cette liste ne contient pas de champ additionnel. Le champ « Title » contiendra le nom des différentes technologies visées par les cours.
Cours
En plus du champ « Title », cette liste contient un champ « Technologie » de type « Lookup » pointant sur la liste « Technologies ». Cette liste contiendra des matières de cours liées à une technologie.
Professeurs
Cette liste contiendra 2 champs supplémentaires. Le champ « Technologies » qui est un « Lookup » vers la liste « Technologies » et le champ « Genre » qui est de type « Choice » contenant les valeurs « Homme » et « Femme ». Cette liste contiendra les différents professeurs pouvant être affectés à des sessions de cours. Ici, pour simplifier les choses, nous n’entrerons qu’une seule technologie dans le champ « Technologies ».
Sessions
Enfin, cette liste contiendra les différentes sessions de cours créées par notre « Web part ». Elle contiendra donc un champ « Cours » étant un « Lookup » vers la liste des cours et un champ « Professeur » étant un « Lookup » vers la liste des professeurs.
Ouvrez maintenant Visual Studio 2008 et créez un nouveau projet de type « WSPBuilder Project » que vous nommerez « AreaProg.CMenu » :
La première chose que nous allons faire est de créer la « WebPart » qui affichera l’interface utilisateur. Faites donc un clic droit sur votre projet et choisissez Add > New Item > WebPart Feature et nommez-la « CMenuWp ».
Donnez alors un nom et une description à votre « Web Part » et définissez son « Scope » sur « Site ». Faites ensuite un clic droit sur le dossier « TEMPLATE » de votre solution et choisissez Add > New Folder. Nommez ce dernier « IMAGES » et ajoutez-y les images contenues dans ce fichier. Ces dernières seront utilisées par notre « Web part ».
Pour pouvoir interagir avec nos contrôles HTML en JavaScript, il est plus simple de ne pas passer par des contrôles ASP.NET et d’utiliser des contrôles HTML simples. Pour faire cela, nous allons créer un fichier « ascx » simple que nous chargerons dans notre « Web Part ». Ce genre de fichiers doit être stocké dans le répertoire 12\TEMPLATE\CONTROLTEMPLATES. Faites donc un clic droit sur le dossier « TEMPLATE » de votre solution, choisissez Add > New Folder et nommez-le « CONTROLTEMPLATES ».
Refaites maintenant un clic droit sur ce dossier et choisissez Add > New Item. Dans la fenêtre qui s’affiche, sélectionnez « General » dans la partie gauche de la fenêtre et « Text File » dans la partie droite. Nommez ensuite ce fichier « CMenu.ascx » et validez.
Insérez ensuite le code suivant dans ce fichier :
Celui-ci sert simplement à afficher l’interface utilisateur de notre « Web Part ». Remarquez que nous faisons appel à 3 fonctions JavaScript différentes : showCoursMenu, showProfesseurMenu et AddItem. Nous implémenterons ces fonctions plus loin dans ce cours. Pour l’instant, ouvrez le fichier « CMenuWp.cs ». Commencez par supprimer tout le contenu de la classe « CMenuWp ». Supprimez ensuite « Microsoft.SharePoint.WebPartPages » du nom de la classe de laquelle la nôtre hérite. Cela nous permettra d’hériter de la classe « WebPart » du « namespace System.Web.UI.WebControls.WebParts » (conseillé). Enfin, implémentez les fonctions suivantes :
Dans la fonction « onPreRender », nous allons charger les fichiers « JavaScript » que notre « Web part » va utiliser. La fonction « CreateChildControls », elle, permettra simplement de charger notre contrôle utilisateur dans la « Web Part ».
Passons maintenant au code « JavaScript » de notre projet. Pour cela, commencez tout d’abord par créer un dossier « LAYOUTS » dans le dossier « TEMPLATE » de votre solution. Ajoutez ensuite dans ce dossier le fichier « JavaScript » contenant le code de « JQuery ». Ce dernier peut être téléchargé sur le site officiel de JQUery. Enfin, faites un clic droit sur le dossier « LAYOUTS », choisissez Add > New Item > JScript File et nommez-le « CMenu.js ».
Nous sommes maintenant fin prêt à implémenter nos fonctions. Commencez par déclarer ces quelques variables globales :
Les deux premières variables sont des tableaux qui contiendront les différents cours et professeurs contenus dans les listes SharePoint. Les deux autres variable contiendront le cours et le professeur sélectionné pour la session que nous voulons créer.
Au chargement de la « Web part », il va falloir charger les différents cours dans le tableau contenant ceux-ci. Pour ce faire, tapez cette fonction dans votre fichier « JavaScript » :
« $(document).ready » permet simplement de lancer une fonction une fois que la page a fini de charger. Ici, nous appelons la fonction « getListItems ». Cette fonction permet de récupérer les éléments d’une liste (premier paramètre). Le deuxième paramètre définit la fonction à exécuter une fois que ces éléments sont récupérés et le troisième paramètre indique les « viewFields » de la requête. Voici cette fonction :
Ici, nous allons discuter avec le « Web Service Lists.asmx » pour récupérer les éléments qui nous intéresse. Dans le code HTML de notre contrôle « ascx », nous avons inséré deux images à côtés des « TextBox ». Celles-ci se nommaient « imgCours » et « imgProfesseurs ». Lorsque nous chargerons les éléments correspondants (donc les cours ou les professeurs), nous modifions cette image sur un curseur de chargement déjà présent dans les fichiers de SharePoint : 12\TEMPLATE\IMAGES\loading.gif. C’est le but de la première ligne de la fonction.
Ensuite, nous construisons la requête sur base du nom de la liste et des « ViewFields » et nous plaçons le résultat dans la variable « request ». Notez que nous n’ajoutons l’élément « Query » que si le paramètre « query » a été mentionné. Enfin, nous utilisons l’objet « .ajax » de « JQuery » pour appeler le « Web Service » et lui faire passer la requête. Deux choses sont importantes dans cet appel. Premièrement, il ne faut pas oublier le « beforeSend » qui permet de modifier l’entête « SOAPAction ». Ensuite, remarquez que la fonction appelée en cas de réussite de l’exécution est celle passée en paramètre de la fonction. Donc, dans le cas du premier appel à la fonction « getListItems » (celui du $(document).ready), c’est la fonction « createCoursMenu » qui sera appelée.
Nous allons donc définir cette fonction :
Nous commençons par initialiser le tableau des cours. Ensuite, nous parcourons tous les éléments « z:row » de la réponse renvoyée par le « Web Service » et nous les ajoutons dans tableau sous forme « ID ;#Title ;#Technologie ». Enfin, nous modifions l’image en conséquence. Si le tableau est vide, nous affichons « showMenu_disabled », dans le cas contraire, nous affichons « showMenu_enabled ».
Déclarez ensuite la fonction suivante :
Cette fonction est quasiment la même que « createCoursMenu » à l’exception faite que celle-ci initialise le tableau des professeurs et non celui des cours. Nous verrons où cette fonction sera appelée dans notre code.
Pour l’instant, nous avons déclaré la fonction qui permettait de charger le tableau des cours et celle permettant de charger le tableau des professeurs. Nous allons maintenant devoir implémenter la fonction permettant d’afficher le menu des cours lorsque nous cliquons sur l’image correspondante.
Nous commençons par créer un menu avec l’id « mnu_cours ». Nous parcourons ensuite le tableau des cours et plaçons chacun de ceux-ci dans la variable « item » au fur et à mesure de l’exécution de la boucle ». Le principe va être que lorsque nous cliquons sur un élément de ce menu, nous appelons le « Web Service » pour qu’il récupère les professeurs susceptibles de pouvoir donner le cours en question. Pour cela, nous allons nous baser sur le champ « Technologies » qui définit la technologie dont le professeur est responsable. Pour chaque élément, nous créons donc une requête « CAML » qui va se charger de récupérer les professeurs pour lesquels le champ « Technologies » est égal à la technologie du cours identifié par l’élément de menu.
Pour chaque élément, nous devons appeler la fonction « CAMOpt » pour ajouter l’entrée de menu. Le premier paramètre définit le menu auquel nous voulons ajouter l’entrée. En l’occurrence, celui que l’on vient de créer. Nous faisons passer en deuxième paramètre le titre du cours. Enfin, le troisième paramètre définit le code « JavaScript » à utiliser lorsque nous cliquerons sur l’élément du menu. Premièrement, nous appelons la fonction « getListItems » pour récupérer les professeurs pouvant donner ce cours (grâce à la requête « CAML » créée précédemment). Ensuite, nous modifions la valeur du « TextBox » devant contenir le cours sélectionné. Enfin, nous modifions la valeur de la variable « cmt_selectedCours » par l’ID et le titre du cours sélectionné. Voyez que nous utilisons la fonction « STSScriptEncode » pour échapper les apostrophes et guillemets.
Pour l’instant, l’exécution des différentes requêtes JavaScript est logique (espérons qu’elle le reste :-p). Au chargement, tous les cours sont chargés dans le tableau correspondant. Lorsque nous cliquons sur l’image pour afficher le menu des cours, celui-ci est construit à partir du tableau. Chaque élément de ce menu va appeler la fonction « getListItems ». Cette fonction récupérera les professeurs pouvant donner ce cours (en se basant sur le champ « Technologies ») et exécutera la fonction « createProfesseursMenu » une fois ces éléments récupérés (nous avons défini cette fonction précédemment).
Nous devons encore définir la méthode qui sera appelée lorsque nous voudrons afficher le menu des professeurs.
Nous vérifions tout d’abord que le tableau des professeurs contient bien des valeurs. Si ce n’est pas le cas, nous quittons la fonction. Nous créons ensuite le menu avant de parcourir tous les professeurs du tableau. La requête passée à la fonction va trier les professeurs selon le champ « Genre » pour avoir d’abord les femmes et ensuite les hommes. Les deux « if » vont permettre d’afficher une ligne de séparation entre la dernière femme et le premier homme. Pour cela, nous utilisons simplement la fonction « CAMSep » à laquelle nous faisons passer une référence au menu que nous avons créé.
Nous créons ensuite les éléments du menu grâce à la fonction « CAMOpt » que nous avons déjà utilisée précédemment. Le code « JavaScript » a exécuter lorsque nous cliquerons sur l’élément du menu permet simplement d’initialiser la valeur du « TextBox » et la variable « cmt_selectedProfesseurs » par le professeur sélectionné. Nous passons également deux arguments en plus à la fonction « CAMOpt ». Le premier définit l’image à afficher à gauche de l’élément, ici, soit « Homme.png », soit « Femme.png », cela dépend de la variable du champ « Genre ». Le derniere paramètre définit simplement le texte alternatif à afficher dans le cas où l’image ne peut être trouvée.
A ce stade du développement, tout fonctionne bien sauf l’ajout de l’élément. Pour cela, nous devons déclarer les fonctions suivantes :
La première fonction est celle qui va ajouter l’élément. Tout d’abord, elle vérifie la valeur des deux variables contenant le cours sélectionné et le professeur sélectionné. Ensuite, nous faisons simplement appel au « Web Service » pour créer l’élément dans la liste. Voyez que le format de la requête à passer est un « Batch » qui créera l’élément. Pour plus d’informations sur ce format, lisez ce cours : http://www.areaprog.com/SP2007/cours-406-sharepoint-2007-processbatchdata-utilisation-des-requetes-batch.
Si l’ajout réussi, nous exécutons la fonction « itemAdded » qui va simplement réinitialiser toutes les variables et afficher un message indiquant que l’ajout s’est bien passé.
Si nous déployons et testons notre « Web Part » voici ce que vous obtiendrez :
Comme vous le voyez, les menus sont bien générés et affichés.
Ce cours était un petit peu plus difficile à expliquer (et surement à comprendre) que les autres, donc si vous avez la moindre question, n’hésitez pas à laisser un commentaire pour la poser et je tâcherai d’y répondre le plus clairement possible.
Télécharger
1 commentaires
Marc a dit:
Très bon article, bien détaillé et de haut niveau.
Merci :)
Ajouter un commentaire