Spring und HTML5: Frühling für den Browser

Anbindung an den Server

Trotz der hier vorgestellten Funktionalitäten von AngularJS müssen Applikation weiterhin mit dem Server kommunizieren, um Daten zu persistieren oder Schnittstellen zu anderen Systemen anzusprechen. Da die Kontrolle über die Applikation nun beim Browser liegt, und der Server lediglich Ressourcen liefert, ist es naheliegend, dem REST-Paradigma zu folgen. Dadurch wird eine klare Struktur für die Kommunikation zwischen Browser und Server auf Basis des HTTP-Protokolls definiert. Als Repräsentation der Daten eignet sich durch seine Nähe zu JavaScript am besten das JSON-Format, das zudem kompakter als XML ist. Auf der Serverseite bietet sich auch für diesen Fall die Verwendung von Spring MVC an. Dadurch kann das bestehende Controller-basierte Programmiermodel, zur Erstellung von serverseitigen Webanwendungen, auch zur Bereitstellung von REST-Ressourcen verwendet werden. Wie das Zusammenspiel dieser Komponenten aussehen kann, ist in Listing 6 und 7 abgebildet. Ein Beispielprojekt, das die hier besprochenen Ansätze ausführlicher zeigt, ist unter [8] verfügbar.

Listing 6
   
Id: {{order.id}} Name: Id:

Der OrderController wird von AngularJS initialisert und dabei das $scope– und $resource-Objekt übergeben. $scope ist hierbei das Modell und $resource ein Service für eine einfache Verwendung von REST-Ressourcen. Der OrderController erzeugt im Modell ein leeres order-Objekt und stellt darüber hinaus zwei Methoden für dessen Manipulation zur Verfügung. Die beiden Methoden werden über HTML-Buttons aufgerufen, die das ng-click-Attribut enthalten.

Listing 7
@Controller 
public class OrderController {
    private Map orders = new HashMap();

    @RequestMapping(value = "/order/{id}", method = GET)
    @ResponseBody
    public Order get(@PathVariable int id) {
        return orders.get(id);
    }

    @RequestMapping(value = "/order", method = POST)
    public String save(@RequestBody Order order) {
        orders.put(order.getId(), order);
        return "redirect:/order/{id}";
    }
}

Listing 7 zeigt, wie ein dazu passender Controller auf Serverseite aussieht. Eine Methode eines Controllers wird aufgerufen, wenn eine Anfrage dem durch das @RequestMapping definierten Muster entspricht. Das Mapping kann Pfadparameter wie {id} enthalten. Auf diese kann über annotierte (@PathVariable) -Parameter zugegriffen werden. Die @RequestBody-Annotationen definiert, dass der Inhalt der Anfrage als Parameter übergeben wird. @ResponseBody wiederum bewirkt, dass der Rückgabewert der Methode als Antwort verwendet wird. Die Konvertierung zwischen HTTP und Java-Objekt wird in beiden Fällen automatisch durch einen JSON-Konverter durchgeführt.

Dieses Beispiel zeigt, wie schnell und einfach es mit modernen Mitteln möglich ist, JavaScript-Applikationen zu erstellen. Hierbei muss man allerdings berücksichtigen, dass sich neue Fragestellungen mit diesem Ansatz ergeben. Erste Antwortmöglichkeiten werden in den folgenden Abschnitten aufgezeigt.

Kommentare

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.