Designed by Developer ist out

Von Toni Pohl (Gastblogger) Autor Feed 5. October 2014 11:01
Heutzutage erwarten Anwender funktionelle und "schöne" Websites, Webforms und Tools. Hier findet ihr Hilfsmittel zum Erstellen von ansprechenden Webforms. [More]

Freie Telerik Tools für Microsoft Developer

Von Toni Pohl (Gastblogger) Autor Feed 14. May 2014 11:00
Derzeit findet die Microsoft TechEd North America 2014 in Houston statt. Tools-Hersteller Telerik hat eine Promotion-Aktion gestartet und vergibt freie Lizenzen für ihre Tools für die kommenden Windows Universal Apps für Windows 8 und Windows Phone. [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]

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 Christian Vorhemus 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.

Visual Studio 2012 Update 2 ab heute verfügbar!

Von Andreas Pollak Autor Feed 4. April 2013 19:00
Soeben hat S. Somasegar auf seinem Blog die Verfügbarkeit des Visual Studio 2012 Update 2 (Visual Studio 2012.2) bekannt gegeben. Du kannst damit ab sofort hier dein Update herunter laden(Im unteren Abschnitt unter “Zusätzliche Software” zu finden!) . Das Visual Studio Team hat sich verpflichtet, mit den regelmäßigen Updates Visual Studio kontinuierlich weiterzuentwickeln und zu verbessern. Feedback von euch und aktuelle Markttrends bilden die Basis für die neuen Entwicklungen. In diesem Sinne bietet dieses Update Erweiterungen für alle Editionen von Visual Studio 2012. Der Fokus liegt hier besonders auf den modernen Verwaltungsfunktionen für den gesamten Applikations-Lebenszyklus (ALM), die mit Visual Studio Premium und Ultimate eingeführt wurden. Update 2 stellt ein kumulatives Update dar, welches alle Vorteile von Update 1 bereits enthält. Update 2 fokussiert auf 4 Themenschwerpunkte Agiles Planen Visual Studio 2012 stellt eine Reihe von Funktionalitäten bereit, um Ihre Entwicklungsteams beim Einsatz von agilen Praktiken zu unterstützen. Mit dem Update 2 können Sie unsere Tools nun noch besser und einfacher an Ihre Bedürfnisse anpassen. So können jetzt beispielsweise benutzerdefinierte Spalten an das Kanban-Board angefügt und so die Struktur Ihrer Organisation besser abgebildet werden. Dank der benutzerdefinierten Tags für alle Artefakte (Aufgaben, Bugs,…) verwalten Sie ihre Projekte mit noch mehr Übersicht. Qualitätssicherung Die Qualität Ihrer entwickelten Lösungen kontinuierlich im Entwicklungsprozess zu unterstützen, ist ein wichtiger Schwerpunkt in Visual Studio 2012. In Update 2 können Sie nun dank des Webzugriffs auf das Test Case Management von überall neue Testfälle erfassen und durchführen. Damit wird es für alle Mitglieder in Ihrem Team einfacher an der Prüfung von Testfällen mitzuarbeiten. Überprüfen Sie auch die Vollständigkeit ihrer Unit-Tests durch Profilierung. Einfaches entwickeln und bereitstellen von Geschäftsanwendungen Mit dem Update 2 können Sie jetzt Geschäftsanwendungen noch leichter entwickeln. Dank Lightswitch mit HTML 5 Unterstützung können Sie jetzt sehr schnell SharePoint- und HTML5 Anwendungen entwickeln. Entwerfen Sie Ihre Lösung mithilfe der Vorlagen von LightSwitch und binden Sie Ihre Geschäftsanwendung in die Zielumgebung ein. Mit der zusätzlichen Unterstützung von WPF, Silverlight und SketchFlow To Blend für Visual Studio haben Sie jetzt alles was für die Entwicklung von Desktop-Anwendungen mit Visual Studio benötigt wird.   Verbessertes Arbeiten mit Visual Studio Wer viel Zeit mit der Entwicklung von Softwarelösungen verbringt, braucht Werkzeuge, die einen optimal unterstützten. Update 2 enthält genau dafür wertvolle Erweiterungen. Die Integration von Code Map in den Debugger bietet Ihnen eine visuelle Darstellung Ihres Codes während Sie den Code debuggen. Damit identifizieren Sie Fehler noch schneller. Ausserdem erleichtert Ihnen die verbesserte Profilierung von Windows Store Apps potentielle Fehler oder Performance Engpässe zu finden.   Ein paar passende Videos zu Visual Studio 2012.2 TFS 2012.2 – Web basiertes Test Case Management TFS 2012.2 - Work Item Tags TFS 2012.2 – Anpassen der Spalten im Kanban Board Codeabhängigkeiten besser verstehen mit Code Maps Viel Freude mit Visual Studio Update 2 wünsche ich euch. Andreas Pollak Product Marketing Manager Visual Studio 2012 (Entwicklungs- und Testwerkzeuge) Leader im Magic Quadrant von Gartner für ALM

