Rainer Stropek software architects gmbh Introduction software - - PowerPoint PPT Presentation

▶
rainer stropek
SMART_READER_LITE
LIVE PREVIEW

Rainer Stropek software architects gmbh Introduction software - - PowerPoint PPT Presentation

Oct 04, 2022 450 likes •815 views

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

slide-1
SLIDE 1

Programming Windows Store Apps with JavaScript and WinRT

Rainer Stropek

software architects gmbh

slide-2
SLIDE 2

Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 2

Introduction

  • software architects gmbh
  • Rainer Stropek
  • Developer, Speaker, Trainer
  • MVP for Windows Azure
  • rainer@timecockpit.com
  • @rstropek

http://www.timecockpit.com

slide-3
SLIDE 3

Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 3

WinRT System Architecture

slide-4
SLIDE 4

Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 4

WinRT System Architecture

slide-5
SLIDE 5

Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 5

Windows Store Apps in JavaScript?

Goals…

  • Reuse existing knowledge

from the web for developing Windows applications

  • HTML + JavaScript are 1st

class citizens for developing Windows Store Apps

  • "Fast and Fluid" also with

HTML + JavaScript Prerequisites…

  • Use all the technologies you

know from IE 10: HTML5 + CSS3 + JavaScript

  • Full access to platform API

(WinRT)

  • Hardware Acceleration,

Plugin-Free, etc.

slide-6
SLIDE 6

Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 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 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

slide-7
SLIDE 7

Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 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
  • rder 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)
slide-8
SLIDE 8

Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 8

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!

slide-9
SLIDE 9

Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 9

Demo

  • Structure of a JavaScript Windows Store App
  • Runtime environment for JavaScript Apps

Background information in MSDN

slide-10
SLIDE 10

Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 10

Structure of a JavaScript App

Reference to WinJS Folder for CSS-Dateien Folder for images Folder for JavaScript files HTML files Application Manifest

slide-11
SLIDE 11

Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 11

Structure of a JavaScript App

slide-12
SLIDE 12

Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 12

Demo

  • Controls and Data Binding
slide-13
SLIDE 13

Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 13

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

  • urce

ce; }

slide-14
SLIDE 14

Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 14

Demo

  • Templates and Data Binding
slide-15
SLIDE 15

Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 15

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

  • ntent

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>

slide-16
SLIDE 16

Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 16

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 binding Data Context for data binding

slide-17
SLIDE 17

Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 17

ListView, a WinJS Control

WinJS.UI.setOptions(lv.winControl, { itemTemp itemTemplate: late: document document.body. .body.querySel querySelector( ector(".itemte ".itemtemplate mplate"), "),

  • nselect
  • nselectioncha

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);

slide-18
SLIDE 18

Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 18

Demo

  • Working with REST Services
slide-19
SLIDE 19

Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 19

REST Service in Fiddler

slide-20
SLIDE 20

Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 20

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"),

  • nselectionchanged: onselectionchanged.bind(this),

itemDataSource: items.dataSource, layout: new WinJS.UI.ListLayout() }); // automatically select first item lv.winControl.selection.set(0); }); }

slide-21
SLIDE 21

Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 21

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(); }); }

slide-22
SLIDE 22

Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 22

Demo

  • AppBar, XHR and Azure
slide-23
SLIDE 23

Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 23

Windows Azure

Azure Blob Storage

Metro-Style App

Webrole (REST Service) Azure Blob Storage (Bilder)

HTTP GET JSON (Blog Entries) HTTP GET Blobs (Bild)

SQL Azure (Blog Content

  • hne Bilder)
slide-24
SLIDE 24

Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 24

Windows Azure

Azure Blob Storage

Metro-Style App

Webrole (REST Service) Azure Blob Storage (Bilder)

HTTP GET Shared Access Signature HTTP POST (Bild) Generate Shared Access Signature (SAS)

SQL Azure (Blog Content

  • hne Bilder)
slide-25
SLIDE 25

Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 25

Azure Shared Access Signatures

Link with signature

slide-26
SLIDE 26

Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 26

INSERT with REST Service

slide-27
SLIDE 27

Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 27

