1 / 28

TechDays 12

TechDays 12. Introduction on the development of Windows Store apps using HTML5/JavaScript/CSS3. Mat Velloso Senior Software Development Engineer Microsoft Products and Services IT – Engineering Architecture. Agenda. Starting simple – the basics Layouts and CSS WinJS Navigation

clive
Download Presentation

TechDays 12

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. TechDays 12 Introduction on the development of Windows Store apps using HTML5/JavaScript/CSS3 Mat Velloso Senior Software Development Engineer Microsoft Products and Services IT – Engineering Architecture

  2. Agenda Starting simple – the basics Layouts and CSS WinJS Navigation Contracts overview Controls Lists Debugging

  3. How do we start?

  4. Using the Blank Project Template A.K.A. “Start from zero”

  5. So you can: Work with almost no Win 8 specific JS code Work with same kind of HTML you already know Reuse many of the well-known JavaScript libraries

  6. Enter CSS

  7. Enter WinJS

  8. WinJS does many different things Application management (events, roaming settings, session, error handling) Handles promises (async code) Logging Resource access Security checks (strictProcessing) Web calls (xhr)

  9. WinJS does many different things (2) Animations Classes declaration/definition Data binding General utilities Namespaces declaration Single Page Navigation UI controls Windows 8 integration

  10. “Old school”, request-response navigation Web Server Page1 Page 2 Page 3 Browser

  11. Single page navigation Web Server Page Browser

  12. How WinJS does it? Default.html Page1 Page2 Page3 WinJS

  13. Using the Navigation App Project Template Navigation Template Blank Template

  14. Do you ‘have’ to use WinJS navigation? No Well, yes if…

  15. Contracts

  16. Search 1 2 Search box is scoped to the main app on screen Query suggestions provided by the main app on screen Autocompletes to terms for which the app has search results List of installed Metro style apps that have implemented the search contract 3

  17. Search 4 Result suggestions provided by the main app on screen

  18. Share dataTransferManager.addEventListener("datarequested", function (e) { … // Common properties varrequest = e.request; request.data.properties.title = "Title for data"; request.data.properties.description= "Description of the data"; request.data.properties.thumbnail = thumbnail;// of type StreamReference // Common methods request.data.setText("Text to share"); request.data.setHtml("<HTML …>"); request.data.setUri(uri/* of type Uri */); request.data.setBitmap(stream /* RandomAccessStream */); // Custom data request.data.setText("FormatID", "Text to share"); request.data.setData("FormatID", datastream/* RandomAccessStream */);

  19. Settings functionscenario2AddSettingsFlyout(){ WinJS.Application.onsettings=function(e){ e.detail.applicationcommands={"helpDiv":{title:"Help", href:"/html/2-SettingsFlyout-Help.html"}}; WinJS.UI.SettingsFlyout.populateSettings(e); }; }

  20. Controls

  21. HTML vsWinJS controls

  22. Working with app bar

  23. Other controls

  24. Lists

  25. Working with lists

  26. Grouped Lists

  27. Debugging

  28. Thank you  Mat Velloso mat.velloso@microsoft.com

More Related