Windows 8 Camp Ottawa - 2012-04-14 - Building metro style apps with html & javascript
•Download as PPTX, PDF•
0 likes•612 views
Recommended
Recommended
More Related Content
More from Frédéric Harper
More from Frédéric Harper (20)
Recently uploaded
Recently uploaded (20)
Windows 8 Camp Ottawa - 2012-04-14 - Building metro style apps with html & javascript
- 9. demo
- 11. demo
- 13. demo
- 17. demo
- 23. http://www.ietestdrive.com/Links/DevGuide9.html http://www.ietestdrive.com/Links/DevGuide10.html http://blogs.msdn.com/b/ie/archive/2011/09/20/t ouch-input-for-ie10-and-metro-style-apps.aspx
Editor's Notes
- Let’s put this topic into context…
- You are here !!
- The new Microsoft web platform began with IE9 … we did a lot of work to catch up to HTML5 standards.. And all of that work will pay up in Windows 8..
- Of course in Windows 8, we are adding more.. We will get into the details of these in the next few slides where we highlight most relevant ones
- One or more of these, bold is preferred. CSS CSS Hands-on:http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/Grid system: http://ie.microsoft.com/testdrive/HTML5/GridSystem/Default.htmlGradient Editorhttp://ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/Default.html
- Choose two or three of the many demos we have on the IE 10 testdrive site. Try to end up on a high/graphical note.. Like the touch demo..Ecmascript5http://ie.microsoft.com/testdrive/HTML5/TryStrict/Default.htmlFormshttp://ie.microsoft.com/testdrive/HTML5/Forms/Default.htmlTouchhttp://ie.microsoft.com/testdrive/Graphics/TouchEffects/Web workershttp://ie.microsoft.com/testdrive/HTML5/WebWorkerTest262/Default.html
- File New Project in Visual Studio Intellisense on Javascript.. Demonstrate Simulator Demonstrate DOM explorer using the simulator.. Set a breakpoint in the Debugger … a good place for this is the navigated event in navigator.js Open Javascript console .. Now type vardlg = new Windows.UI.Popups.MessageDialog("test") ; dlg.showAsync().then ( function () {} ) ; Comment out that this is the same text we used earlier.. Notice the javascript syntax in showAsync.. Tease the audience.. Will this work? Injecting a statement? Open Contoso Recipes in Blend .. Make sure this is a copy for this session. You don’t want your changes preservedDemonstrate how blend uses live data … Explain the solution is data driven, yet it is all showing. Style something, demonstrating that blend is great for styling.. Drag a control somewhere into layout..
- Implemented by jQuery, dojo, node.js, etc.Then returns another promise so you can chain them…
- Demonstratecontoso recipes application Show the use of the module pattern in javascript… Show the use of a promise.. Show the navigation Show the WinJS.application object To see all of these, it is trivial to do a search on the solution for //DEMO:WinJS and you will be able to see areas to set breakpoints for discussion..
- If you prefer to use your own library, you can. As long as your app is compliant with Metro SDK, you will be fine.. At build, we explicitly wrote a sample (finance) using jQuery… It works very well.. If you are bringing your own library, here is the advise that I can give you:Mix & Match works fine. WinJS does a lot of things well, such as simplifying the object model, wrappers for file system, implementing the promise pattern, etc.. Use WinJS for all of that.. Use your favorite library for everything else, but do try to adhere to the Metro UI and the Windows personality. Your users will appreciate it if you do..
- There is a known issue with jQuery where if you use their XHR, they do a CORS checkc and it fails.. You can easily workaround this by disabling cors.. Everything else works fine..
- For people using external frameworks, the second problem is “Host enforcement”. Metro style apps don’t allow you to do potentially bad things such as insert scripts that come from the web into a local page or set innerHTML/outer HTML properties.. You can get around these.. See the next slide for workarounds…
- These are the ‘escape hatches’ you can use to bring web content into your local context..