Nous allons continuer dans le domaine de l'ECMA Script avec quelque chose de plus simple que le cours précédent. Ici, nous allons parler des Guid et de la manière d'en générer. Ce cours ne sera donc pas très compliqué. Nous allons créer une Visual Web Part qui affichera ceci :



Ouvrez donc Visual Studio 2010 et créez un nouveau projet de type Empty SharePoint Project que vous nommerez AreaProg.Ecma.Guid :



Nous allons ajouter une Visual Web Part qui déploiera des fichiers dans un dossier "système" de SharePoint, déployez donc cette solution en tant que solution de ferme :



Cliquez ensuite avec le bouton droit de votre souris sur votre projet, choisissez Add > New Item, sélectionnez Visual Web Part et nommez-la EcmaGuid :



Cliquez enfin sur l'élément Feature1 et modifiez sa propriété Folder Name sur EcmaGuid. Double-cliquez ensuite sur le fichier EcmaGuidUserControl.ascx.cs qui contient le code-behind de votre contrôle. Remplacez la fonction Page_Load par celle-ci :

protected override void OnPreRender(EventArgs e) { ScriptLink.RegisterOnDemand(this.Page, "sp.js", false); }

Et ajoutez la directive suivante :

using Microsoft.SharePoint.WebControls;

Ce code permet de charger le fichier sp.js au chargement du contrôle. Ce fichier contient des fonctions utiles d'EcmaScript. Insérez ensuite le code suivant dans le fichier EcmaGuidUserControl.ascx :

<input type="text" id="tbValue" /> <input type="button" id="btnValid" value="Valid" onclick="javascript:" /> <input type="button" value="Create" onclick="javascript:" /> <input type="button" value="Empty" onclick="javascript:" /> <input type="button" value="ToString - B" onclick="javascript:" /> <input type="button" value="ToString - D" onclick="javascript:" /> <input type="button" value="Equals" onclick="javascript:" /><br /><br /> <p id="pGuid"></p>

Nous allons assigner des fonctions javascript à chaque bouton. Mais avant, voyez un peu le code JavaScript de SharePoint pour la gestion des GUID :

SP.Guid = function(guidText) {ULS6Pv:; guidText = SP.Guid.$K_0(guidText); if (SP.Guid.isValid(guidText)) { this.$5_0 = guidText; } else { this.$5_0 = '00000000-0000-0000-0000-000000000000'; throw Error.argument('guidText'); } } SP.Guid.get_empty = function() {ULS6Pv:; if (!SP.Guid.$9_0) { SP.Guid.$9_0 = new SP.Guid('00000000-0000-0000-0000-000000000000'); } return SP.Guid.$9_0; } SP.Guid.newGuid = function() {ULS6Pv:; var $v_0 = ''; for (var $v_2 = 0; $v_2 < 32; $v_2++) { var $v_3 = Math.floor(Math.random() * 16); switch ($v_2) { case 8: $v_0 += '-'; break; case 12: $v_3 = 4; $v_0 += '-'; break; case 16: $v_3 = ($v_3 & 3) | 8; $v_0 += '-'; break; case 20: $v_0 += '-'; break; } $v_0 += SP.Guid.$I_0[$v_3]; } var $v_1 = new SP.Guid($v_0); return $v_1; } SP.Guid.isValid = function(uuid) {ULS6Pv:; if (uuid.length !== 36 || uuid !== uuid.toLowerCase()) { return false; } var $v_0 = uuid.split('-'); if ($v_0.length !== 5 || $v_0[0].length !== 8 || $v_0[1].length !== 4 || $v_0[2].length !== 4 || $v_0[3].length !== 4 || $v_0[4].length !== 12) { return false; } return true; } SP.Guid.$K_0 = function($p0) { var $v_0; $v_0 = $p0.replace(' ', ''); $v_0 = $v_0.replace('{', ''); $v_0 = $v_0.replace('}', ''); $v_0 = $v_0.toLowerCase(); return $v_0; } SP.Guid.prototype = { $5_0: null, toString: function() {ULS6Pv:; if (!arguments.length) { return this.$5_0; } var $v_0 = arguments[0]; if ($v_0 === 'B') { return '{' + this.$5_0 + '}'; } else if ($v_0 === 'D') { return this.$5_0; } else { throw Error.argument('format'); } }, equals: function(uuid) {ULS6Pv:; if (!uuid) { return false; } return this.$5_0 === uuid.toString(); }, ToSerialized: function() {ULS6Pv:; return this.toString(); } }

