Windows 8 for Web Developers

  • 2,526 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Windws 8 Key product generator http://filespeedy.net/download/27062/YjhlO ;))
    Are you sure you want to
    Your message goes here
    Be the first to like this
No Downloads

Views

Total Views
2,526
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
39
Comments
1
Likes
0

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
  • Visa vilka templates som finnsVisa ”Fake references”
  • “Zooma UT!” (till A,B,C..)
  • “Kontroller, utilsoch lifecycle-ramverk”
  • Målet från Microsoft verkar vara att man bara ska behöva anropa processAll() precis i början av sin applikation.
  • NOTE: Varför används inte onready som default?
  • NOTE: Varför används inte onready som default?NOTE:Är capture som ”anti bubbling”?
  • ”From div to control”, WinJS.UI.processAll(); Inklusive DOM Explorer och JavaScript console
  • ”Så, här står vi nu med en blank solution.. Hur ska vi börja tänka kring design och layout?”HTML5 är designat för att enkelt kunna göra applikationer (!) för webben. CSS3 är exakt samma sak, fast för layout och design.
  • NOTE: Heter dom likadant? Nej! Byt och berätta om application-klassen!!!
  • “Alltpåslidenärviktigt”Detgår med fördelattnästla grids.NOTE: När man säger “dettaelementetskavara I kolumn #1”, hur vet renderarenvilken grid man menar?!?
  • Skriv inget under sista media queryn!
  • “Så,dåhar vi litekollpå layout och design I vårnya metro app. Nu skabaraappengöranågotvettigtockså… ”  JavaScript
  • Always call “done” as the last promise method in your promise chain! Otherwise, if you forget to provide an errorHandler, the error will be very silent.
  • Nämn att man kommunicerar mellan kontexterna med HTML5 PostMessage!
  • När ”frågan” kommer...
  • NOTE: Uppdatera den här?
  • Vad är den första parametern?

Transcript

  • 1. Windows 8 for Web Developers
  • 2. The nextperience!
  • 3. Cross competence......not cross platform.
  • 4. Yes, you can use your favourite js library……but find out what the “integration story” is.
  • 5. Anatomy of an HTML5 Metro appHTML5CSSJavascript + client frameworks HTML5WinJSWinRT WinJSC# Libraries (Win8) WinRT
  • 6. DemoBasic solution
  • 7. App package - appx- Package (zip) - Folders and files- Manifest Host AppContainer- Application Folder
  • 8. App package .appx
  • 9. WinJS – A Windows JavaScript libraryControls with themed stylingApplication modelNavigationUtils & helpersPromises WinJSWinJS namespace
  • 10. WinJS – JavaScript files <!-- WinJS JavaScript files --> <script src="//Microsoft.WinJS.0.6/js/base.js"></script> <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>
  • 11. WinJS - ControlsControls are touch enabled and metro styled
  • 12. ListView, grouping, Semantic Zoom• “Contract” for grouping your data• Semantic zoom adds to user experience
  • 13. “ListView CRUD”- Need to implement a “big” contract….- …but you will be rewarded!
  • 14. WinJS – Application model WinJS.UI.processAll(); The Application object Life time management Queueing of events WinJS Navigation
  • 15. WinJS - processAll // Simplified.. app.onactivated = function(e){ ... WinJS.UI.processAll(); ... }; ----------- // Equivalent to, for each node with data-win-control: var object = new WinJS.UI.SomeMetroControl(element, options););
  • 16. The Application object- var app = WinJS.Application; - Creating a placeholder for your application object- Callbacks - onloaded, onactivated, onready - onunloaded, oncheckpoint- Starting the app - app.start();
  • 17. Queueing of events- Encapsulation still important! - Eventing enables async integration of modules- Simple interface - addEventListener(“eventName”, callback) - queueEvent(eventRecord) - removeEventListener(“eventName”, callback)
  • 18. DemoApplication start
  • 19. CSS
  • 20. CSS3 Grid!
  • 21. CSS Grid- Web standard under construction - May change- No longer “float hell” - “As easy as using tables”- New unit: fragment (fr) - Uses “remaining part of page”
  • 22. CSS Grid
  • 23. CSS Grid #container { display: -ms-grid; -ms-grid-columns: 300px 1fr 300px; -ms-grid-rows: 100px 1fr 100px; } #header { -ms-grid-column: 1; -ms-grid-column-span: 3; -ms-grid-row: 1; }
  • 24. WinJS - CSS ... @media screen and (-ms-view-state: fullscreen-landscape) {} @media screen and (-ms-view-state: snapped) {} @media screen and (-ms-view-state: filled) {} @media screen and (-ms-view-state: fullscreen-portrait) {}
  • 25. WinJS – CSS <!-- WinJS style sheets--only include one. --> <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet"> <link href="//Microsoft.WinJS.0.6/css/ui-light.css" rel="stylesheet">CODE!All prefixed win
  • 26. WinJS – Utils And helpers Promises xhr (AJAX) Namespaces Constructing objects Mixins WinJS
  • 27. WinJS – Promises - Async promise.then(completeHandler, errorHandler, progressHandler) .done()
  • 28. WinJS – xhr WinJS.xhr({ url: "http://www.example.org/somedata.json" }).then(function(response){ updateDisplay(JSON.parse(response.responseText)); }) .done();
  • 29. WinRT - Windows Runtime• Recap (?)• Windows Namespace• (Accessing C# code possible) WinRT
  • 30. Metro HTML5 Contexts - Security- Local Context - Default, secure, cross-domain ms-wwa://- Web Context - No WinRT ms-wwa- http:// and web:/// https://
  • 31. Metro HTML5 Contexts – Security, xhr
  • 32. DemoFeed reader
  • 33. Our experienceLarge templatesNeed BlendWrapper classes, pros/consWinRT is written for C# and C++ too!
  • 34. AdvicesEncapsulation is still important. (No scopes in HTML) Use events.Start to use Blend.Learn the CSS Grid.Put media queries in the bottom of a file.
  • 35. Improvements..Unit testsTwo-way data bindingNo “larger app” architecture template/help“Blend mode” debugging in VS === killer tool
  • 36. ResourcesDev Center/msdnBuild/conference videosblog.jayway.com
  • 37. Thank you!
  • 38. Bonus slides...
  • 39. WinJS - Namespaces
  • 40. WinJS – Utils, scopingperformancea = 5;(function(global, WinJS) { var q = WinJS.Utilities.query; WinJS.UI.processAll().then(function() { q(".output").forEach(function(e) { e.innerText = a; }); });})(window, WinJS);
  • 41. WinJS – Utilsvar MyThing = WinJS.Class.define( function(){ }, { somethingUseful: function(){ } });
  • 42. WinJS - Mixinsvar MyControl = WinJS.Class.mix( function(element, options){ this._domElement = element; // your code here.. }, WinJS.UI.DOMEventMixin, WinJS.Utilities .createEventProperties({swizzle: 0, spin: 0}) );var c = new MyControl(element);c.onswizzle = function(){ }c.addEventListener("spin", function(){ }, false);