codefest.at

Computer: New Project: Build!

Toni Pohl — Fri, 24 May 2013 23:59:29 +0200

Visual Studio per Sprache steuern? Geht das? Ja, und zwar mit einem kostenfreien Sprachsteuerungs-Control aus der Visual Studio Gallery:

Voice Commands

Autor von Voice Commands ist Mads Kristensen, der auch unter anderem die äußerst populären Web Essentials 2012und viele weitere Add-Ons für Visual Studio geschrieben hat.

Nach der Installation von VoiceExtension.vsix erscheint im Menü Tools der Eintrag Start Listening.

Zum Starten: Tools / Start Listening – oder Alt + V drücken.

Danach wird der Name eines Befehls gesprochen, zum Beispiel:

Build, Format Document , Solution Explorer , New Project , Options.

Auf github ist eine List of available commands verfügbar, es sind fast 3000 Befehle möglich.

Unter der Haube verwendet Voice Commands die Windows Speech API von Windows. Diese kann durch Hinzufügen einer Referenz auf Windows auf System.Speech selbst verwendet werden.

Wozu braucht man die Sprachsteuerung? Es mag vielleicht ein wenig lustig klingen, wenn man dem Computer wie in Star Trek befiehlt: Recompile all. Aber zum Ausprobieren allemal witzig.

Nunja, Kaffee oder Earl Grey kann Visual Studio noch nicht machen, aber wer weiß….?

IISExpress und SSL–configuring web https failed

Toni Pohl — Thu, 23 May 2013 07:05:00 +0200

Visual Studio 2012 ist super. Es nimmt dem Webdeveloper viel Arbeit ab, indem standardmäßig der integrierte Webserver IISExpress verwendet wird. Beim Erstellen einer App generiert VS eine URL mit http://localhost und einer zufälligen Portnummer aus dem Pool. Soweit so gut. Nur was tun, wenn ein Webprojekt mit einer https-URL kommt – und sich IISExpress partout weigert, diese Adresse zu finden?

Mir ist es so ergangen. Man öffnet nichts ahnend ein Projekt aus dem TFS und Visual Studio beschwert sich schon beim Öffnen: “Configuring Web https://… for ASP.NET 4.5 failed. You must manually configure this site for ASP.NET 4.5 in order for the site to run correctly.”. Die Solution öffnet brav, nur ist sie nicht lauffähig.

Nein, bitte nicht! Manuell Konfigurieren ist zwar leicht möglich (siehe Scott Hanselman´s Blog: Working with SSL at Development Time is easier with IISExpress und am Blogbeitrag Ende), aber…das kann doch nicht sein, oder?

Die Properties des Webprojekts zeigen die URL und die SSL URL, in diesem Beispiel https://localhost:44303:

Wenn man nun die WebApp startet, beschwert sich Visual Studio sofort:

Klar, das Verhalten erscheint mit der Fehlermeldung beim Öffnen der WebApp logisch. Nur, wie bringe ich IISExpress dazu, mit HTTPS zu arbeiten?

Grundsätzlich entspricht IISExpress dem “großen” IIS, jedoch nur als lokaler “persönlicher” (und integrierter) Webserver. Seit Visual Studio 2010 SP1 kann IISExpress SSL verwenden (der Vorgänger Cassini konnte das noch nicht) und auf localhost Ports größer 44300 verwenden. So können Webseiten mit SSL getestet werden (jedoch nicht mit dem Standard-Port 443).

Visual Studio - und auch die freie WebMatrix - bringen eigene self-signed certificates mit. IISExpress kann somit problemlos mit HTTPS umgehen und kümmert sich automatisch um alle erforderlichen Konfigurationen. Das kann man leicht ausprobieren, wenn man ein neues Webprojekt anlegt und dort den Schalter SSL Enabled = True setzt und die https-URL in den Project Properties einträgt und startet.

Hier die Probe mit einem nigel-nagel-neuen Web:

Run zum Testen, danach SSL Enabled auf True setzen. Damit wird automatisch die SSL URL eingetragen. Beim Starten folgt natürlich noch http://localhost:49791/. Das können wir leicht ändern, indem wir einfach die https-Adresse in den Project-Eigenschaften hinterlegen: https://localhost:44301/

…und das Web mit F5 starten: VS öffnet den Browser mit der https-Adresse. Der Benutzer muss natürlich dem ausgestellten Zertifikat vertrauen und die Verwendung für diese Session zulassen:

Beim “Laden dieser Website fortsetzen” folgt dann die App. Natürlich traut der Browser dem selbst ausgestellten Zertifikat nicht – aber für unsere Development-Zwecke ist diese Lösung perfekt.

Soweit so gut – IISExpress mit HTTPS funktioniert einwandfrei mit neuen WebApps. Zurück zu unserem Projekt das nicht funktioniert…

Zuerst bemüht man zumeist die Suchmaschine seiner Wahl um herauszufinden, was das Problem ist.
Die Lösung ist aber zum Glück wirklich … einfach!

