qr - Dave's Blog

Search

JavaScript Types and WinRT Types

2016 Jan 21, 5:35

MSDN covers the topic of JavaScript and WinRT type conversions provided by Chakra (JavaScript Representation of Windows Runtime Types and Considerations when Using the Windows Runtime API), but for the questions I get about it I’ll try to lay out some specifics of that discussion more plainly. I’ve made a TL;DR JavaScript types and WinRT types summary table.

WinRT Conversion JavaScript
Struct ↔️ JavaScript object with matching property names
Class or interface instance JavaScript object with matching property names
Windows.Foundation.Collections.IPropertySet JavaScript object with arbitrary property names
Any DOM object

Chakra, the JavaScript engine powering the Edge browser and JavaScript Windows Store apps, does the work to project WinRT into JavaScript. It is responsible for, among other things, converting back and forth between JavaScript types and WinRT types. Some basics are intuitive, like a JavaScript string is converted back and forth with WinRT’s string representation. For other basic types check out the MSDN links at the top of the page. For structs, interface instances, class instances, and objects things are more complicated.

A struct, class instance, or interface instance in WinRT is projected into JavaScript as a JavaScript object with corresponding property names and values. This JavaScript object representation of a WinRT type can be passed into other WinRT APIs that take the same underlying type as a parameter. This JavaScript object is special in that Chakra keeps a reference to the underlying WinRT object and so it can be reused with other WinRT APIs.

However, if you start with plain JavaScript objects and want to interact with WinRT APIs that take non-basic WinRT types, your options are less plentiful. You can use a plain JavaScript object as a WinRT struct, so long as the property names on the JavaScript object match the WinRT struct’s. Chakra will implicitly create an instance of the WinRT struct for you when you call a WinRT method that takes that WinRT struct as a parameter and fill in the WinRT struct’s values with the values from the corresponding properties on your JavaScript object.

// C# WinRT component
public struct ExampleStruct
{
public string String;
public int Int;
}

public sealed class ExampleStructContainer
{
ExampleStruct value;
public void Set(ExampleStruct value)
{
this.value = value;
}

public ExampleStruct Get()
{
return this.value;
}
}

// JS code
var structContainer = new ExampleWinRTComponent.ExampleNamespace.ExampleStructContainer();
structContainer.set({ string: "abc", int: 123 });
console.log("structContainer.get(): " + JSON.stringify(structContainer.get()));
// structContainer.get(): {"string":"abc","int":123}

You cannot have a plain JavaScript object and use it as a WinRT class instance or WinRT interface instance. Chakra does not provide such a conversion even with ES6 classes.

You cannot take a JavaScript object with arbitrary property names that are unknown at compile time and don’t correspond to a specific WinRT struct and pass that into a WinRT method. If you need to do this, you have to write additional JavaScript code to explicitly convert your arbitrary JavaScript object into an array of property name and value pairs or something else that could be represented in WinRT.

However, the other direction you can do. An instance of a Windows.Foundation.Collections.IPropertySet implementation in WinRT is projected into JavaScript as a JavaScript object with property names and values corresponding to the key and value pairs in the IPropertySet. In this way you can project a WinRT object as a JavaScript object with arbitrary property names and types. But again, the reverse is not possible. Chakra will not convert an arbitrary JavaScript object into an IPropertySet.

// C# WinRT component
public sealed class PropertySetContainer
{
private Windows.Foundation.Collections.IPropertySet otherValue = null;

public Windows.Foundation.Collections.IPropertySet other
{
get
{
return otherValue;
}
set
{
otherValue = value;
}
}
}

