| 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