So sieht die Konfiguration zuvor aus:

Wir stellen SSL Enabled auf False: Das klappt natürlich nicht, denn die SSL-Adresse ist ja im Project hinterlegt:

Also vor dem Umstellen die http-Adresse eintragen, Projekt speichern und dann SSL Enabled = False setzen.
Nun das Projekt testweise starten – es sollte alles (mit http) klappen.

Nun wird SSL Enabled wieder auf True gesetzt.

und die (neue) SSL URL wieder in den Project Properties hinterlegt:

…und das Web zum Testen neu gestartet – diesmal mit funktionierendem https.

Eine Alternative hierzu ist, die Bindings manuell einzutragen und zwar im Pfad C:\Users\<Kontoname>\Documents\IISExpress\config. Hier liegen drei IISExpress .config-Dateien:

In applicationhost.config merkt sich IISExpress die Projekte und deren Websettings für das Hosting. Natürlich können die Bindings für die Webprojekte auch hier manuell angepasst werden:

…bzw. Webprojekt-Bindings auch bereinigt werden, was manchmal auch ganz gut ist.

Und natürlich kann auch die .csproj Datei direkt bearbeitet werden, wo die Projekt-Adressen gespeichert sind:

<IISExpressSSLPort>44303</IISExpressSSLPort> <IISUrl>https://localhost:44303/</IISUrl>

Wenn http- und https-Port gleich sind, beschwert sich Visual Studio. In diesem Fall einfach unterschiedliche Ports verwenden.

Die Lösung ist also einfach – aber zu Beginn gar nicht so naheliegend:

Wenn das Binding-Problem besteht, zuerst SSL wie oben ausschalten und danach wieder einschalten!
Dann sollte es mit https auch mit bestehenden (und hartnäckigen Projekten) klappen.

Youtube Video App Framework revisited

Christian Vorhemus — Wed, 22 May 2013 13:22:26 +0200

In einem älteren Blogeintrag auf codefest hatte Kollege Binder in einer umfangreichen Auflistung diverser Frameworks für Windows 8 auch das Video App Framework von Thomas Mutzl vorgestellt, mit dem sehr schnell und einfach eigene Video-Apps erstellt werden können. Ein Teil des Frameworks ermöglicht es, Youtube-Videos per RSS abzurufen und in der App abzuspielen.

Downloaden lässt sich das Framework unter dieser Adresse (Reiter “Source Code”, Spalte “Download”). Nach dem Öffnen finden sich mit einem Klick auf “Verweise” zahlreiche nicht gefundene Referenzen, was durch ein gelbes Warndreieck angezeigt wird.

Selbst wer bereits früher die hier benötigten libraries gedownloaded hat, könnte beim Compilieren Fehlermeldungen erhalten. Grund dafür ist, dass Google für Youtube gerne seine Schnittstellen ändert, was eine Anpassung zahlreicher Drittapplikationen notwendig macht. Um einen Gutteil der notwendigen Pakete automatisch zu installieren, können wir mit der rechten Maustaste auf den Ordner “Verweise” und danach auf “NuGet-Pakete verwalten” klicken.

Im sich nun öffnenden Fenster klicken wir auf “Wiederherstellen” um den Vorgang abzuschließen.
Um ein Update der bereits installierten Pakete durchzuführen, wählen wir im Menü “Tools” > “Erweiterungen und Updates”

