Busy Developer's Guide to Windows 8 HTML/JavaScript Apps
0 likes2,475 views
This document serves as a guide for developers interested in creating Windows 8 apps using HTML and JavaScript, outlining the necessary tools and concepts. It discusses the hybrid nature of these apps, which combine web and desktop elements, and explains key components such as the Windows Runtime API and UI elements. The guide also addresses misconceptions and encourages developers to embrace the platform while understanding market dynamics and security implications.
Busy Developer's Guide to Windows 8 HTML/JavaScript Apps
- 1. Busy Developer's Guide to Windows 8 HTML/JavaScript Apps Ted Neward Neward & Associates http://www.tedneward.com | [email protected]
- 2. Credentials Who is this guy? – Architectural Consultant, Neudesic Software – Principal, Architect, Consultant and Mentor ask me how I can help your project or your team – Microsoft MVP (F#, C#, Architect) – JSR 175, 277 Expert Group Member – Author Professional F# 2.0 (w/Erickson, et al; Wrox, 2010) Effective Enterprise Java (Addison-Wesley, 2004) C# In a Nutshell (w/Drayton, et all; OReilly, 2003) SSCLI Essentials (w/Stutz, et al; OReilly, 2003) Server-Based Java Programming (Manning, 2000) – Blog: http://blogs.tedneward.com – Papers: http://www.tedneward.com/writings
- 3. Objectives Our goals... – to understand how to build a Windows 8 app in HTML/JavaScript – to understand why you want to do this – to understand why Microsoft wants you to do this – to understand where this fits in relation to .NET/C++/Web – to begin the path of deeper understanding
- 4. Disclaimer Note that... – attending this talk will NOT make you an expert – I am also NOT an expert – Windows 8 hasn't shipped yet (technically) This talk will get you started, try to debunk some of the popular conspiracy theories, and put some strategic overview on the whole thing that's it
- 5. Getting Started Writing an app for Windows 8 in HTML/JavaScript requires – Windows 8 (seriously) – Visual Studio 2012 (either Express or full-blown) http://msdn.microsoft.com/en-us/windows/apps/br229516 – Optionally, Microsoft samples and/or hands-on labs (HOL) – There are no (known) command-line tools to do this
- 6. Hello World Once Win 8 and VS 2012 are installed – fire up the Hello World of Win8HTMLJS apps – File->New Project->JavaScript->Windows Store->Blank App •creates a single-page Metro HTML/JS App •first time, a "Developer License" dialog pops up; this is to obtain a crypto key for signing the app – hit "F5" and it will build and run on the local box (LocalMachine) you can also run it in the Simulator, which simulates tablets if you're not on one
- 7. Concepts 'Big picture' kinds of things
- 8. Concepts What just happened? – VS built a project out of HTML and CSS and JavaScript – the app was bundled up into a "package" (a zip file) – the app contains a "package.appxmanifest" file that contains app metadata – the app was signed with a crypto key and deployed to the local machine C:Program FilesWindowsApps (which is protected up the wazoo!)
- 9. Concepts What just happened? – when executed, a host process (WWAHost.exe) fired up – the IE 10 "Trident" HTML/CSS engine displayed the HTML – the IE 10 "Chakra" JS engine executed the JS – the application runs in a sandbox with no user privileges
- 10. Concepts Your "executable" application essentially isn't – it's a Web app running entirely on the local machine – it's a native app with access to the underlying machine – it's Frankenstein's monster! maybe we should call it "Ballmerstein's Monster"?
- 11. Concepts Metro apps aren't quite like traditional desktop apps – think more of a "fusion" of web and desktop – with some mobile ideas thrown in As a result, UI approaches will need/want to be different – "Tiles" (shortcuts into your app's data or tasks) – "Live tiles" (representations of data easily seen) – "Chromelessness" (absence of window decorations) – "Charms" (toolbar off to the right of the screen) – "App Bars" (sort of like toolbars, but simpler/cleaner)
- 12. Concepts WinRT – Windows Runtime API not to be confused with "Windows RT" (Windows on ARM) – essentially an API layer on top of the Windows kernel – provides O-O metadata similar to JVM/CLR runtimes – provides "projections" into different languages C#, VB, C++, and JavaScript (WinJS)
- 13. Concepts Contracts – this is the new COM (sort of) programs advertise and consume contracts – essentially an IPC declaration mechanism – used for Search, drag and drop, app targets, and so on
- 14. Code Show me the code!
- 15. Code UI elements are defined in HTML – or can be added/manipulated later by DOM magic – all "basic" HTML controls are supported button, checkbox, drop-down list, email, file upload, hyperlink, listbox, text, password, progress, radiobutton, rich text, slider, uri, ... – WinJS also offers a few "custom" controls unique to Metro DatePicker, TimePicker, Rating, ToggleSwitch, Tooltip
- 16. Code <body> • <h1 class="headerClass">Hello, world!</h1> • <div class="mainContent"> • <p>What's your name?</p> • <input id="nameInput" type="text" /> • <button id="helloButton">Say "Hello"</button> • <div id="greetingOutput"></div> • <label for="ratingControlDiv"> • Rate this greeting: • </label> • <div id="ratingControlDiv" data-win- control="WinJS.UI.Rating"></div> • <div id="ratingOutput"></div> • </div> •</body>
- 17. Code UI styles are defined in CSS – Metro defines two parallel stylesheets for your use ui-light.css and ui-dark.css – of course, custom styling is always possible but until Metro gains widespread acceptance, resist Much of the intent is to do styling and UI theming in Blend – ... and frankly, that's not a programmer tool
- 18. Code body { •} • •.headerClass { • margin-top: 45px; • margin-left: 120px; •} • •.mainContent { • margin-top: 31px; • margin-left: 120px; • margin-bottom: 50px; •} • •#greetingOutput { • height: 20px; • margin-bottom: 40px; •}
- 19. Code UI events are handled in JavaScript – just as with Web, register a JS function with the event in question typically do this on app startup – and, of course, events can be registered/unregistered dynamically
- 20. Code (function () { • "use strict"; • • // ... • • function buttonClickHandler(eventInfo) { • var userName = document.getElementById("nameInput").value; • var greetingString = "Hello, " + userName + "!"; • document.getElementById("greetingOutput").innerText = greetingString; • } • function ratingChanged(eventInfo) { • var ratingOutput = document.getElementById("ratingOutput"); • ratingOutput.innerText = eventInfo.detail.tentativeRating; • } •}
- 21. Code (function () { • "use strict"; • • // ... • • app.onactivated = function (args) { • if (args.detail.kind === activation.ActivationKind.launch) { • // ... • args.setPromise(WinJS.UI.processAll().then(function completed() { • var ratingControlDiv = document.getElementById("ratingControlDiv"); • var ratingControl = ratingControlDiv.winControl; • ratingControl.addEventListener("change", ratingChanged, false); • var helloButton = document.getElementById("helloButton"); • helloButton.addEventListener("click", buttonClickHandler, false); • })); • } • }; • • // ... •}
- 22. Analysis Why did they do this?
- 23. Analysis Web applications have dominated the industry for a decade – HTML/CSS/Javascript skills are ubiquitous – Web concepts are emerging into desktop applications – some users can't tell the difference between the two – more and more data is living in "the cloud" Dropbox, SkyDrive, Evernote, iTunes, Amazon, ...
- 24. Analysis Conspiracies! Everywhere! – Is this Microsoft's attempt to kill the Web? – Is this Microsoft's attempt to kill HTML 5? – Is this Microsoft trying to "embrace, extend, extinguish"? – Is this the beginning of the end of the world as we know it?
- 25. Analysis Microsoft wants people to write apps for their platform – this is hardly surprising, new, or unacceptable – part of this means making the platform easy to program for – part of this means making it "easy" for people to port code frankly I don't see this as being a big play Microsoft wants people to buy apps on their platform – this means reducing the barrier to entry (AppStore) – this means making them easier to obtain (Internet) – this means putting some "borders" around apps (security, safety, etc), and this is easier with interpreted code than
- 26. Summary Windows 8 apps are interesting to a certain crowd – this doesn't mean everybody will want to build one – in fact, if you're not a historic Microsoft developer, you probably won't – the concept of using HTML+Javascript to build a "native" app is interesting