Widget-Implementierung in JavaScript mit HTTP-Bindungen verwenden (veraltet)

Der JavaScript Code in einer HTML-Datei kann Service Component Architecture (SCA)-Referenzen verwenden, die in einer Tuscany Widget-Implementierung definiert sind. Verwenden Sie die Widget-Implementierung für die Bearbeitung von Daten im JSON-Format (JavaScript Object Notation), die ein SCA-Service in JavaScript zurückgibt.

Vorbereitungen

Sie können die HTTP-Bindung mit dem Sendeformat JSON-RPC verwenden, um SCA-Services für ferne Web-Browser-Clients bereitzustellen. JSON-RPC ist ein RPC-Protokoll (Remote Procedure Call), das im JSON-Format codiert ist.

Informationen zu dieser Task

Eine SCA-Komponente kann SCA-Referenzen für die Verwendung in JavaScript-Code definieren. Verwenden Sie die Tuscany-Widget-Implementierung, um die Referenzen zu definieren. Die Implementierung unterstützt Referenzen, die eine HTTP-Bindung mit dem Sendeformat JSON-RPC verwenden, aber nicht die Definition von SCA-Services.

Der SCA-Verbund, der die Widget-Implementierung verwendet, muss in einer WAR-Datei (Webanwendungsarchiv) implementiert sein.

Vorgehensweise

Konfigurieren Sie eine Widget-Implementierung in einer SCA-Verbunddefinition.
Erstellen Sie eine SCA-Verbunddefinitionsdatei für eine Komponente, die die Tuscany-Implementierung implementation.widget verwendet. Beispiel:
```
<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>
```
In diesem Beispiel wird eine Komponente "Store" definiert, die die Tuscany-Implementierung implementation.widget in einer HTML-Datei an der Position ui/store.html verwendet.
Erstellen Sie die in der SCA-Verbunddefinition für die Widget-Implementierung angegebene HTML-Datei.
Definieren Sie in der HTML-Datei die erforderlichen Scriptelemente, wie z. B.:
```
<script type="text/javascript" src="/Store/store.js"></script>
```
Das Scriptattribut src zeigt auf eine JavaScript-Datei, die das Produkt dynamisch generiert, um die SCA-Referenzen mit den zugehörigen Services zu verknüpfen. Geben Sie den Uniform Resource Identifier (URI) im Format /SCA_component_name/modified_implementation.widget_location_attribute ; Zum Beispiel,/Store/store.js . Das geänderte Positionsattribut ist das Positionsattribut ohne einen führenden Pfad und mit der Dateierweiterung .js.
Definieren Sie die SCA-Referenz in JavaScript in der HTML-Datei.
Definieren Sie in der HTML-Datei eine SCA-Referenz. Beispiel:
```
//@Reference
var catalog = new tuscany.sca.Reference("catalog");
```

Fügen Sie JavaScript-Code hinzu, der die Referenz auf die HTML-Datei verwendet.

Der für dieses Beispiel verwendete Code gleicht dem folgenden:

<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>

In diesem Beispielcode ruft die Methode init die Methode get für die Referenz catalog auf. Das Ergebnis wird an die Callback-Methode callback_getResponse() gesendet. Die Callback-Methode fügt der HTML Kontrollkästchenelemente für jeden Eintrag hinzu, der von der Katalogmethode get zurückgegeben wird.

Fügen Sie der HTML-Datei gegebenenfalls die Benutzerschnittstelle hinzu.

Die für dieses Beispiel verwendete Datei ui/store.html könnte die folgende Benutzerschnittstelle verwenden:

<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>

Nächste Schritte

Implementieren Sie Ihre SCA-Komponente in einer Anwendung.

Wenn Sie die Widget/Implementierung verwenden, müssen HTTP-Bindungsreferenzen in demselben Server bzw. Cluster wie die HTTP-Bindungsservices implementiert werden, auf die sie verweisen. Diese Einschränkung ist auf Browsereinschränkungen bei domänenübergreifenden JavaScript-Aufrufen zurückzuführen. Wenn Ihre Anwendung die Referenz und den Service in separaten Servern oder Clustern definiert, verwenden Sie einen Proxy-Server, so dass der Zugriff auf die Widget-Implementierungsressource, die die Referenz enthält, und auf den HTTP-Bindungsservice über dieselbe HTTP-Domäne erfolgt.

Zum Auflösen von HTTP-Bindungsreferenzen verwenden Sie ein Zielattribut, @target, in der Referenz oder geben Sie das URI-Attribut im Element binding.http an. Weitere Informationen finden Sie im Artikel zum Auflösen von SCA-Referenzen.

Weitere Beispiele finden Sie im Artikel zur Verwendung der Widget-Implementierung in JavaScript mit Atom- oder HTTP-Bindungen.