Windows 8 Metro App Development using HTML and winJS

1. Dhananjay Kumar (@debug_mode)

2. debug_mode

3. » What is Metro App
» How it is different from Metro
Styled App
» Packaging the App
» Create “Movie Rating “ Metro App

5. Metro Styled Metro Styled
WPF/Windows Metro App Web
Application Application
.Net
WinRT/
Framework/Win Browser
AppContainer
32

7. App Container

8. » 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

9. » Create first Metro App
» Package
» Deploy
» Understand running app in process
explorer

10. » Blank Application {C#,JavaScript} » HTML+JavaScript
» Grid Application {C#,JavaScript}
» Split Application{C#,JavaScript} » C# + XAML
» Fixed Layout Application {JavaScript} » C++ + XAML
» Navigation Application {JavaScript}
» Local machine
» Remote machine
» Simulator

11. Collection of JavaScript files helps us to create
Metro Style Applications for Windows 8
HTML
JavaSc
Eleme CSS WinJS
ript
nts

12. » 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

14. » Working with ListView
» Creating Data Source, Groped Data
Source
» Creating Item template, Header Template
» Sematic Zoom on List View
» Designing CSS of ListView

18. WinJS.xhr({ WinJS.xhr({
url:"http://www.example.org/somedata.json url:"http://www.example.org/som
" edata.json"
}).then(function (response) { }).then(function (response) {
updateDisplay( updateDisplay(
JSON.parse(response.responseText)); JSON.parse(response.responseText));
}); }, function (ex) {
reportXhrError(ex);
});

20. Thanks
Dhananjay Kumar