Adobe Flex Tutorial - Adobe Flex Tutorial

5déc/100

Intégrer des composants Flex 4 dans Microsoft Office SharePoint

Tutorial Flex écrit par Eric de People In Action (http://blog.piaction.com/)
Publiez vous aussi sur flex-tutorial!

SharePoint est une série de logiciels pour applications web et portails, développée par Microsoft. Les fonctionnalités des produits SharePoint sont la gestion de contenu, les moteurs de recherche, la gestion électronique de documents, les forums, la création de formulaires et de statistiques décisionnelles.

Presque toutes les informations dans SharePoint sont stockées dans des listes et cette plateforme offre un ensemble de services pour les manipuler (services web, RPC, …).

Dans l’exemple suivant, nous allons développer une application Flex qui utilise des données stockées dans SharePoint. Pour cela nous allons créer un composant Flex qui appelle une «Assemblée» retournant une liste SharePoint. Ce composant mettra à jour le titre d’un élément de la liste par le biais d’un service web

Création de l’application Flex

Lancez Flash Builder et créez un nouveau «Projet Flex».

Ouvrez le fichier d’application principal de votre projet et copiez le code suivant:

<?xml version="1.0" encoding="utf-8"?>
<spark:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                   xmlns:spark="library://ns.adobe.com/flex/spark"
                   xmlns:mx="library://ns.adobe.com/flex/mx"
                   initialize="onInit()">

  <fx:Declarations>

  </fx:Declarations>

  <fx:Script>
    <![CDATA[
      import mx.collections.ArrayCollection;
      import mx.controls.Alert;
      import mx.rpc.events.FaultEvent;
      import mx.rpc.events.ResultEvent;

      [Bindable]
      private var sharePointList:ArrayCollection;

      private function onInit():void
      {
      }

      private function searchItems():void
      {
      }

      private function searchResultHandler(event:ResultEvent):void
      {
      }

      private function faultHandler(event:FaultEvent):void
      {
        Alert.show(event.fault.message, "Warning");
      }

      private function updateItemResultHandler(event:ResultEvent):void
      {
      }
    ]]>
  </fx:Script>
  <spark:VGroup horizontalAlign="left">
    <spark:VGroup horizontalAlign="right">
      <mx:Form labelWidth="100" paddingRight="0" paddingBottom="0">
        <mx:FormItem label="Site Address">
          <spark:Label text="{siteAddress}"/>
        </mx:FormItem>
        <mx:FormItem label="List GUID">
          <spark:TextInput id="list" width="300"/>
        </mx:FormItem>
        <mx:FormItem label="View GUID">
          <spark:TextInput id="view" width="300"/>
        </mx:FormItem>
      </mx:Form>
      <spark:Button label="search" click="searchItems()"/>
    </spark:VGroup>

    <mx:DataGrid id="allItems" dataProvider="{sharePointList}" width="100%">
      <mx:columns>
        <mx:DataGridColumn dataField="ows_ID"       headerText="Id"       width="15"/>
        <mx:DataGridColumn dataField="ows_Title"    headerText="Title"    width="90"/>
        <mx:DataGridColumn dataField="ows_Modified" headerText="Modified" width="50"/>
      </mx:columns>
    </mx:DataGrid>

  </spark:VGroup>
</spark:Application>

Récupération des paramètres

Nous avons choisi d’utiliser les flashVars pour passer des paramètres à notre composant. Pour y accéder nous utilisons la propriété « parameters » de l’objet «FlexGlobals.topLevelApplication». Pour accéder à la valeur de son paramètre, il suffit de procéder ainsi : parameters.nomDuParametre

Nous définissons le paramètre suivant :

siteAddress : adresse de votre site SharePoint.

Nous récupérons ce paramètre lors de l’envoi de l’événement initialize par l’application.

Nous créons tout d’abord une variable privée nommées siteAddress de type String. Afin de pouvoir lier cette variable à des composants graphiques, nous ajoutons au dessus la balise métadata Bindable.

  [Bindable]
  private var siteAddress:String;

Dans la fonction onInit, nous récupérons le paramètre siteAddress et le stockons dans notre variable.

  private function onInit():void
  {
    var parameters:Object = FlexGlobals.topLevelApplication.parameters;
    siteAddress = parameters.siteAddress;
  }

Récupération d’une liste SharePoint à l’aide de l’assemblée « owssvr.dll »

Dans le bloc fx:Declarations, nous ajoutons la balise HTTPService avec les propriétés suivantes:

  <fx:Declarations>
    <spark:HTTPService id="httpService"
                       url="{siteAddress}/_vti_bin/owssvr.dll"
                       showBusyCursor="true"
                       method="POST"
                       result="searchResultHandler(event)"
                       fault="faultHandler(event)">
    </spark:HTTPService>

Dans la fonction searchItems, nous allons lancer la récupération de notre liste par l’invocation de la méthode send() de notre HTTPService.

  private function searchItems():void
  {
    httpService.send();
  }

La propriété result du HttpService, indique la méthode à exécuter lors de la réception du résultat. Ici c’est la méthode searchResultHandler qui sera appelée. Cette méthode prend en paramètre un évenement de type ResultEvent dans lequel la propriété result contient le résultat de l’appel. Ce résultat est au format xml et la liste SharePoint est dans xml.data.row.

  private function searchResultHandler(event:ResultEvent):void
  {
    if(event.result.xml.data)
    {
      var rows:Object = event.result.xml.data.row;
      sharePointList = rows is ArrayCollection? rows as ArrayCollection: new ArrayCollection([rows]);
    }
  }

Pour que le service retourne toutes les données d’une liste SharePoint assignée à une vue spécifique, nous ajoutons à la balise HTTPService, les propriétés de la requête suivante.

  <fx:Declarations>
    <spark:HTTPService id="httpService"
                       url="{siteAddress}/_vti_bin/owssvr.dll"
                       showBusyCursor="true"
                       method="POST"
                       result="searchResultHandler(event)"
                       fault="faultHandler(event)">
      <spark:request>
        <Cmd>Display</Cmd>
        <List>{list.text}</List>
        <View>{view.text}</View>
        <Query>ID Title Modified</Query>
        <XMLDATA>TRUE</XMLDATA>
      </spark:request>
    </spark:HTTPService>

Mise à jour d’une liste SharePoint avec le service web "Lists.asmx"
Une liste SharePoint peut être vue comme un simple tableau. Chaque élément de la liste est identifié par un champ ID, qui est un champ de type entier.

Entre la balise DataGrid et Application, ajoutez ce bloc MXML. Cette section apparaît lorsqu’un élément de la grille est sélectionné. Il permet de modifier l’élément sélectionné.

    <spark:VGroup visible="{allItems.selectedItem != null}" horizontalAlign="right">
      <mx:Form labelWidth="100" paddingRight="0" paddingBottom="0">
        <mx:FormItem label="Id">
          <spark:Label id="idField" text="{allItems.selectedItem.ows_ID}"/>
        </mx:FormItem>
        <mx:FormItem label="Modified">
          <spark:Label text="{allItems.selectedItem.ows_Modified}"/>
        </mx:FormItem>
        <mx:FormItem label="Title">
          <spark:TextInput id="titleField" text="{allItems.selectedItem.ows_Title}" width="300"/>
        </mx:FormItem>
      </mx:Form>
      <spark:Button label="Update" click="updateItem()"/>
    </spark:VGroup>

Dans la section fx:Declarations, Ajoutez la balise WebService avec les propriétés suivantes:

<spark:WebService id="webService"
                    wsdl="{siteAddress}/_vti_bin/Lists.asmx?WSDL"
                    useProxy="false">
    <spark:operation name="UpdateListItems"
                     resultFormat="e4x"
                     fault="faultHandler(event)"
                     result="updateItemResultHandler(event)" />
  </spark:WebService>

Notez que l’on a spécifié l’emplacement du WSDL pour notre WebService. Nous avons ensuite indiqué les méthodes de notre service web à l’aide de la balise operation. Dans notre exemple nous n’utiliserons que la fonction UpdateListItems.

La fonction updateItemResultHandler est appelée lors de la réponse du webservice. Dans cette fonction, nous allons mettre à jour l’élément sélectionné et rafraîchir la grille.

 private function updateItemResultHandler(event:ResultEvent):void
  {
    allItems.selectedItem.ows_Title = titleField.text;
    sharePointList.refresh();
  }

Pour déclencher le service web que nous utilisons faire : webService.UpdateListItems.send();

Dans le bloc de script, nous ajoutons une fonction nommée updateItem appelé au clic sur le bouton "update". Cette fonction va envoyer une demande au service Web avec deux paramètres:

listGUID: le GUID de la liste
updates: Un XML qui contient la commande d’execution. Elle peut contenir une ou plusieurs actions (ajouter, modifier ou supprimer un élément).

Pour plus d’informations, veuillez-vous reporter à la documentation MSDN de ce service web.

 private function updateItem():void
  {
    var request:String =  "<Batch OnError='Continue' ListVersion='1' ViewName='"+ view.text +"'> \n"+
                          "  <Method ID='1' Cmd='Update'>                                        \n"+
                          "    <Field Name='ID'>"+idField.text+"</Field>                         \n"+
                          "    <Field Name='Title'>"+titleField.text+"</Field>                   \n"+
                          "  </Method>                                                           \n"+
                          "</Batch>                                                              \n";
    webService.UpdateListItems.send(list.text, new XML(request));
  }

Vous pouvez télécharger le code de cet exemple ici.

Conclusion

Ce petit exemple, nous a permis de voir deux manières de communiquer avec SharePoint et cela sans aucun coût de développement sur le back-end. Il est à noter que SharePoint publie de nombreux services disponibles pour la plupart en web services.