Hier können wir entweder selbst nach Paketen suchen, die uns noch fehlen (zB den Smooth Streaming Client") oder im Feld “Updates” alle Pakete aktualisieren, falls wir bereits ältere Versionen davon besitzen.

Im letzten Schritt unseres refreshes laden wir noch die aktuelle Version des Microsoft Player Frameworks herunter und installieren es durch einen Doppelklick auf die .vsix-Datei.

Nun sollten alle Verweise korrekt aufgelöst werden und unsere App ist bereit, weiter angepasst zu werden. Es existiert eine Schritt-für-Schritt-Anleitung als Aufgabenliste, die wir mit einem Klick auf “Ansicht” > “Aufgabenliste” öffnen können.

Hier müssen wir nur noch “Benutzeraufgaben” auf “Kommentar” umschalten, um alle To-Do’s angezeigt zu bekommen. Mit einem Klick auf ein To-Do springt man automatisch an die entsprechende Stelle im Code.

Eines der wichtigsten Anpassungen ist natürlich das Einfügen der RSS-URI, der auf jenen Youtube-Channel verlinkt, der in unserer App angezeigt werden soll. Die entsprechende Variable befindet sich in der MainViewModel.cs

Um nun die benötigte RSS-Adresse zu erhalten, navigieren wir zu einem Youtube-Channel unserer Wahl und klicken in der - zuvor durch einen Rechtsklick auf die obere Leiste aktivierten - Menüleiste auf “Extras” > “Feedsuche” > “RSS”. Es öffnet sich eine neue Seite, deren URI wir kopieren und als string “RssUri” speichern.

Abschließend können wir noch Aussehen und Layout der App anpassen und danach steht einem Upload in den Storenichts mehr im Wege!

Apps zu einem bestimmten Datum in den Windows Store veröffentlichen

Rina Ahmed — Wed, 15 May 2013 16:00:37 +0200

Der Windows Store gibt Entwicklern die Möglichkeit, Apps nicht nur gleich nach der Zertifizierung sondern stattdessen auch zu einem bestimmten Datum zu veröffentlichen. Es gibt verschiedenste Gründe, warum man ein konkretes Veröffentlichungsdatum bei der App-Einreichung angeben würde.

Beispiele dafür können sein, dass man noch entsprechende Marketingaktivitäten für die App durchführen möchte und die Veröffentlichung entsprechend ankündigen will. Eine App, die von großem öffentlichen Interesse ist, wird zum Beispiel zeitgleich zur entsprechenden Medienpräsenz veröffentlicht werden.

Wenn Unternehmen Apps für bestimmte Arbeitsprozesse für Kunden entwickeln, ist es vielleicht nötig, die Kunden im Vorhinein zu verständigen oder vorzubereiten.

Es kann aber auch möglich sein, dass ich beispielsweise ein Datum als Zielvorgabe für meine App bekomme, aber im Vorhinein schon weiß, dass ich zu dem Zeitpunkt nicht verfügbar bin, weil ich in dieser Zeit bereits andere Termine habe. Da ich aber die Möglichkeit habe, Apps später zu einem bestimmten Datum in der Zukunft zu veröffentlichen, kann ich mir vorher einteilen, wann ich die App entwickle und einreiche und mich dann darauf verlassen, dass die App nach erfolgreicher Zertifizierung wirklich an dem Tag in dem Windows Store erscheint, den ich angebe.

Wie funktioniert das Ganze? Ich gehe, davon aus, dass die allgemeine Prozedur, wie Apps in den Windows Store eingereicht werden, bekannt ist. Es gibt hier in Codefest eine gute Anleitung zum Einreichen von Apps in den Windows Store.

Wir gehen zunächst in unser Dashboard vom Windows Store, nachdem wir uns auf dev.windows.com mit unserem Microsoft Account eingeloggt haben. Dort gibt es in der linken Spalten den Link Submit an App, wo der Einreichungsprozess für die App beginnt.

In diesem Prozess reservieren und speichern wir uns den Namen für unsere App.

Der zweite Schritt bei der Einreichung sind die Verkaufsdetails und in diesem Schritt können wir auch unser Veröffentlichungsdatum festlegen. Hier würde man zuerst den Preis für die App festlegen, dann die regionalen Märkte, in denen die App im Store erscheinen soll und letztendlich kommt der Punkt Release Date, bei dem ich mein gewünschtes Veröffentlichungsdatum angeben kann.

Das heißt, wenn ich beispielsweise möchte, dass meine App am 1. Juli 2013 erscheint, dann gebe ich in dem Punkt Release Date dieses Datum an.

Da bei mir die Anzeigesprache im Store US-amerikanisch ist, wird bei mir auch der Monat an erster Stelle angegeben. Aber es wird im Feld explizit angegeben, dass es sich um das Monat-Feld bzw. Tag-Feld handelt.

Der Rest des Einreich-Prozesses funktioniert wie gehabt. Nachdem ich alle Punkte der Einreichung ausgefüllt, mein Package hochgeladen und auf Submit App to Store geklickt habe, ist mein Teil der Einreichung beendet. Nun werden verschiedene Tests mit der App durchgeführt und sobald sie alle Tests bestanden hat, wird sie erfolgreich zertifiziert.

Meine App wird nach erfolgreicher Zertifizierung aber nicht in den Store erscheinen, sondern erst zu dem Datum, das ich bei Release Date angegeben habe.

Beachten sollte man noch, dass nachdem der Submit Button betätigt wurde, der Entwickler nicht mehr auf den Zertifizierungs- und Veröffentlichungsprozess Einfluss nehmen kann. Wenn man daher im Nachhinein das Datum ändern möchte, so müsste man die App erneut als zweite Version hochladen und mit einem anderem Release Date einreichen.

Alles in allem ist dieses Feature des Windows Store jedoch eine recht praktische Sache, da es dem Entwickler der App ermöglicht wird, auf andere Umstände Rücksicht zu nehmen, wenn die App veröffentlicht wird.

BuildWindows Second Chance

Toni Pohl — Tue, 14 May 2013 00:05:00 +0200

Dieses Jahr war die Microsoft BuildWindows Konferenz in S.F. in weniger als drei Stunden ausgebucht. Für alle jene, die gerne hingefahren wären, aber keinen Platz mehr gefunden haben, eröffnet der Veranstalter am 15. Mai eine zweite Chance. Mit der Ankündigung “We made more room” werden diesen Mittwoch ab 18 Uhr unserer Zeit weitere Tickets verkauft.

Zum Buchen & Infos zur Konferenz siehe www.buildwindows.com.

Viel Spaß!

Corp UX Speaker Arturo Toledo und Brady Voss am 25.Mai in Wien

Petra Kleiber — Mon, 13 May 2013 14:46:07 +0200

Arturo Toledo, Windows 8 UX Team und Brady Voss, Windows Phone UX Team machen am 25.Mai im Rahmen unseres Hacktahons in Wien Halt. Mit einigen Infos aus den Product Teams und diesen Sessions im Gepäck:

Vortragssprache: Englisch

Zur Anmeldung

Weitere Infos zu den Sessions

Und noch ein paar Tipps und Tricks der Vortragenden:

1 - The link to Expression Design is http://www.microsoft.com/en-us/download/details.aspx?id=36180 (Only Windows, no OSX). We recommend you bring it installed :)

2 - The 4 books that are inspiring us for this tour:

- Designing with the Mind in Mind

- Sketching User Experiences

- The Design of Everyday Things

- The Vignelli Canon (Free) www.vignelli.com/canon

3 - Bring your Windows and/or Windows Phone apps so we can do Mini Facelift Reviews at the end of the seminar. Mini Facelifts are 10-15 minute 1:1 sessions with you - we will give you tips and tricks and sketch out ideas for you.

4 - List of Good Design Resources

http://dev.windowsphone.com/en-us/design - Windows Design Guidelines

http://msdn.microsoft.com/en-us/library/windows/apps/hh779072.aspx - Windows Phone Design Guidelines

http://www.toledo2.com/2012/10/23/24-weeks-of-windows-phone-design/ - 24 Weeks of Windows Phone Design

http://www.windows8designhandbook.com/ - Useful Shortcut Infographics for Windows

http://www.modernuiicons.com - THE icon collection for Metro apps

http://www.microsoft.com/en-us/download/details.aspx?id=36180 - Expression Design

http://is.gd/hWZ8fe Designing with the Mind in Mind

http://www.vignelli.com/cannon.pdf - Master Design Massimo Vignelli's Manifesto

http://www.swissted.com/ - Awesomeness (Swiss Posters)

http://www.flickr.com/photos/20745656@N00/sets/72157594296535170 - Swiss Posters

http://www.bing.com/images/search?q=Swiss+design+posters - Everything Swiss Design via Bing

http://www.internationalposter.com/search-results.aspx?defaultview=browse&title=Int'l%20Typographic%20Style&style=Int'l%20Typographic%20Style - Nice Swiss Poster Collection

Microsoft Jump Start Series für Entwickler

Toni Pohl — Sun, 12 May 2013 15:56:08 +0200

Im Mai finden eine Reihe von Jump Start Sessions der Microsoft Virtual Academy für Software-Developer statt. Die virtuellen Trainings sind kostenlos und starten in unserer Zeitzone am frühen Abend ab 18 Uhr – viel besser als fernsehen.

Wer keine Zeit hat sollte sich dennoch anmelden und die Aufzeichnungen später ansehen.

Hier drei interessante MVA-JumpStart-Veranstaltungen:

Advanced Windows Store App Development using C# Jump Start

am 23. Mai, von 18 Uhr bis 1 Uhr früh.

In dieser Jump Start Session von Microsoft Technical Evangelist Jerry Nixon und Daren May geht es in verschiedenen Beispielen darum, wie fortgeschrittene Developer mit C# Windows Store Apps entwickeln können. Aus dem Inhalt:

Windows Store Apps Essentials
Implementing Animations and Transitions
Implementing Globalization and Localization
Branding and a Seamless User Interface
Advanced Data Scenarios in a Windows Store App
Creating Reusable Controls and Components
Implementing Advanced Contract Scenarios
The Windows Push Notification Service (WNS)
Capturing Media & Background Tasks
Generating Revenue with your App
Securing Windows Store App Data

Zur Session-Beschreibung und Anmeldung

Software Testing with Visual Studio 2012 (exam 70-497) Jump Start

am 28. Mai, von 18 Uhr bis 1 Uhr früh.

Software testing at it´s best! Diese Session von Anthony Borton und Steven Borg zeigt, wie man Development Prozesse mit Visual Studio 2013 erstellt und verbessert und application lifecycle management (ALM) im Unternehmen verwendet.

Create and Configure Test Plans
        - Create Test Plan Properties
        - Define and Configure Test Settings
        - Create and Configure Test Suites
Manage Test Cases:
        - Create Test Cases and Steps
        - Define Parameters
        - Manage Shared Steps and Requirements
Manage Test Execution:
        - Run and Analyze Recommended Tests
        - Perform Exploratory Testing and Analysis
        - Manage Bugs and Work Items

Zur Session-Beschreibung und Anmeldung

Administering Visual Studio Team Foundation Server 2012 (exam 70-496) Jump Start

am 29. Mai, von 18 Uhr bis 1 Uhr früh.

Anthony Borton und Steven Borg zeigen, wie man Team Foundation Server 2012 (TFS) für Codeverwaltung und ALM und effizientes Code-Building einsetzt.

Install and Configure Visual Studio 2012 Team Foundation Server
Manage Visual Studio 2012 Team Foundation Server
Customize Visual Studio 2012 Team Foundation Server for Team Use
Administer Version Control

Zur Session-Beschreibung und Anmeldung

Viel Spaß mit den kostenfreien MVA-Sessions!

Pizza Tour Windows 8 Development Nachlese

Petra Kleiber — Tue, 07 May 2013 12:32:31 +0200

Für all jene die uns bei der diesjährigen Frühjahrs - Pizzatour nicht besuchen konnten und jene die einfach nur in den Unterlagen schmökern und nachlesen wollen:

Die Nachlese mit den Samples und Präsentationsunterlagen ist online verfügbar!

Persistente Datenspeicherung für Windows 8 Apps in HTML5/Javascript

Christian Vorhemus — Wed, 01 May 2013 11:58:16 +0200

In diesem Tutorial soll gezeigt werden, wie Daten in einer Windows 8 App mittels IndexedDB gespeichert und wieder ausgelesen werden können. Als Beispiel dient dazu eine einfache Benutzerverwaltungs-App, mit der Benutzer angelegt und wieder gelöscht werden.

Ein kurzer Überblick über IndexedDB

Im Zuge der immer vielfältigeren Möglichkeiten, die mit klassischen Webapplikationen geschaffen werden können, wurden auch Stimmen nach effizienten clientseitige Speichermöglichkeiten laut. Bis dato war die persistente Datenspeicherung hier so gut wie gar nicht möglich: Lediglich Cookies erlaubten das Schreiben und Lesen von Parametern. Diese waren aber allein schon aufgrund der geringen erlaubten Speichergröße maximal für einige zu speichernden Einstellungen auf Webseiten zu gebrauchen. Mozilla wagte hier einen Vorstoß und führte als eine der Ersten für ihren Browser eine Index-basierte Datenbank ein. Schließlich wurde die Spezifikation für eine solche Datenbank vor gut einem Jahr vom W3-Konsortium verabschiedet und ist offiziell Bestandteil von HTML5.

Verwendet werden kann IndexedDB nicht nur mit Browsern wie Internet Explorer 10, Chrome oder Firefox sondern dank der weitreichenden HTML5-Unterstützung auch mit Windows 8!

Schritt 1: Projekt öffnen und vorbereiten

Zunächst öffnen wir in Visual Studio 2012 ein neues Projekt und wählen den Unterpunkt JavaScript > Windows Store > Navigations-App aus. (Hinweis: Wer neu in der Welt der HTML5/Javascript-Apps ist, mag sich als Einstieg vielleicht zuvor dieses Tutorial ansehen)

Ist das Projekt angelegt, navigieren wir in den Ordner pages/home und öffnen home.html. Dort ändern wir zunächst den style von ui-dark.css auf ui-light.css, schreiben im span-tag der Klasse “pagetitle” “Benutzerverwaltung” statt “Willkommen bei DBSample” und löschen die Zeile “Hier Inhalt einfügen” zwischen den <p></p>-Tags.

Als nächstes fügen wir die AppBar hinzu, die sich bei einem Rechtsklick in die App bzw. auf Touch-Devices von einer Wischbewegung vom unteren Rand nach oben öffnet. Dazu kopieren wir folgenden Code und fügen ihn in die home.html-Datei knapp über dem </body>-Tag ein:

    <div id="appbar" data-win-control="WinJS.UI.AppBar">

                <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'removeUser',

label:'Löschen', icon:'delete'}" type="button"></button>

        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'addUser', label:'Neu',
 icon:'add'}" type="button"></button>

    </div>

