Rainer Stropek software architects gmbh Introduction software - PowerPoint PPT Presentation

Programming Windows Store Apps with JavaScript and WinRT Rainer Stropek software architects gmbh

Introduction • software architects gmbh • Rainer Stropek • Developer, Speaker, Trainer • MVP for Windows Azure • rainer@timecockpit.com • @rstropek http://www.timecockpit.com Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 2

WinRT System Architecture Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 3

WinRT System Architecture Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 4

Windows Store Apps in JavaScript? Goals… Prerequisites… • Reuse existing knowledge • Use all the technologies you from the web for developing know from IE 10: HTML5 + Windows applications CSS3 + JavaScript • HTML + JavaScript are 1 st • Full access to platform API class citizens for developing (WinRT) Windows Store Apps • "Fast and Fluid" also with • Hardware Acceleration, HTML + JavaScript Plugin-Free, etc. Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 5

Goals of This Session • Build a Windows Store App from scratch using HTML + JavaScript • Introduce the WinJS Library • Access API of Windows 8 (WinRT) from JavaScript • One integrated demo used throughout the entire session Non-Goals of the Session: • General HTML/CSS/JavaScript introduction • Training about WinJS, WinRT or Windows Store Apps Tip: Download slides and check hidden slides for code snippets Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 6

Important Notice • For demo purposes the sample has been simplified compared to a real-world Windows Store app • In practise you have to remember additional requirements in order to get your app into the Windows Store, e.g.: • Handle different screen resolutions and view modes (e.g. portrait/landscape, snapped, etc.; read more) • Support navigation patterns (e.g. links, back/forward, etc.; read more) • App Lifecycle (e.g. launch, activation, suspend, etc.; read more) Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 7

JavaScript Module Pattern (functio (function ( ) n ( ) { // create variable // var name = "Andi und Rainer"; // create method // var sayHello = function ( ) { // alert(name); // }; })( ); })( ); // calling this method. It is plain old JavaScript, also for Windows Store Apps! Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 8

Demo • Structure of a JavaScript Windows Store App • Runtime environment for JavaScript Apps Background information in MSDN Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 9

Structure of a JavaScript App Reference to WinJS Folder for CSS-Dateien Folder for images Folder for JavaScript files HTML files Application Manifest Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 10

Structure of a JavaScript App Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 11

Demo • Controls and Data Binding Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 12

ListView, a WinJS Control <!-- add a WinJS control in HTML --> <div class="itemlist" data data-wi win-co cont ntro rol=" ="Wi WinJ nJS.U .UI. I.Li List stVie iew" w" […]></div> // find control in DOM tree var lv = document.body.querySelector(".itemlist"); // fill WinJS list (=data source for ListView) var items = new Win inJS JS.Bi Bind ndin ing.L .Lis ist(); for (var i = 1000; i < 1500; i++) { items.push("Hello World!"); } Win inJS JS.UI UI.p .pro roces essA sAll ll() ().th then en(function() { lv.win inCo Cont ntro rol.i .ite temD mDat ataSo Sour urce ce = = it item ems. s.dat ataS aSou ource ce; } Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 13

Demo • Templates and Data Binding Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 14

ListView, a WinJS Control <div class="splitpage"> <div class="itemtemplate" data data-win-control="WinJS.Binding.Template"> <div><img src="#" data data-win win-bi bind nd=" ="sr src: c: Im Imag ageUri ri; ; al alt: : Ti Titl tle" e" style="width: 100px" /></div> <div class="item-info"><h3 class="item-title win-type-ellipsis" da data ta-win win-bi bind nd=" ="te textC tCon ontent nt: : Ti Title le"></h3></div> </div> <header aria-label="Header content" role="banner"><h1>Garden Blog</h1></header> <section class="itemlistsection" aria-label="List section"> <div class="itemlist" aria-label="List of this group's items" data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'single', tapBehavior: 'directSelect' }"> </div> </section> <section class="articlesection" aria-atomic="true" aria-label="Item detail" aria-live="assertive"> <header class="header"> <div class="text"><h2 data data-wi win-bi bind nd=" ="tex extC tConte tent nt: : Tit itle le"></h2></div> <div> <img class="article-image" src="#" data data-win win-bi bind nd=" ="src rc: : Im Imag ageUr Uri; i; alt lt: : Ti Title le" style="width: 150px; max-height: 150px" /> </div> </header> <article class="article-content" data data-win win-bind nd=" ="in inner erHT HTML ML: : Tex ext" t"></article> </section> </div> Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 15

ListView, a WinJS Control function onselectionchanged(eventObject) { var listView = document.body.querySelector(".itemlist").winControl; // By default, the selection is restriced to a single item. listView.selection.getItems().then(function (items) { if (items.length > 0 && items[0]) { var details = document.querySelector(".articlesection"); WinJS.Bi WinJS.Binding. nding.processA processAll(det ll(details, it ails, items[0] ems[0].data); .data); details.scrollTop = 0; } }) } Root node for data Data Context for data binding binding Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 16

ListView, a WinJS Control WinJS.UI.setOptions(lv.winControl, { itemTemp itemTemplate: late: document document.body. .body.querySel querySelector( ector(".itemte ".itemtemplate mplate"), "), onselectioncha onselect ionchanged: on nged: onselect selectionchang ionchanged.bin ed.bind(this), d(this), itemDataSource: items.dataSource, layout: new WinJS.UI.ListLayout() }); lv.winCo lv.winControl. ntrol.selectio selection.set( n.set(0); 0); Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 17

Demo • Working with REST Services Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 18

REST Service in Fiddler Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 19

WinJS.xhr function refreshBlogList() { WinJS.xhr WinJS.xhr({ url: "http://localhost:2220/ServiceBlog.svc/Blog/" }).done(function (feedResponse) { // convert feed to list of bindable objects var feed = JSON.parse JSON.parse(feedResponse.responseText); var items = new WinJS.Binding.List(feed) new WinJS.Binding.List(feed); // set properties of list view (including data source for binding) var lv = document.body.querySelector(".itemlist"); WinJS.UI.setOptions(lv.winControl, { itemTemplate: document.body.querySelector(".itemtemplate"), onselectionchanged: onselectionchanged.bind(this), itemDataSource: items.dataSource, layout: new WinJS.UI.ListLayout() }); // automatically select first item lv.winControl.selection.set(0); }); } Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 20

WinJS.xhr app.onactivated = function (eventObject) { // lookup list view in DOM var lv = document.body.querySelector(".itemlist"); WinJS.UI.processAll().then(function () { refreshB refreshBlogLis logList(); t(); }); } Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 21

Demo • AppBar, XHR and Azure Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 22

Azure Blob Storage SQL Azure (Blog Content ohne Bilder) HTTP GET Webrole (REST Service) JSON (Blog Entries) Metro-Style App HTTP GET Blobs (Bild) Azure Blob Storage (Bilder) Windows Azure Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 23

Azure Blob Storage SQL Azure (Blog Content ohne Bilder) HTTP GET Webrole (REST Service) Shared Access Signature Generate Shared Access Signature (SAS) Metro-Style App HTTP POST (Bild) Azure Blob Storage (Bilder) Windows Azure Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 24

Azure Shared Access Signatures Link with signature Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 25

INSERT with REST Service Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 26