porting cordova apps to windows...

50
Porting Cordova Apps to Windows Phone RAMI SAYAR – DEVELOPER EVANGELIST @ MICROSOFT @RAMISAYAR – WOOTSTUDIO.CA

Upload: truongdiep

Post on 02-Apr-2018

240 views

Category:

Documents


3 download

TRANSCRIPT

Page 1: Porting Cordova Apps to Windows Phonemediafiles.w00t.ms/.../Porting-Cordova-Apps-to-Windows-Phone.pdf · Porting Cordova Apps to Windows Phone ... Android Windows Phone 8 Windows

Porting Cordova Apps to Windows Phone

RAMI SAYAR – DEVELOPER EVANGELIST @ MICROSOFT

@RAMISAYAR – WOOTSTUDIO.CA

Page 2: Porting Cordova Apps to Windows Phonemediafiles.w00t.ms/.../Porting-Cordova-Apps-to-Windows-Phone.pdf · Porting Cordova Apps to Windows Phone ... Android Windows Phone 8 Windows
Page 3: Porting Cordova Apps to Windows Phonemediafiles.w00t.ms/.../Porting-Cordova-Apps-to-Windows-Phone.pdf · Porting Cordova Apps to Windows Phone ... Android Windows Phone 8 Windows
Page 4: Porting Cordova Apps to Windows Phonemediafiles.w00t.ms/.../Porting-Cordova-Apps-to-Windows-Phone.pdf · Porting Cordova Apps to Windows Phone ... Android Windows Phone 8 Windows

About Me – Tweet @ramisayarMcGill University – Software Engineer

Infrastructure at Twilio in SF + Backend Dev in MTL.

What I Code In: Python, JavaScript, HTML5, node.js, Cordova, PhoneGap, Ruby on Rails, etc...

Page 5: Porting Cordova Apps to Windows Phonemediafiles.w00t.ms/.../Porting-Cordova-Apps-to-Windows-Phone.pdf · Porting Cordova Apps to Windows Phone ... Android Windows Phone 8 Windows

Cordova Introduction

Cordova is an open-source framework for developingmobile apps using HTML5, CSS3 and JavaScript.

Page 6: Porting Cordova Apps to Windows Phonemediafiles.w00t.ms/.../Porting-Cordova-Apps-to-Windows-Phone.pdf · Porting Cordova Apps to Windows Phone ... Android Windows Phone 8 Windows

PlateformsiOS

Android

Windows Phone 8

Windows 8

Blackberry

Firefox OS

Bada

Tizen

cordova-plugin-contacts

cordova-plugin-file

cordova-plugin-file-transfer

cordova-plugin-inappbrowser

cordova-plugin-media

cordova-plugin-media-capture

cordova-plugin-splashscreen

cordova-plugin-vibration

Page 7: Porting Cordova Apps to Windows Phonemediafiles.w00t.ms/.../Porting-Cordova-Apps-to-Windows-Phone.pdf · Porting Cordova Apps to Windows Phone ... Android Windows Phone 8 Windows

Cordova vs PhoneGap?

Page 8: Porting Cordova Apps to Windows Phonemediafiles.w00t.ms/.../Porting-Cordova-Apps-to-Windows-Phone.pdf · Porting Cordova Apps to Windows Phone ... Android Windows Phone 8 Windows

Examples

Page 9: Porting Cordova Apps to Windows Phonemediafiles.w00t.ms/.../Porting-Cordova-Apps-to-Windows-Phone.pdf · Porting Cordova Apps to Windows Phone ... Android Windows Phone 8 Windows

Getting Started

Page 10: Porting Cordova Apps to Windows Phonemediafiles.w00t.ms/.../Porting-Cordova-Apps-to-Windows-Phone.pdf · Porting Cordova Apps to Windows Phone ... Android Windows Phone 8 Windows

Porting to Windows PhoneSystem Requirements:◦ Windows 8 Pro (64-Bit)

◦ Visual Studio 2012 Professional or Higher