Wenn wir nun auf F5 klicken um die App zu starten und danach mit dem rechten Maustaste in die App klicken, sollte sich die noch funktionslose AppBar öffnen. Um die AppBar zu stylen, können wir uns übrigens der .win-appbar-property bedienen. Um den AppBar-Hintergrund grau zu färben, kopiere man nachfolgenden Code in die home.css-Datei:

.win-appbar {

    background-color: #CCCCCC;

Im nächsten Schritt legen wir ein Fenster an, das sich öffnet, wenn der User auf den “Neu”-Button in der AppBar klickt. Dazu schreiben wir ein <div>, in dem sich Text-inputs sowie Buttons befinden. Diesen Code fügen wir gleich nach dem <body>-Tag in home.html hinzu:

    <div id="addDiv">

        <h2>Neuen Benutzer hinzufügen</h2><p></p>

        <table>

            <tr><td>Name:</td><td><input type="text" id="username" /></td></tr>

            <tr><td>Alter:</td><td><input type="number" id="age"/></td></tr>

            <tr><td>Typ:</td><td><select id="type"><option>User</option><option>Administrator</option>

</select></td></tr>

        </table>

        <p></p>

        <input type="button" id="addEntry" value="Eintragen"/> <input type="button" id="close" 
value="Schließen"/>

    </div>

Um das <div> mittig auszurichten, kopiere man folgenden Code in die home.css-Datei:

#addDiv {

     color:black;

     display:none;

     height:250px;

     position: absolute;

     width:530px;

     z-index: 50;

     border: 5px solid grey;

     top: 50%;

     left: 50%;

     margin-top: -125px;

     margin-left: -287px;

     background-color:white;

     font-size:20px;

     padding-top:20px;

     padding-left:20px;

Das div wird zunächst nicht angezeigt (display:none;), kümmern wie uns nun um den Öffnen/Schließen-Mechanismus. Dazu öffnen wir die home.js-Datei. In Zeile 7 sehen wir den Eintrag “ready: function (element, options)”. In dieser Funktion wird die Seite initialisiert, hier werden wir auch unsere EventListener anlegen, damit bei Klicks auf die Buttons der AppBar das Fenster geöffnet wird. In dieser Funktion legen wir die folgenden drei EventListener an:

document.getElementById("addEntry").addEventListener("click", addEntry);

document.getElementById("close").addEventListener("click", closeWindow);

document.getElementById("addUser").addEventListener("click", openWindow);

Wird auf den Button mit der ID “addEntry” geklickt, wird die Funktion addEntry ausgeführt; Äquivalentes gilt für die anderen zwei Listener.
Legen wir nun die openWindow() und closeWindow() Funktionen an. Wir kopieren den nachfolgenden Code und fügen ihn kurz nach der WinJS.UI.Pages.define-Funktion ein.

    function openWindow() {

        document.getElementById("appbar").winControl.hide();

        var elm = document.getElementById("addDiv");

        elm.style.display = "block";

        WinJS.UI.Animation.fadeIn(elm);

    function closeWindow() {

        var elm = document.getElementById("addDiv");

        elm.style.display = "none";

Unsere home.js Datei sollte bis jetzt wie folgt aussehen:

Detail am Rande: In der openWindow-Funktion bedienen wir uns der von WinJS bereitgestellten fadeIn-Funktion um einen Fade-Effekt zu erzeugen. Eine Fade-Out-Animation gibt es auch – fadeOut heißt hier das Pendant.

Wenn wir nun auf den “Neu”-Button in unserer AppBar klicken, wird unser div geöffnet, die sich zentriert in der Bildschirmmitte befindet:

Schritt 2: Datenbank anlegen

Mit IndexedDB werden Objekte in Form eines key-value-pairs gespeichert, am häufigsten wird zu diesem Zweck die JSON- Notation verwendet. Würden wir mit einer relationalen Datenbank arbeiten, müssten wir für unsere Benutzerverwaltung zunächst die Datenbank erstellen. Das könnte für relationale Datenbanken in MySQL etwa so aussehen:

CREATE DATABASE userDatabase;

In unserer IndexedDB legen wir eine Datenbank wie folgt an:

var request = window.indexedDB.open("userDatabase ", 1);

Der erste Parameter ist der Datenbankname, der zweite gibt die Versionsnummer an (immer wenn sich das Datenbankschema ändert, muss sich auch die Versionsnummer ändern). Die open()-Funktion selbst retourniert ein Request-Objekt, das mehrere Zustände beschreiben kann: Success, Error, Blocked und UpgradeNeeded wobei letzterer Zustand immer dann aufgerufen wird, wenn sich die Versionsnummer ändert.
Um die Datenbank anlegen bzw öffnen zu können, fügen wir folgende Funktion kurz oberhalb von openWindow in home.js ein:

    var db = null;

    function openDatabase() {

        var dbRequest = window.indexedDB.open("userDatabase", 1);

        dbRequest.onerror = function () { console.log("Fehler beim Erstellen der Datenbank"); };

        dbRequest.onblocked = function () { console.log("Datenbank blockiert"); };

        dbRequest.onsuccess = function (evt) {

            db = evt.target.result;

            showEntries();

};

        dbRequest.onupgradeneeded = function (evt) {

            if (db) {

                db.close();

            db = evt.target.result;

            var txn = evt.target.transaction;

            var bookStore = db.createObjectStore("userlist", { keyPath: "id", autoIncrement: true });

            bookStore.createIndex("username", "username", { unique: false });

            txn.oncomplete = function () { };

};

    function showEntries() {

Die openDatabse()-Funktion soll bei der Initialisierung der Seite aufgerufen werden, wir fügen daher den Eintrag

openDatabase();

kurz unterhalb des EventListeners

document.getElementById("addUser").addEventListener("click", openWindow);

hinzu.

In relationalen Datenbanken würden wir im nächsten Schritt das Datenbankschema in SQL anlegen, was (in MySQL) etwa so aussehen könnte:

CREATE TABLE user (
id INT PRIMARY KEY,
username VARCHAR(40) ,
age INT,
type ENUM(‘Administrator’, ‘User’)
);

Mit diesem Code legen wir also eine Tabelle an, in die wir nun Daten ablegen können. Mit IndexedDB kreieren wir im Unterschied dazu Objekt-Storages. Das ist nichts anderes als ein Speicherplatz mit einem zugewiesenen Namen, in den Objekte (als key-value-pair) abgelegt werden können. Ein “richtiges” Schema für Tabellen wie bei relationalen Datenbanken gibt es hierbei nicht. Der entsprechende Code um ein solches Objekt-Storage für die Benutzerverwaltung anzulegen, könnte in etwa wie folgt aussehen:

db.createObjectStore("users",{keyPath: "id"});

keypath gibt hierbei jenen value an, mit der der Datensatz eindeutig identifiziert werden kann.

Unsere Datenbank steht nun bereit um Daten aufzunehmen, fügen wir nun eine Funktion addEntry() hinzu. Diese können wir oberhalb von openDatabase einfügen:

    var user = new WinJS.Binding.List();

    WinJS.Namespace.define("UserList", {

        user: user

});

    function addEntry() {

        var username = document.getElementById("username").value

        var age = document.getElementById("age").value

        var type = document.getElementById("type").value

        var id = 0;

        if (user.length != 0) {

            user.dataSource.itemFromIndex(user.length - 1).done(function (item) {

                id = item.data.id + 1;

});

        var item = { "id": id, "username": username, "age": age, "type": type, "picture": 
"/images/user.png" };

        var transaction = db.transaction("userlist", "readwrite");

        var addRequest = transaction.objectStore("userlist").add(item);

        addRequest.onsuccess = function (evt) {

            user.push(item);

        closeWindow();

Um Daten löschen zu können, legen wir nun in der home.js-Datei einen weiteren EventListener in der ready-Funktion an:

document.getElementById("removeUser").addEventListener("click", deleteEntry);

… die zugehörige deleteEntry()-Funktion sieht so aus, diese kopieren wir unter die addEntry-Funktion:

    function deleteEntry() {

        var listView = document.getElementById("itemsListView").winControl;

        listView.selection.getItems().done(function (currentSelection) {

            currentSelection.forEach(function (selectedItem) {

                var dbKey = selectedItem.data.id;

                var listViewKey = selectedItem.key;

                var transaction = db.transaction("userlist", "readwrite");

                var deleteRequest = transaction.objectStore("userlist").delete(dbKey);

                deleteRequest.onsuccess = function () {

                    user.dataSource.remove(listViewKey);

                deleteRequest.onerror = function () {

});

});

        document.getElementById("appbar").winControl.hide();

Schritt 3: ListView erstellen

Im letzten Schritt haben wir unter anderem die Zeile

var user = new WinJS.Binding.List();

hinzugefügt. Diese so definierte Liste “user” verwenden wir, um darin alle Benutzer zu speichern, die wir aus der Datenbank auslesen um diese schließlich zu unserer ListView hinzuzufügen. Die ListView selbst ist nichts anderes als eine von WinJS zur Verfügung gestellte control um eine Ansammlung an Items im Sinne des "Modern UI” anzuzeigen.
Um unsere Liste “user” beim Initialisieren zunächst mit den Daten aus der Datenbank zu füllen, ersetzen wir die leere showEntries()-Funktion, die sich bereits in unserer home.js-Datei befindet, mit folgendem Code:

    function showEntries() {

        if (db) {

            var request = [];

            var transaction = db.transaction("userlist", "readonly");

            var store = transaction.objectStore("userlist");

            var index = store.index("username");

            index.openCursor().onsuccess = function (event) {

                var cursor = event.target.result;

                if (cursor) {

                    user.dataSource.insertAtEnd(null, cursor.value);

                    cursor.continue();

};

Nun müssen wir unsere Liste “user” allerdings auch anzeigen. Zu diesem Zweck fügen wir den folgenden Code in unsere home.html-Datei kurz nach “<section aria-label="Main content" role="main">” hinzu:

        <div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template" style="display: none">

        <div class="mediumListIconTextItem">

        <img src="#" class="mediumListIconTextItem-Image" data-win-bind="src: picture" />

                <div class="mediumListIconTextItem-Detail">

                    <b>Username:</b> <span data-win-bind="innerText: username"></span><br />

                    <b>Alter:</b> <span data-win-bind="innerText: age"></span><br />

                    <b>Accounttyp:</b> <span data-win-bind="innerText: type"></span>

                </div>

            </div>

        </div>

        <div id="itemsListView" data-win-control="WinJS.UI.ListView"

            data-win-options="{itemDataSource : UserList.user.dataSource,

                itemTemplate: select('#mediumListIconTextTemplate')}">

        </div>

Hier wird die ListView angelegt und mit einem entsprechenden Template versehen, sodass unsere Daten formatiert ausgegeben werden. Wenn wir die App testen, auf “Neu” klicken und einen Benutzer anlegen, können wir schon Einträge speichern, allerdings sieht der Eintrag noch etwas unfömig aus. Um das zu ändern, fügen wir zunächst folgendes Bild in den /image-Folder hinzu:

Außerdem fügen wir folgenden Code in unsere home.css ein:

#itemsListView {

    height: calc(100% - 80px);

    width:calc(100% - 90px);

    border: 0px solid red;

#itemsListView .win-container:not(.footprint):not(.hover)

    background-color: transparent;

    color:black;

    border: 1px solid gray;

.mediumListIconTextItem

    width: 282px;

    height: 70px;

    padding: 5px;

    overflow: hidden;

    display: -ms-grid;

    .mediumListIconTextItem img.mediumListIconTextItem-Image

        width: 60px;

        height: 60px;

        margin: 5px;

        -ms-grid-column: 1;

    .mediumListIconTextItem .mediumListIconTextItem-Detail

        margin: 5px;

        -ms-grid-column: 2;

Mit diesem Schritt sind wir bereits fertig: Wir können nun Benutzer hinzufügen indem wir in der AppBar auf “Neu” klicken. Wenn wir Benutzer löschen wollen, klicken wir mit der rechten Maustaste auf die jeweiligen Einträge um sie auszuwählen und dann nochmals mit der rechten Maustaste um auf den “Löschen”-Button klicken zu können.

Ein nettes Feature wäre noch, wenn sich bei einer Auswahl an Einträgen die AppBar automatisch öffnet, diese Funktion fügen wir im finalen Schritt 4 noch hinzu.

Schritt 4: Öffnen der AppBar durch selectionchanged-Events

Zunächst fügen wir wieder einen EventListener in der ready-Funktion in home.js ein:

document.getElementById("itemsListView").winControl.addEventListener("selectionchanged", changedSelection);

Danach fügen wir die nachfolgende changedSelection-Funktion zB unterhalb von deleteEntry hinzu:

    function changedSelection(eventObject) {

        document.getElementById("appbar").winControl.show();

In Worten gesprochen passiert hier folgendes: Immer dann, wenn sich die aktuelle Auswahl (Rechtsklick) der itemsListView ändert, öffnet sich die AppBar.
Den Quellcode dieses Projekts gibt es auf http://www.wissen-kompakt.at/codefest/DBSample.zip zum Download!

Los gehts!

Dieses Tutorial ist nur ein Einstiegspunkt für weitere eigene Entwicklungen. Die Möglichkeiten, diese App zu erweitern sind unbegrenzt und reichen zB von einem FilePicker, um statt dem User-Platzhalter-Icon Fotos von Benutzern zu speichern, bis hin zu automatischer Datensynchronisation, um auf allen Geräten stets den gleichen Datenstand zu haben.

Nur empfehlen kann man abschließend die umfangreichen Dokumentationen und Codebeispiele auf msdn.microsoft.com, die einen tieferen Einblick in die Materie bieten.

Windows Azure SDK 2.0 for .NET

Toni Pohl — Wed, 01 May 2013 11:14:00 +0200

Ganz frisch ist das Windows Azure SDK 2.0 für .NET, siehe auch Announcing the release of Windows Azure SDK 2.0 for .NET in ScottGu´s Blog.

In diesem Update sind viele neue Features enthalten, so etwa wurde das Visual Studio Tooling für Website Publishing, Verwaltung und Diagnose erneuert, das Handling von Cloud Services wurde verbessert und ist nun schneller, es bietet Unterstützung für Storage Client 2.0 und – etwas, was mich sehr freut – es gibt Support für Storage Tables Services im Visual Studio Server Explorer, in Service Bus können Messages nun angesehen (browsing) werden und es gibt erweiterte PowerShell Unterstützung um Web Sites, Cloud Services und VMs zu automatisieren.

Am einfachsten erfolgt die Installation über den Web Platform Installer.
Direkt folgt der Web-Installer für VS2012 über http://go.microsoft.com/fwlink/?LinkID=296343,
für VS 2010 SP1 über http://go.microsoft.com/fwlink/?LinkID=296344.

Im SDK sind folgende Komponenten enthalten:

Nach wenigen Minuten ist das Setup durchgelaufen.

Das Azure SDK for .NET 2.0 kann auch über http://www.windowsazure.com/en-us/develop/net/ bezogen werden und ist als Open Source Projekt auf https://github.com/WindowsAzure/azure-sdk-for-net verfügbar.

Einzeln sind die Module von http://www.microsoft.com/de-de/download/details.aspx?id=38797 downloadbar.

Die Neuerungen im Detail beschreibt ScottGu schön in seinem Blogpost.

Viel Spaß mit dem neuen Azure SDK und beim Ausprobieren der neuen Funktionen!