Windows METRO Apps Cross Plattform mit WinJS 3

Cross Platform Development ist in aller Munde. Nun steigt Microsoft mit der neuen WinJS Bibliothek in den JavaScript Framework Markt ein. Konkurrenz sind JQuery Mobile, AngularJS oder auch Kendo UI. Alles Themen auf der ADCX Konferenz.

Der erste Blick auf die JavaScript für Windows Bibliothek per Nuget Download in Visual Studio 2013 eröffnet ernüchternde Download Zahlen. Nur 167 in der ersten Woche.

winjs

In meinem Fall hat zwar die Installation scheinbar geklappt, es waren aber keine neuen CSS oder JS Dateien im Projekt angelegt. Erst der Manuelle Download des Zip mit anschließenden entpacken in das Web Projekt, hat den Start ermöglicht. Nebenbei bemerkt- der Download kommt von Amazon Web Services.

winjs2

Die Zeiten haben sich geändert, gut finde ich das nur bedingt.

Als nächstes wird WinJS in eine ASPX Seite eingebunden. Es gibt eine dark und light Design Variante.

   1:   <link href="Content/ui-dark.css" rel="stylesheet" />
   2:   <script src="Scripts/WinJS.js"></script>

Die Controls sind in einzelne JavaScript Dateien aufgeteilt und sozusagen modularisiert. Für den Einstieg packe ich die komplette Bibliothek, immerhin unkomprimiert 3,7 MB groß, in die HTML Seite.

Ans Ende des HTML Blockes wird der Script Block gecoded. Die Daten kommen per Json aus einem REST ASP.NET Web Api Service und beinhalten die Northwind Customer Daten. Nachdem die Daten geladen sind, wird die Bindung aktualisiert (Zeile 11)

   1:<script>
   2: WinJS.Application.onready = function () {
   3:              var options = {
   4:                  url: '/api/kunden',
   5:                  type: 'GET'
   6:              };
   7: WinJS.xhr(options).done(
   8:      function (result) {
   9:     callback(result.responseText, result.status);
  10:                      //Binding aktivieren
  11:     WinJS.UI.processAll();
  12:                  },
  13:                  function (result) {
  14:                      callback(null, result.status);
  15:                  }
  16:              );
  17:          };
  18:   
  19: WinJS.Application.start();
  20:   
  21: function callback(responseText, status) {
  22:     if (status === 200) {
  23:       var customers = JSON.parse(responseText);
  24:       WinJS.Namespace.define("DataExample", {
  25:          data: new WinJS.Binding.List(customers)
  26:                  });
  27:   
  28:              } else {
  29:   
  30:              }
  31:          }
  32:   </script>

Etwas ungewohnt werden die empfangenen JSON Array Daten in eine bindbare WinJS Liste umgewandelt.  Der Namensraum kombiniert mit dem Eigenschaftsnamen, ergänzt um das Schlüsselwort dataSource, wird im HTML Code per win-Options an das Listview Control gebunden.

Das eigentliche Itemtemplate wird extern, das heißt außerhalb des Listview DIV extra deklariert. Die Feldbindung erfolgt per win-bind Attribut.

   1:  <h1>Demo METRO Liste</h1>
   2:  <div class="customerTemplate" 
data-win-control="WinJS.Binding.Template" style="display: none;">
   3:      <div style="height:80px">
   4:          <h4 data-win-bind="textContent: CompanyName"></h4>
   5:     </div>
   6:  </div>
   7:  <div id="basicListView"
   8:     data-win-control="WinJS.UI.ListView"
   9:     data-win-options="{ itemDataSource : DataExample.data.dataSource, 
  10:     itemTemplate: select('.customerTemplate') }">
  11:  </div>

Richtig erstaunlich wird es im Browser. Die Website sieht aus wie Windows 8.1 und ist genauso bedienbar. In dem Fall mit einem horizontalen Scrolling.

image

