Event (16. Juni): //build Zusammenfassung - Track für Open Source Enthusiasten

Von Gerwald+Oberleitner Autor Feed 10. June 2016 16:52
Ich habe bei unserer lokalen //build Zusammenfassung am 16. Juni die Aufgabe des “Track-Owners” für den Open Source Track übernommen. Wir sehen uns bereits am Beginn des Tages in der Keynote gemeinsam mit Georg Binder und dem Leiter der DX Gruppe Nico Sorger. Nachdem die Agenda für jeden Track in einem “agile” Modus entstanden ist (und daher häufigen Anpassungen unterworfen ist) möchte ich hier (knapp vor Ende des Sprints) einen aktuellen Status zu den Vorträgen und Inhalten geben. Track für Open Source Enthusiasten Moderation: Gerwald Oberleitner Vortrag 1: .NET & Open Source, Andreas Willich (TechTalk) Der Vortrag gibt einen aktuellen Staus zu .NET Core, ASP.Net Core und vielen weiteren Open Source Aktivitäten der .NET Foundation Inc. Vortrag 2: Node.js, NPM, Gulp & Co – Web Development Tools für Visual Studio Entwickler, Rainer Stropek (Time Cockpit) Für Webentwicklung auf der Microsoft-Platform gibt es im Moment sehr viel Neues zu lernen. Nicht nur, dass ASP.NET Core einige grundlegende Änderungen bringen, die gesamte Toolsammlung für Webentwicklung ist nicht mehr wiederzuerkennen. Microsoft wendet sich verstärkt bestehenden, plattformunabhängigen Tools aus der Open Source Welt zu und integriert diese in die kommende Visual Studio Version. Das Ergebnis ist eine Vielzahl an neuen Werkzeugen, die auf den ersten Blick verwirrend wirkt. In dieser Session bringt Rainer Stropek Ordnung ins Chaos indem er drei der Tools vorstellt, die für Visual Studio Webentwicklung neu sind: Node.js, Gulp und NPM. Vortrag 3: Data in an open world – Daten skalierbar in Microsoft Azure speichern, analysieren, darstellen, Florian Mader (Microsoft) Der Vortrag enthält einen Streifzug durch die Welt der Daten in Microsoft Azure und betrachtet die aktuellen Angebote auf der Basis von Open Source Projekten. Dazu gehören Hadoop, der MongoDB Treiber für die DocumentDB, …. Vortrag 4: Open DevOps – x-Platform Build & Release Management, Oliver Lintner & Gerwald Oberleitner (Microsoft) "Microsoft loves Open Source": Unter dem neuen CEO S. Nadella wurde mit "Mobile First, Cloud First" eine neue Ära begonnen. Dies spiegelt sich auch in den DevOps & Application Lifecycle Management (ALM) Werkzeugen wieder. Grund genug sich die Werkzeuge und deren OSS Integration in dieser Session genauer anzusehen... Wir werden uns anhand des Beispiels einer Android Applikation (Xamarin) und den Visual Studio Team Services den Continuous integration (CI) und Continuous delivery (CD) Workflow ansehen und auch wie wir Feedback von und zu unserer Applikation erhalten können. Die Vortragenden und ich freuen uns auf Ihr kommen !

DevOps Training (mit praktischen Übungen) für Microsoft Partner

Von Gerwald+Oberleitner Autor Feed 19. May 2016 12:35
      Software engineering practices have changed drastically in the last few years. Agile practices, DevOps, Cloud Computing, Open Source and similar developments have proven their effectiveness. Microsoft’s platforms for software development and cloud computing have also embraced these concepts and are at the leading edge in their domain. Microsoft Austria offers a free 2-day training to qualifying Partners where you can deepen your knowledge on how software development works and has evolved with Microsoft’s tools and supported languages.       Date & Time 20. & 21. June 2016, 9am-5pm Microsoft Office, Am Euro Platz 3, 1120 Wien, Room Forum A+B Apply here – preference will be given to Microsoft Gold/Silver Certified Partner registrations (AppDev, Cloud & ALM competency), vacant places will be assigned on a frist come first serve basis to all other registrations starting two weeks before the training, please wait for your confirmation to attend the training (ONLY confirmed attendees can participate!)           Based on a consistent sample, you will learn how to … setup a development environment for a modern SPA web application with the latest versions of Visual Studio and Visual Studio Team Services, develop cross-platform RESTful web APIs with C#, .NET Core and ASP.NET Core, benefit from the latest developments in the Visual Studio C# IDE (e.g. PerfTips, live code analysis, CodeLense, diagnostic tools, etc.), integrate modern front-end development frameworks and languages like Angular 2 and TypeScript in Visual Studio, use cross-platform build- and test-automation tools like Visual Studio Web and Load Tests, VS Team Services, Gulp, xUnit and Jasmine to automate your build- and quality assurance processes, create highly available and secure environments for your web APIs and web applications in Microsoft Azure with Azure Resource Manager (ARM), setup a multi-stage (dev/test/prod) environment in Azure App Services, learn about the advantages of the upcoming container technology Docker and automate deployment to Microsoft Azure with Visual Studio Release Management. Further information:     Training language: German Target audience: Software Developers ALM/DevOps consultants Session level: 300 Speaker: Rainer Stropek (MVP) Training format: 60% presentations with embedded coding demos 40% hands-on time       Download additional details (prerequisites etc.) here         Gerwald Oberleitner DX, Microsoft Österreich GmbH P.S. don’t miss to join our ALM and DevOps Yammer network (for customers and partners) and our dedicated Yammer partner group.    