Kochrezept für Windows 8 Apps in HTML5/Javascript

Von Christian Vorhemus Autor Feed 20. March 2013 15:05
Man nehme eine Portion Motivation und eine gute Entwicklungsumgebung (Visual Studio 2012), würze alles mit einer Prise Kreativität und fertig ist die Windows 8 App! In dieser Kochshow sollen Konzepte und Sourcode gezeigt werden, mit denen Apps für Windows 8 sehr schnell und einfach in HTML5/Javascript geschrieben werden können. Voraussetzung für dieses kleine Tutorial sind nur Basiskenntnisse in HTML und Javascript, Erfahrung in höheren Programmiersprachen ist nicht nötig. Ziel ist es, dem geneigten Leser einen Überblick über die Entwicklung von Windows 8 Apps in HTML und Javascript zu verschaffen, einige Hintergrundinformationen zu Windows 8 typischen Funktionalitäten zu liefern und Code vorzustellen, mit dem bereits die ersten Apps erstellt werden können. Wir halten uns in diesem Tutorial an folgendes Rezept: Die Struktur eines Projekts Anonyme Funktionen und WinJS Formelemente, Event-Listener und Debugging Navigation und Seiten Pimp your site with CSS Die weiteren Schritte   Die Struktur eines Projekts Um den Aufbau einer App gleich am Praxisobjekt erforschen zu können, öffnen wir Visual Studio 2012 (Visual Studio Express 2012 für Windows 8 kann hier heruntergeladen werden), klicken oben links auf Datei > Neu > Projekt. Im nun erscheinenden Fenster wählen wir links im Menü “installiert” den Unterpunkt “Vorlagen” und als Sprache “JavaScript” aus. Danach klicken wir auf “Windows Store” und wählen “Navigations-App”. Weiter unten in diesem Fenster können wir im Textfeld “Name” unser Projekt noch benennen und mit einem Klick auf “OK” tauchen wir bereits ein, in die Welt der App-Entwicklung. Nach kurzer Ladezeit wird automatisch die default.js-Datei im Codefenster angezeigt, rechts daneben sehen wir den Projektmappen-Explorer, in dem die verschiedensten Ordner und Dateien unseres Projekts angezeigt werden. Apps können aus mehreren Seiten bestehen, etwa einer Hauptseite mit mehreren Items und Unterseiten, auf denen detaillierte Infos zu den Items eingeblendet werden. Die Seiten einer App befinden sich im Ordner “pages”, wobei jede Seite einen eigenen Unterordner erhält. Standardmäßig wird für uns gleich eine erste Seite erstellt, die “home” lautet. Eine Seite wiederum besteht aus 3 Dateien: Eine HTML-Datei, eine CSS-Datei und eine JS-Datei. Während HTML und CSS für das Design zuständig sind (ähnlich wie XAML-files) befindet sich die Steuerungslogik in den JS-Dateien (ähnlich wie die “code behind”-Dateien in C#). Wenn ein Benutzer unsere App öffnet, gelangt er aber nicht gleich auf unsere home.html-Seite, sondern stets auf default.html. In dieser Datei kann selbst Inhalt stehen, oder auf eine andere Seite verwiesen werden. Dies passiert mit folgendem Code: 1: <div id="contenthost" data-win-control="Application.PageControlNavigator" 2: data-win-options="{home: '/pages/home/home.html'}"></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; } Zwei Dinge sind hier interessant: Zum einen die data-win-control property, zum anderen die data-win-options property. Mittels data-win-control weisen wir unserem <div>-Element eine spezielle Windows 8 spezifische Eigenschaft zu – in diesem Fall soll das <div> als Navigationselement dienen. Es existieren eine Reihe an vordefinierten controls, die unsere leeren <div>-Tag wie durch Zauberhand in allerlei nützliche Steuerungselemente verwandeln, zum Beispiel können durch ein control aus einem <div> rating-Sternen erzeugt werden, was mit folgendem Code funktioniert: 1: <div data-win-control="WinJS.UI.Rating"></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; } .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 data-win-options werden weitere Optionen für den in data-win-control definierten control angegeben. In unserem Beispiel wird hier auf die Seite “home” verwiesen, die sich im Ordner “/pages/home/home.html” befindet. Im Ordner css und im Ordner js befinden sich Dateien, die den Namen “default” tragen. Hier können Funktionen bzw. Styles definiert werden, die für die gesamte App gültig sind. Ein Beispiel dafür sind App-Bars: Die App-Bar soll auf jeder Unterseite meiner App erscheinen, sobald ich die rechte Maustaste klicke, daher definiere ich sie in meiner default.html. Zusammenfassend lässt sich also sagen: default.html sowie die im Ordner js befindliche default.js und die im css-Ordner befindliche default.css definieren den “Rahmen” und das Layout, das für alle Unterseiten der App gültig ist. Seitenspezifische styles werden in den im Ordner “pages” befindlichen css-Seiten definiert. … und wie in allen App-Projekten, findet sich auch in einem JavaScript-Projekt die Datei package.appmanifest in der unter anderem die Hintergrundfarbe für den SplashScreen vergeben wird oder ausgewählt werden kann, welche Funktionen die App nutzen darf (Internetverbindung, Kamera, Mikrofon, …). Anonyme Funktionen und WinJS Werfen wir gleich einen Blick in die JS-Datei unserer home-Seite: Durch einen Doppelklick auf die entsprechende Datei können wir uns den Code anzeigen lassen: Wir sollten folgenden Code sehen: 1: (function () { 2: "use strict"; 3:   4: WinJS.UI.Pages.define("/pages/home/home.html", { 5: // Diese Funktion wird immer aufgerufen, wenn ein 6: // Benutzer zu dieser Seite wechselt. Sie 7: // füllt die Seitenelemente mit den Daten der App auf. 8: ready: function (element, options) { 9: // TODO: Die Seite hier initialisieren. 10: } 11: }); 12: })(); .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; } Hier wird eine (anonyme) Funktion definiert, die automatisch aufgerufen wird, wenn der User die Seite home.html anzeigen lässt. Mit den zwei Wörtern “use strict” wird definiert, dass unser Code im “strict mode” ausgeführt wird und damit bestimmte Regeln eingehalten werden müssen, damit der Code kompiliert werden kann (zB müssen alle Variablen mit dem Schlüsselwert var deklariert werden, bevor ihnen ein Wert zugewiesen werden kann). In Zeile 4 wird auf WinJS verwiesen. WinJS ist eine Javascript-Bibliothek die eine Reihe an Funktionalitäten zur Verfügung stellt um uns die Arbeit zu erleichtern. Hier wird eine PageControl definiert, damit wir – vereinfacht gesagt – mit unserer home.html-Seite interagieren können. In Zeile 8 befindet sich die Funktion ready. Code, der in dieser Funktion steht wird aufgerufen, während die Seite geladen wird. Das bedeutet, hier sollten zB Event-Listener (dazu siehe sogleich) definiert werden. Formelemente, Event-Listener und Debugging Die Grundfunktionalität einer jeden App ist es, die Aktionen, die ein Benutzer ausführt aufzufangen und entsprechende weitere Schritte zu setzen. Immer wenn ein User auf einen Button klickt oder eine Wischgeste ausführt, möchten wir diese Aktionen empfangen können, und auf die Eingaben reagieren. Wie in vielen anderen Frameworks, wird auch für Windows 8 das Konzept der Event-Listener verwendet, um Eingaben zu registrieren. Wechseln wir zurück in Visual Studio und wagen wir uns an die erste simple Interaktion, die wir implementieren: Immer ein ein User auf einen Button klickt, soll ein Eintrag in die Javascript-Konsole geschrieben werden. Da die HTML-Seiten das User-Interface darstellen, legen wir unseren Button auch in der home.html Datei an. Dazu löschen wir den Eintrag 27: <p>Hier Inhalt einfügen</p> .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; } aus Zeile 27 und fügen stattdessen folgenden Code ein: 27: <button id="beispielbutton1">Beispielbutton</button> .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 <button></button> Tag definiert einen simplen Button der mehr oder weniger nur aus einem weißen Rechteck mit Text besteht. Äußert wichtig ist für unsere Zwecke die property id, mit der unser Element für den Event-Listener eindeutig identifizierbar wird. Wer eine schnelle Übersicht sucht, welche Elemente eingefügt werden können, möge in der Menüzeile auf “Ansicht” klicken und dann “Werkzeugkasten” auswählen. Es öffnet sich daraufhin ein Fenster mit einer Auswahl an Formelementen, die mit einem Doppelklick auf das jeweilige Objekt in die App eingefügt werden können. In der Regel möchten wir nun auch gerne sehen, wie unsere Button später in der App aussehen wird. Um die App anzuzeigen, klicken wir im oberen Menü auf “Lokaler Computer”, woraufhin ein (schwarzes) Fenster mit einem weißen durchkreuzten Rechteck angezeigt wird – der Splashscreen – und kurze Zeit darauf unsere home.html-Seite erscheint, die in etwa so aussieht: Um die App zu schließen und zu Visual Studio zurückzukehren, fahren wir entweder mit der Maus auf die obere Kante und ziehen die App mit gedrückter Maustaste nach unten oder brechen die Ausführung mit Alt+F4 ab. Wenn wir in Visual Studio zurückkehren, sehen wir anhand des roten Balkens am unteren Bildschirmrand, dass das Debugging noch läuft. Um dies zu beenden wählen wir entweder den Shortcut Shift+F5 oder klicken im oberen Menü auf “Debugging beenden” Im nächsten Schritt fügen wir nun den Event-Listener hinzu. Hierbei handelt es sich um Steuerungslogik und diese wird in Javascript-files definiert. Wir wechseln daher in home.js und fügen in der ready-Funktion folgenden Code hinzu: 1: var button1 = document.getElementById("beispielbutton1"); 2: button1.addEventListener("click", buttonClick, false); .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 Zeile 1 greifen wir mittels document.getElementById() auf unseren Button zu und speichern das so erhaltene button-Objekt in der Variable button1. In Zeile 2 fügen wir unserem Button aus der home.html-Datei einen Event-Listener hinzu: Im ersten Argument dieser Funktion definieren wir, auf welches Event wir achten: “click”, also ein Mausklick bzw. ein Fingertab bei Touchscreens. Das zweite Argument gibt an, welche Funktion bei einem Klick auf den Button ausgeführt werden soll: “buttonClick” – diese Funktion müssen wir noch definieren. Im dritte Argument wird definiert, ob “capture” aktiviert werden soll (für dieses Beispiel nicht notwendig, daher false). Wir haben nun definiert, dass mit einem Klick auf den Button mit der ID “beispielbutton1” die Funktion “buttonClick” aufgerufen werden soll. Diese Funktion müssen wir nun ebenfalls im home.js-file definieren. Unser Datei home.js sieht damit insgesamt wie folgt aus: 1: (function () { 2: "use strict"; 3: 4: WinJS.UI.Pages.define("/pages/home/home.html", { 5: ready: function (element, options) { 6: var button1 = document.getElementById("beispielbutton1"); 7: button1.addEventListener("click", buttonClick, false); 8: } 9: }); 10:   11: function buttonClick() { 12: console.log("Auf Button geklickt"); 13: } 14:   15: })(); .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 Zeile 12 definieren wir, dass der Text “Auf Button geklickt” in die Javascript-Konsole geschrieben werden soll. Wenn wir nun die App starten und einige Male auf den Button klicken, die App danach schließen und zurück in Visual Studio wechseln, sollte in unserer Konsole nun entsprechend oft der Text angezeigt werden: Wer bereits öfter in Javascript entwickelt hat, hat vielleicht des Öfteren die alert()-Funktion zum Debuggen verwendet. Das ist zwar eine relativ unschöne Methode, ist für schnelles Auffinden von Fehlern im laufenden Betrieb dennoch manchmal sinnvoll. In Windows 8 gibt es die alert()-Funktion nicht, wir können und diese jedoch sehr schnell selbst basteln, indem wir unterhalb der buttonClick-Funktion folgenden Code einfügen: 1: function alert(text) { 2: var messagedialogpopup = new Windows.UI.Popups.MessageDialog(text, "Überschrift"); 3: messagedialogpopup.showAsync(); 4: } .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; } Wir ersetzen nun den console-Eintrag in der buttonClick-Funktion durch einen Aufruf der alert()-Funktion sodass die gesamte home.js-Datei wie folgt aussieht: 1: (function () { 2: "use strict"; 3: 4: WinJS.UI.Pages.define("/pages/home/home.html", { 5: ready: function (element, options) { 6: var button1 = document.getElementById("beispielbutton1"); 7: button1.addEventListener("click", buttonClick, false); 8: } 9: }); 10:   11: function buttonClick() { 12: alert("Auf Button geklickt"); 13: } 14:   15: function alert(text) { 16: var messagedialogpopup = new Windows.UI.Popups.MessageDialog(text, "Überschrift"); 17: messagedialogpopup.showAsync(); 18: } 19:   20: })(); .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 die App starten und auf den Button klicken, erscheint ein MessageDialog. Wir müssen nun nicht zurück in Visual Studio wechseln, wenn wir uns zB die aktuelle Variablenbelegung ansehen wollen, sondern können uns alle möglichen Infos direkt in der App anzeigen lassen: Navigation und Seiten Bisher haben wir alle Aktionen auf unserer home-Seite ausgeführt ohne diese zu verlassen. Bei größeren Projekten ist es rein aus strukturellen Gründen besser, mehrere Seiten anzulegen, zwischen denen der User navigieren kann. Das Windows 8 Framework, allen voran WinJS nimmt uns auch hier wieder einen großen Teil der Arbeit ab, unter anderem müssen wir uns nicht um das Erscheinen bzw. das Layout eines “Zurück”-Buttons kümmern, wenn wir zu einer Unterseite navigieren – dies wird ganz automatisch eingefügt (und kann natürlich auch gelöscht werden, wenn wir der Meinung sind, keinen solchen Button zu benötigen). Wir erweitern die bisher geschriebene App nun so, dass wir mit einem Klick auf unseren Button, der sich bekanntlich auf der “home”-Seite befindet, auf eine “detail”-Seite wechseln. Dazu klicken wir mit der rechten Maustaste auf unseren “pages”-Ordner, wählen “Hinzufügen” > “Neuer Ordner” und nennen diesen “detail”: Wir klicken nun mit der rechten Maustaste auf den soeben erstellten “detail” Ordner, wählen wieder “Hinzufügen” und “Neues Element”. In der nun erscheinenden Liste wählen wir “Seitensteuerelement” und im Textfeld “Namen” geben wir “detail” ein: Visual Studio fügt nun in unserem detail-Ordner die Dateien detail.html, detail.css und detail.js hinzu. Diese dreigeteilte Struktur kommt uns bereits bekannt vor, es ist wenig überraschend das selbe Prinzip wie auf unserer “home”-Seite, wenngleich der Code nicht exakt der selbe ist. Wir wechseln nun in unsere home.js-Datei, löschen die dort befindliche buttonClick-Funktion und ersetzen sie mit folgendem Code: 1: function buttonClick(eventInfo) { 2: WinJS.Navigation.navigate("/pages/detail/detail.html"); 3: } .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 Zeile 2 greifen wir auf unsere altbekannte WinJS-library zurück und rufen die Funktion navigate() auf, die uns zur Verfügung gestellt wird, um bei einem Klick auf den Button in home.html zu detail.html zu navigieren. In unsere detail.html schreiben wir noch ein Rezept für einen lecker schmeckenden flockigen Becherkuchen, der ebenso schnell und einfach zu machen ist, wie unsere App. Hier der Quellcode der gesamten detail.html-Datei: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta charset="utf-8" /> <title>detail</title>   <!-- WinJS-Verweise --> <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" /> <script src="//Microsoft.WinJS.1.0/js/base.js"></script> <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>   <link href="detail.css" rel="stylesheet" /> <script src="detail.js"></script> </head> <body> <div class="detail fragment"> <header aria-label="Header content" role="banner"> <button class="win-backbutton" aria-label="Back" disabled type="button"> </button> <h1 class="titlearea win-type-ellipsis"> <span class="pagetitle">Becherkuchen Rezept</span> <span style="font-size:20px;">von Christine Hudetz</span> </h1> </header> <section aria-label="Main content" role="main">   Um einen flockigen Becherkuchen zaubern zu können benötigt man: Erst einmal die unersetzlichen Grundzutaten:<p> <li> 1 Becher Joghurt/Sauerrahm/Schlagobers (letzerer ist am flockigsten) <li> 1 Becher (ja, den Joghurt/Sauerrahm/Schlagobersbecher) Mehl (am besten „Universal“) <li> 1 Becher (noch immer derselbe) Zucker <li> ½ (!) Becher Öl <li> 1 Packerl Backpulver <li> 3 Eier <p> Hat man diese flotten Essenzen nun alle (egal in welcher Reihenfolge) in eine Schüssel zusammenpurzeln lassen, darf man seiner Fantasie freien Lauf lassen und hinzufügen, wozu man grade Lust und Laune hat. <p> Im klassischen Flockkuchen befindet sich (mind.) 1 Becher Kakao (Erfahrene Flockbäcker schütten den Kakao einfach nach Gefühl in die Schüssel – ein einziger Becher erscheint alteingesessenen Flockkennern meist etwas banal) Eine weitere klassische Zutat sind geriebene Nüsse – egal welcher Sorte – sie geben dem Becherkuchen ein noch flockigeres Geschmacksspektrum. Für einen wohltuenden Schokolade-Schock empfiehlt sich jedoch die reine Kakao-Variante. <p> Weitere typische Zutaten wären:<br> <li> ganze Nüsse <li> Schokoladestücke <li> Rosinen <li> Kokosraspeln <li> Zimt (gibt dem Kuchen einen flockig weihnachtlichen Touch!) <li> Vanille(zucker)* <li> usw usf - Der Kreativität der Flockisten sind keine Grenzen gesetzt! <p> *Anm.: Eine rein mentale Zutat. Bringt geschmacklich keine merkliche Veränderung. <p> Nachdem man mit der Wahl seiner Zutaten zufrieden geworden ist und die Schüssel nach Belieben mit flockigen Substanzen bereichert hat, mixt man das Ganze bis alles gut vermischt harmonisch vor sich her döst.<br> Währenddessen kann man schon mal den Ofen auf 180° (Ober- und Unterhitze) einschalten und vorglühen lassen. Dann darf man sich ein Stück Butter krallen und damit vergnügt die Backform (Gugelhupf, Rehrücken, Tortenform,...) auskleiden. Als krönenden Abschluss bespreuselt man die ausgebutterte Form dann noch mit Semmelbröseln – möglichst ohne bröselfreie Zonen, um potentiellem Festkleben des Kuchens keine Chance zu geben und ein einwandfreies Loslösen des fertigen Kuchens zu garantieren.<br> Ist die Form nun fertig ausgebröselt füllt man sie grazil mit dem flockig-vermixten Teig. Wer jetzt noch nicht genug Spaß am Herumflocken hatte, kann noch Schokoladestückchen in die Backform plumpsen lassen. Oder Schokostreusel, oder Rosinen, oder Kokosraspeln,...<p>   Danach schiebt man die Form auf mittlerer Schiene in den Backofen und wartet ab. Solange, bis der Kuchen schön flauschig geworden ist (ca. 45-50 min. - je nachdem wie lange man den Ofen verheizen hat lassen). <br> Hat der Kuchen die perfekte Konsistenz erreicht, holt man ihn aus dem Backrohr und stülpt ihn aus der Form. Ambitionierte Einbutterer und Ausstreusler können sich nun sicher über ein einwandfreies Ergebnis freuen. Faulere Individuen werden mit kleinen Verlusten zu rechnen haben. <p> Der fertiggebackene Kuchen kann nun beliebig mit Staubzucker, Streusel oder (für den Extra-Schoko-Flash) Schokoladeüberguss dekoriert werden. <p> Dines flockiger Becherkuchen eignet sich selbstverständlich auch perfekt für Geburtstags- und Hochzeitstorten – ein wahres Universalrezept also. <p> Viel Spaß beim Nachflocken, wünscht Dine.   </section> </div> </body> </html> .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 mit dem Shortcut F5 die App starten und auf den Button klicken, sollten wir auf unsere detail.html Seite gelangen, auf der sich nun unser Rezept befindet. Automatisch angelegt wurde neben der Überschrift auch ein “Zurück”-Button. Auffällig ist hierbei, dass – je nach Auflösung – der Text abgeschnitten ist und ein langweiliger schwarzer Hintergrund sowie ein einfacher Button niemanden vom Hocker haut. In einem letzten Schritt wagen wir uns jetzt an das Design, um unserer App ein bisschen Leben einzuhauchen. Pimp your site with CSS Wir wollen in diesem Abschnitt unserer App ein Hintergrundbild verpassen sowie den Button auf der home-Seite durch ein Vorschaubild mit Text ersetzen. Kümmern wir uns zunächst um das Hintergrundbild. In diesem Beispiel soll für jede Seite das gleiche Bild verwendet werden, wir müssen daher unsere default.css Datei anpassen, die sich im Ordner css befindet. Hier fügen wir ganz am Ende des default.css-files folgenden Eintrag hinzu: 1: body { 2: background-image:url(/images/background.png); 3: } .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; } Damit wird für den <body>-Tag das Hintergrundbild background.png definiert, das im Ordner images liegt. Nur: Noch liegt im Ordner images kein solches Bild. Wenn wir einen Blick in images werfen, werden wir dort einige Bilder vorfinden, es handelt sich dabei um verschiedene Logos, die wir uns ebenfalls noch ansehen werden. Zuvor aber suchen wir uns ein nettes Bild mit ausreichend guter Auflösung und ziehen dieses einfach mit gedrückter Maustaste in unseren image-Ordner: Wenn wir die App starten sollte nun bereits unser Hintergrundbild auf allen Seiten angezeigt werden. Passen wir nun im nächsten Schritt auch den Button an. Dazu wechseln wir in unsere home.html-Datei und ersetzen den Button, den wir angelegt haben mit folgendem Code: <div id="beispielbutton1" class="ManipulationElement" style="-ms-grid-column: 2"> <img alt="Cliff" src="/images/becherkuchen.jpg" style="width:250px;height:250px;"/> <div class="overlay"> <h2>Becherkuchen</h2> <p>von Christine Hudetz</p> </div> </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; } Hier passiert nicht viel Magisches: Wir definieren lediglich einen <div>-Bereich, weisen diesem die ID zu, die zuvor unser Button hatte und definieren eine class-property die wir sogleich benötigen, um das Element in CSS stylen zu können. Innerhalb des <div> liegt ein Bild, das in der src auf ein Bild eines Becherkuchens verweist, das wir ebenso wie das Hintergrundbild in den images-Ordner ziehen müssen. Zuletzt folgt ein weiterer <div>-Tag, in dem Text definiert wird, der später halbtransparent am Bild erscheinen soll. Wechseln wir nun in die home.css Datei und fügen folgenden Code am Ende hinzu: .ManipulationElement { position: relative; display: -ms-grid; -ms-grid-columns: 1fr; -ms-grid-rows: 1fr; height: 250px; width: 250px; top: 50px; }   .ManipulationElement .overlay { position: relative; -ms-grid-row-align: end; background-color: rgba(0,0,0,0.65); height: 50px; padding: 15px 15px; overflow: hidden; -ms-grid-column: 1; } .ManipulationElement .overlay h2, .ManipulationElement .overlay p { color: rgba(255, 255, 255, 0.8); margin: 0px; } .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; } Hier wird im wesentlichen die Klasse “ManipulationElement” definiert, die unserem <div> in der home.html bestimmte Styles hinzufügt. Wenn wir nun die App starten, sieht die App – natürlich abhängig von den verwendeten Bildern – etwa wie folgt aus: Im letzten Schritt soll nun der Text auf der detail.html-Seite, der abgeschnitten ist, sichtbar gemacht werden. Dazu verwenden wir eine schnelle, einfache (und unsaubere) Lösung und ersetzen in Zeile 17 den Code <div class="detail fragment"> .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; } durch <div class="detail fragment" style="overflow:scroll;"> .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; } Dadurch werden der Seite einfach Scrollbars hinzugefügt. Wenn wir nun eine Rezeptesammlung mit vielen Rezepten bauen wollen, freut es viele sicher zu lesen, dass es schon fertige Vorlagen gibt, mit denen Apps im Stil einer Grid – so wie wir sie jetzt händisch Stück für Stück gebaut haben – schnell erstellt werden können. Wir klicken dazu im Menü oben auf “Datei” > “Neu” > “Projekt” und wählen “Raster-App” aus. Wenn wir diese App mit F5 starten, sieht sie so aus: Die grauen Quadrate sind Bilder, die im Ordner images liegen und können natürlich nun im Fall einer Rezepte-App einfach durch eigene Bilder von Speisen und Kuchen ersetzt werden. Alle Daten der App werden übrigens im Ordner js im file data.js definiert. Zuletzt passen wir noch die Logos an, damit auch unser SplashScreen hübscher wird. Wenn wir auf das Logo splashscreen.png doppelklicken, öffnet sich der in Visual Studio integrierte Grafik-Editor. Hier können einfache Änderungen an der Bildern vorgenommen werden. Mit etwas Motivation lässt sich schnell ein Kuchen-Icon basteln, das ganz im Stil der Standard-Win8-Tiles schlicht und weiß gehalten sein soll. Die Farbe des SplashScreens lässt sich mit einem Doppelklick auf package.appxmanifest in der Zeile “Hintergrundfarbe” ändern. Das für den SplashScreen erstellt Logo, können wir nun auch für die anderen Logos verwenden.  Die weiteren Schritte Wenn wir eine App erstellt haben, möchten wir diese in der Regel auch einem breiten Publikum vorstellen und sie im Windows Store veröffentlichen. Um dies zu bewerkstelligen, navigiere man zunächst auf die Registrierungs-Seite des Windows Dev-Centers. Nach einem klick auf “Jetzt registrieren” können sich Besitzer eines Windows-Accounts einloggen oder neue User mit einem Klick auf “Weiter” in der linken Spalte registrieren. Für die Registrierung ist neben der Angaben von persönlichen Daten auch eine Kreditkarte erforderlich. Für Studenten ist (im Rahmen des DreamSpark Programms) die Mitgliedschaft kostenlos. Ist der Account angelegt und die App fertig, steht der Veröffentlichung nichts mehr im Wege. In diesem Blogeintragfindet sich eine Schritt-für-Schritt-Anleitung, um die App in den Store zu bekommen und typische Fehler zu vermeiden. Ressourcen Windows Dev-Camp: Entwickeln von Windows Store Apps Windows 8 Frameworks Datenschutzrichtlinien für Windows Store Apps

Neue Office Developer Tools for Visual Studio 2012

Von Toni Pohl (Gastblogger) Autor Feed 7. March 2013 07:05
Ganz frisch eingetroffen sind die “Office Developer Tools for Visual Studio 2012” so schreibt S. Somasegar, Corporate Vice President of the Developer Division at Microsoft, in seinem Blog: Now Available: Office Developer Tools for Visual Studio 2012. [More]

Ein wenig HTTP und warum ASP.NET SignalR cool ist

Von Toni Pohl (Gastblogger) Autor Feed 24. February 2013 21:19
Als Anwender sind wir es mittlerweile schon gewohnt, dass wir Aktualisierungen in Webseiten ohne Page-Reload erhalten. Große Webseitensysteme wie Facebook, Twitter und Co zeigen uns dies täglich. Alle diese Systeme verwenden denselben Mechanismus: Der Datentransfer findet asynchron zwischen Server und Client in Echtzeit statt. Wie man das mit modernsten Technologien bewerkstelligen kann, zeigt SignalR. [More]

Free eBook ASP.NET SignalR

Von Toni Pohl (Gastblogger) Autor Feed 23. February 2013 13:17
SignalR ist eine Bibliothek für ASP.NET, die es Webdevelopern ermöglicht eine einfache, asynchrone Echtzeit-Kommunikation zwischen Webserver und Client zu verwenden. Jose M. Aguilar, MVP ASP.NET, hat ein Buch über ASP.NET SignalR geschrieben. Das eBook wird von campusmvp.net bereitgestellt. [More]

modern.IE

Von Toni Pohl (Gastblogger) Autor Feed 3. February 2013 12:47
In seiner mehr als 30-jährigen Geschichte hat sich im Internet einiges an verschiedensten Technologien und Weiterentwicklungen angesammelt … gerade wenn es Webseiten betrifft, erwarten wir uns heute schöne, schnelle und funktionelle Webseiten, die auf allen verfügbaren Geräten gut funktionieren und gut bedienbar sind. Microsoft hat nun eine neue Website veröffentlicht, die Webentwicklern hilft, ihre Webseiten rasch zu testen: modern.ie! [More]

Windows Azure Media Services für den Produktiveinsatz verfügbar

Von Jürgen Mayrbäurl  Autor Feed 23. January 2013 06:40
Wie von Scott Guthrie gestern via Blogpost angekündigt, stehen die Windows Azure Media Services nun für den Produktiveinsatz zur Verfügung. Damit endet die mehrmonatige Testphase dieses Windows Azure Services und man ist nun in der Lage, Lösungen für das On-Demand Video Streaming für eine Vielzahl von Plattformen (z.B. Windows, Silverlight, Android, iPhone&Co, XBox, Flash und HTML5) damit zu entwickeln und anzubieten. Entwicklungsressourcen und Enterprise Service Level Agreement stehen ebenfalls zur Verfügung. Mit den Windows Azure Media Services ist es nun möglich, On-Demand Video Streaming in den unterschiedlichsten Anwendungsszenarien, wie z.B. Training-Videos, Videos auf Webseiten oder hochwertigen Videodiensten a la Netflix, einzusetzen. Prominentestes Beispiel im Vorjahr waren die Olympischen Spiele in London. Die Entwicklung einer Video-Medienlösung (z.B. in Österreich die ORF TvThek), die Videos als Stream für unterschiedliche Plattformen zur Verfügung stellt, ist eine durchaus komplexe Aufgabenstellung, da dazu jede Menge Hardware/Infrastruktur und Software benötigt wird. Alleine die dafür in der Regel notwendigen Investitionbudgets sind sehr oft nur von großen Unternehmen aufzubringen. Windows Azure Media Services bieten hier eine tolle Lösung, da sie fix fertige, einsatzfähige Infrastruktur/Services zur Verfügung stellt, die keinerlei Kosten bei der Herstellung bzw. Einrichtung verursachen. Wie bei Cloud Services üblich, bezahlt man nur für die wirkliche Nutzung des Dienstes (In diesem Fall für die Videostreamaufbereitung, die Speicherung der Videos und die Konsumation der Videos durch die Benutzer). Windows Azure Media Services können jederzeit kostenlos mittels der 90-tägigen Testversion von Windows Azure ausprobiert werden. Neben den umfangreichen, auf REST basiernden APIs des Dienstes (als Open Source Software SDKs für .NET und Java verfügbar), können einfache Aufgaben auch über das Management Portal von Windows Azure durchgeführt werden. Für die Evaluierung des Einsatzes für eine selbstentwickelte bzw. –betriebene Medienlösung stehen wir gerne, nach Verfügbarkeit, für Briefings und Workshops zur Verfügung (Anfragen bitte über das Kontaktformular). Weiters sollte unbedingt erwähnt werden, dass die nächste geplante Erweiterung von Windows Azure Media Services, nämlich das Live Smooth Streaming, aktuell intensiv mit ausgewählten Partnern getestet wird. Ressourcen: Windows Azure kostenlos testen Windows Azure Media Services und Entwicklerressourcen Scott Guthries Blogpost Anfrage für Windows Azure Media Services Briefing/Workshop

OfficeApps entwickeln-Teil 3 Die erste Office-App

Von Toni Pohl (Gastblogger) Autor Feed 9. January 2013 07:15
In Teil 1 und Teil 2 ging es um die Basis und um die Funktionsweise von OfficeApps und SharePointApps. Wenn diese erfüllt sind, geht es schon los und wir sehen uns hier in Teil 3 an, wie eine Office-App aufgebaut ist und wie sie funktioniert. Dazu erstellen wir ein kleines Beispiel mit Visual Studio 2012. [More]

Aktuelle Downloads

Azure Free Trial
 
Visual Studio Downloads
 
Windows Azure Free Trial

 
    Developer Events
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