building windows store 8.1 apps using html, css and...
TRANSCRIPT
| Basel
Building Windows Store 8.1 apps using HTML, CSS and JavaScript (e) Martin Beeby
Technical Evangelist
@thebeebs
Agenda
What’s In a HTML5 App 10’What is it and who is using it
Building an app 50’A basic travel app
What is a Windows Store app built using HTML?Written in HTML, CSS, & JavaScript
Can use jQuery, Dojo & other libraries
Renders using Trident
Adds layers of security
Full access to the Windows Runtime
Designed for touch
Deployed via the Windows Store
An app that runs natively on Windows using web technologies
What’s built in HTML5?Many of Microsoft first party apps
Windows Store app built using HTML architecture
Windows
Windows Library for JavaScript (WinJS)
Style sheets
Core (promises, class, namespace, etc.)
App model
Data binding
Controls
Animations
Utilities
A collection of toolkits to make building Windows Store apps fast and easy
| Basel
WinJS Basics
Where the magic happens
Differences from web environment
Styling changes
Windows Runtime access
Single page model
App sizes and orientations
Security context and innerHTML
Local and web context
IE11 DOCMODE
Network connectivity and offline experience
All the advantages of HTML programming plus the power, personality, and security of Windows.
| Basel
File New > Hub
| Basel
Blend
| Basel
Customisation
| Basel
Hub Sections
| Basel
Add Photo Section
| Basel
Item Binding
WinJS.Binding
<img class="itemImage"data-win-bind="src: imageUrl WinJS.Binding.oneTime" />
<div class="win-type-large itemTitle"data-win-bind="textContent: title WinJS.Binding.oneTime"></div>
data-win-bind="style.backgroundImage: urlToImage MyConverters.cssUrl;"JS:
WinJS.Namespace.define("MyConverters", {
cssUrl: WinJS.Binding.converter(function (url) {
return "url('" + url + "')";
}),
| Basel
Item Detail
| Basel
Search
| Basel
Search Wire Up
| Basel
App Manifest