Programming Win8 with HTML5
 |
+4 |  |
||
1-10 of 34
You are here !! The focus will be HTML/JS… Click… But do remember WInRT is helping.. And is available to provide infrastructure.. We will see a little bit of WinRT in action in some demos
Elad Katz senior architect @ sela Introduction to Win8 HTML5 Programming
Windows 8 Windows Core OS Services JavaScript (Chakra) C C++ C# VB Metro style Apps Communication & Data Application Model Devices & Printing WinRT APIs Graphics & Media XAML HTML / CSS HTML JavaScript C C++ C# VB Desktop Apps Win32 .NET / SL Internet Explorer System Services View Model Controller Core
Elad Katz senior architect @ sela Introduction to Win8 HTML5 Programming
Agenda Application anatomy JS Patterns WinJS jQuery & third parties Controls Data binding WinRT Blend 5
Application Anatomy
Hello World Disclaimer: Alpha demoes ahead. Demo
App on disc to running
HTML app platform
Basic Structure HTML <!DOCTYPE html> <html> <head> <title>My App</title> <link rel="stylesheet" href="my.css"> <link rel="stylesheet" href="more.css"> ... </head> <body> ... content ... <script src="my.js"></script> <script src="more.js"></script> </body> </html>
Basic Structure CSS button { color: #000; padding: 4px; } .page { background-color: #fff; } #my { font-weight: bold; }
Basic Structure JavaScript // variables and objects var a = {first : 1, second : 2}; // functions function add(x, y) { return x + y; } // function calls a.result = add(a.first, a.second);
Locating Elements Using “querySelector” and “querySelectorAll” HTML <a class="tab" value="1">...</a> <a class="tab" value="2">...</a> <a class="tab" value="3">...</a> CSS .tab { border-radius: 5px 5px 0 0; } JavaScript var tabs = document.querySelectorAll(".tab"); for(var i = 0; i < tabs.length; i++) { tabs[i].onclick = showTab; }
Listening to Events Using “on*” and “addEventListener” JavaScript // Simple registration tabs[i].onclick = showTab; // Alternate registration tabs[i].addEventListener("click", showTab, false);
Changing Text Using “textContent” HTML <h2 id="title">Section 1</h2> CSS #title { font-size: 20px; } JavaScript var title = document.querySelector("#title"); function setTitle(name) { title.textContent = name; }
Adding Elements Using “createElement” and “appendChild” HTML <body> <img src="my.png"/> </body> JavaScript function addImage() { var img = document.createElement("img"); img.src = "my.png"; document.body.appendChild(img); }
Hiding Elements Using “display” HTML <section id="p1" class="page">...</section> <section id="p2" class="page">...</section> CSS .page { font-size: 20px; } JavaScript function swap(oldPage, newPage) { oldPage.style.display = "none"; newPage.style.display = ""; }
Sending and Receiving Data Using “XMLHttpRequest” JavaScript function load(url, data, callback) { var xhr = new XMLHttpRequest(); xhr.open("GET", url, true); xhr.onload = function() { callback(xhr.responseText); } xhr.send(data); }
Transmitting Complex Objects Using “JSON.parse” and “JSON.stringify” JavaScript function loadJSON(url, data, callback) { var xhr = new XMLHttpRequest(); xhr.open("GET", url, true); xhr.onload = function() { callback( JSON.parse(xhr.responseText) ); } xhr.send( JSON.stringify(data) ); } loadJSON("my.json", { id : 1 }, function(response) { setTitle(response.title); });
Isolating JavaScript Using the Module Pattern JavaScript (function(){ var title = document.querySelector("#title"); function setTitle(name) { title.textContent = name; } setTitle("My Title"); })(); (function(){ })(); setTitle("My Title");
Exposing Public APIs Using the Module Pattern JavaScript var module = (function(){ var title = document.querySelector("#title"); function setTitle(name) { title.textContent = name; } return { setTitle : setTitle }; })(); module.setTitle("Custom Title"); return { setTitle : setTitle }; var module = module.setTitle("Custom Title");
HTML, CSS, JS HTML5 Indexed DB App Cache Web Workers Canvas SVG FormData CSS3 animations & transitions XHR FileAPI Web Sockets Geolocation PostMessage
Single HTML5 DOCTYPE Standards web, plug-in free Single window Access to Windows Runtime
Application lifetime
sessionState in Windows Library for JavaScript (WinJS) can help. Use Windows.Storage.ApplicationData to save app state.
RSS reader #1 Xhr, WinJS, templating & css Demo
WinJS
Async … is everywhere in JavaScript … with different models Callback parameter setTimeout(function () { … }, 500); Attached event handler var img = document.querySelector("img .loading"); img.addEventHandler("load", function () { imageLoaded(); }, false); img.src = "http://www.example.org/someImage.jpg"; Is everywhere in WinRT – you can’t block! Major JS libraries have an established async pattern
Promises Object that is a promise for a value later Implemented by jQuery, dojo, node.js, etc. Hook up to completion with then() method then(completion, error, progress) then() returns another promise Implementation in base.js: WinJS.Promise Common.js promises/A spec http://wiki.commonjs.org/wiki/Promises/A
Example: Completion Handling WinJS.xhr({ url:"http://www.example.org/somedata.json" }).then(function (response) { updateDisplay( JSON.parse(response.responseText)); });
Example: Error Handling WinJS.xhr({ url:"http://www.example.org/somedata.json" }).then(function (response) { updateDisplay( JSON.parse(response.responseText)); }, function (ex) { reportXhrError(ex); });
WinJS WinJS is the main JavaScript library for Windows8, which consists of several files. It adds support for: Controls DataBinding Animations Make your apps look and feel great Matches the Windows Metro design style Controls for common user experiences Designed for touch as well as traditional input Scales across form factors
WinJS WinJS in itself is regular JavaScript, but it has dependencies on WinRT and MS specific features Porting browser applications to Metro applications is pretty straight forward Creating cross platform application is not possible, but the code-base sharing is very good.
Third party libraries Metro applications are fully compatible with libraries such as jQuery and KnockoutJS Many best practices that are in use in winJS comes from these libraries. Use jQuery if you’re planning on making it cross-platform later on. Otherwise it’s probably not worth it. KnockoutJS is more sophisticated than WinJS at this stage, but this will probably change in future builds
WinJS Controls
I thought HTML already had controls? HTML has elements WinJS Controls are: JavaScript objects attached to an element Reusable chunks of behavior attached to the DOM Declarative or programmatic Toolable
In-box controls for Metro style apps App Bar Rating Button List Box Hyperlink Slider Checkbox Radio Button Toggle Switch Tooltip Context Menu List View Combo Box Progress Bar Text Box Password Progress Ring Flyout Grid View Flip View Scroll Bar Panning Indicator
WinJS Controls Demo
Control Library
Control Library
Declarative and programmatic control creation <div id="target"></div> <div data-win-control="WinJS.UI.TimePicker" data-win-options="{minuteIncrement: 15}"></div> WinJS.UI.processAll(); var target = document.getElementById("target"); var timePicker = new WinJS.UI.TimePicker(target, { minuteIncrement: 15});
It’s not a Microsoft UI stack without data binding Data binding
What it does One way data binding Object -> UI (or any function) Asynchronous notifications Programmatic binding Declarative binding
Data binding demo
Template binding <div data-win-control="WinJS.Binding.Template"> <div class="feedItem"> <h2 data-win-bind="textContent: title"></h2> <img data-win-bind="src: thumbnailUrl"></img> <p data-win-bind="innerHTML: summary"> </div> </div>
Declarative binding <h1 id="title" data-win-bind="textContent: title; style.background: color"/> var data = WinJS.Binding.as({ title: "This is my title", color: "#80FF80" }); WinJS.Binding.process(document.getElementById("title"), data); data.title = "new title here";
Programmatic binding var data = WinJS.Binding.as({ a: 10, b: 50}); data.bind("a", function (newValue, oldValue) { var target = document.getElementById("target"); target.textContent = newValue; }); data.a = 50;
WinRT
WinRT The namespace windows is reserved to WinRT WinRT let us have direct access to the new windows API Useful mostly for windows contracts, or in scenarios where we don’t care about other platforms
WinRT – Harnessing the power of Windows Search Contract Share Contract Demo
Navigation
Multipage vs. single page navigation Multipage navigation Default behavior of browser Navigation loads a new page Drops script context Have to serialize state that gets passed across pages Single page navigation One page as far as browser is concerned DOM elements changed programmatically Keeps script context and state for app lifetime
WinJS single page navigation Metro style apps use single page navigation State management becomes easy It’s difficult to design all of your app in a single HTML file
Separate logical pages with fragments We want separate HTML files Easier to design Easier to maintain Fragments Separate files, plus a loader that will bring them in In ui.js: WinJS.UI.Fragments namespace
Navigation & fragments demo
Example: fragment loader var targetDiv = document.getElementById("targetDiv"); WinJS.UI.Fragments.cloneTo("/html/feeds.html", targetDiv). then(function () { return WinJS.UI.processAll(targetDiv); }).then(function () { document.body.focus(); });
Navigation & fragments function navigated(e) { WinJS.UI.Fragments.clone(e.detail.location, e.detail.state) .then(function (frag) { var host = document.getElementById('contentHost'); host.innerHTML = ''; host.appendChild(frag); }); } WinJS.Navigation.addEventListener("navigated", navigated); WinJS.Navigation.navigate("/html/home.html");
Blend 5 The excellent XAML authoring tool is now for HTML5 as well. HTML designers in the world of jQuery plugins become less and less relevant – it’s a very hard task to style a jQueryUI control, and it’s done manually. Blend5 has the IE10 engine inside, and can run our JS to allow us perfect design-time experience
VS11 & Blend 5 tooling HTML can be stronger than compiled languages Demo
Summary Win8 HTML5 applications are first and foremost “Single page” HTML applications Porting from web apps to win8 is pretty straightforward. Not so much the other way around WinRT is purely for Windows WinJS is de-facto purely for Windows Large code base can be shared.
Summary Win8 HTML application uses best practices for: Control library Databinding and templating Single-Page practices WinRT integration is as simple as it is from other languages
Elad Katz Twitter: @eladkt http://blogs.microsoft.co.il/blogs/eladkatz thank you
| URL: |
No comments posted yet
Comments