Porting Cordova Apps to Windows...

download Porting Cordova Apps to Windows Phonemediafiles.w00t.ms/.../Porting-Cordova-Apps-to-Windows-Phone.pdfPorting Cordova Apps to Windows Phone ... Android Windows Phone 8 Windows 8 ...

of 50

  • date post

    02-Apr-2018
  • Category

    Documents

  • view

    217
  • download

    3

Embed Size (px)

Transcript of Porting Cordova Apps to Windows...

  • Porting Cordova Apps to Windows Phone

    RAMI SAYAR DEVELOPER EVANGELIST @ MICROSOFT

    @RAMISAYAR WOOTSTUDIO.CA

  • 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...

  • Cordova Introduction

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

  • 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

  • Cordova vs PhoneGap?

  • Examples

  • Getting Started

  • 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

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

    If youre using Cordova CLI: Use the command-line tools to add a new platform.

  • 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

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

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

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

  • Using the Cordova-CLI

    1. cordova create hellodircom.example.hello HelloWorld

    2. cd hellodir

    3. cordova platform add wp7

    4. cordova platform add wp8

  • Using the Cordova-CLI

    5. Open Visual Studio 2013 Build/Emulate

  • Was that hard?

  • Windows Phone 8 Features

  • 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; ;

    [;])

  • 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:

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

  • 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.

  • 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);

  • 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

  • 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

  • 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

  • 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);

  • Tips and Tricks: CSS and DOM API Flexbox Orientation

    Before After

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

    -ms-flex-direction: column;

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

    a img {

    border: none;

    }

  • 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;

  • 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

  • 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;

    }

  • 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;

  • Tips and Tricks: Touch and Pointer Events

    Before

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

    After

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

  • 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

    After

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

    WebKit solution IE10 solution

    a {

    -webkit-tap-highlight-color:

    rgba(0,0,0,0);

    }

  • 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):

    ...

  • 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/

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

  • jQuery Mobile Theme

  • jQuery Mobile