Mittendrin.

Zurück

Flurfunk der eXperts.

Hier erfahren Sie mehr über eXperts, Technologien und das wahre Leben in der SDX.

TypeScript + knockout + WinRT = Yeah!

09.12.201208:41 Uhr , Nico Bolender

In meinem letzten Artikel bin ich auf die Vorzüge von TypeScript
eingegangen und habe gesagt dass ich es jetzt überall einsetze. Also habe ich mir gedacht, wieso nicht mal eine Anwendung
machen die auf einer gemeinsamen Codebasis im Web und sogar auf Windows 8 läuft!

Ich habe also angefangen meine Anwendung zuerst für Webclients zu bauen, so dass man mit dem Desktop die Anwendung per
Browser nutzen kann. Da ich ein großer Fan von knockout bin, habe ich es natürlich auch
in dieser Anwendung verwendet. Außerdem verwende ich TypeScript um meine Objekte
und Funktionen typsicher zu machen.

Die Anwendung soll dazu dienen persönliche Bilanzdaten anzuzeigen, die über eine REST Schnittstelle per ASP.NET Web API zur Verfügung gestellt werden. Die Implementierung der jeweiligen
Controller ist nicht Bestandteil dieses Beitrags.

Das Datenaustauschformat ist in diesem Fall JSON. Mit ASP.NET Web API ist es auch
sehr einfach möglich die Daten im XML-Format anzufordern. Dazu aber vielleicht in einem anderen Beitrag mehr 😉

Los geht’s:

Zuerst machen wir uns ein AppViewModel:

   1: ///<reference path='../../declaretypes/knockout.d.ts'/>

   2: ///<reference path='../../declaretypes/jquery.d.ts'/>

   3: ///<reference path='../../declaretypes/app.d.ts'/>

   4: ///<reference path='Data.ts'/>

   5: class 

AppViewModel {

   6:     selectedBilanz: koObservable;

   7:     bilanzen: koObservableArray; // Alle Bilanzen (aktuelle, zum Vorjahr usw.)

   8:     ... noch mehr ...

   9:     constructor () { 

  10:         this.bilanzen = ko.observableArray([]);

  11:         this.selectedBilanz = ko.observable(null);

  12:         ... noch mehr ...

  13:         this.loadBilanzen();

  14:     }

  15:     loadBilanzen () { 

  16:         var that = this;

  17:         Data.getBilanzOverview(function (data) { 

  18:             that.bilanzen(data);

  19:         });

  20:     }

  21:     addNewBilanz() { 

  22:         var newitem = { Name: "Neu", Beschreibung: "Neue Bilanz" };

  23:         this.addEmptyBilanz(newitem);

  24:     }

  25:     addEmptyBilanz(emptynew: 

IEmptyBilanz) { 

  26:         var that = this;

  27:         Data.AddBilanzOverview(emptynew, 

function (data) { 

  28:             Data.createPropertys

(data);

  29:             that.bilanzen.push

(data);

  30:         });

  31:     }

  32:     deleteBilanz() { 

  33:         var that = this;

  34:         Data.RemoveBilanzOverview

(this.selectedBilanz().ID(), function (data) { 

  35:         

  36:             that.bilanzen.remove

(that.selectedBilanz());

  37:             that.selectedBilanz(null);

  38:         });

  39:     }

  40:     ... noch mehr ...

  41: }

Wie man sieht, hat die App ein paar Objekte die überwacht werden sollen und vom Typ koObservable und koObservableArray

sind. Im Konstruktor werden alle Properties initialisiert und die Funktion zum Laden der Bilanzdaten aufgerufen. Das

laden/speichern der Daten wurde hier in das Modul Data ausgelagert.

   1: module Data { 

   2:     var OverviewUrl = "http://servername/api/Overview/";

   3:  

   4:     ... weitere urls ...

   5:  

   6:     /*

   7:        

Returns BilanzOverview from current User -> Hardcoded in Controller.

   8:    

*/

   9:    export function getBilanzOverview(callback: (data:any) => any) { 

  10:    

  11:        $.getJSON(OverviewUrl, function(data) {

  12:             //Daten aufbereiten und dann callback aufrufen

  13:            callback(data);

  14:        });

  15:    }

  16:     ... weitere Funktionen

  17: }

Die Typen werden in einem declare File deklariert und dann in der jeweiligen Datei referenziert. Beispiel für

knockout.d.ts:

   1: declare module ko { 

   2:     export function observable(obj?): any;

   3:     export function observableArray(obj?): any;

   4:     export function toJSON(koObj): any;

   5:     export module utils { 

   6:         export function compareArrays(oldArray, newArray): any;

   7:     }

   8: }

   9: interface koObservable { 

  10:     (obj?): any;

  11: }

  12: interface koObservableArray { 

  13:     (obj?): any;

  14:     push: (obj) => any;

  15:     remove: (obj) => any;

  16: }

In dieser Datei befinden sich alle Definitionen, die ich von knockout für diese

Applikation verwende. Wenn noch andere Funktionalitäten aus knockout benötigt werden,

kann man diese im declare File nachtragen um die Verwendung von knockout a) typsicher zu