Nun hat Microsoft also mit WinJs 3.0 Yet Another JavaScript Library für mobile Clients. Stellt sich die Frage wer braucht das, wer wird das nutzen? Konzeptionell ist die Architektur gut gelungen und einfach nutzbar. Die JavaScript typischen Probleme mit Asynchronität finden sich auch hier. Hervorzuheben ist, das der HTML Code und vermutlich weitestgehend der JS Code aus einer nativen Windows 8.1 Anwendung übernommen werden können. Die HTML5 Designer aus Blend sind das Beste was der Markt aktuell an WYSIWYG zum Thema zu bieten hat. In der gesamt Betrachtung bin ich vorsichtig optimistisch, würde aber aktuell kein Projekt damit starten.

Mehr zum Thema Cross Plattform auf der ADCX in Mannheim und Wien.

Windows 8 Tipp – Dateiversionsverlauf nutzen

Ein Feature in Windows 8 sorgt für die Sicherung und Wiederherstellung Ihrer Dateien und Ordner. Der sogenannte Dateiversionsverlauf sichert nämlich regelmäßig Versionen Ihrer Dateien aus den Ordnern für Dokumente, Musik, Bilder, Videos und dem Desktop sowie die OneDrive-Dateien, die sich offline auf Ihrem PC befinden. Je länger Sie mit Windows arbeiten, desto größer ist der Verlauf an Dateien, über den Sie verfügen. Angenommen, Ihre Originaldateien gehen verloren, sind beschädigt oder werden gelöscht, können Sie diese einfach wiederherstellen.

Ebenso können Sie auch verschiedene Versionen der Dateien suchen und wiederherstellen, sogar dann, wenn diese nicht gelöscht wurden oder verloren gingen. Sie können die gewünschte Version auswählen und wiederherstellen. Persönliche Daten lassen sich somit bequem automatisch speichern. Dazu kann der Dateiversionsverlauf genutzt werden.

Mit der Tastenkombination Windows + S aktivieren Sie die Suche. Geben Sie in das Suchfeld „Dateiversionsverlauf“ ein und wählen Sie den unterhalb angezeigten Dateiversionsverlauf aus.

clip_image002

Wenn zum Zeitpunkt des Aufrufs des Dateiversionsverlaufs keine Festplatte angeschlossen ist, erscheint die angezeigte Meldung, dass kein verwendbares Laufwerk gefunden wurde.

clip_image004

Um diese Funktion nutzen zu können, ist es beispielsweise nützlich eine externe USB-Festplatte anzuschließen. Daraufhin zeigt Windows an, dass der Dateiversionsverlauf ausgeschaltet ist. Ihnen wird nun angeboten, Dateien auf Ihre USB-Festplatte zu speichern, indem Sie auf Einschalten klicken.

clip_image006

Links in der Übersichtsleiste können Sie optional die Einstellung wählen, welche Ordner Sie ggf. aus dem Dateiversionsverlauf ausschließen möchten.

clip_image008

Des Weiteren können Sie ebenso mit Klick auf den Punkt „Erweiterte Einstellungen“ bestimmen, wie oft Kopien der Dateien gespeichert werden sollen, sowie wie lange diese gespeicherten Versionen im Verlauf aufbewahrt werden.

clip_image010

Nach vorgenommenen Einstellungen und durchgeführtem Dateiversionsverlauf können Sie per Klick auf der linken Seite „Persönliche Dateien wiederherstellen“ im geöffneten Dialogfenster per Ordner auswählen, was Sie wiederherstellen möchten.

clip_image012

Nachdem Sie einen Ordner ausgewählt haben, erscheinen die darin befindlichen Dateien. Mit Rechtsklick auf das jeweilige Symbol erscheint die Möglichkeit Wiederherstellen sowie Wiederherstellen in, je nach dem was Sie benötigen.

clip_image014

Abschließend ist die Datei wiederhergestellt.

Mein Fazit: Die Funktionalität ist sehr nützlich, jedoch sollte man wissen, dass der vom System erstellte Ordner FileHistory je nach Menge des Inhalts sehr groß werden kann. Auf meinem Rechner weist dieser eine Größe von 26 GB auf.

image

Neue Serviceankündigungen und Preisänderungen bei Azure

SQL Database

