windows8 metro presentation
DESCRIPTION
Windows 8 Metro App Development using HTML and winJSTRANSCRIPT
WINDOWS 8 METRO APPLICATIONDEVELOPMENT USING HTML AND JAVASCRIPT
Dhananjay Kumar (@debug_mode)
http://debugmode.net
»What is Metro App » How it is different from Metro
Styled App » Packaging the App» Create “Movie Rating “ Metro App
Agenda
http://debugmode.net
What we are going to create
http://debugmode.net
Metro /WinRT AppMetro Styled
WPF/Windows Application
.Net Framework/Win
32
Metro App
WinRT/AppContainer
Metro Styled Web
Application
Browser
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
http://debugmode.net
Demo
» Create first Metro App» Package » Deploy » Understand running app in process
explorer
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
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
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
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
http://debugmode.net
Grouping Data
http://debugmode.net
Share Contract
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);});