machen und b) IntelliSense Unterstützung in Visual Studio 2012 zu bekommen.

Mit dieser minimalen Anwendung kann man nun schon die ersten Daten anzeigen lassen und hinzufügen und entfernen. Hierfür

gibt es folgendes knockout Template.

   1: <div class="bilanz-buttons">

   2:     <button data-bind="click: addNewItem">Add</button>

   3:     <br />

   4:     <button data-bind="click: deleteItem">Delete</button>

   5: </div>

   6: <div class="bilanzlist">

   7:     <div class=" bilanz-tmpl" data-bind="foreach: bilanzen">

   8:         <div class="bilanz tile-color" data-bind="css:{itemSelected: $root.isSelectedBilanz($data) },

   9:             click: function(){ 

$parent.setSelectedBilanz($data) }">

  10:                 <h3 data-bind="text: Name "></h3>

  11:                 <p data-bind="text: Beschreibung"></p>

  12:             </div>

  13:     </div>

  14: </div>

Lässt man die Anwendung nun laufen werden im Browser die persönlichen Bilanzen angezeigt. Beim auswählen einer Bilanz wird

die entsprechende Bilanz in die selectedBilanz Property geschrieben um dazu später die entsprechenden Kategorien zu laden.

Beim Drücken von Add und Delete werden neue Bilanzen erzeugt bzw. gelöscht. Bisher kein großes Hexenwerk 🙂

Include Windows 8

Was kann ich von dem bisher geschriebenen alles für meine Windows 8 App wiederverwenden? Nun Ja, ich würde sagen eine

ganze Menge 🙂

Zunächst einmal kann das komplette AppViewModel und auch das komplette Data Modul verwendet werden.

Cool oder?

Wir erzeugen jetzt ein W8AppViewModel und leiten von dem AppViewModel ab, zusätzlich legen wir noch eine

WinJS.Binding.List an um diese dann an ein ListView zu binden:

   1: var 

bilanzList = new WinJS.Binding.List([]);

   2: WinJS.Namespace.define("Bilanzen", { itemList: bilanzList });

   3:  

   4: class W8AppViewModel extends AppViewModel {

   5:     lastArray;

   6:     iteminvoke;

   7:     constructor() { 

   8:         super();

   9:         var that = this;

  10:         this.lastArray = [];

  11:         this.bilanzen.subscribe(function (newValue) { 

  12:             Utils.UpdateArray

(that.lastArray, newValue, bilanzList);

  13:             that.lastArray = 

newValue.slice();

  14:         });

  15:  

  16:         // Handler for iteminvoke.

  17:         this.iteminvoke = WinJS.Utilities.markSupportedForProcessing(function 

(evt) {

  18:             that.itemselected(evt, 

that);

  19:         });

  20: }); 

  21: }

  22: itemselected(evtInfo,vm: 

W8AppViewModel) { 

  23:     var index = evtInfo.detail.itemIndex; 

  24:     vm.setSelectedBilanz(vm.bilanzen

()[index]);

  25: }

  26: ... weitere Funktionen ...

  27: }

Es wird der Konstruktor aufgerufen, der wiederrum den Konstruktor der AppViewModel aufruft. Danach „abonnieren“

wir das Observable Array per this.bilanzen.subscribe(callback) um informiert zu werden, wenn sich irgendwas in dem

Array ändert. Ändert sich etwas, aktualisieren wir die DataSource des ListView im Callback der subscribe Funktion. Zusätzlich

wollen wir noch informiert werden wenn in der ListView eine Bilanz ausgewählt wird um später die entsprechenden Kategorien zu

laden. Hierfür bietet das ViewModel einen iteminvoke-handler an. Dieser wird dann in der View an das entsprechende

oniteminvoke-Event der ListView gebunden. Das hinzufügen und entfernen von Bilanzen befindet sich im

AppViewModel und kann genau so genutzt werden. Mit diesem ViewModel können wir uns nun um

das Anzeigen der Daten kümmern.

Wie schon erwähnt nutzen wir dafür ein ListView:

   1: <div class="bilanz-buttons">

   2:     <button data-bind="click: addNewItem">Add</button>

   3:     <br />

   4:     <button data-bind="click: deleteItem">Delete</button>

   5: </div>

   6: <div class="" id="bilanzen-

tmpl" data-win-control="WinJS.Binding.Template">

   7:     <div class="bilanz tile-color">

   8:         <h3 data-win-bind="innerText: w8_Name"></h3>

   9:         <p data-win-bind="innerText: w8_Beschreibung"></p>

  10:     </div>

  11: </div>

  12: <div class="bilanzlist" id="bilanzlistview" data-win-control="WinJS.UI.ListView" 

  13:      data-win-options="{

  14:             itemDataSource : 

Bilanzen.itemList.dataSource, 

  15:             tapBehavior: 

'toggleSelect',

  16:             selectionMode: 'single', 

  17:             oniteminvoked: 

ViewModel.iteminvoke,

  18:             itemTemplate: select

('#bilanzen-tmpl')}">

  19: </div>

Der aufmerksame Leser wird festgestellt haben, dass hier auf andere Properties gebunden wird als in dem HTML weiter oben.

