windows store apps mit html & js entwickeln
DESCRIPTION
Windows Store Apps mit HTML & JS entwickeln. Christian Moser Software Architekt und UX Designer, Zühlke [email protected] | @ christian_moser | wpftutorial.net. Ziele. Sie wissen wann HTML/JS/CSS die geeignete Entwicklungsplattform für eine App ist . - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Windows Store Apps mit HTML & JS entwickeln](https://reader035.vdocument.in/reader035/viewer/2022062411/56816719550346895ddb8da8/html5/thumbnails/1.jpg)
Windows Store Apps mit
HTML & JS entwickelnChristian MoserSoftware Architekt und UX Designer, Zühlke
[email protected] | @christian_moser | wpftutorial.net
![Page 2: Windows Store Apps mit HTML & JS entwickeln](https://reader035.vdocument.in/reader035/viewer/2022062411/56816719550346895ddb8da8/html5/thumbnails/2.jpg)
ZieleSie wissen wann HTML/JS/CSS die geeignete Entwicklungsplattform für eine App ist.Sie kennen die grundlegenden Konzepte einer JavaScript AppSie sind in der Lage selber eine einfache HTML/JS App zu entwickeln.
![Page 3: Windows Store Apps mit HTML & JS entwickeln](https://reader035.vdocument.in/reader035/viewer/2022062411/56816719550346895ddb8da8/html5/thumbnails/3.jpg)
Agenda
Agenda1. HTML/JS als App-Sprachen2. Aufbau einer HTML/JS App3. Classes and Namespaces4. Application Lifecycle und State handling5. Pages und Navigation6. Controls7. DataBinding8. Model-View-ViewModel Pattern9. Windows Runtime10. Third-Party Libraries
![Page 4: Windows Store Apps mit HTML & JS entwickeln](https://reader035.vdocument.in/reader035/viewer/2022062411/56816719550346895ddb8da8/html5/thumbnails/4.jpg)
HTML/JS als App-SprachenTeil 1
![Page 5: Windows Store Apps mit HTML & JS entwickeln](https://reader035.vdocument.in/reader035/viewer/2022062411/56816719550346895ddb8da8/html5/thumbnails/5.jpg)
Motivation für HTML/JS als App-Sprachen? Sie haben bereits Erfahrung mit Web-Technologien Es bestehen bereits JavaScript-Komponenten Sie möchten Cross-Platform entwickeln Sie binden Services ein, die JSON-Daten liefern
(können) Sie sind heimlich verliebt in jQuery, require.js oder
knockout?
![Page 6: Windows Store Apps mit HTML & JS entwickeln](https://reader035.vdocument.in/reader035/viewer/2022062411/56816719550346895ddb8da8/html5/thumbnails/6.jpg)
Typische “Smells” der Webentwicklung Jeder Browser interpretiert Standards
unterschiedlich HTML5 und CSS3 sind nur auf neusten Browsern
verfügbar JavaScript bietet out-of-the-box keine Konstrukte
für grössere Mengen Code (z.B. Klassen, Namespaces, Interfaces, Module)
JavaScript Performance ist schlecht auf älteren Browsern
Sandboxed (kein Dateizugriff, Office Integration,…)
![Page 7: Windows Store Apps mit HTML & JS entwickeln](https://reader035.vdocument.in/reader035/viewer/2022062411/56816719550346895ddb8da8/html5/thumbnails/7.jpg)
Apps vs. Web-Pages
Diverse Browser
IE10 (mit all seinen Features)Multi- oder Single-
PageSingle-Page
Sandboxed Plattform-Zugriff (WinRT)jQuery, Knockout,
requireJSWinJS, jQuery, Knockout,
requireJS
![Page 8: Windows Store Apps mit HTML & JS entwickeln](https://reader035.vdocument.in/reader035/viewer/2022062411/56816719550346895ddb8da8/html5/thumbnails/8.jpg)
AudioExplosion Demo - IE TestdriveAudioExplosionApp
Demo Audio Explosion
![Page 9: Windows Store Apps mit HTML & JS entwickeln](https://reader035.vdocument.in/reader035/viewer/2022062411/56816719550346895ddb8da8/html5/thumbnails/9.jpg)
Aufbau einer HTML/JS AppTeil 2
![Page 10: Windows Store Apps mit HTML & JS entwickeln](https://reader035.vdocument.in/reader035/viewer/2022062411/56816719550346895ddb8da8/html5/thumbnails/10.jpg)
WinJS
Unser Werkzeugkoffer
CSS 3 WinRT
HTML 5 JavaScript 5Visual StudioTemplates
Knockout,jQuery,require.js
![Page 11: Windows Store Apps mit HTML & JS entwickeln](https://reader035.vdocument.in/reader035/viewer/2022062411/56816719550346895ddb8da8/html5/thumbnails/11.jpg)
Visual Studio TemplatesBlank Navigatio
nGridSplit Fixed
Leere App navigator.js,Home-Page
Grid-View, List-View,Sample Data
Grouped ListViewText-Wrapping
Fixed size inViewBox
![Page 12: Windows Store Apps mit HTML & JS entwickeln](https://reader035.vdocument.in/reader035/viewer/2022062411/56816719550346895ddb8da8/html5/thumbnails/12.jpg)
Demo – Aufbau einer App
![Page 13: Windows Store Apps mit HTML & JS entwickeln](https://reader035.vdocument.in/reader035/viewer/2022062411/56816719550346895ddb8da8/html5/thumbnails/13.jpg)
Application Lifecycle und StateTeil 3
![Page 14: Windows Store Apps mit HTML & JS entwickeln](https://reader035.vdocument.in/reader035/viewer/2022062411/56816719550346895ddb8da8/html5/thumbnails/14.jpg)
App LifecycleActivation ReasonsLaunchedSecondary TileSearch targetShare targetProtocol activatedFile Save PickerFile Open PickerFile ActivatedCached File UpdateDevice activatedCamera SettingsPrint task
NotRunning
Running
Suspended
TerminatedSpeichermangel
Resumingin den Vordergrund
Suspending5s im Hintergrund
ActivatedCrashed
![Page 15: Windows Store Apps mit HTML & JS entwickeln](https://reader035.vdocument.in/reader035/viewer/2022062411/56816719550346895ddb8da8/html5/thumbnails/15.jpg)
Application Objectvar app = WinJS.Application, webApp = Windows.UI.WebUI.WebUIApplication, activation = Windows.ApplicationModel.Activation;
Activatingapp.onactivated = function (e) { if (e.detail.kind === activation.ActivationKind.launch) { // Initialization }};
Suspendingapp.oncheckpoint = function (e) { // Save State and Navigation};
ResumingwebApp.addEventListener("resuming", function (e) { // Restore State and Navigation}, false);
![Page 16: Windows Store Apps mit HTML & JS entwickeln](https://reader035.vdocument.in/reader035/viewer/2022062411/56816719550346895ddb8da8/html5/thumbnails/16.jpg)
State and History beibehalten
var app = WinJS.Application;var nav = WinJS.Navigation; app.oncheckpoint = function (e) { app.sessionState.history = nav.history; app.sessionState.myData = myData;};
webApp.addEventListener("resuming", function (e) { nav.history = app.sessionState.history; myData = app.sessionState.myData;};
WinJS.Application.sessionState
Objekte im SessioState müssen JSON serialisierbar sein.
![Page 17: Windows Store Apps mit HTML & JS entwickeln](https://reader035.vdocument.in/reader035/viewer/2022062411/56816719550346895ddb8da8/html5/thumbnails/17.jpg)
Demo - Visual Studio Template
![Page 18: Windows Store Apps mit HTML & JS entwickeln](https://reader035.vdocument.in/reader035/viewer/2022062411/56816719550346895ddb8da8/html5/thumbnails/18.jpg)
Pages und NavigationTeil 4
![Page 19: Windows Store Apps mit HTML & JS entwickeln](https://reader035.vdocument.in/reader035/viewer/2022062411/56816719550346895ddb8da8/html5/thumbnails/19.jpg)
Page definition<div id="contenthost">
</div>
var host = document.getElementById('contentHost');WinJS.Pages.render("/pages/home/home.html", host);
WinJS.UI.Pages.define("/pages/home/home.html", { ready: function (element, options) { // Initialize page }});
Page 1
![Page 20: Windows Store Apps mit HTML & JS entwickeln](https://reader035.vdocument.in/reader035/viewer/2022062411/56816719550346895ddb8da8/html5/thumbnails/20.jpg)
Navigationnavigator.js
WinJS.Pages.render()
WinJS.Navigation.onnavigating
WinJS.Navigation.back(1);
/pages/home/home.html
Page 1
WinJS.Navigation.navigate("/add/add.html");
/pages/add/add.html
Page 2
WinJS.Navigation.forward();
/pages/detail/detail.html
Page 3
![Page 21: Windows Store Apps mit HTML & JS entwickeln](https://reader035.vdocument.in/reader035/viewer/2022062411/56816719550346895ddb8da8/html5/thumbnails/21.jpg)
ControlsTeil 5
![Page 22: Windows Store Apps mit HTML & JS entwickeln](https://reader035.vdocument.in/reader035/viewer/2022062411/56816719550346895ddb8da8/html5/thumbnails/22.jpg)
Modern UI Controls
![Page 23: Windows Store Apps mit HTML & JS entwickeln](https://reader035.vdocument.in/reader035/viewer/2022062411/56816719550346895ddb8da8/html5/thumbnails/23.jpg)
HTML5 Controls mit Win8-Styling
<button class="win-backbutton"></button>
<select> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option></select>
<input type="range" class="win-vertical"/>
<progress class="win-ring win-large" />
![Page 24: Windows Store Apps mit HTML & JS entwickeln](https://reader035.vdocument.in/reader035/viewer/2022062411/56816719550346895ddb8da8/html5/thumbnails/24.jpg)
WinJS Controls<div data-win-control="WinJS.UI.Rating" data-win-options="{averageRating:3, maxRating:8}"></div>
WinJS.UI.processAll(root);
<div data-win-control="WinJS.UI.AppBar"> <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{label:'Add Album', icon:'add'}" > </button></div>
![Page 25: Windows Store Apps mit HTML & JS entwickeln](https://reader035.vdocument.in/reader035/viewer/2022062411/56816719550346895ddb8da8/html5/thumbnails/25.jpg)
Styling von Controls
input[type=text]:hover::-ms-clear { background: purple;}
ControlTag
StatePseudo-Class
PartPseudo-Element
![Page 26: Windows Store Apps mit HTML & JS entwickeln](https://reader035.vdocument.in/reader035/viewer/2022062411/56816719550346895ddb8da8/html5/thumbnails/26.jpg)
Liste aller WinJS-Control-PartsControl Partsinput [type = checkbox] -ms-checkinput [type = radio] -ms-checkinput [type = range] -ms-fill-lower, -ms-track,
-ms-fill-upper, -ms-thumb, -ms-ticks-after, -ms-ticks-before, -ms-ticks-on-track
input [type = email], input [type = search], input [type = tel], input [type = url]
-ms-value, -ms-clear
input [type = password] -ms-value, -ms-revealprogress -ms-fillselect -ms-value, -ms-expand
![Page 27: Windows Store Apps mit HTML & JS entwickeln](https://reader035.vdocument.in/reader035/viewer/2022062411/56816719550346895ddb8da8/html5/thumbnails/27.jpg)
Classes and Namespaces
Teil 6
![Page 28: Windows Store Apps mit HTML & JS entwickeln](https://reader035.vdocument.in/reader035/viewer/2022062411/56816719550346895ddb8da8/html5/thumbnails/28.jpg)
Closures(function() { "use strict";
// isolierter Code
})();
Self-executing anonymous function verhindert Nameskollisionen im globalen Namespace.
![Page 29: Windows Store Apps mit HTML & JS entwickeln](https://reader035.vdocument.in/reader035/viewer/2022062411/56816719550346895ddb8da8/html5/thumbnails/29.jpg)
Klassen in WinJSvar MyClass = WinJS.Class.define(function() { // Constructor}, { // Members}, { // Static members});
var myObj = new MyClass();
![Page 30: Windows Store Apps mit HTML & JS entwickeln](https://reader035.vdocument.in/reader035/viewer/2022062411/56816719550346895ddb8da8/html5/thumbnails/30.jpg)
var Person = WinJS.Class.define(function (firstname, lastname) { this._firstname = firstname; this._lastname = lastname; }, { fullName: { get: function () { return this.firstname + " " + this.lastname; } } }); var hans = new Person("Hans", "Muster");console.log(hans.FullName);
Private Members und Properties
Private Members Wenn Name mit Underscore (“_”) beginnt
Propertiesproperty: { get : function(){}, set : function(value){}}
![Page 31: Windows Store Apps mit HTML & JS entwickeln](https://reader035.vdocument.in/reader035/viewer/2022062411/56816719550346895ddb8da8/html5/thumbnails/31.jpg)
Namespaces in WinJSWinJS.Namespace.define("Shape", { // Classes MyClass : WinJS.Class.define(function() {}),
// Functions myFunction : function() {},
// Values myValue: 5 }); var myInstance = new Shape.MyClass();
![Page 32: Windows Store Apps mit HTML & JS entwickeln](https://reader035.vdocument.in/reader035/viewer/2022062411/56816719550346895ddb8da8/html5/thumbnails/32.jpg)
Vererbung von Klassenvar Person = WinJS.Class.define(function (firstname, lastname) { this._firstname = firstname; this._lastname = lastname;}, { fullname: { get: function () { return this.firstname + " " + this.lastname; } }});
var Employee = WinJS.Class.derive(Person, function(firstname, lastname, role) { this._firstname = firstname; this._lastname = lastname; this._role = role;}, { description : { get: function () { return this.fullname + " is a " + this._role; } }});
![Page 33: Windows Store Apps mit HTML & JS entwickeln](https://reader035.vdocument.in/reader035/viewer/2022062411/56816719550346895ddb8da8/html5/thumbnails/33.jpg)
Data BindingTeil 7
![Page 34: Windows Store Apps mit HTML & JS entwickeln](https://reader035.vdocument.in/reader035/viewer/2022062411/56816719550346895ddb8da8/html5/thumbnails/34.jpg)
Was ist an diesem Code schlecht?var button = document.getElementById('change-button'), person = document.getElementById('person');
button.addEventListener('clicked', function () { person.innerHTML = "Michael Müller";});
Schlecht testbar Abhängigkeit vom Code zur View Kann nicht wiederverwendet werden
<button id="change-button"></button><div id="person">Hans Muster</div>
![Page 35: Windows Store Apps mit HTML & JS entwickeln](https://reader035.vdocument.in/reader035/viewer/2022062411/56816719550346895ddb8da8/html5/thumbnails/35.jpg)
Besserer Code
var viewModel = WinJS.Class.define(function () {}, { person = { name: "Hans Muster" }, changeName: function () { this.person.name = "Michael Müller"; }});
Gut testbar Keine Abhängigkeit zwischen Model und View Kann wiederverwendet werden
Binding fehlt
<button id="change-button"></button><div id="person">Hans Muster</div>
![Page 36: Windows Store Apps mit HTML & JS entwickeln](https://reader035.vdocument.in/reader035/viewer/2022062411/56816719550346895ddb8da8/html5/thumbnails/36.jpg)
Data Binding in WinJS
Source TargetBindingConverter
var person = { name: "Hans Muster",};
<div id="root"> <p data-win-bind="textContent:name"></p></div>
var root = document.getElementById("root");WinJS.Binding.processAll(root, person);
DataContext
![Page 37: Windows Store Apps mit HTML & JS entwickeln](https://reader035.vdocument.in/reader035/viewer/2022062411/56816719550346895ddb8da8/html5/thumbnails/37.jpg)
Bindable Wrappers
var person = { name: "Hans Muster",};
var bindablePerson = WinJS.Binding.as(person);
Erzeugt ein Wrapper mit Properties und Change-Notification.
var bindablePerson = WinJS.Class.define(function() { this._initObservable();}, { name: { get: function () { return getProperty("name"); }, set: function (value) { setProperty("name", value); } }}); WinJS.Class.mix(bindablePerson, WinJS.Binding.mixin);
![Page 38: Windows Store Apps mit HTML & JS entwickeln](https://reader035.vdocument.in/reader035/viewer/2022062411/56816719550346895ddb8da8/html5/thumbnails/38.jpg)
Binding Mixinvar BindablePerson = WinJS.Class.define(function() { this._initObservable();}, { name : { get: function () { return getProperty("name"); }, set: function (value) { return setProperty("name", value); } }}); WinJS.Class.mix(WinJS.Binding.mixin, BindablePerson);
![Page 39: Windows Store Apps mit HTML & JS entwickeln](https://reader035.vdocument.in/reader035/viewer/2022062411/56816719550346895ddb8da8/html5/thumbnails/39.jpg)
<div id="root"> <button data-win-bind="onclick:changeName"></button> <p data-win-bind="textContent:person.name"></p></div>
var ViewModel = WinJS.Class.define(function () {
},{ person: WinJS.Binding.as({ name: "Hans Muster" }), changeName: function () { this.person.name = "Michael Müller"; }});
Event Binding
WinJS.Binding.processAll(root, new ViewModel());
Errorperson is undefined.
ErrorValue is not supported within a declarative processing context.
![Page 40: Windows Store Apps mit HTML & JS entwickeln](https://reader035.vdocument.in/reader035/viewer/2022062411/56816719550346895ddb8da8/html5/thumbnails/40.jpg)
Event Binding<div id="root"> <button data-win-bind="onclick:changeName"></button> <p data-win-bind="textContent:person.name"></p></div>
var ViewModel = WinJS.Class.define(function () { this.changeName = this._changeName.bind(this); this.changeName.supportedForProcessing = true;},{ person: WinJS.Binding.as({ name: "Hans Muster" }), _changeName: function () { this.person.name = "Michael Müller"; }});
WinJS.Binding.processAll(root, new ViewModel());
Löst Problem mit falschem this callback.Markiert die Funktion als “bindable”.
![Page 41: Windows Store Apps mit HTML & JS entwickeln](https://reader035.vdocument.in/reader035/viewer/2022062411/56816719550346895ddb8da8/html5/thumbnails/41.jpg)
Binding Collections
var viewModel = WinJS.Class.define(function () { var persons = new WinJS.Binding.List();}, { add: function (name) { this.persons.push({ name: name }); }}); WinJS.Binding.processAll(root, viewModel);
<div data-win-control="WinJS.UI.ListView" data-win-bind="winControl.itemDataSource:persons:dataSource"></div>
Die Binding-List ruft beim Hinzufügen für jedes Item WinJs.Binding.as() auf.
![Page 42: Windows Store Apps mit HTML & JS entwickeln](https://reader035.vdocument.in/reader035/viewer/2022062411/56816719550346895ddb8da8/html5/thumbnails/42.jpg)
Two Way Binding
<input type="text" data-win-bind="value:searchText Binding.Mode.twoway" />searchText: { get: function () { return this._searchText; }, set: function (value) { this._searchText = value;
this.doSearch(); } }
http://mvvmstack.codeplex.com/
![Page 43: Windows Store Apps mit HTML & JS entwickeln](https://reader035.vdocument.in/reader035/viewer/2022062411/56816719550346895ddb8da8/html5/thumbnails/43.jpg)
Data TemplatesTeil 8
![Page 44: Windows Store Apps mit HTML & JS entwickeln](https://reader035.vdocument.in/reader035/viewer/2022062411/56816719550346895ddb8da8/html5/thumbnails/44.jpg)
Data Templates
<div id="movie_template" data-win-control="WinJS.Binding.Template"> <div class="movie" data-win-bind="style.backgroundImage:posterUrl"> <div class="item-overlay"> <p data-win-bind="textContent:title"></p> </div> </div></div>
Tipp: Das äusserte <div> ist nicht Teil des Item-Templates.
<div id="moviesList" data-win-control="WinJS.UI.ListView" data-win-bind="winControl.itemDataSource:movies.dataSource;" data-win-options="{itemTemplate:select('#movie_template')}"></div>
![Page 45: Windows Store Apps mit HTML & JS entwickeln](https://reader035.vdocument.in/reader035/viewer/2022062411/56816719550346895ddb8da8/html5/thumbnails/45.jpg)
Windows RuntimeTeil 9
![Page 46: Windows Store Apps mit HTML & JS entwickeln](https://reader035.vdocument.in/reader035/viewer/2022062411/56816719550346895ddb8da8/html5/thumbnails/46.jpg)
Windows Runtime (WinRT)
Windows.Storage.KnownFolders.picturesLibrary .getFilesAsync().then(function (files) { files.forEach(function () { // Do something });});
WinRT (COM)
JavaScript Engine
Language Projection
Windows.DataWindows.DevicesWindows.GraphicsWindows.MediaWindows.NetworkingWindows.SecurityWindows.StorageWindows.Web
Zugriff auf Windows 8 Plattform Ressourcen
![Page 47: Windows Store Apps mit HTML & JS entwickeln](https://reader035.vdocument.in/reader035/viewer/2022062411/56816719550346895ddb8da8/html5/thumbnails/47.jpg)
PromisesWinJS.xhr({ url: "http://www.google.com" }) .then(function (result) { out.innerText = "Success (" + result.responseText.length + " bytes)"; }, function (error) { out.innerHTML = "Failed to download: " + error.statusText; }, function (result) { out.innerText = "Downloading... " + result.readyState; });
![Page 48: Windows Store Apps mit HTML & JS entwickeln](https://reader035.vdocument.in/reader035/viewer/2022062411/56816719550346895ddb8da8/html5/thumbnails/48.jpg)
Externe LibrariesTeil 10
![Page 49: Windows Store Apps mit HTML & JS entwickeln](https://reader035.vdocument.in/reader035/viewer/2022062411/56816719550346895ddb8da8/html5/thumbnails/49.jpg)
jQuery
$('#rating').bind('change', function () { $('#message').append($('<p>Rated: ' + this.winControl.userRating + '</p>'));}); $('#appBarCommand').click(function () { $('#message').append($('<p>Clicked!</p>')); $('#rating')[0].winControl.userRating = 5;});
http://code.jquery.com/jquery-2.0.0b2.js
Rated: 3
![Page 50: Windows Store Apps mit HTML & JS entwickeln](https://reader035.vdocument.in/reader035/viewer/2022062411/56816719550346895ddb8da8/html5/thumbnails/50.jpg)
Fazit
![Page 51: Windows Store Apps mit HTML & JS entwickeln](https://reader035.vdocument.in/reader035/viewer/2022062411/56816719550346895ddb8da8/html5/thumbnails/51.jpg)
FazitHTML/JS sind bewährte, ausgereifte Technologien mit vielen Features. Damit lassen sich einfach, vollwertige Apps erstellen.
HTML/JS sind ideal, wenn man sich in einem Web-nahem Umfeld bewegt. (Rest-Services, JavaScript Libraries, bestehende Web-Lösungen)
Für komplexe Business-Logik würde ich immer noch C# bevorzugen (Typsicherheit, Refacoring, Namespaces/Classes/Interfaces Teil der Sprache)
WinJS ist stark bei Modern-UI-Controls, kommt aber in vieler Hinsicht (noch) nicht an Frameworks wie jQuery oder Knockout ran.
![Page 52: Windows Store Apps mit HTML & JS entwickeln](https://reader035.vdocument.in/reader035/viewer/2022062411/56816719550346895ddb8da8/html5/thumbnails/52.jpg)
Viel Spass beim Ausprobieren und “en Guete”
![Page 53: Windows Store Apps mit HTML & JS entwickeln](https://reader035.vdocument.in/reader035/viewer/2022062411/56816719550346895ddb8da8/html5/thumbnails/53.jpg)
© 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a
commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.