How to create cross-platform mobile apps with HTML5 that integrate directly into the platform.
By combining several enterprise-class frameworks and tools, you can create apps that run on all mobile devices, developed in a central repository and tool.
In this presentation, you will learn how to create HTML5 apps with the Visual Studio Multi-Device Hybrid Apps plug-in. Apache Cordova is directly integrated and resposible for creating native apps for the mobile platforms.
WinJS can be used as a major UI framework that is now open source and works accross all platforms and browsers.
To check how you can integrate apps deeper with the native platforms, you will also see how to install and use a custom plug-in that enables Near Field Communication (NFC) on both Android and Windows Phone.
5. HTML5 UI Toolkits
AngularJS
BackboneJS
jQuery Mobile
Sencha Touch
Ember.js
Dojo Mobile
WinJS
… and many, many more!
HTML Form in Chrome, no styling / layouts
Same HTML form in WinJS, default dark theme without layouts
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 5
6. Features
– UI toolkit
– JavaScript coding patterns
• Simplifies definition of namespaces, object classes
• Asynchronous operations (Promises)
• Structural models for apps, data binding and page navigation
– Wraps WinRT APIs for native platform access on Windows
Multi-Platform
– Windows (Phone), Android, iOS, desktop browsers
WinJS
http://
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 6
7. WinJS
XAML
C# JavaScript
HTML / CSS3
Windows Runtime (WinRT)
Windows 8.1
Xbox One
Windows
Phone 8.1
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 7
8. WinJS 3.0+
XAML
C# JavaScript
HTML / CSS3
Windows Runtime (WinRT)
Windows 8.1
Android
iOS
Web browsers
Apache Cordova
Xbox One
Windows
Phone 8.1
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 8
9. WinJS Roadmap
Open Source
– Apache License
– Limitations on WP 8.1: http://msdn.microsoft.com/en-
us/library/windows/apps/dn632432.aspx
WinJS 3.0
– First release that targets multiple platforms & browsers
– Not available as reference for Windows Store apps
WinJS Future
– Merge WinJS with WinJS.phone
WinJS 2.1 Store app
Shared library, not shipped in app packageWinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 9
25. WinJS Controls
Elements (<div> / <span>)
Contain data‐win‐control attribute
– Value is name of a constructor function
Instantiated at app startup:
– WinJS.UI.processAll();
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 25
31. Promises: Async Code
JavaScript: single-threaded language
Traditional asynchronous call-backs
– Call-stack with anonymous nested
functions?
– Do exceptions propagate up nested
call-backs?
Promise objects: defines functions
– then(): promise completed successfully
– error(): handle errors
– progress(): regular progress callbacks
async method
promise
.then()
function completed()
function error()
function progress()
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 31
32. Promises: How To
Initialize app
– After WinJS parsed DOM & instantiated controls
function onDeviceReady() {
WinJS.UI.processAll().then(function () {
// Retrieve the instantiated rating control
var ratingControl = ratingControlDiv.winControl;
// Register the ratingChanged() event handler function
ratingControl.addEventListener("change", ratingChanged, false);
});
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 32
33. Pages & Navigation
Traditional: multi-page navigation
– Individual HTML files, hyperlinks
Better: single-page navigation
– Never navigates away from default.html
• default.html: defines outmost UI (AppBar), handles app lifecycle
– Load additional data (“fragments”) into the page as needed
• PageControl: create & embed on default.html. Loads set of HTML, JavaScript and CSS (like an iframe).
• HtmlControl: load static HTML from other page, no JavaScript
• WebView: own history stack and navigation
• DOM methods
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 33
34. Pages & Navigation: How-To
Create 2nd “Navigation App”Store project
1. Create new“Page Control”: page2.html
Back to the Cordova project
2. Copy navigator.js and
home & page2.[html|js|css] from
store project
3. Reference navigator.js from index.html
4. Add WinJS page control to index.html
<div id="contenthost" data‐win‐control="Application.PageControlNavigator" data‐win‐options="{home: ‚./pages/home/home.html'}"></div>
<script src="scripts/navigator.js"></script>
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 34
35. Pages & Navigation: How-To
Create link from home.html to
page2.html
– Note: project structure is
modified during build for
Cordova packaging
– Contents moved to /www/
directory
– Links to e.g. /index.html don’t
work, use relative links!
<p><a href="./../page2/page2.html">Go to page 2.</a></p>
WinJS.UI.Pages.define("./pages/home/home.html", {
// This function is called whenever a user navigates to this page. It
// populates the page elements with the app's data.
ready: function (element, options) {
// Find all <a> links and execute the event handler when clicking
WinJS.Utilities.query("a").listen("click",
this.linkClickEventHandler, false);
},
linkClickEventHandler: function (eventInfo) {
// Stop default behaviour!
eventInfo.preventDefault();
// Use WinJS to navigate instead –
// loads the new page into the <div> fragment
var link = eventInfo.target;
WinJS.Navigation.navigate(link.href);
}
});
home.html
home.js
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 35
36. Bindings
Data Binding
– data‐win‐bind attribute on HTML element
– JS setup options
• Create relationship with WinJS.Binding
• WinJS.Binding.mixin makes class observable
Template Binding
– Rendering items, e.g. for ListViews
<span id="nameBindingSpan" data‐win‐bind="innerText: name"></span>
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 36
39. Development Paths
Cross-Platform (CLI)
– cordova utility: automatically targets all platforms
• building, assets, plugin config
Platform Centered
– Lower level platform access, e.g. mix native components with Cordova
– Specific scripts & manual building for each platform
– Used by VS / Multi-Device Hybrid App Extension
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 39
40. Core Plug-Ins
Interface to native components
Good cross-platform support
Integrated in VS
– config.xml
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 40
49. NFC Tags
Tag memory size:
48 byte – few kB
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 49
50. NFC & CORDOVA & WINJS
Bringing it all together …
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 50
51. W3C NFC API
JavaScript NFC API
– www.w3.org/TR/nfc/
Status: First Public Working Draft; NFC & basic NDEF
– Not very active group
State: October 2014
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 51
52. Cordova NFC Plugin
Open source
Developed by Chariot Solutions
– plugins.cordova.io/#/package/com.chariotsolutions.nfc.plugin
Platforms
– Android
– WP8
– BlackBerry 10, (7)
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 52
53. Adding Cordova NFC Plugin
Add NFC plugin reference to config.xml
Test reading NFC tags
<vs:feature>com.chariotsolutions.nfc.plugin@0.5.1</vs:feature>
nfc.addNdefListener(
this.nfcHandler,
function () { console.log("Listening for NDEF tags."); },
function (error) { alert("Adding the listener failed."); }
);
nfcHandler: function (nfcEvent) {
var tag = nfcEvent.tag;
var ndefMessageBytes = tag.ndefMessage;
var payload = nfc.bytesToString(ndefMessageBytes[0].payload);
alert(payload);
} WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 53
54. NFC & NDEF Overview
NDEF Message
NDEF Record
(e.g., URL)
…
NDEF = NFC Data Exchange Format
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 54
55. Open Source NDEF Library
Reusable
NDEF
classes
Create NDEF
messages & records
(standard compliant)
Parse information
from raw byte arrays
Fully documented
Open Source LGPL license
ndef.mopius.com
library development
supported by:
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 55
56. Adding the NDEF Library
Download & extract
library
NdefLibraryJS_1.0.0.zip
Drag & drop to project
/dist/ndeflibrary(.min.).js
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 56
57. Creating NDEF Messages
NDEF Record
– URI record
– Social record (Twitter)
NDEF Message
var ndefRecord = new NdefLibrary.NdefSocialRecord();
ndefRecord.setSocialType(NdefLibrary.NdefSocialRecord.NfcSocialType.Twitter);
ndefRecord.setSocialUserName("mopius");
var ndefRecord = new NdefLibrary.NdefUriRecord();
ndefRecord.setUri("http://www.mopius.com/");
var ndefMessage = new window.NdefLibrary.NdefMessage(ndefRecord);
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 57
58. Format Conversion
// Convert message to raw NDEF byte array
var ndefMsgBytes = ndefMessage.toByteArray();
// Parse raw byte array to Cordova NFC Plugin format (JSON)
var ndefMessagePlugin = window.ndef.decodeMessage(ndefMsgBytes);
NDEF library class
object
Cordova NFC Plugin
JSON object
byte array
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 58
59. Writing NFC Tags
Cordova NFC Plugin: Write tag …
– Android: in NFC tag discovered call-back = while user is tapping tag
– Windows Phone: outside call-back = instruct phone to write tag as
soon as user taps tag
nfc.write(
ndefMessagePlugin,
function (msg) { console.log("Publish Success" + msg); },
function (msg) { console.log("Publish Error" + msg); }
);
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 59
60. Sharing to Devices
Can be started & stopped (with unshare)
nfc.share(
ndefMessagePlugin,
function (msg) { console.log("Share Success" + msg); },
function (msg) { console.log("Share Error" + msg); }
);
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 60
61. Real Life?
Cordova NFC plug-in is unstable
– Android: call-back after 2nd tag tap
– Windows Phone: after each publish one more read-callback, crashes
after too many call-backs
Multi-Device Hybrid Apps CTP
– Crashes after closing app on Windows Phone
– Deployment issues to Windows 8.1
– Visual Studio compatibility (only Update 3 supported)
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 61
64. http://
Multi-Device Hybrid Apps: Visual Studio Extension.
Create cross-platform HTML5 apps, based on Cordova.
WinJS: HTML5 UI toolkit.
Coming from Windows, expanding to cross-platform.
UI Controls & improved async / callbacks.
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 64
65. Apache Cordova: toolchain to create hybrid apps.
Plugins to access native functionality from JavaScript.
PhoneGap: commercial distribution of Cordova.
NFC: short-range wireless communication.
Transmit small data packages between devices or store data on tags.
Platforms: Android, Windows Phone, BlackBerry, iPhone (partly)
Support: W3C JavaScript API: draft; Cordova: 3rd party plugin
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 65
66. NDEF: content standard.
Record(s) contained in Message.
NDEF Library: open source for JavaScript & C#.
Create & parse NDEF messages.
ndef.mopius.com
…
WinJS, Apache Cordova & NFC - Andreas Jakl, 21.10.2014 66