Der SQL Datenbankdienst ist jetzt mit einem Service Level Agreement von 99,99 % für die Versionen Basic, Standard und Premium generell verfügbar. Die Abrechnung erfolgt jetzt auch stundenweise und die Preise wurden um bis zu 50 % gesenkt. Alle Änderungen sind zum 1. November 2014 gültig.  Die genaue Preisstruktur finden Sie unter http://azure.microsoft.com/en-us/pricing/details/sql-database/#basic-standard-and-premium. Eine Übersicht der verschiedenen Versionen finden Sie unter http://msdn.microsoft.com/library/azure/dn741340.aspx.

Die Webeditionen von SQL Database bleiben bei einer garantierten Verfügbarkeit von 99,9 %, werden aber bald nicht mehr angeboten. Ursprünglich war geplant diese Dienste im April 2015 einzustellen. Sie werden nun bis zum 10. September 2015 angeboten.

Azure API Management

Der im Mai 2014 als Vorschau angebotene Dienst Azure API Management ist jetzt allgemein verfügbar. Dieser REST-basierte Dienst ermöglicht es, API Verwaltungsoperationen zu automatisieren und mit anderen Systemen und Prozessen zu verbinden. Der Dienst bietet auch OAuth 2.0 Unterstützung. Das Entwicklerportal für die API steht mittlerweile in zehn verschiedenen Sprachen, darunter auch deutsch, zur Verfügung. Mehr Informationen erhalten Sie unter http://azure.microsoft.com/en-us/documentation/services/api-management/.

Azure Media Services

Ab dem 1. Oktober 2014 ist der Media Encoder allgemein verfügbar. Die Kosten berechnen sich nach der Größe des Datenvolumens der durch die Encoding Pipeline zurückgegeben wird (es wird in GB abgerechnet). Das sollte zu einer Reduzierung der Kosten gegenüber den heutigen Preisen führen. Sie können dabei zwischen einer Basic, Standard und Premium Encoding-Version wählen, die die Geschwindigkeit des Encodings beeinflusst. Der aktuelle Windows Azure Media Data Encoder wird zum 15. September 2015 eingestellt.

Live Streaming und der Schutz von Content ist momentan in der öffentlichen Vorschau. Diese Live Streams wurden bereits für die Winterolympiade 2014 und die FIFA Fussballweltmeisterschaft in Brasilien verwendet. Der Dienst bietet dabei die gleiche Skalierbarkeit und Verfügbarkeit wie bei den beiden Großereignissen. Für den Schutz des Contents steht eine statische und dynamische Verschlüsselung zur Verfügung. Mehr Informationen erhalten Sie unter http://azure.microsoft.com/en-us/services/media-services/.

Rollenbasierte Sicherheit

Azures rollenbasierte Sicherheit (RBAC) ermöglicht eine feingranulare Zugriffssteuerung auf Azuredienste. Diese rollenbasierte Sicherheit befindet sich ab sofort in der öffentlichen Vorschau und erzeugt keine zusätzlichen Kosten. Der Dienst steht über das Azure Preview Portal zur Verfügung.

Windows Phone 8/8.1 Kinderecke

Das Smartphone wird immer mehr zum beliebten Gameboy-Ersatz. Um zu verhindern, dass die Weitergabe an Kinder und Jugendliche zu immensen In-App-Käufen und enormen Telefonrechnungen führt, verfügt bereits Windows 8 über eine Kinderecke. Diese abgesicherte Umgebung konfiguriert man bei der Initialisierung über Einstellungen –> Kinderecke. Es ist sinnvoll für spätere Konfiguration eine Kachel auf dem Startbildschirm anzulegen.

Kindereckenkonfig



Dieser Modus wird dann aktiviert, indem Sie auf dem Sperrbildschirm nach links wischen. Es bietet folgende Vorteile:

-In-App Käufe werden geblockt, sofern keine Brieftaschen-Pin hinterlegt ist.

nichtmoeglich

- In der Kinderecke ist weder ein Browser noch der Zugriff auf die Daten des Handys oder der SD Karte verfügbar.
Spiele, Musik, Videos und Apps können jedoch einzeln frei gegeben werden.

KCmixedwip

 

 

Zusatztipp:

Sollten Sie das Smartphone einmal verlieren, bietet Windows Phone den Service es zu orten bzw. die letzte Position, die bestimmt werden konnte, anzuzeigen.