◦ Windows Phone Dev Center account.

◦ Windows Phone SDK

◦ Cordova SDK

Page 11: Porting Cordova Apps to Windows Phonemediafiles.w00t.ms/.../Porting-Cordova-Apps-to-Windows-Phone.pdf · Porting Cordova Apps to Windows Phone ... Android Windows Phone 8 Windows

Setting up Your ProjectThere are two ways to set up your project for Windows Phone.◦ If you’re not using Cordova CLI: Create a new Visual Studio Project

◦ If you’re using Cordova CLI: Use the command-line tools to add a new platform.

Page 12: Porting Cordova Apps to Windows Phonemediafiles.w00t.ms/.../Porting-Cordova-Apps-to-Windows-Phone.pdf · Porting Cordova Apps to Windows Phone ... Android Windows Phone 8 Windows

Creating a New Visual Studio Project1. Setup Project Template◦ Download the latest copy of Cordova:

https://www.apache.org/dist/cordova/cordova-3.4.0-src.zip

◦ Extract the latest copy, extract the folder cordova-wp8.

◦ Execute the createTemplates.bat script.

◦ Copy the generated CordovaWPx_x_x_x.zip files to “Documents\Visual Studio 2013\Templates\ProjectTemplates”

Page 13: Porting Cordova Apps to Windows Phonemediafiles.w00t.ms/.../Porting-Cordova-Apps-to-Windows-Phone.pdf · Porting Cordova Apps to Windows Phone ... Android Windows Phone 8 Windows

Creating a New Visual Studio Project2. Create a New Visual Studio Project

Page 14: Porting Cordova Apps to Windows Phonemediafiles.w00t.ms/.../Porting-Cordova-Apps-to-Windows-Phone.pdf · Porting Cordova Apps to Windows Phone ... Android Windows Phone 8 Windows

Creating a New Visual Studio Project3. Drop in application code to www/

Page 15: Porting Cordova Apps to Windows Phonemediafiles.w00t.ms/.../Porting-Cordova-Apps-to-Windows-Phone.pdf · Porting Cordova Apps to Windows Phone ... Android Windows Phone 8 Windows

Using the Cordova-CLI

1. cordova create hellodir

com.example.hello HelloWorld

2. cd hellodir

3. cordova platform add wp7

4. cordova platform add wp8

Page 16: Porting Cordova Apps to Windows Phonemediafiles.w00t.ms/.../Porting-Cordova-Apps-to-Windows-Phone.pdf · Porting Cordova Apps to Windows Phone ... Android Windows Phone 8 Windows

Using the Cordova-CLI

5. Open Visual Studio 2013 – Build/Emulate

Page 17: Porting Cordova Apps to Windows Phonemediafiles.w00t.ms/.../Porting-Cordova-Apps-to-Windows-Phone.pdf · Porting Cordova Apps to Windows Phone ... Android Windows Phone 8 Windows

Was that hard?

Page 18: Porting Cordova Apps to Windows Phonemediafiles.w00t.ms/.../Porting-Cordova-Apps-to-Windows-Phone.pdf · Porting Cordova Apps to Windows Phone ... Android Windows Phone 8 Windows

Windows Phone 8 Features

Page 19: Porting Cordova Apps to Windows Phonemediafiles.w00t.ms/.../Porting-Cordova-Apps-to-Windows-Phone.pdf · Porting Cordova Apps to Windows Phone ... Android Windows Phone 8 Windows

Tips and Tricks : Detecting Internet Explorer 10 on Windows Phone 8Treat Internet Explorer 10 the same as WebKit-based browsers.

User Agent:

Mozilla/5.0 (compatible; MSIE 10.0; Windows

Phone 8.0; Trident/6.0; ARM; Touch;

IEMobile/10.0; <Manufacturer>; <Device>

[;<Operator>])

Page 20: Porting Cordova Apps to Windows Phonemediafiles.w00t.ms/.../Porting-Cordova-Apps-to-Windows-Phone.pdf · Porting Cordova Apps to Windows Phone ... Android Windows Phone 8 Windows

