Budowanie aplikacji dla Windows 8 w HTML

1. Budowanie aplikacji dla Windows 8 w HTML Bartłomiej Zass Technical EvangelistMicrosoft

2. Agenda • Wprowadzenie do Windows 8 • WinRT API • Aplikacje dla Windows 8 (HTML i nie tylko)

3. Ogromny rynek dla Twoich aplikacji Udział w rynku - szansa 500M 247M 234M 152M 112M 40M 30M 13M Android (tablety) iPad Android (telefony) iOS Windows iPhone Android Mac As of December 2011

4. Prognozy IDC na podstawie danych historycznych IDC Forecast All-up Windows Annual Sales Volume Worldwide (based on historical trends) – Consumer/Enterprise (millions) Source: IDC Worldwide Windows Client Operating Environment 2011–2015 Forecast

5. Windows „reimagined” Nowy ekran Start – „fast and fluid” Dotyk, mysz, klawiatura Istniejące funkcjonalności Windows 7

6. Wiele typów urządzeń Tablety, laptopy, „all-in-ones” Dotyk, mysz, klawiatura Wsparcie architektury ARM

7. demo Windows 8

8. Windows 8 – akcelerowana platforma HTML CSS 2D Transforms CSS 3D Transforms CSS Animations CSS Backgrounds & Borders CSS Color CSS Flexbox CSS Fonts CSS Grid Alignment CSS Hyphenation CSS Image Values (Gradients) CSS Media Queries CSS multi-column Layout CSS Namespaces CSS OM Views CSS Positioned Floats (Exclusions) CSS Selectors CSS Transitions CSS Values and Units Data URI DOM Element Traversal DOM HTML DOM Level 3 Core DOM Level 3 Events DOM Style DOM Traversal and Range DOMParser and XMLSerializer ECMAScript 5 File APIs FormData HTML5 Application Cache HTML5 async HTML5 Canvas HTML5 Drag and drop HTML5 Forms and Validation HTML5 Geolocation HTML5 History API HTML5 Parser HTML5 Sandbox HTML5 Selection HTML5 semantic elements HTML5 video and audio ICC Color Profiles IndexedDB Page Visibility Pointer (Mouse, Pen, and Touch) Events Selectors API Level 2 Filter Effects SVG, standalone and in HTML Timing callbacks Web Messaging Web Sockets Web Workers XHTML/XML XMLHttpRequest (Level 2)

9. Najpopularniejsze cechy HTML5 Web Sockets Touch-first Pointer events Zoom regions Snap Points Web Workers IndexedDB Ecmascript 5 File API & Blobs Forms Validation Input types Geolocation Audio tag Video tag Spell checking

10. demo IE 10

11. Windows Store Duży zasięg Integracja z przeglądarką Transparentny proces Różne modele biznesowe Wysoki zysk dla programistów

12. Sideloading • Warunki • Windows 8 Enterprise lub Windows Server 2012 • Dołączenie do domeny • Windows 8 Pro, Windows RT lub nie dołączony do domeny • Zakupiony Sideloading Product Activation Key • Visual Studio Express • Uwaga: teoretycznie monitorowane • Instalacja • Per user – skrypty powershell • Przygotowany obraz przez IT • Podpisanie aplikacji zaufanym certyfikatem • Group Policy • Wymagane: Allow all trusted applications to install • Dostęp do Windows Store i aktualizacji (np. zablokowanie)

13. Platforma Windows 8 Desktop Apps Metro style Apps HTML JavaScript HTML / CSS XAML View JavaScript (Chakra) C C++ C# VB Model Controller C# VB C C++ WinRT APIs Devices & Printing Communication & Data Graphics & Media System Services .NET / SL Internet Explorer Win32 Application Model Windows Core OS Services Core

14. „Projekcje” językowe C++ App Windows Runtime Object (or Component) Written in C++, C#, VB Projection C#/VB App CLR Projection HTML App Chakra Projection Windows Metadata

15. Kilka przykładów użycia Javascript... • Aplikacje dla Windows 8 • Gry – np. Cut The Rope, Angry Birds • PhoneGap • Node.js • Sharepoint • Rozszerzenia Office 2013 • Azure Mobile Services • Inne ciekawostki • http://jscriptlinq.codeplex.com/ - LINQ w JS • http://bellard.org/jslinux/ - implementacja Linux w JS

16. WinJS Data binding Helpers for Namespaces, Constructor Definition Controls Animations Promises Templates App Model Utilities Navigation Page & User controls Default CSS Styles

17. demo Hello WinRT wC++, C#, HTML + narzędzia

