Utilisation de l'implémentation Widget dans JavaScript avec des liaisons HTTP (obsolète)

Le JavaScript Le code d'un fichier HTML peut utiliser des références SCA (Service Component Architecture) définies dans une implémentation de Tuscany Widget. Utilisez l'implémentation Widget pour travailler avec des données au format JSON (JavaScript Object Notation) renvoyées par un service SCA en JavaScript.

Avant de commencer

Vous pouvez utiliser la liaison HTTP avec un format WF de JSON-RPC pour exposer des services SCA pour consommation à des clients de navigateur Web distants. JSON-RPC est un protocole d'appel de processus à distance (RPC) codé dans le format JSON.

A propos de cette tâche

Un composant SCA peut définir des références SCA utilisables dans le code JavaScript. Utilisez l'implémentation Tuscany Widget pour définir les références. L'implémentation prend en charge les références utilisant une liaison HTTP avec un format WF JSON-RPC, et ne prend pas en charge la définition de services SCA.

Le composite SCA qui utilise l'implémentation Widget doit être déployé dans un fichier d'archive d'application Web (WAR).

Procédure

Configurez une implémentation Widget dans une définition de composite SCA.

Créez un fichier de définitions de composite SCA pour un composant qui utilise Tuscany implementation.widget. Par exemple :

<composite>
  <component name="Store">
    <tuscany:implementation.widget location="ui/store.html"/>
       <reference name="catalog">
         <tuscany:binding.http uri="/Catalog"/>
           <tuscany:wireFormat.jsonrpc/>
         </tuscany:binding.http>
       </reference>
  </component>
</composite>

Cet exemple présente la définition d'un composant magasin qui utilise Tuscany implementation.widget dans un fichier HTML à l'adresse ui/store.html.

Créez le fichier HTML spécifié dans la définition de composite SCA pour l'implémentation Widget.
Dans le fichier HTML, définissez les éléments de script requis, par exemple :
```
<script type="text/javascript" src="/Store/store.js"></script>
```
L'attribut de script src indique un fichier JavaScript que le produit génère dynamiquement pour connecter les références SCA à leurs services associés. Spécifiez l'identificateur de ressource uniforme (URI) au format /SCA_component_name/modified_implementation.widget_location_attribute ; Par exemple,/Store/store.js . L'attribut de l'emplacement modifié est l'attribut de l'emplacement sans en-tête de chemin d'accès et avec un fichier d'extension de type .js.
Définissez la référence SCA avec JavaScript dans le fichier HTML.
Dans le fichier HTML, définissez une référence SCA. Par exemple :
```
//@Reference
var catalog = new tuscany.sca.Reference("catalog");
```

Ajoutez le code JavaScript que la référence utilise, au fichier HTML.

Le code utilisé dans cet exemple, ressemble à ce qui suit :

<script>

  function init() {
    catalog.get().addCallback(catalog_getResponse);
  }

  function catalog_getResponse(items,exception) {
    if(exception){
      alert(exception.message);
      return;
    }    
    var catalog = "";
    for (var i=0; i < items.length; i++) {
      var item = items[i].name + ' - ' + items[i].price;
      catalog += '<input name="items" type="checkbox" value="' +
        item + '">' + item + '<br>';
    }
    document.getElementById('catalog').innerHTML=catalog;
  }

</script>

Dans cet exemple de code, leinit la méthode appelle leget méthode sur lecatalog référence. Le résultat est envoyé à la méthode de rappel callback_getResponse(). La méthode de rappel ajoute des éléments de case à cocher au fichier HTML pour chaque article renvoyé par la méthode get du catalogue.

Ajoutez l'interface utilisateur au fichier HTML, en fonction des besoins.

Le fichier ui/store.html, présenté dans cet exemple, peut utiliser l'interface utilisateur suivante :

<html>
<body onload="init()">
<h1>Store</h1>
   <h2>Catalog</h2>
   <form name="catalogForm">
      <div id="catalog"></div>
      <br>
      <input type="button" onClick="addToCart()" value="Add to Cart">
   </form>
</body>
</html>

Etape suivante

Déployez votre composant SCA dans une application.

Lorsque vous utilisez l'implémentation de widgets, vous devez déployer les références de liaison HTTP sur le même serveur ou cluster que les services de liaison HTTP auxquels elles font référence. Cette limitation est le résultat des limitations de navigateur sur les appels JavaScript interdomaine. Si votre application définit la référence et le service dans des serveurs ou des clusters séparés, utilisez un serveur proxy afin que la ressource d'implémentation de widgets contenant la référence et le service de liaison HTTP soient tous deux accessibles à l'aide du même domaine HTTP.

Pour résoudre des références de liaison HTTP, utilisez un attribut cible, @target, sur la référence ou indiquez l'attribut URI sur l'élément binding.http. Pour plus d'informations, voir la rubrique sur la résolution des références SCA.

Pour obtenir des exemples supplémentaires, consultez la rubrique relative à l'utilisation de l'implémentation Widget dans JavaScript avec des liaisons Atom ou HTTP.