public sealed class PropertySet : Windows.Foundation.Collections.IPropertySet
{
private IDictionary map = new Dictionary();

public PropertySet()
{
map.Add("abc", "def");
map.Add("ghi", "jkl");
map.Add("mno", "pqr");
}
// ... rest of PropertySet implementation is simple wrapper around the map member.


// JS code
var propertySet = new ExampleWinRTComponent.ExampleNamespace.PropertySet();
console.log("propertySet: " + JSON.stringify(propertySet));
// propertySet: {"abc":"def","ghi":"jkl","mno":"pqr"}

var propertySetContainer = new ExampleWinRTComponent.ExampleNamespace.PropertySetContainer();
propertySetContainer.other = propertySet;
console.log("propertySetContainer.other: " + JSON.stringify(propertySetContainer.other));
// propertySetContainer.other: {"abc":"def","ghi":"jkl","mno":"pqr"}

try {
propertySetContainer.other = { "123": "456", "789": "012" };
}
catch (e) {
console.error("Error setting propertySetContainer.other: " + e);
// Error setting propertySetContainer.other: TypeError: Type mismatch
}

There’s also no way to implicitly convert a DOM object into a WinRT type. If you want to write third party WinRT code that interacts with the DOM, you must do so indirectly and explicitly in JavaScript code that is interacting with your third party WinRT. You’ll have to extract the information you want from your DOM objects to pass into WinRT methods and similarly have to pass messages out from WinRT that say what actions the JavaScript should perform on the DOM.

PermalinkCommentschakra development javascript winrt

Retweet of TheOnion

2015 Dec 30, 1:00
"We present it to you with the utmost respect and deference." http://onion.com/1NVUlBC  pic.twitter.com/NPQQA8GsoO
PermalinkComments

Retweet of krisstraub

2015 Sep 20, 8:34
RT @chainsawsuit: good for what ails ya http://fb.me/7nPENCYPZ  pic.twitter.com/Rm8rLguHXx
PermalinkComments

Retweet of tobint

2015 Jul 29, 3:54
Thanks, @googlechrome! The icing suffers from rendering/layout issues. It's what's inside that counts! What's inside? pic.twitter.com/qUIwEQqRbV
PermalinkComments

Retweet of TheOnion

2015 Jul 26, 2:30
Top Story: Ticketed Motorist Pointing Finger Just The Green Light Cop Needed http://onion.com/1LMi9JY  pic.twitter.com/uB245nVu5x
PermalinkComments

Retweet of BoredElonMusk

2015 Jun 17, 7:32
Put QR codes on guns so no one will use them.
PermalinkComments

Tweet from David_Risney

2015 Jun 14, 9:53
Fallout4 on XB1 supports PC mods. Due to platform similarity? Possible for PS4? https://twitter.com/Polygon/status/610494038685417472 …
PermalinkComments

Tweet from David_Risney

2015 Apr 2, 10:43
Tesla's April fools headline fooled stock trading algorithms causing $1.50 jump: http://www.bloombergview.com/articles/2015-04-02/tesla-stockholders-can-t-take-a-joke …
PermalinkComments

Retweet of anatudor

2015 Mar 22, 10:24
Collection can be found here - over 100 demos showing what can be done with just 1 range input http://codepen.io/collection/DgYaMj/8/ … pic.twitter.com/CAndEDATj9
PermalinkComments

Retweet of doctorow

2015 Mar 6, 6:16
Albuquerque PD encrypts videos before releasing them in records request http://boingboing.net/2015/03/06/albuquerque-pd-encrypts-videos.html … pic.twitter.com/QriLUTIvtY
PermalinkComments

Retweet of theharmonyguy

2015 Feb 24, 7:41
2014 highlights from Facebook's bug bounty program: https://www.facebook.com/notes/1026610350686524/ …
PermalinkComments

robhuebel: Axe Cop coming this summer!   Nick Offerman, Tyler...

2013 May 13, 2:26


robhuebel:

Axe Cop coming this summer!  

Nick Offerman, Tyler the Creator, Me (Rob Huebel), Giancarlo Esposito and Vincent Kartheiser.  

PermalinkCommentsaxe-cop humor video tv

laughingsquid: Two-Year-Old Picks the Lock to His Sister’s Room...

2013 Mar 28, 3:30


laughingsquid:

Two-Year-Old Picks the Lock to His Sister’s Room and Steals Her Toys

PermalinkCommentshumor child video

paulftompkins: molly23: Thank you for that, IMDb. Thank YOU,...

2012 Mar 5, 8:27


paulftompkins:

molly23:

Thank you for that, IMDb.

Thank YOU, Molly.
PermalinkCommentshumor abraham-lincoln imdb

(via Artist repairs vandalized mural with giant QR code (that...

2011 Dec 14, 6:38


(via Artist repairs vandalized mural with giant QR code (that leads back to the pre-defaced artwork) [Street Art])

PermalinkCommentsart mural qr-code

“The Big Head by San Francisco artist Dan Rosenfeld is an...

2011 Nov 15, 11:54


The Big Head by San Francisco artist Dan Rosenfeld is an oversize video conferencing helmet that displays an enlarged version of the wearer’s face on a 24″ monitor at the front of the helmet. Rosenfeld debuted the helmet at this year’s Halloween” (via The Big Head, A Giant Videoconferencing Helmet by Dan Rosenfeld)

PermalinkCommentshumor halloween big-head video

Junkyard Jumbotron: join all your screens into one big one, no software install needed - Boing Boing

2011 Mar 14, 4:30A web service to turn multiple web browsing devices into one larger screen. Panning and zooming on one screen (for phones) changes the whole picture.
PermalinkCommentsqrcode web video ui tv

Urban Speaker, A Remote Public Address Art Installation

2010 Oct 6, 2:31PermalinkCommentsart qrcode qr sign phone cellphone

Riviera Blog :: QTQR

2010 Apr 12, 10:44QR code degenerator allows you to mess with some pixels of a QR code or insert pictures without messing up the encoding.
PermalinkCommentsqrcode qr technical

Kid Robot’s QR Code Scavenger Hunt - PSFK

2009 Sep 1, 4:59"...toy and apparel designers Kid Robot (with the help of creative ideas studio We Are Plus) have organized a mobile phone-based scavenger hunt in Manhattan centered around scanning QR codes."PermalinkCommentsqrcode phone scavenger-hunt toy advertising
Older Entries Creative Commons License Some rights reserved.