![Foto ,]()
26.06.2011 18:23:00
Zugegeben, diese Überschrift wirkt ein wenig provokant und wie Salz in der Wunde von Silverlight-Fans, die nun - nachdem Microsoft verkündet hat, dass die von Phone 7 bekannten Tiles in Windows 8 auf HTML 5 und JavaScript basieren werden - wieder ein wenig mehr schmerzt. Trotzdem kann man nicht leugnen, dass HTML 5 und JavaScript in einer Zeit, in denen Web-Angebote immer mehr von verschiedenstenden Endgeräten jenseits des klassischen Windows-PCs genutzt werden, eine wichtige Rolle spielen. Somit verwundert es auch nicht, dass sich in der aktuellen Preview der kommenden Version von WCF RIA Services [1] alles um diese Technologien dreht.
Das nachfolgende Beispiel gibt einen kurzen Vorgeschmack darauf, indem es zeigt, wie mit dieser Preview, die kurz RIA/JS genannt wird, mittels jQuery ein Domain-Service konsumiert werden kann. Die dazu nötigen jQuery-Plugins findet man im Beispiel unter [1], welches auf der letzten MIX präsentiert wurde. Hierbei ist zu beachten, dass auch das jQuery-Template-Plugin, das Microsoft der Community zur Verfügung gestellt hat, darin verwendet wird.
<html>
[...]
<script src="..." ...></script>
<!-- Plugins: siehe Samples unter [1] -->
<script language="javascript">
var hamster = [];
var ds;
var list;
$(function () {
ds = $([hamster]).dataSource({
serviceUrl: "FlugSample-HamsterDomainService.svc",
queryName: "GetHamster",
bufferChanges: true,
/* Änderungen können retourgesendet werden */
refresh: function () {
/* Refresh wird nach dem Laden der Daten aufgerufen */
/* Template auf jeden geladenen Hamster anwenden */
list = new ListControl(hamster, {
template: "#hamsterTemplate",
container: "#hamster"
});
},
queryParameters: { farbe: "gold" }
/* Mappt auf Parameter der Operation GetHamster */
});
// IQueryable um Sortierausdruck erweitern
var sort = { property: "Spitzname", direction: "ascending" };
ds.option("sort", sort);
// IQueryable um Filterausdruck erweitern
var filter = {
property: "Spitzname",
operator: "StartsWith",
value: "Krümel"
};
ds.option("filter", filter);
// Daten abrufen, ins Array hamster laden und render aufrufen
ds.refresh();
});
</script>
<script id="hamsterTemplate" type="text/x-jquery-tmpl">
<li>
${Spitzname}, Farbe: ${Farbe}
</li>
</script>
</head>
<body>
<h1>Hamster on demand</h1>
<ul id="hamster">
</ul>
</body>
</html>
|