Tips and Tricks : Ensuring standards modeTell IE10 to render your site in standards-compliant mode. Using standards mode provides with the latest HTML5, CSS3, SVG, features, etc…

Most sites will work in standards mode by default:

<!DOCTYPE html>

Page 21: Porting Cordova Apps to Windows Phonemediafiles.w00t.ms/.../Porting-Cordova-Apps-to-Windows-Phone.pdf · Porting Cordova Apps to Windows Phone ... Android Windows Phone 8 Windows

Tips and Tricks : Ensuring standards modeForcing standards mode on localhost:

<meta http-equiv="x-ua-compatible" content="IE=edge" />

Page 22: Porting Cordova Apps to Windows Phonemediafiles.w00t.ms/.../Porting-Cordova-Apps-to-Windows-Phone.pdf · Porting Cordova Apps to Windows Phone ... Android Windows Phone 8 Windows

Tips and Tricks: CSS and DOM API updatesThe simplest set of updates is to target any WebKit-specific CSS or JavaScript calls where there is a standards-compliant (unprefixed) or Microsoft-prefixed version that has the same behavior.

There are CSS/DOM properties that shipped with the WebKit prefix but have since shipped in Internet Explorer 10 and other browsers in an unprefixed format.

Page 23: Porting Cordova Apps to Windows Phonemediafiles.w00t.ms/.../Porting-Cordova-Apps-to-Windows-Phone.pdf · Porting Cordova Apps to Windows Phone ... Android Windows Phone 8 Windows

Tips and Tricks: CSS and DOM API updates

WebKit version IE10 version

-webkit-border-radius: 0; -webkit-border-radius: 0;border-radius: 0;

a.webkitTransitionDuration = "5ms" b.webkitTransitionDuration = b.transitionDuration = "5ms";

this.element.addEventListener("webkitTransitionEnd", this, false);

this.element.addEventListener("webkitTransitionEnd", this, false);

this.element.addEventListener("transitionend", this, false);

Page 24: Porting Cordova Apps to Windows Phonemediafiles.w00t.ms/.../Porting-Cordova-Apps-to-Windows-Phone.pdf · Porting Cordova Apps to Windows Phone ... Android Windows Phone 8 Windows

Tips and Tricks: CSS and DOM API updates

WebKit version Standards-based version

-webkit-animation animation

-webkit-animation-delay animation-delay

-webkit-animation-direction animation-direction

-webkit-animation-duration animation-duration

-webkit-animation-fill-mode animation-fill-mode

-webkit-animation-iteration-count animation-iteration-count

-webkit-animation-name animation-name

-webkit-animation-play-state animation-play-state

-webkit-animation-timing-function animation-timing-function

-webkit-background-clip background-clip

-webkit-background-size background-size

-webkit-border-radius border-radius

Page 25: Porting Cordova Apps to Windows Phonemediafiles.w00t.ms/.../Porting-Cordova-Apps-to-Windows-Phone.pdf · Porting Cordova Apps to Windows Phone ... Android Windows Phone 8 Windows

Tips and Tricks: CSS and DOM API updates

WebKit version Standards-based version

-webkit-border-bottom-left-radius border-bottom-left-radius

-webkit-border-bottom-right-radius border-bottom-right-radius

-webkit-border-top-left-radius border-top-left-radius

-webkit-border-top-right-radius border-top-right-radius

-webkit-box-shadow box-shadow

-webkit-box-sizing box-sizing

-webkit-background-clip background-clip

@-webkit-keyframes keyframes

-webkit-transform transform

-webkit-backface-visibility backface-visibility

-webkit-transition transition

-webkit-transition-property transition-property

Page 26: Porting Cordova Apps to Windows Phonemediafiles.w00t.ms/.../Porting-Cordova-Apps-to-Windows-Phone.pdf · Porting Cordova Apps to Windows Phone ... Android Windows Phone 8 Windows