Daten per OData Interface in einer SharePoint-App konsumieren–Teil 3

Von Toni+Pohl+(Gastblogger) Autor Feed 25. September 2015 08:00
Nach OData Interface Teil 1 und Teil 2 möchte ich hier zeigen, wie man Daten in einer SharePoint Online App verwenden und visualisieren kann. Eigentlich funktioniert dies analog zur Konsumentation in Teil 2, nur mit dem Unterschied, dass die gelieferten jetzt selbst verarbeitet werden sollen. [More]

“Lernen Sie Microsoft Edge kennen”– und mehr für Web Entwickler

Von Andreas+Schabus Autor Feed 11. June 2015 13:55
Vor kurzen hat unser Schweizer Kollege Simon A. Strebel einen interessanten Artikel zum Thema “Microsoft Edge, den neuen, speziell für Windows 10 entwickelten Webbrowser”veröffentlicht. Neben einer Einführung in Edge (ehemals Project Spartan) erklärt er wie wir alle auf die Entwicklung dieses Browser Einfluss nehmen können und verlinkt – meiner Meinung nach für alle Webentwickler interessant – zu einigen Tools, die das Testen und die Entwicklung für unterschiedliche Plattformen und Browser vereinfachen sollen. Eines dieser Tools ist Visual Studio Code, die neue Entwicklungsumgebung für Windows, Mac OSX und Linux. Zum Artikel…

Javascript vereint Microsoft und Google

Von Toni+Pohl+(Gastblogger) Autor Feed 9. March 2015 07:00
Hört, hört: MSFT und Google packeln und entwickeln gemeinsam AngularJS 2.0 – mit TypeScript! [More]

Office 365 Office Graph Explorer

Von Toni+Pohl+(Gastblogger) Autor Feed 28. September 2014 20:11
Seit kurzem kann in Office 365 Tenants der sog. “Office Graph” aktiviert werden. Für Developer ist natürlich interessant, wie man den Office Graph selbst anzapfen und verwenden kann. Hier findet ihr ein App-Beispiel. [More]

Mobile Developer After-Work #5 - Open Source

Von Rina+Ahmed Autor Feed 4. September 2014 09:46
Nach der Sommerpause ist unser Duo von Tieto und Mopius wieder zurück mit der nächsten Edition des beliebten Mobile Developer After-Works am 14. Oktober 2014. Dieser Mobile Developer After-Work wird ganz im Zeichen des Thema Open-Source Technologien gestellt. Das After-Work findet diesmal in der Wirtschaftskammer statt und wie schon die vergangenen Male gibt es wieder einen spannenden Mix an Vorträgen. Vorstellung der Förderaktion netidee - Österreichs größter Internet-Förderaktion Ernst Langmantel, Vorstand Internet Foundation Austria Das mobile Backend und Internet of Things-Services entwickeln mit dem Open Source ASP.net vNext - das Node.js für große Apps. Roman Ranzmaier, Sportsbook Software AG Apps in die echte Welt integrieren mit iBeacons, NFC und Apache Cordova. Real-life App Entwicklung mit der neuen Open Source NFC Bibliothek für JavaScript / C# Plus: iBeacons Überblick und technischer Hintergrund! Andreas Jakl, Mopius Patrick Steiner, Appaya Open Device Lab Vienna: Teste deine App kostenlos auf einer vielzahl echter Devices! Roland Schütz, studioQ Open (Government) Data: Aktueller Status in Österreich. Das Open Data Portal Österreich. Aktivitäten im Raum D-A-CH-LI. Brigitte Lutz, Magistratsdirektion der Stadt Wien, Sprecherin der Cooperation OGD Die Anzahl der Plätze ist wieder beschränkt, daher bitte rasch anmelden.

