Windows8 metro presentationupdated

  • 2,167 views
Uploaded on

Presented on

Presented on

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,167
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
44
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • Switch for the demo in between
  • Switch for the demo in between
  • Switch for the demo in between
  • Switch for the demo in between
  • Switch for the demo in between
  • Switch for the demo in between
  • Switch for the demo in between
  • Switch for the demo in between
  • Switch for the demo in between
  • Switch for the demo in between
  • Switch for the demo in between
  • Switch for the demo in between
  • Switch for the demo in between
  • Switch for the demo in between
  • Switch for the demo in between
  • Switch for the demo in between

Transcript

  • 1. Windows 8 App Development for web Developer Dhananjay Kumar Customer Advocate TelerikDebug_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 toWindows 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 AppWPF/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 createMetro Style Applications for Windows 8HTML JavaScEleme 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 ErrorWinJS.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. ThanksDhananjay Kumarhttp://debugmode.net dhananjay.kumar@telerik.com @Debug_mode