windows8 metro presentation
DESCRIPTION
Windows 8 Metro App Development using HTML and winJSTRANSCRIPT
![Page 1: Windows8 metro presentation](https://reader033.vdocuments.mx/reader033/viewer/2022061221/54bd884d4a7959913b8b4629/html5/thumbnails/1.jpg)
WINDOWS 8 METRO APPLICATIONDEVELOPMENT USING HTML AND JAVASCRIPT
Dhananjay Kumar (@debug_mode)
![Page 3: Windows8 metro presentation](https://reader033.vdocuments.mx/reader033/viewer/2022061221/54bd884d4a7959913b8b4629/html5/thumbnails/3.jpg)
http://debugmode.net
»What is Metro App » How it is different from Metro
Styled App » Packaging the App» Create “Movie Rating “ Metro App
Agenda
![Page 4: Windows8 metro presentation](https://reader033.vdocuments.mx/reader033/viewer/2022061221/54bd884d4a7959913b8b4629/html5/thumbnails/4.jpg)
http://debugmode.net
What we are going to create
![Page 5: Windows8 metro presentation](https://reader033.vdocuments.mx/reader033/viewer/2022061221/54bd884d4a7959913b8b4629/html5/thumbnails/5.jpg)
http://debugmode.net
Metro /WinRT AppMetro Styled
WPF/Windows Application
.Net Framework/Win
32
Metro App
WinRT/AppContainer
Metro Styled Web
Application
Browser
![Page 8: Windows8 metro presentation](https://reader033.vdocuments.mx/reader033/viewer/2022061221/54bd884d4a7959913b8b4629/html5/thumbnails/8.jpg)
http://debugmode.net
Metro App Vs. Desktop App
» In desktop app you create MSI , Exe etc. and run to install application
» In Metro App you create package and submit to Windows store
» Along with other files ,package contains batch executable file that runs series of commands to install metro app on your device.
» Metro app runs with less privilege than desktop app
![Page 9: Windows8 metro presentation](https://reader033.vdocuments.mx/reader033/viewer/2022061221/54bd884d4a7959913b8b4629/html5/thumbnails/9.jpg)
http://debugmode.net
Demo
» Create first Metro App» Package » Deploy » Understand running app in process
explorer
![Page 10: Windows8 metro presentation](https://reader033.vdocuments.mx/reader033/viewer/2022061221/54bd884d4a7959913b8b4629/html5/thumbnails/10.jpg)
http://debugmode.net
VS2012 and Metro AppsPROJECT TEMPLATES
» Blank Application {C#,JavaScript}» Grid Application {C#,JavaScript}» Split Application{C#,JavaScript}» Fixed Layout Application {JavaScript}» Navigation Application {JavaScript}DEPLOYMENT
» Local machine » Remote machine» Simulator
» HTML+JavaScript» C# + XAML» C++ + XAML
DEVELOPMENT OPTIONS
![Page 11: Windows8 metro presentation](https://reader033.vdocuments.mx/reader033/viewer/2022061221/54bd884d4a7959913b8b4629/html5/thumbnails/11.jpg)
http://debugmode.net http://www.c-sharpcorner.com
What is WinJS ?Collection of JavaScript files helps us to create Metro Style Applications for Windows 8
HTML Eleme
nts CSS JavaSc
ript WinJS
![Page 12: Windows8 metro presentation](https://reader033.vdocuments.mx/reader033/viewer/2022061221/54bd884d4a7959913b8b4629/html5/thumbnails/12.jpg)
http://debugmode.net
Why WinJS ?
» It helps to create controls and animation adhering to metro style guidelines
» It helps in data binding and to create template of data » It helps to fragment and navigate between pages of
the application » It helps to make asynchronous call to services » It helps to write app against the app model
![Page 14: Windows8 metro presentation](https://reader033.vdocuments.mx/reader033/viewer/2022061221/54bd884d4a7959913b8b4629/html5/thumbnails/14.jpg)
http://debugmode.net
Create Movie Rating App Demo
» Working with ListView» Creating Data Source, Groped Data Source» Creating Item template, Header Template» Sematic Zoom on List View » Designing CSS of ListView
![Page 16: Windows8 metro presentation](https://reader033.vdocuments.mx/reader033/viewer/2022061221/54bd884d4a7959913b8b4629/html5/thumbnails/16.jpg)
http://debugmode.net
Grouping Data
![Page 17: Windows8 metro presentation](https://reader033.vdocuments.mx/reader033/viewer/2022061221/54bd884d4a7959913b8b4629/html5/thumbnails/17.jpg)
http://debugmode.net
Share Contract
![Page 18: Windows8 metro presentation](https://reader033.vdocuments.mx/reader033/viewer/2022061221/54bd884d4a7959913b8b4629/html5/thumbnails/18.jpg)
http://debugmode.net
Calling Service
ON COMPLETE WinJS.xhr({ url:"http://www.example.org/somedata.json"}).then(function (response) { updateDisplay( JSON.parse(response.responseText));});
ON ERROR
WinJS.xhr({ url:"http://www.example.org/somedata.json"}).then(function (response) { updateDisplay( JSON.parse(response.responseText));}, function (ex) { reportXhrError(ex);});