Unter www.windowsphone.com in der Rubrik Mein Handy –> Mein Handy finden, lässt sich, nach Login im Microsoft-Konto, die letzte Position des Smartphones anzeigen bzw. das Smartphone anklingeln, selbst wenn es eigentlich auf Stumm geschaltet ist.

 

aktuellerStandort

Deklarativ Variablen in HTML mit Angular zuweisen

Ein Angular Controller enthält eine Liste, die per Ajax Call aus einem Json REST Service gefüllt werden. Dies ist eine Eigenschaft des Scope.

   1:  App.controller('chatController', function ($scope, $http) {
   2:      $scope.chatUsers = [];

In diesem Array sollen bestimmte Werte vorbelegt werden. Als Anwendungsfall kann man eine Dropdownliste nennen. In dieser sollen drei Länder vorbelegt werden, wie z.B. DE, AT und CH. Der Rest soll aus der Datenbank bzw. aus einem Service zusätzlich angezeigt werden. Wie kann man also Werte vorbelegen? Natürlich geht das im JavaScript Code des Controllers. Auch ein Modul lässt sich dafür einsetzen. Wenn man allerdings mit ng-init arbeitet, kann man mit einem deklarativen Ansatz dem UI Designer die Entscheidung überlassen. Das Array wird im HTML Code befüllt.

   1:   <div ng-controller="chatController">
   2:          <div ng-init="chatUsers = [ {name:'Franz',  userId:700000},
   3:                                   {name:'Laura',  userId:1300000}
   4:      ]"></div>

Diesen Ansatz könnte man durchaus auch für Offline-Daten nehmen, um etwas anzuzeigen, solange der Service nicht bereit ist.

Windows 8.1: Was wurde aus dem Leistungsindex?

Vor langer Zeit führte Microsoft den Leistungsindex mit Windows Vista ein. Dabei handelte es sich um eine Art Benchmark, über die der Nutzer seinen PC von Windows bewerten konnte. Nach einen Leistungstest ergab sich am Ende für die verschiedenen Komponenten wie beispielsweise CPU, Arbeitsspeicher, Festplatte und Grafikkarte eine Bewertung.

Der Leistungsindex konnte über Systemsteuerung > System und Sicherheit > System eingesehen und aktualisiert werden.

clip_image002

Da Microsoft den Leistungsindex in Windows 8.1. entfernt hat, kann er nicht wieder aktiviert werden, jedoch lässt sich dieser über einem kleinen Umweg aufrufen.

Hierzu rufen Sie in Windows 8.1 die Suche mit Windows + S auf. Danach geben Sie winsat ein und klicken auf das gefundene Feature winsat.

Nach Abschluss des Durchlaufs rufen Sie PowerShell auf, indem Sie erneut die Suche öffnen und PowerShell eingeben. Im PowerShell Fenster geben Sie in den Befehl „gwmi win32_winsat“ ein und drücken Enter.

clip_image004

Die Anzeige ist zwar nicht so hübsch grafisch dargestellt wie in Vorgängerversionen, allerdings ist die Ausgabe der Leistungswerte dennoch informativ.

Es gibt zusätzlich die Möglichkeit im Ordnerverzeichnis: „C:\Windows\Perfomance\WinSAT\DataStore“, indem sich die Datei „Formal.Assessment(Initial).WinSAT.xml“ befindet, diese im entsprechenden Editor oder im Browser aufzurufen.

clip_image006

 

Der Wert für den Leistungsindex findet sich im Knoten <WINSPR><SystemScore> inklusive weiterer Detailwerte für die anderen Komponenten.

 

clip_image008

 

 

 

Import eines EFS-Verschlüsselungszertifikats

 

Haben Sie Ihr Kennwort für das Benutzerkonto vergessen und musste dieses vom Administrator zurückgesetzt werden?  Sollen Dritte auf Ihre verschlüsselten Dateien zugreifen können oder möchten Sie Ihre verschlüsselten Dateien auf einem anderen Rechner einsehen? In allen Fällen lässt sich das Problem durch den Import des Verschlüsselungszertifikats lösen. Sobald dieses unter Windows in einem Benutzerkonto importiert wird, können die mit diesem Zertifikat verschlüsselten Dateien unter diesem Konto eingesehen werden.

 

  1. Doppelklicken Sie auf die exportierte EFS-Datei.
  2. Kicken Sie im Dialogfeld Zertifikatimport-Assistent auf die Schaltfläche Weiter. Bild19.png
  3. Geben Sie bei Bedarf den Standort und Namen des digitalen EFS-Zertifikats ein, und klicken Sie dann auf Weiter.          Bild20.png
  4. Geben Sie das Schutzkennwort ein, das während des Exports des EFS-Zertifikats erstellt wurde, sowie den Punkt Schlüssel als exportierbar markieren und klicken Sie dann auf Weiter.                        Bild24.png
  5. Damit der Zertifikatimport-Assistent das EFS-Zertifikat in den korrekten Speicherort importieren kann, markieren Sie das Optionsfeld Alle Zertifikate in folgendem Speicher speichern), und klicken Sie dann auf Weiter. Bild25.png
  6. Klicken Sie im letzten Fenster auf Fertig stellen.