Windows Phone 8.1 Development: So viele Möglichkeiten–Welche ist die Richtige für mich?

Von Rina+Ahmed Autor Feed 19. May 2014 09:47
Ihr wisst bereits, dass wir seit der Ankündigung von Windows 8.1 einige neue Templates für Windows Phone App Entwicklung dazubekommen haben. Sobald ich das Update 2 von Visual Studio 2013 installiert habe, habe ich die neuen Project Templates für Phone Apps dabei. Der Gedanke ist einfach: Wir unterstützen eine Menge von Szenarien, und ihr habt die Wahl, euch das für euren Fall das Passende auszusuchen. Für jemanden, der noch nie für Windows Phone entwickelt hat, kann diese Wahl mitunter ein bißchen verwirrend sein. Deswegen haben wir für euch diese kleine Entscheidungshilfe zusammengestellt. [More]

Buntes für Web-Developer: jQuery Rain MultiScreen.js

Von Toni+Pohl+(Gastblogger) Autor Feed 19. April 2014 20:28
Passend zu Ostern gibts was Buntes für Web-Developer: jQuery Rain MultiScreen.js. Das ist ein kleines, schlankes jQuery PlugIn, das eine Single Webpage effektvoll und einfach mit Animationen in mehrere Seiten aufteilt und präsentiert. [More]

Project Siena Beta 2 ist da

Von Toni+Pohl+(Gastblogger) Autor Feed 25. March 2014 06:00
Ab sofort ist Version 2 (Beta) von Project Siena verfügbar schreibt S. Somasegar in seinem MSDN-Blog. Ansehen und Testen! [More]

Bootflat Flat UI KIT

Von Toni+Pohl+(Gastblogger) Autor Feed 11. January 2014 07:30
Jede moderne Website braucht es: Ein ansprechendes und adaptives Design. Ein aktueller Standard für die HTML/CSS/Javascript Umsetzung sind die Bootstrap-Designs. Genau das stellt das neue Open Source Projekt Bootflat Flat UI KIT bereit. [More]

Lust auf Windows 8 Apps mit dem Project Siena App Builder

Von Toni+Pohl+(Gastblogger) Autor Feed 25. December 2013 08:08
Bauen wir eine Windows 8 App – mit einer Windows 8 App! Genau das ermöglicht "Project Siena"! Project Siena ist der Codename für eine kostenfreie Windows 8 App aus dem Microsoft Store, die seit kurz vor Weihnachten als Beta Release verfügbar ist. Damit können Apps für Windows 8 ohne Programmierkenntnisse zusammengeklickt werden. [More]

Sondersendung zur build

Von Toni+Pohl+(Gastblogger) Autor Feed 7. July 2013 10:01
Das deutsche Microsoft Evangelisten-Team informiert kommenden Mittwoch, am 10. Juli, um 14 Uhr in einer “Sondersendung zu build” über Neuigkeiten rund um die Build Windows Konferenz von Ende Juni. [More]

Responsive Designs nutzen

Von Toni+Pohl+(Gastblogger) Autor Feed 1. July 2013 23:57
Ein kleines Highlight der Build-Keynote an Tag zwei war für mich – neben den tollen neuen Funktionen von Visual Studio 2013 - die Verwendung von frei verfügbaren Responsive HTML5-Designs, die Scott Hanselman in seinem Demo verwendet hat. [More]

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

Von cv Autor Feed 1. May 2013 11:58
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> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } 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; } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } 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> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } 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; } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } 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); .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } 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"; } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } 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); .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } 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() {   } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } Die openDatabse()-Funktion soll bei der Initialisierung der Seite aufgerufen werden, wir fügen daher den Eintrag openDatabase(); .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } kurz unterhalb des EventListeners document.getElementById("addUser").addEventListener("click", openWindow); .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } 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"}); .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } 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(); }   .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } 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); .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } … 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(); } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } Schritt 3: ListView erstellen Im letzten Schritt haben wir unter anderem die Zeile var user = new WinJS.Binding.List(); .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } 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; } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } 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); .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } Danach fügen wir die nachfolgende changedSelection-Funktion zB unterhalb von deleteEntry hinzu: function changedSelection(eventObject) { document.getElementById("appbar").winControl.show(); } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } 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.

 
    Build2016
    Developer Events

Aktuelle Downloads

Azure Free Trial
 
Visual Studio Downloads
 
Windows Azure Free Trial
Instagram
CodeFest.at on Facebook

Datenschutz & Cookies · Nutzungsbedingungen · Impressum · Markenzeichen
© 2013 Microsoft. Alle Rechte vorbehalten · BlogEngine.NET 2.7.0.0 · Diese Website wird für Microsoft von atwork gehostet.
powered by atwork