Adding an AppBar

<div id="appbar" data ta-wi win-co contr trol

  • l="

="Wi WinJS JS.U .UI. I.App ppBa Bar"> <button data data-wi win-co cont ntrol

  • l="

="Wi WinJS JS.U .UI. I.Ap AppBa BarC rCom

  • mman

and" 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 button var cmdButton = document.getElementById("cmd"); cmd mdBu Butto ton. n.on

  • ncli

lick ck = = on

  • nPo

Post stBl BlogE gEnt ntry ryCl Click ck; var refreshButton = document.getElementById("refresh"); refreshButton.onclick = refreshBlogList;

slide-28
SLIDE 28

Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 28

Using WinRT to Access the Webcam

function onPostBlogEntryClick() { // let user take a picture. Note that we use WinRT classes here. var capture = Windows. Windows.Media. Media.Capture Capture; var cameraCaptureUI = new capture.CameraCaptureUI(); cameraCaptureUI.ca capt ptureFi ureFile leAsy sync nc(capture.CameraCaptureUIMode.photo).then( function (capturedItem) { if (capturedItem) { […] } }); }

slide-29
SLIDE 29

Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 29

Using WinRT to Access the Webcam

if (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(); }); }); }

slide-30
SLIDE 30

Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 30

Demo

  • Share Contract
slide-31
SLIDE 31

Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 31

Implement the Share Contract

var dtm = Wind ndow

  • ws.

s.Ap Appli lica catio ionM nMode del. l.Da Data taTra rans nsfer er.D .Dat ataT aTran ansf sferM rMan anage ger. r.ge getF tForC rCur urren entV tVie iew(); 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 re requ ques est.d .dat ata.p .pro rope pert rties es.t .titl tle e = i ite tem. m.Ti Title le; re requ ques est.d .dat ata.p .pro rope pert rties es.d .desc scri ripti tion

  • n =

= " "Gar arde den B Blo log" g"; // set text content var recipe = item.Text; re requ ques est.d .dat ata.s .set etTe Text xt(re reci cipe) e); // 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; va var r de defer erra ral = = r req eque uest. t.ge getDe Defe ferra ral( l(); ); re requ ques est.d .dat ata.s .set etBi Bitm tmap( p(re refer eren ence) e); de defe ferr rral. l.co compl plet ete( e(); ); } }); });

slide-32
SLIDE 32

Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 32

Summary

What you have seen…

  • Structure of a Windows

Store App with HTML + JavaScript

  • Introduction into WinJS
  • Accessing Windows 8 API

(WinRT) from JavaScript Use your existing knowlege about HTML and JavaScript for Windows Store Apps Further readings:

  • http://dev.windows.com
  • http://design.windows.com
slide-33
SLIDE 33

Vielen Dank! Rainer Stropek

software architects gmbh

slide-34
SLIDE 34

Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 34

is the leading time tracking solution for knowledge

  • workers. Graphical time tracking calendar, automatic tracking of

your work using signal trackers, high level of extensibility and customizability, full support to work offline, and SaaS deployment model make it the optimal choice especially in the IT consulting business. Try for free and without any risk. You can get your trial account at http://www.timecockpit.com. After the trial period you can use for only 0,20€ per user and month without a minimal subscription time and without a minimal number of users.

slide-35
SLIDE 35

Herbstcampus 2012 – Windows Store Apps with HTML and JavaScript 35

ist die führende Projektzeiterfassung für Knowledge Worker. Grafischer Zeitbuchungskalender, automatische Tätigkeitsaufzeichnung über Signal Tracker, umfassende Erweiterbarkeit und Anpassbarkeit, volle Offlinefähigkeit und einfachste Verwendung durch SaaS machen es zur Optimalen Lösung auch speziell im IT-Umfeld. Probieren Sie kostenlos und ohne Risko einfach

  • aus. Einen Testzugang erhalten Sie unter http://www.timecockpit.com.

Danach nutzen Sie um nur 0,20€ pro Benutzer und Tag ohne Mindestdauer und ohne Mindestbenutzeranzahl.