18. Promises • Obietnica dostarczenia wartości w przyszłości • Wiązane przez metodę then() • then(completion, error, progress) • then() zwraca kolejny obiekt promise • Implementacja w base.js: WinJS.Promise

19. Promise // Object that is a promise for a later value WinJS.xhr({ url:"http://www.example.org/somedata.json" }).then(function (response) { updateDisplay( JSON.parse(response.responseText)); }, function (ex) { reportXhrError(ex); });

20. jQuery, XHR i local context • jQueryxhrrobi cross-domain check (wer. > v1.6) • W kontekście lokalnym, jesteśmy w“ms-wwa://{something}” • Błąd przy cross domain check • Workaround • Skorzystaj z WinJSXHR • Powiedz jQueryaby pominąć weryfikację • $.support.cors = true; • http://api.jquery.com/jQuery.support/

21. Zabezpieczenia hosta • Zabezpieczenie przed wstrzykiwaniem “złego” HTMLa • Skrypty, iframes, event handlers, itp. • Wywyływane gdy korzystamy z • innerHTML • outerHTML • setAdjacentHTML • Atrybuty “data-” również nie są dozwolone • Specyficzne dla WinJSsą OK

22. Możliwość ominięcia • toStaticHTMLmethod • DOM creation APIs • WinJS.Utilities.setInnerHTMLUnsafe • msWWA.execUnsafeLocalFunction Ostrożnie!

23. Share Settings Search App to App Picking Devices

24. Anatomia wyszukiwania 1 2 • Wyszukiwanie w aktualnej aplikacji (domyslnie) • Podpowiedzi od aktywnej aplikacji • Opcjonalnie, dla rozpoznanych słów kluczowych • Lista zainstalowanych aplikacji Metro, które implementują kontrakt Search 3

25. Anatomia wyszukiwania 4 • Sugerowane rezultaty • Muszą zawierać nazwę i miniaturę • Wskazują na dokładny lub potencjalny wynik szukania • Przekierowuje bezpośrednio do strony z rezultatem

26. App To App pickers

27. Własne protokoły • mojprotokol://jakies/parametry • Z przeglądarki (zarówno Metro jak i Desktop) • Przekazywane parametry do OnActivated • Działa także jako link w aplikacji • Jeśli kilka aplikacji zarejestrowanych – wybór za pierwszym razem

28. demo Kontrakty

29. Praca w tle • Background Audio • Kilka niezależnych typów (komunikator, media, gra,itp.) • Jeden typ strumienia na raz • Background Transfer • Upload / download danych w tle

30. Execution = Trigger + [Condition] Trigger Condition InternetAvailable, InternetNotAvailable, SessionConnected, SessionDisconnected, UserNotPresent, UserPresent • SystemEventTrigger • ControlChannelReset # • InternetAvailable • LockScreenApplicationAdded/Removed • NetworkStateChange • OnlineIdConnectedStateChange • ServicingComplete • SessionConnected/Disconnected # • SmsReceived • TimeZoneChange • UserAway/UserPresent # • ControlChannelTrigger # (**) • TimeTrigger # • PushNotificationTrigger # (**) • MaintenanceTrigger „Conditionlatching” Maintenancetrigger – na zasilaniu # wymaga lock permission **może być in-proc (nie BackgroundTaskHost.exe)

31. Aplikacje Lock Screen • Aplikacje, które mogą • działać w tle • Zwłaszcza aplikacje komunikacyjne (poczta, komunikator, VoIP) • Okresowe uruchamianie • Uruchamianie kodu w odpowiedzi na zdarzenia systemowe

32. Zarządzane przez użytkownika (max 7)

34. Przydzielanie zasobów Tylko kiedy naprawdę „background” (przy uruchomionej aplikacji brak ograniczeń) Dotyczy tylko faktycznej pracy CPU!!!

35. Ograniczenia dla połączeń Tylko kiedy praca na baterii

36. Live Tiles– wrażenie aktywności • Dostarczają informacji, kiedy aplikacja jest wyłączona • Wrażenie, że aplikacja działa w tle i zaproszenie do powrotu • Dwa mechanizmy do aktualizacji • Lokalne API • Notyfikacje PUSH

37. Komunikaty Toast Podobna struktura do kafelków (oparta o szablony) Różne możliwości wizualne

38. Materiały • Główna strona, przykłady – http://dev.windows.com • Warsztat - http://www.microsoft.com/en-us/download/details.aspx?id=29854 • Migracja strony na Windows 8 (design) - http://msdn.microsoft.com/en-us/library/windows/apps/hh868264.aspx