porting cordova apps to windows...
Post on 02-Apr-2018
244 Views
Preview:
TRANSCRIPT
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 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.
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”
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 hellodir
com.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; <Manufacturer>; <Device>
[;<Operator>])
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>
Tips and Tricks : Ensuring standards modeForcing standards mode on localhost:
<meta http-equiv="x-ua-compatible" content="IE=edge" />
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
<div id="slider" style="overflow: hidden;">
After
<div id="slider" style="overflow: hidden; -ms-touch-action: none;">
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" />
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>
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/
jQuery Mobile Theme
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.
What’s next?
Need help with porting/have questions?
◦ Check out www.wootstudio.ca/porting
◦ E-mail us: wootstudio@microsoft.comSubject line: “Porting Question”
◦ Sign up for 1:1 porting consultation at http://wootstudio.ca/porting#events or e-mail wootstudio@microsoft.com Subject line: “Request for porting consultation”
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
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!
We Are Here to Help
SUMMARY OF THE RESOURCES
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.
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 >>
wootstudio.ca/porting
Thank You!@RAMISAYAR – TWEET YOUR #WEB2APP #TIPS!
ReferencesWindows Phone 8 platform guide
Windows Phone command line tools
How to develop for Windows Phone 8 on a Mac
Get Started developing for Windows Phone using Cordova
Internet Explorer 10 brings HTML5 to Windows Phone 8 in a big way
Adapting your WebKit-optimized site for Internet Explorer 10
Developing in HTML5 and JavaScript for Windows Phone
jQuery Mobile theme for Windows Phone 8
Sencha Touch support for Windows Phone 8
top related