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@t...
WinRT System ArchitectureHerbstcampus 2012 – Windows Store Apps with HTML and JavaScript   3
WinRT System ArchitectureHerbstcampus 2012 – Windows Store Apps with HTML and JavaScript   4
Windows Store Apps in JavaScript?Goals…                                                Prerequisites… • Reuse existing kno...
Goals of This Session• Build a Windows Store App from scratch using HTML + JavaScript• Introduce the WinJS Library• Access...
Important Notice• For demo purposes the sample has been simplified compared  to a real-world Windows Store app• In practis...
JavaScript Module Pattern(function ( ) {    // create variable    // var name = "Andi und Rainer";    //     create method...
Demo• Structure of a JavaScript Windows Store App• Runtime environment for JavaScript Apps  Background information in MSDN...
Structure of a JavaScript App             Reference to WinJSFolder for CSS-Dateien  Folder for images Folder for JavaScrip...
Structure of a JavaScript AppHerbstcampus 2012 – Windows Store Apps with HTML and JavaScript   11
Demo• Controls and Data BindingHerbstcampus 2012 – Windows Store Apps with HTML and JavaScript   12
ListView, a WinJS Control<!-- add a WinJS control in HTML --><div class="itemlist" data-win-control="WinJS.UI.ListView" […...
Demo• Templates and Data BindingHerbstcampus 2012 – Windows Store Apps with HTML and JavaScript   14
ListView, a WinJS Control<div class="splitpage">     <div class="itemtemplate" data-win-control="WinJS.Binding.Template"> ...
ListView, a WinJS Controlfunction onselectionchanged(eventObject) {   var listView = document.body.querySelector(".itemlis...
ListView, a WinJS Control     WinJS.UI.setOptions(lv.winControl, {         itemTemplate: document.body.querySelector(".ite...
Demo• Working with REST ServicesHerbstcampus 2012 – Windows Store Apps with HTML and JavaScript   18
REST Service in FiddlerHerbstcampus 2012 – Windows Store Apps with HTML and JavaScript   19
WinJS.xhrfunction refreshBlogList() {     WinJS.xhr({ url: "http://localhost:2220/ServiceBlog.svc/Blog/" }).done(function ...
WinJS.xhr     app.onactivated = function (eventObject) {        // lookup list view in DOM        var lv = document.body.q...
Demo• AppBar, XHR and AzureHerbstcampus 2012 – Windows Store Apps with HTML and JavaScript   22
Azure Blob Storage                                                                                       SQL Azure        ...
Azure Blob Storage                                                                                        SQL Azure       ...
Azure Shared Access Signatures                                                              Link with signatureHerbstcampu...
INSERT with REST ServiceHerbstcampus 2012 – Windows Store Apps with HTML and JavaScript   26
Adding an AppBar<div id="appbar" data-win-control="WinJS.UI.AppBar">    <button data-win-control="WinJS.UI.AppBarCommand" ...
Using WinRT to Access the Webcamfunction onPostBlogEntryClick() {   // let user take a picture. Note that we use WinRT cla...
Using WinRT to Access the Webcamif (capturedItem) {      var rootDiv = document.body.querySelector(".itemlist");      var ...
Demo• Share ContractHerbstcampus 2012 – Windows Store Apps with HTML and JavaScript   30
Implement the Share Contract     var dtm = Windows.ApplicationModel.DataTransfer.DataTransferManager.getForCurrentView(); ...
SummaryWhat you have seen…                                   Use your existing knowlege• Structure of a Windows           ...
Vielen Dank!Rainer Stropek software architects gmbh
is the leading time tracking solution for knowledgeworkers. Graphical time tracking calendar, automatic tracking ofyour wo...
ist die führende Projektzeiterfassung fürKnowledge Worker. Grafischer Zeitbuchungskalender,automatische Tätigkeitsaufzeich...
Upcoming SlideShare
Loading in...5
×

Programming windows store apps with JavaScript and WinRT

2,216

Published on

With Windows 8 Microsoft will introduce a new technology for developing apps on their platform: WinRT – the Windows Runtime. WinRT bridges the gap between the Windows 8 operating system's SDK and higher level languages like C#, VB or even JavaScript. Microsoft's goal is to make developing Windows 8 metro-style apps with HTML5 and JavaScript feel natural to people familiar with these web technologies.

This talk is especially for web developers who want to learn how they can build upon their existing knowledge to create apps for Microsoft's coming new operating system and market place. In this session after a short overview about WinRT the WinRT architecture and the functionality it offers will be introduced. Based on this information it will be demonstrated how Microsoft's „Chakra“ JavaScript engine projects WinRT into the JavaScript language. It will be shown how to consume existing functionality from WinRT's library to e. g. access the underlying hardware of the Windows 8 tablet PC. In a second step the sample will be extended by creating a custom WinRT component in C++ and consuming it in JavaScript.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,216
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
38
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • Rainer
  • Rainer
  • Rainer
  • Andi
  • AndiDauer der Demo: 5 MinutenInhalt der Demo:File/New/ProjectJavaScript Blank ApplicationWalkthrough OrdnerstrukturErklärung &quot;Project Reference&quot; auf WinJS statt Einbindung als &quot;minimized&quot; JS-fileRuntimeApp startenProcess Monitor Hostingprozess zeigen
  • Absichtlich versteckte Slide; zur Nachlese für die Teilnehmer.
  • Absichtlich versteckte Slide; zur Nachlese für die Teilnehmer.
  • AndiDauer der Demo: 5 MinutenInhalt der Demo:File/New/ProjectJavaScript Blank ApplicationWalkthrough OrdnerstrukturErklärung &quot;Project Reference&quot; auf WinJS statt Einbindung als &quot;minimized&quot; JS-fileRuntimeApp startenProcess Monitor Hostingprozess zeigen
  • Absichtlich versteckte Slide; zur Nachlese für die Teilnehmer.
  • AndiDauer der Demo: 5 MinutenInhalt der Demo:File/New/ProjectJavaScript Blank ApplicationWalkthrough OrdnerstrukturErklärung &quot;Project Reference&quot; auf WinJS statt Einbindung als &quot;minimized&quot; JS-fileRuntimeApp startenProcess Monitor Hostingprozess zeigen
  • Absichtlich versteckte Slide; zur Nachlese für die Teilnehmer.
  • Absichtlich versteckte Slide; zur Nachlese für die Teilnehmer.
  • Absichtlich versteckte Slide; zur Nachlese für die Teilnehmer.
  • AndiDauer der Demo: 5 MinutenInhalt der Demo:File/New/ProjectJavaScript Blank ApplicationWalkthrough OrdnerstrukturErklärung &quot;Project Reference&quot; auf WinJS statt Einbindung als &quot;minimized&quot; JS-fileRuntimeApp startenProcess Monitor Hostingprozess zeigen
  • Absichtlich versteckte Slide; zur Nachlese für die Teilnehmer.
  • Absichtlich versteckte Slide; zur Nachlese für die Teilnehmer.
  • Absichtlich versteckte Slide; zur Nachlese für die Teilnehmer.
  • AndiDauer der Demo: 5 MinutenInhalt der Demo:File/New/ProjectJavaScript Blank ApplicationWalkthrough OrdnerstrukturErklärung &quot;Project Reference&quot; auf WinJS statt Einbindung als &quot;minimized&quot; JS-fileRuntimeApp startenProcess Monitor Hostingprozess zeigen
  • Rainer
  • Rainer
  • Absichtlich versteckte Slide; zur Nachlese für die Teilnehmer.
  • Absichtlich versteckte Slide; zur Nachlese für die Teilnehmer.Request Header:Content-Type: text/JSONRequest Body:{&quot;Title&quot;: &quot;Hi BigDay&quot;, &quot;Text&quot;: &quot;Hello World!&quot;, &quot;ImageUri&quot;: &quot;http:\\/\\/upload.wikimedia.org\\/wikipedia\\/commons\\/d\\/d3\\/Cucumis_sativus0.jpg&quot;}
  • Absichtlich versteckte Slide; zur Nachlese für die Teilnehmer.
  • Absichtlich versteckte Slide; zur Nachlese für die Teilnehmer.
  • Absichtlich versteckte Slide; zur Nachlese für die Teilnehmer.
  • AndiDauer der Demo: 5 MinutenInhalt der Demo:File/New/ProjectJavaScript Blank ApplicationWalkthrough OrdnerstrukturErklärung &quot;Project Reference&quot; auf WinJS statt Einbindung als &quot;minimized&quot; JS-fileRuntimeApp startenProcess Monitor Hostingprozess zeigen
  • Absichtlich versteckte Slide; zur Nachlese für die Teilnehmer.
  • Programming windows store apps with JavaScript and WinRT

    1. 1. Programming Windows Store Apps with JavaScript and WinRT Rainer Stropek software architects gmbh
    2. 2. Introduction• software architects gmbh• Rainer Stropek • Developer, Speaker, Trainer • MVP for Windows Azure • rainer@timecockpit.com • @rstropek http://www.timecockpit.comHerbstcampus 2012 – Windows Store Apps with HTML and JavaScript 2
    3. 3. WinRT System ArchitectureHerbstcampus 2012 – Windows Store Apps with HTML and JavaScript 3
    4. 4. WinRT System ArchitectureHerbstcampus 2012 – Windows Store Apps with HTML and JavaScript 4
    5. 5. 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 1st • 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
    6. 6. 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 sessionNon-Goals of the Session:• General HTML/CSS/JavaScript introduction• Training about WinJS, WinRT or Windows Store AppsTip: Download slides and check hidden slides for code snippetsHerbstcampus 2012 – Windows Store Apps with HTML and JavaScript 6
    7. 7. 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
    8. 8. JavaScript Module Pattern(function ( ) { // 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
    9. 9. Demo• Structure of a JavaScript Windows Store App• Runtime environment for JavaScript Apps Background information in MSDNHerbstcampus 2012 – Windows Store Apps with HTML and JavaScript 9
    10. 10. Structure of a JavaScript App Reference to WinJSFolder for CSS-Dateien Folder for images Folder for JavaScript files HTML files Application Manifest Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 10
    11. 11. Structure of a JavaScript AppHerbstcampus 2012 – Windows Store Apps with HTML and JavaScript 11
    12. 12. Demo• Controls and Data BindingHerbstcampus 2012 – Windows Store Apps with HTML and JavaScript 12
    13. 13. ListView, a WinJS Control<!-- add a WinJS control in HTML --><div class="itemlist" data-win-control="WinJS.UI.ListView" […]></div>// find control in DOM treevar lv = document.body.querySelector(".itemlist");// fill WinJS list (=data source for ListView)var items = new WinJS.Binding.List();for (var i = 1000; i < 1500; i++) { items.push("Hello World!");}WinJS.UI.processAll().then(function() { lv.winControl.itemDataSource = items.dataSource;}Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 13
    14. 14. Demo• Templates and Data BindingHerbstcampus 2012 – Windows Store Apps with HTML and JavaScript 14
    15. 15. ListView, a WinJS Control<div class="splitpage"> <div class="itemtemplate" data-win-control="WinJS.Binding.Template"> <div><img src="#" data-win-bind="src: ImageUri; alt: Title" style="width: 100px" /></div> <div class="item-info"><h3 class="item-title win-type-ellipsis" data-win-bind="textContent: Title"></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 groups 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-win-bind="textContent: Title"></h2></div> <div> <img class="article-image" src="#" data-win-bind="src: ImageUri; alt: Title" style="width: 150px; max-height: 150px" /> </div> </header> <article class="article-content" data-win-bind="innerHTML: Text"></article> </section></div> Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 15
    16. 16. ListView, a WinJS Controlfunction 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.Binding.processAll(details, items[0].data); details.scrollTop = 0; } })} Root node for data Data Context for data binding binding Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 16
    17. 17. ListView, a WinJS Control WinJS.UI.setOptions(lv.winControl, { itemTemplate: document.body.querySelector(".itemtemplate"), onselectionchanged: onselectionchanged.bind(this), itemDataSource: items.dataSource, layout: new WinJS.UI.ListLayout() }); lv.winControl.selection.set(0);Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 17
    18. 18. Demo• Working with REST ServicesHerbstcampus 2012 – Windows Store Apps with HTML and JavaScript 18
    19. 19. REST Service in FiddlerHerbstcampus 2012 – Windows Store Apps with HTML and JavaScript 19
    20. 20. WinJS.xhrfunction refreshBlogList() { WinJS.xhr({ url: "http://localhost:2220/ServiceBlog.svc/Blog/" }).done(function (feedResponse) { // convert feed to list of bindable objects var feed = JSON.parse(feedResponse.responseText); var items = 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
    21. 21. WinJS.xhr app.onactivated = function (eventObject) { // lookup list view in DOM var lv = document.body.querySelector(".itemlist"); WinJS.UI.processAll().then(function () { refreshBlogList(); }); }Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 21
    22. 22. Demo• AppBar, XHR and AzureHerbstcampus 2012 – Windows Store Apps with HTML and JavaScript 22
    23. 23. 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 AzureHerbstcampus 2012 – Windows Store Apps with HTML and JavaScript 23
    24. 24. 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 AzureHerbstcampus 2012 – Windows Store Apps with HTML and JavaScript 24
    25. 25. Azure Shared Access Signatures Link with signatureHerbstcampus 2012 – Windows Store Apps with HTML and JavaScript 25
    26. 26. INSERT with REST ServiceHerbstcampus 2012 – Windows Store Apps with HTML and JavaScript 26
    27. 27. Adding an AppBar<div id="appbar" data-win-control="WinJS.UI.AppBar"> <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:cmd, label:Create Entry, icon:placeholder}"> </button> <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:refresh, label:Refresh, icon:placeholder}"> </button></div>// add button handler for appbar buttonvar cmdButton = document.getElementById("cmd");cmdButton.onclick = onPostBlogEntryClick;var refreshButton = document.getElementById("refresh");refreshButton.onclick = refreshBlogList; Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 27
    28. 28. Using WinRT to Access the Webcamfunction onPostBlogEntryClick() { // let user take a picture. Note that we use WinRT classes here. var capture = Windows.Media.Capture; var cameraCaptureUI = new capture.CameraCaptureUI();cameraCaptureUI.captureFileAsync(capture.CameraCaptureUIMode.photo).then( function (capturedItem) { if (capturedItem) { […] } });} Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 28
    29. 29. Using WinRT to Access the Webcamif (capturedItem) { var rootDiv = document.body.querySelector(".itemlist"); var busy = getBusyOverlay(rootDiv, { color: gray, opacity: 0.25 }, { type: oval, color: #FFFFFF }); WinJS.xhr({ url: "http://localhost:2220/ServiceBlog.svc/Blog/GetSasForImage/" + imageName }) .done(function (result) { var uploader = new Windows.Networking.BackgroundTransfer.BackgroundUploader(); uploader.method = "PUT"; uploader.setSourceFile(capturedItem); var uri = new Windows.Foundation.Uri(JSON.parse(result.responseText)); var upload = uploader.createUpload(uri); upload.startAsync().done(function (result) { WinJS.xhr({ url: "http://localhost:2220/ServiceBlog.svc/Blog/AddBlog", data: JSON.stringify(newEntry), type: "POST", headers: { "Content-Type": "text/JSON" } }).done(function () { busy.remove(); refreshBlogList(); }); }, function (err) { busy.remove(); }); });} Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 29
    30. 30. Demo• Share ContractHerbstcampus 2012 – Windows Store Apps with HTML and JavaScript 30
    31. 31. Implement the Share Contract var dtm = Windows.ApplicationModel.DataTransfer.DataTransferManager.getForCurrentView(); dtm.addEventListener("datarequested", function (e) { // capture request member var request = e.request; // get selected item from list view var lv = document.body.querySelector(".itemlist").winControl; lv.selection.getItems().then(function (items) { if (items.length > 0) { var item = items[0].data; // set request title and description request.data.properties.title = item.Title; request.data.properties.description = "Garden Blog"; // set text content var recipe = item.Text; request.data.setText(recipe); // set image content // note that we use deferral-API here. // (only do this if your operation is quite fast; 200ms time limit or so) var uri = new Windows.Foundation.Uri(item.ImageUri); var reference = Windows.Storage.Streams.RandomAccessStreamReference.createFromUri(uri); request.data.properties.thumbnail = reference; var deferral = request.getDeferral(); request.data.setBitmap(reference); deferral.complete(); } }); });Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 31
    32. 32. SummaryWhat you have seen… Use your existing knowlege• Structure of a Windows about HTML and Store App with HTML + JavaScript for Windows JavaScript Store Apps• Introduction into WinJS Further readings:• Accessing Windows 8 API • http://dev.windows.com (WinRT) from JavaScript • http://design.windows.comHerbstcampus 2012 – Windows Store Apps with HTML and JavaScript 32
    33. 33. Vielen Dank!Rainer Stropek software architects gmbh
    34. 34. is the leading time tracking solution for knowledgeworkers. Graphical time tracking calendar, automatic tracking ofyour work using signal trackers, high level of extensibility andcustomizability, full support to work offline, and SaaSdeployment model make it the optimal choice especially in theIT consulting business.Try for free and without any risk. You can get yourtrial account at http://www.timecockpit.com. After the trialperiod you can use for only 0,20€ per user andmonth without a minimal subscription time and without aminimal number of users.Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 34
    35. 35. ist die führende Projektzeiterfassung fürKnowledge Worker. Grafischer Zeitbuchungskalender,automatische Tätigkeitsaufzeichnung über Signal Tracker,umfassende Erweiterbarkeit und Anpassbarkeit, volleOfflinefähigkeit und einfachste Verwendung durch SaaS machenes zur Optimalen Lösung auch speziell im IT-Umfeld.Probieren Sie kostenlos und ohne Risko einfachaus. Einen Testzugang erhalten Sie unter http://www.timecockpit.com.Danach nutzen Sie um nur 0,20€ pro Benutzer undTag ohne Mindestdauer und ohne Mindestbenutzeranzahl.Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 35
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×