Nun ist das Zertifikat installiert und kann verwendet werden.

JQuery Mobile mit ASP.NET Intro Video

Auf der #NRWConf hatte ich das Vergnügen einen Vortrag zu mobile Web Apps mit JQM und ASP.NET halten zu dürfen. Morgens beim ersten eMail check, der Schock. Nach Bluescreen bootet mein Fujitsu T904  bzw. Windows 8.1 in den Reparaturscreen. Ein kryptische Meldung, das kein lokaler Admin Account vorhanden ist, verhindert sämtliche Reparatur Optionen. Auch ein Boot von USB ist nicht möglich.

Dank wunderbarer Hilfe von Daniel Fischer, Melanie Eibl und Stefan Lange konnte ich die Session um 14:50 doch noch durchführen. Letztlich dank eines brandneuen Surface Pro 3 time sponsored bei Stefan. Sozusagen Live Test von Tastatur und Device. Wer schon mal Ad Hoc eine andere Umgebung und vor allem anderes Keyboard benutzt hat, kennt die Stolpersteine.

Also aus vier per Facebook angekündigten Slides wurden 0. Beinahe 60 Minuten Live Coding mit Northwind rund um

  • Visual Studio 2013 und ASP.NET Webforms Modelbinding
  • Jquery Mobile Einrichten und Funktion Intro
  • Listen- Relationen, Suchen, nummerisches Paging- Forward Paging
  • Formular- Anzeigen Edit

Die Stimmung im Publikum war großartig. Szenenapplaus, aktives mitgehen- You Rock!

Um allen das Nachlesen, bzw. nachschauen zu ermöglichen share ich hier das Recording, das ich Tage vorher aufgenommen habe, um das Timing der Demos zu testen. (Produktwarnung VB.NET und Webforms Zwinkerndes Smiley)

Übrigens Vimeo weil ohne störende Werbung und fern der Datenkrake Google.

Die NRWConf war ein Superevent, sehr persönlich und engagiert. Danke an Daniel Fischer und Kostja Klein. Es war mir eine Ehre.

Windows 8/8.1: Fritz!fax installieren

Nicht nur im privaten Bereich, sondern auch in vielen kleinen Unternehmen im Einsatz: eine Fritz!Box mit Telefonfunktion (z.B. Fritz!Box 7390). Der Hersteller AVM stellt für diese Modelle die Software Fritz!fax kostenlos zur Verfügung. Diese ermöglicht das einfache Faxen auf einem Computer in Form von Druckertreibern.

Die aktuelle Version von Fritz!fax hat die Versionsnummer 03.07.04 und ist laut Hersteller mit 32bit- und 64bit-Versionen von Windows XP, Windows Vista und Windows 7 kompatibel. Windows 8 bzw. Windows 8.1 ist nicht aufgeführt – die Installation unter diesen Windows-Versionen bereitet auch in der Tat Probleme! Mit einigen Einstellungen, die man vor der Installation vornehmen muss, steht jedoch der Installation und der Betrieb von Fritz!fax unter Windows 8/8.1 nichts im Wege:

1. CAPI over TCP aktivieren
Damit vom Computer aus gefaxt werden kann, muss die Funktion “CAPI over TCP” in der Fritz!Box aktiviert sein. Hierfür einfach ein Telefon (analog oder ISDN) an die Fritz!Box anschließen und die Tastenfolge #96*3* eingeben und auflegen. Dadurch wird die Funktion aktiviert. (Falls die Funktion schon aktiviert ist und es Probleme beim Faxen gibt die Funktion einmal  mit der Tastenfolge #96*2* deaktivieren und danach wieder aktivieren).

2. Benutzerkontensteuerung (vorübergehend) deaktivieren
Unter der Systemsteuerung (“System und Sicherheit” –> “Einstellungen der Benutzerkontensteuerung ändern”) kann die Benutzerkontensteuerung deaktiviert werden, in dem man den Schieberegler auf die unterste Position stellt (nach der Installation von Fritz!fax wieder zurückstellen!)

Einstellungen für Benutzerkontensteuerung

3. Kompatibilitätsmodus aktivieren
In den Eigenschaften der heruntergeladenen Setup-Datei von Fritz!fax (Rechts-Klick auf FRITZ!fax_3.07.04.exe –> Eigenschaften;  Registrierkarte “Kompatibilität”) vor “Programm im Kompatibilitätsmodus ausführen von” den Haken aktivieren und als Windows Version “Windows 7” auswählen. Hinzu kommt die Einstellung “Programm als Administrator ausführen”, die in dem Eigenschaften-Fenster etwas weiter unten zu finden ist.

Eigenschaften von FRITZ!fax_3.07.04.exe

4. Installation von Fritz!fax starten
Jetzt kann das Setup-Programm von Fritz!fax gestartet werden.

Setup

Man sollte hier jedoch etwas Geduld mitbringen. Da Fenster mit der Prozent-Anzeige bleibt für eine kurze Zeit bei 99% stehen. Danach verschwindet dieses und es kann dann paar Minuten dauern, bis das eigentliche Setup-Programm zu sehen ist!

Setup2

Je nach aktiver Firewall können Nachfragen bzgl. einer Port-Aktivierung erscheinen, die dann auch genehmigt werden sollten, damit das Setup-Programm mit der Fritz!Box kommunizieren kann.

5. Fertig!
Nach der Installation sollten sich unter “Geräte und Drucker” (Systemsteuerung –> “Hardware und Sound”) die Drucker “FRITZfax” und “FRITZfax Color” befinden und können ab sofort verwendet werden.

Umstellung auf Windows Phone 8.1, Screenshots und Facebook

 

Windows Phone 8.1 ist nun für die meisten Handytypen verfügbar, ein Feature das im Kontext der Umstellung aber vielleicht nicht jedem bekannt und trotzdem nützlich ist, ist die schnelle Erstellung von Screenshots. Durch Druck auf die Lauter- und Powertaste (vormals Home- und Powertaste) gleichzeitig wird das analoge Notieren von Fehlermeldungen überflüssig. Wer sich nicht sicher ist ob er schon Windows Phone 8.1 nutzt, schaut einfach hier: Einstellungen –> Info

image

Versionen 8.0.0xxx Windows 8
Versionen 8.0.1xxx Windows 8.1

Warnung: Die Smartphones von Nutzern, welche die Developers Preview App für Windows 8.1 verwendeten, meldeten vermehrt komplett unbrauchbare Smartphones, welche erst wieder mit dem Nokia Recovery Tool zurückgesetzt werden mussten. Das ging mit Datenverlust einher. 

Wer bisher schon Facebook auf seinem Smartphone installiert hatte, wird nach der Umstellung eventuell den folgenden Effekt erleben:                                                                                                                                                                                                                                                                                                                                       

Facebookbugedited

Bei der Umstellung kann es dazu kommen, dass die Verkettung von Kontakten auf dem Handy gelöst wird.
Um wieder wie gewohnt die Facebook Kontakte im Chatverlauf angezeigt zu bekommen und aus dem Chat heraus zu schreiben bedarf es in der Regel drei einfacher Schritte.

1. Handy neu starten.

2. Per Browser auf Facebook einloggen und etwaigen Nachfragen zur Verknüpfung von Kontakten zustimmen.

3. Handy noch einmal neu starten.

Jump Start Training: JavaScript, HTML und CSS

Month List