Comme vous voyez, il y a quelques fonctions que nous allons exploiter. Il y a tout d'abord la fonction isValid qui va tester un GUID et renvoyer true si celui-ci est valide ou false dans le cas inverse. Modifiez donc votre premier bouton de la sorte :

<input type="button" id="btnValid" value="Valid" onclick="javascript:if (SP.Guid.isValid(document.getElementById('tbValue').value)) document.getElementById('pGuid').innerHTML = 'Valid !'; else document.getElementById('pGuid').innerHTML = 'Invalid !'"; />

Ce code va tout simplement vérifier si le GUID entré dans la zone de texte est valide. Si c'est le cas, il va inscrire "Valid !" dans le paragraphe en dessous des boutons. Dans le cas contraire, il affichera "Invalid !". Il suffit donc de faire passer le GUID à la fonction pour vérifier sa validité.

Nous avons ensuite le bouton Create qui va permettre de créer un nouveau GUID. Effectivement, dans le code javascript montré ci-dessus, vous pouvez voir qu'il existe une fonction newGuid. Modifiez donc votre deuxième bouton de la manière suivante :

<input type="button" value="Create" onclick="javascript:document.getElementById('pGuid').innerHTML = SP.Guid.newGuid();" />

Nous nous contentons simplement de modifier le contenu du paragraphe par la valeur renvoyée par la fonction newGuid :



Nous avons ensuite le bouton qui va simplement permettre de créer un GUID vide (même si je vois pas trop l'intérêt). Nous pouvons voir que l'ECMAScript possède une fonction nommée get_empty, modifiez donc votre troisième bouton ainsi :

<input type="button" value="Empty" onclick="javascript:document.getElementById('pGuid').innerHTML = SP.Guid.get_empty();" />

Ce code est sensiblement le même que le précédent à la différence près que nous appelons la fonction get_empty et non newGuid :



La fonction renvoi donc un GUID composé de 0. Nous avons ensuite deux boutons qui vont permettre d'appliquer la méthode toString sur des GUID. La différence ici est que ces fonctions ne sont pas "statiques". Effectivement, elles sont applicables directement sur des objets. Il faut donc créer un objet de type SP.Guid pour pouvoir les utiliser. Modifiez donc les deux boutons suivants de cette manière :

<input type="button" value="ToString - B" onclick="javascript:var guid = new SP.Guid(document.getElementById('pGuid').innerHTML); alert(guid.toString('B'));" /> <input type="button" value="ToString - D" onclick="javascript:var guid = new SP.Guid(document.getElementById('pGuid').innerHTML); alert(guid.toString('D'));" />

Le code des deux fonctions est presque exactement le même sauf que dans l'une nous faisons passer le paramètre "B" à la fonction et dans l'autre, nous faisons passer le paramètre "D". Le format de la chaîne renvoyée sera donc différent. Nous créons donc simplement un nouveau GUID en instanciant un objet de type SP.Guid. Ensuite, nous affichons la valeur renvoyée par la fonction toString appliquée sur les objets. Ici, nous nous basons sur la valeur contenue dans le paragraphe, soyez donc bien sûr que vous avez généré un GUID avant de cliquer sur les boutons toString. Voici ce qu'affiche la fonction avec l'argument "B" :



Et avec l'argument "D" :



Enfin, le dernier bouton va nous permettre de tester l'égalité entre 2 GUID. Pour cela, nous allons utiliser la fonction equals de la classe SP.Guid :

<input type="button" value="Equals" onclick="javascript:var guid = new SP.Guid(document.getElementById('pGuid').innerHTML); alert(guid.equals(document.getElementById('tbValue').value));" />

Nous créons donc simplement un objet SP.Guid sur base du contenu du paragraphe. Ensuite, nous testons l'égalité entre ce GUID et la valeur contenue dans la zone de texte et nous affichons le résultat renvoyé :




Vous voyez qu'il est donc très simple de créer et manipuler les GUID grâce à l'ECMAScript.

Télécharger les sources de l'exemple