Das liegt daran das WinRT nicht an Funktionen binden kann. Da wir hier aber knockout

verwenden und alle Properties über ko.observable() und ko.observableArray() deklariert haben, sind unsere

Properties also Funktionen und somit nicht bindable :/ Blöd!

Als Workaround dafür habe ich in dem Data Modul eine Funktion geschrieben die mir für jedes Property noch ein

w8_Property erzeugt (und falls da Arrays und andere Objekte drin sind, werden die auch nochmal durchlaufen):

   1: export function createPropertys(obj: any) { 

   2:     for (var key in obj) {

   3:         if (typeof obj[key] !== "function") {

   4:             if (typeof obj[key] === "object") {

   5:                 if (obj[key] instanceof Array) {

   6:                     obj[key] = 

ko.observableArray(obj[key]);

   7:                     for (var i = 0; i < obj[key]().length; i++) {

   8:                         

createPropertys(obj[key]()[i]);

   9:                     }

  10:                 } else {

  11:                     createPropertys(obj

[key]);

  12:                 }

  13:             } else {

  14:                 obj[key] = 

ko.observable(obj[key]);

  15:                 if (window["WinJS"]) {

  16:                     

Object.defineProperty(obj, "w8_" + key, {

  17:                         get: 

ko.observable(obj[key])(),

  18:                         enumerable: 

true

  19:                     });

  20:                 }

  21:             }

  22:         }

  23:     }

  24: }

Damit hat man dann die Möglichkeit in dem Datatemplate auf diese Properties zu binden.

Den Handler für das oniteminvoke-Event kann man ebenfalls über einen Namespace zur Verfügung stellen.

Gemacht habe ich das ganze in dem onactivate-Handler der Applikation.

   1: app.onactivated = function (args) {

   2:     if (args.detail.kind === activation.ActivationKind.launch) {

   3:         if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {

   4:             // TODO: This application has been newly launched. Initialize

   5:             // your application here.

   6:         } else {

   7:             // TODO: This application has been reactivated from suspension.

   8:             // Restore application state here.

   9:         }

  10:  

  11:         var appvm = new W8AppViewModel();

  12:         WinJS.Namespace.define("ViewModel", appvm);

  13:  

  14:         args.setPromise

(WinJS.UI.processAll().then(function () {

  15:             ko.applyBindings

(appvm);

  16:         }));

  17:  

  18:     }

  19: };

So, nun sind wir an dem Punkt angelangt wo wir unsere Windows 8 Store App laufen lassen können. Diese baut jetzt auf dem

schon vorhanden Code der Webapplikation auf, erweitert diesen mit einigen kleinen Funktionen und läuft nun wunderbar als

Windows Store App.

Ich habe hier nicht die komplette Anwendung erklärt, aber in den folgenden Screenshots könnt ihr euch mein bisheriges

Ergebnis anschauen. Links Webbrowser(div,ul,li Elemente) und Rechts Metro (ListView, SemanticZoom, AppBarCommands).

bilanz_browser     bilanz_metro

Im Übrigen habe ich einfach die css-Datei von der Webapplikation genommen, in der Windows 8 Store App eingefügt und die

entsprechenden css-Klassen gesetzt. Einmal gemacht, mehrfach eingesetzt.

Fazit

Dieses kleine Beispiel soll aufzeigen, dass schon mit geringem Aufwand der Code von einer vorhanden Webapplikation genutzt

werden kann um damit eine Windows Store 8 App zu erstellen. Wichtig dabei war die Verwendung von Windows 8 Controls ohne

dabei den Code für die Webapplikation zu verändern. Es ist ein wenig schade, dass das Databinding in WinJS nicht so

komfortabel ist wie z.B. mit knockout aber ich denke, wenn man sich damit arrangieren

kann bekommt man gute Lösungen hin. Vielleicht gibt es ja in der Zukunft Bibliotheken die sich diesem Thema annehmen.

Zum Schluss bleibt mir nur zu sagen, dass ich positiv überrascht war, das man soviel geschriebenen Code einfach 1 zu 1 in

einer Windows Store App übernehmen kann. Allerdings sollte man sich auch klar machen, dass unterschiedliche Plattformen auch

immer unterschiedliche Möglichkeiten und Bedienkonzepte bieten. Auf diese muss man beim Design der Anwendung natürlich

Rücksicht nehmen. Bei bestehenden Anwendungen kann das natürlich durchaus problematisch sein. Setzt man sich aber mit den

plattformspezifischen Features auseinander und geht an der einen oder anderen Stelle einen Kompromiss ein, kommt man dem

One Application, Multiple Devices schon sehr nahe. Daher gibt es für TypeScript + knockout + WinRT ein klares Yeah!

0 Kommentare
Dein Kommentar wartet auf Freischaltung.

Artikel kommentieren

Zurück

Tag Cloud


Kontakt aufnehmen


Anrufen

Gerne beantworten wir Ihre Fragen in einem persönlichen Gespräch!


Kontakt aufnehmen

Schreiben Sie uns eine E-Mail mit Ihren Fragen und Kommentaren!