Tips and Tricks: CSS and DOM API updates

WebKit version IE10 version

-webkit-text-size-adjust -ms-text-size-adjust

-webkit-user-select -ms-user-select

-webkit-box -ms-flexbox

-webkit-box-align -ms-flex-align

-webkit-box-pack -ms-flex-pack

Page 27: Porting Cordova Apps to Windows Phonemediafiles.w00t.ms/.../Porting-Cordova-Apps-to-Windows-Phone.pdf · Porting Cordova Apps to Windows Phone ... Android Windows Phone 8 Windows

Tips and Tricks: CSS and DOM API -Gradients

Before After

background: -webkit-

gradient(linear, left top, left

bottom, from(#ffffff),

to(#000000));

background: -webkit-

gradient(linear, left top, left

bottom, from(#ffffff),

to(#000000));

background: linear-gradient(to

bottom, #ffffff, #000000);

Page 28: Porting Cordova Apps to Windows Phonemediafiles.w00t.ms/.../Porting-Cordova-Apps-to-Windows-Phone.pdf · Porting Cordova Apps to Windows Phone ... Android Windows Phone 8 Windows

Tips and Tricks: CSS and DOM API –Flexbox Orientation

Before After

-webkit-box-orient: vertical; -webkit-box-orient: vertical;

-ms-flex-direction: column;

Page 29: Porting Cordova Apps to Windows Phonemediafiles.w00t.ms/.../Porting-Cordova-Apps-to-Windows-Phone.pdf · Porting Cordova Apps to Windows Phone ... Android Windows Phone 8 Windows

Tips and Tricks: CSS and DOM API –Borders on Hyperlinked Images

a img {

border: none;

}

Page 30: Porting Cordova Apps to Windows Phonemediafiles.w00t.ms/.../Porting-Cordova-Apps-to-Windows-Phone.pdf · Porting Cordova Apps to Windows Phone ... Android Windows Phone 8 Windows

Tips and Tricks: CSS and DOM API –Border-Image

Before After

padding: 8px 0 8px;

-webkit-border-image:

url(border.png) 5 5 5 5 repeat

repeat;

border-width: 5px;

border-style: solid;

border-color: #fff;

padding: 8px 0 8px;

-webkit-border-image:

url(border.png) 5 5 5 5 repeat

repeat;

border-width: 5px;

Page 31: Porting Cordova Apps to Windows Phonemediafiles.w00t.ms/.../Porting-Cordova-Apps-to-Windows-Phone.pdf · Porting Cordova Apps to Windows Phone ... Android Windows Phone 8 Windows

Tips and Tricks: Touch and Pointer Events

Before

this.element.addEventListener("touchstart", eventHandlerName, false);

this.element.addEventListener("touchmove", eventHandlerName, false);

this.element.addEventListener("touchend", eventHandlerName, false);

After

if (window.navigator.msPointerEnabled) {

this.element.addEventListener("MSPointerDown", eventHandlerName, false);

this.element.addEventListener("MSPointerMove", eventHandlerName, false);

this.element.addEventListener("MSPointerUp", eventHandlerName, false);

}

this.element.addEventListener("touchstart", eventHandlerName, false);

this.element.addEventListener("touchmove", eventHandlerName, false);

this.e

Page 32: Porting Cordova Apps to Windows Phonemediafiles.w00t.ms/.../Porting-Cordova-Apps-to-Windows-Phone.pdf · Porting Cordova Apps to Windows Phone ... Android Windows Phone 8 Windows

Tips and Tricks: Touch and Pointer EventsBefore

switch (event.type) {

case "touchstart": this.onTouchStart(event);

break;

case "touchmove": this.onTouchMove(event);

break;

case "touchend": this.onTouchEnd(event);

break;

}

After

switch (event.type) {

case "touchstart": case "MSPointerDown": this.onTouchStart(event);

break;

case "touchmove": case "MSPointerMove": this.onTouchMove(event);

break;

case "touchend": case "MSPointerUp": this.onTouchEnd(event);

break;

}

Page 33: Porting Cordova Apps to Windows Phonemediafiles.w00t.ms/.../Porting-Cordova-Apps-to-Windows-Phone.pdf · Porting Cordova Apps to Windows Phone ... Android Windows Phone 8 Windows

Tips and Tricks: Touch and Pointer Events

Pointer event model fires separate events for each touch point. Therefore, if you only want to handle the primary touch point, you will need to filter out non-primary touches using the following line.

if (window.navigator.msPointerEnabled && !event.isPrimary) return;

Page 34: Porting Cordova Apps to Windows Phonemediafiles.w00t.ms/.../Porting-Cordova-Apps-to-Windows-Phone.pdf · Porting Cordova Apps to Windows Phone ... Android Windows Phone 8 Windows

Tips and Tricks: Touch and Pointer Events

Before

var curX = event.targetTouches[0].pageX;

After

var curX = event.pageX || event.targetTouches[0].pageX;

Page 35: Porting Cordova Apps to Windows Phonemediafiles.w00t.ms/.../Porting-Cordova-Apps-to-Windows-Phone.pdf · Porting Cordova Apps to Windows Phone ... Android Windows Phone 8 Windows

Tips and Tricks: Touch and Pointer Events

Turning off default touch behavior

The pointer event model in Internet Explorer 10 requires you to explicitly indicate which areas of

the page will have custom gesture handling (using the code you just added), and which will use

default gesture handling (pan the page). You can do this by adding markup on elements that

should opt out of default gesture handling using the -ms-touch-action property. For example:

Before

<div id="slider" style="overflow: hidden;">

After

<div id="slider" style="overflow: hidden; -ms-touch-action: none;">

Page 36: Porting Cordova Apps to Windows Phonemediafiles.w00t.ms/.../Porting-Cordova-Apps-to-Windows-Phone.pdf · Porting Cordova Apps to Windows Phone ... Android Windows Phone 8 Windows

Tips and Tricks: Handling Non-Standard Behavior – Disabling Link Highlighting

WebKit solution IE10 solution

a {

-webkit-tap-highlight-color:

rgba(0,0,0,0);

}

<meta name="msapplication-tap-

highlight" content="no" />

Page 37: Porting Cordova Apps to Windows Phonemediafiles.w00t.ms/.../Porting-Cordova-Apps-to-Windows-Phone.pdf · Porting Cordova Apps to Windows Phone ... Android Windows Phone 8 Windows

Tips and Tricks: Handling Non-Standard Behavior – Disabling Native Drop-down Styling

WebKit solution IE10 solution

CSS:select {

-webkit-appearance: none;

text-indent: -5000px;

}

CSS:select::-ms-expand {

display: none;

}

HTML (empty top option to remove text):<select>

<option></option>

...

</select>

Page 38: Porting Cordova Apps to Windows Phonemediafiles.w00t.ms/.../Porting-Cordova-Apps-to-Windows-Phone.pdf · Porting Cordova Apps to Windows Phone ... Android Windows Phone 8 Windows

jQuery Mobile ThemeThis theme provides a Windows Phone user interface for Apache Cordova apps using jQuery Mobile on Windows Phone 8.

http://sgrebnov.github.io/jqmobile-wp8-theme/

Page 39: Porting Cordova Apps to Windows Phonemediafiles.w00t.ms/.../Porting-Cordova-Apps-to-Windows-Phone.pdf · Porting Cordova Apps to Windows Phone ... Android Windows Phone 8 Windows

jQuery Mobile Theme

Page 40: Porting Cordova Apps to Windows Phonemediafiles.w00t.ms/.../Porting-Cordova-Apps-to-Windows-Phone.pdf · Porting Cordova Apps to Windows Phone ... Android Windows Phone 8 Windows

jQuery Mobile ThemeLast comment… you might need to download the Windows Phone Toolkit: http://phone.codeplex.com/

If you wish to use the native date and time selector control plugins for Cordova.

Page 41: Porting Cordova Apps to Windows Phonemediafiles.w00t.ms/.../Porting-Cordova-Apps-to-Windows-Phone.pdf · Porting Cordova Apps to Windows Phone ... Android Windows Phone 8 Windows

What’s next?

Page 42: Porting Cordova Apps to Windows Phonemediafiles.w00t.ms/.../Porting-Cordova-Apps-to-Windows-Phone.pdf · Porting Cordova Apps to Windows Phone ... Android Windows Phone 8 Windows

Need help with porting/have questions?

◦ Check out www.wootstudio.ca/porting

◦ E-mail us: [email protected] line: “Porting Question”

◦ Sign up for 1:1 porting consultation at http://wootstudio.ca/porting#events or e-mail [email protected] Subject line: “Request for porting consultation”

Page 43: Porting Cordova Apps to Windows Phonemediafiles.w00t.ms/.../Porting-Cordova-Apps-to-Windows-Phone.pdf · Porting Cordova Apps to Windows Phone ... Android Windows Phone 8 Windows

Take Free on-line Courses on App Development

Windows 8.1 UX Design Jump Start

Introduction to C++ and DirectX Game Development

Gaming Engines for Windows 8 Jump Start

Building Apps for Windows Phone 8 Jump Start

Build Apps for Both Windows 8 and Windows Phone 8

Get Started with Windows Azure

Developing Windows Azure Web

Services Jump Start

Building Windows Store Apps for iOS Developers

More on App Development:

More on Windows Store App Development

More on Windows Phone App Development

www.microsoftvirtualacademy.com

Page 44: Porting Cordova Apps to Windows Phonemediafiles.w00t.ms/.../Porting-Cordova-Apps-to-Windows-Phone.pdf · Porting Cordova Apps to Windows Phone ... Android Windows Phone 8 Windows

Fill in the Evaland Get a Free Book

Complete the feedback form that you’ll get by e-mail after the event and get access to this free digital book!

Page 45: Porting Cordova Apps to Windows Phonemediafiles.w00t.ms/.../Porting-Cordova-Apps-to-Windows-Phone.pdf · Porting Cordova Apps to Windows Phone ... Android Windows Phone 8 Windows

We Are Here to Help

SUMMARY OF THE RESOURCES

Page 46: Porting Cordova Apps to Windows Phonemediafiles.w00t.ms/.../Porting-Cordova-Apps-to-Windows-Phone.pdf · Porting Cordova Apps to Windows Phone ... Android Windows Phone 8 Windows

App Support

Free loaner devices for testing.

Free Store guidance consult.

Free technical guidance.

Free software for students/startups.

Free app promotion guide.

Free iOS dev kit (if required).

Free office hours.

Page 47: Porting Cordova Apps to Windows Phonemediafiles.w00t.ms/.../Porting-Cordova-Apps-to-Windows-Phone.pdf · Porting Cordova Apps to Windows Phone ... Android Windows Phone 8 Windows

Join the Developer Movement

• Don’t just code… Code Kwondo!• Earn belts to become the ultimate Code Sensei

• Visit www.developermovement.ca to register• Publish a Windows Phone or Windows 8 app* (each app gives you 5000 points)

• Redeem points for prizes (over 26 different prizes available including Xbox One and Surface 2)

*to be eligible to earn points for your app, it must meet certain requirements. Click here for full details >>

Page 48: Porting Cordova Apps to Windows Phonemediafiles.w00t.ms/.../Porting-Cordova-Apps-to-Windows-Phone.pdf · Porting Cordova Apps to Windows Phone ... Android Windows Phone 8 Windows

wootstudio.ca/porting

Page 49: Porting Cordova Apps to Windows Phonemediafiles.w00t.ms/.../Porting-Cordova-Apps-to-Windows-Phone.pdf · Porting Cordova Apps to Windows Phone ... Android Windows Phone 8 Windows

Thank You!@RAMISAYAR – TWEET YOUR #WEB2APP #TIPS!