Embed Size (px)
DESCRIPTION
Presented on
Citation preview
Windows 8 App Development for web Developer
Dhananjay Kumar Customer
Advocate Telerik
Debug_mode
http://debugmode.net
Web Developer ?
HTML CSS
JavaScript jQuery
http://debugmode.net
Web Developer == Win8 Developer ?
HTML CSS
JavaScript jQueryWinJS
Windows 8 Development
http://debugmode.net
Demo : Migrating Web App to Windows 8 App
http://debugmode.net
Web Development paradigm
Migrating CSS based Web App to Windows 8 App
Packaging the App
Evaluating Different Development options
WinJS Controls Demo
Create “Netflix Movie Explorer“ App for Windows Store
Agenda
http://debugmode.net
What is WINDOWS 8 ?
Win7 WinRT Win8
http://debugmode.net
Metro /WinRT App
WPF/Windows Application
.Net Framework/Win
32
App for Windows Store
WinRT/AppContainer
Web Application
Browser
http://debugmode.net
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
Metro App Vs. Desktop App
http://debugmode.net
Blank Application C#,JavaScriptGrid Application C#,JavaScriptSplit Application C#,JavaScriptFixed Layout Application JavaScriptNavigation Application JavaScript
VS2012 and Metro AppsProject templates
Deployment
Local machine Remote machine Simulator
HTML+JavaScriptC# + XAMLC++ + XAML
Development options
What to choose?
http://debugmode.net
Create “Hello Word App “ for Windows Store
Package
Deploy
Understand running app in process explorer
Demo
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
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
Why WinJS ?
http://debugmode.net
Date Picker Control
Message Box Control
Rating Control
Adding Controls in Expression Blend
Adding Controls Programmatically
WinJS Controls Demo
http://debugmode.net
What we are going to create
http://debugmode.net
Working with ListView
Creating Data Source, Groped Data Source
Creating Item template, Header Template
Sematic Zoom on List View
Designing CSS of ListView
What will be learning ?
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);});
Thanks Dhananjay Kumar http://debugmode.net
@Debug_mode
