Presented on

1. Windows 8 App Development
for web Developer
Dhananjay Kumar
Customer Advocate
Telerik
Debug_mode

2. Web Developer ?
HTML CSS
JavaScript jQuery
http://debugmode.net

3. Web Developer == Win8 Developer ?
HTML CSS
WinJS
JavaScript jQuery
http://debugmode.net

4. Demo : Migrating Web App to
Windows 8 App
http://debugmode.net

5. Agenda
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
http://debugmode.net

6. What is WINDOWS 8 ?
Win7 WinRT Win8
http://debugmode.net

7. Metro /WinRT App
WPF/Windows App for Web
Application Windows Store Application
.Net
WinRT/
Framework/Win Browser
AppContainer
32
http://debugmode.net

8. http://debugmode.net

9. Metro App runs from Disc
App Container
http://debugmode.net

10. 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

11. VS2012 and Metro Apps
Project templates Development options
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
Deployment
 Local machine
 Remote machine
 Simulator
http://debugmode.net

12. What to choose?

13. Create “Hello Word App “ for Windows Store
Package
Deploy
Understand running app in process explorer
http://debugmode.net

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

15. 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

16. WinJS Controls
http://debugmode.net

17. WinJS Controls Demo
Date Picker Control
Message Box Control
Rating Control
Adding Controls in Expression Blend
Adding Controls Programmatically
http://debugmode.net

18. What we are going to create
http://debugmode.net

19. What will be learning ?
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

20. ListView and DataBinding
http://debugmode.net

21. Grouping Data
http://debugmode.net

22. Share Contract
http://debugmode.net

23. Calling Service
On Complete On Error
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);
});
http://debugmode.net

24. In WinJS Everything is Async
http://debugmode.net

25. Thanks
Dhananjay Kumar
http://debugmode.net
dhananjay.kumar@telerik.com
@Debug_mode