icon - 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 KernelMag

2016 Jan 16, 6:11
An oral history of A Special Thing, with @JimmyPardo & @ScottAukerman: http://trib.al/eIKf1DA  pic.twitter.com/W8dPw9cYt2
PermalinkComments

Retweet of kottke

2015 Jul 22, 2:01
With a technique called Crispr, DNA editing is becoming easy, cheap, and potentially scary http://kottke.org/15/07/copy-and-paste-but-for-dna …
PermalinkComments

Retweet of verge

2015 Apr 2, 6:22
Max Headroom: the definitive history of the 1980s digital icon http://theverge.com/e/8049180  pic.twitter.com/ZRLbVJrRBO
PermalinkComments

Retweet of TheAtlantic

2015 Mar 20, 4:03
A new 3-D printer pulls fully formed objects out of liquid at 100 times the speed http://theatln.tc/199X3VM  pic.twitter.com/cMb6HSthL7
PermalinkComments

Retweet of latest_is

2015 Mar 1, 3:08
Why Silicon Valley has a chance to dominate the auto industry - Vox http://www.vox.com/2015/2/23/8092141/silicon-valley-dominate-cars …
PermalinkComments

Where the best designers go to find photos and graphics

2014 Jan 5, 3:09

List of useful free or CC licensed photography and icon sites.

PermalinkCommentsfree cc photo photography icon

harmony:generators [ES Wiki]

2013 Dec 17, 9:01

Adds the yield keyword enabling you to write JS code that sort of looks like C# await.

Overview

First-class coroutines, represented as objects encapsulating suspended execution contexts (i.e., function activations). Prior art: Python, Icon, Lua, Scheme, Smalltalk.

PermalinkCommentstechnical javascript

ECCC 2012: Star Wars Trilogy: The Radio Play - Official Video...

2012 May 25, 1:29


ECCC 2012: Star Wars Trilogy: The Radio Play - Official Video (by emeraldcitycomicon)

Star Wars as read by voice actors in the voices of their famous roles: Bender, Stimpy, Morbo, Bubbles, Batman, and and and…

PermalinkCommentshumor video voice-acting bender billy-west star-wars

HTML5 Table Flipper Experiment

2012 Mar 2, 1:02

The goal of this experiment was to combine the flipping tables emoticons with the Threw It On The Ground video using shiny new HTML5-ish features and the end result is the table flipper flipping the Threw It On the Ground video.

The table flipper emoticon is CSS before content that changes on hover. Additionally on hover a CSS transform is applied to flip the video upside down several times and move it to the right and there's a CSS transition to animate the flipping. The only issue I ran into is that (at least on Windows) Flash doesn't like to have CSS transform rotations applied to it. So to get the most out of the flip experiment you must opt-in to HTML5 video on YouTube. And of course you must use a browser that supports the various things I just mentioned, like the latest Chrome (or not yet released IE10).

PermalinkCommentscss-transform flipping-tables css-transition html5-video technical threw-it-on-the-ground

GLYPHICONS - icon library

2012 Feb 1, 9:30

Library of simple and lovely icons available in smaller form for free under CC BY.

PermalinkCommentstechnical icon cc creative-commons

Bootstrap 2 released

2012 Feb 1, 9:28

An HTML and CSS UI framework - common icons and layout necessary for web apps - all free under Creative Commons BY and Apache 2

PermalinkCommentscss html creative-commons cc technical

X-Icon Editor

2011 Apr 15, 8:13PermalinkCommentseditor icon favicon html5 online

Favimon (beta version)

2010 Dec 16, 3:33Fight favicons pokemon style.PermalinkCommentshumor game web favicon pokemon technical via:waxy

Console Build Window Jump Lists Tool

2010 Dec 13, 11:14

I've made two simple command line tools related to the console window and Win7 jump lists. The source is available for both but neither is much more than the sort of samples you'd find on MSDN =).

SetAppUserModelId lets you change the Application User Model ID for the current console window. The AppUserModelId is the value Win7 uses to group together icons on the task bar and is what the task bar's jump lists are associated with. The tool lets you change that as well as the icon and name that appear in the task bar for the window, and the command to launch if the user attempts to re-launch the application from its task bar icon.

SetJumpList lets you set the jump list associated with a particular AppUserModelId. You pass the AppUserModelId as the only parameter and then in its standard input you give it lines specifying items that should appear in the jump list and what to execute when those items are picked.

I put these together to make my build environment easier to deal with at work. I have to deal with multiple enlistments in many different branches and so I wrote a simple script around these two tools to group my build windows by branch name in the task bar, and to add the history of commands I've used to launch the build environment console windows to the jump list of each.

PermalinkCommentswin7 jumplist technical console

Google and Outlook Calendar Sync'ing

2010 Jul 8, 9:00
I previously described my desire to hook my Outlook calendar up to my Google calendar. I just found out that I can do this and the reverse as both support publishing calendars to the Internet. The following are how I set this up under Outlook 2010 and Google Calendar:

In Outlook, I go to the calendar view, right click on my calendar and select "Share Publish to Office.com". At this point I can change the permissions to allow anonymous Internet access, and under Detail change between 'Full details' (full calendar), 'Limited details' (subject lines & availability only), 'Availability only'. Availability only is almost just what I want -- I'd also like to include location but availability only is good enough. After hitting OK here I get a 'Do you want to send an invitation...' dialog box. I hit 'Yes' and I can copy the webcals:// URL out of the email window that opens up. Next, to add it to my Google calendar, I open http://www.google.com/calendar/, and under 'Other calendars', I select 'Add Add by URL', paste in that webcals:// URL but change the 'webcals' at the start to 'https'.

In Google Calendar, I can click on my calendar name under 'My calendars', select 'Calendar settings', and on the new page, look under 'Calendar Address', click the ICAL icon, and copy the URL in the new dialog. Now back in Outlook I go to the Calendar view, right click on 'My Calendars', and select 'Add Calendar From Internet...'. In the new dialog that pops up I paste in the URL from Google Calendar.

In this fashion I can share public calendar data between my personal and work calendars.
PermalinkComments

Encode-O-Matic Update: Compression, Hex View, Quick Show Output

2010 Mar 9, 9:08

I've just put up an update for Encode-O-Matic with the following improvements:

PermalinkCommentstechnical encodeomatic project

Technology Review: Augmented Identity

2010 Feb 23, 10:04Android augmented reality app that does facial recognition and then hovers icons for that person's profiles on various websites.PermalinkCommentsaugmented-reality mobile internet identity android phone technical

Parents Visited

2009 Aug 25, 12:34

My parents visited this past weekend, met Sarah's parents, saw our house, and met our bunny. On Friday we went to BluWater in Kirkland which was pretty busy and the service was slower and slightly worse than we usually find. Saturday my parents helped us with our yard quite a bit and for dinner we went to the Icon Grill with Sarah's parents. I had forgotten how much I enjoy the food at the Icon Grill - I had the very tasty meat loaf. Dinner went well and afterward we stopped at the Three Lions pub in Redmond. On all previous occasions I had tried to go in there the place was packed for a soccer game. This night however there was a man with a guitar, singing and it wasn't nearly as packed. I also found that near the bathrooms on the wall is what looks to be James Bond's jetpack.

On Sunday we went out to see Jeannie and Carl and see the renovations to Jeannie's place. We met up with them at the Fremont Market to which I hadn't been previously, and had a look around there before going back to Jeannie's to see the lovely work they'd done to her place. For dinner my parents took us out to the Melting Pot for my approaching birthday. It was fun having my parents up and I look forward to the next time they're here.

PermalinkCommentsfamily weekend

If It's Hip, It's Here: Craftsquatch Geeky Pillows & My Suite Stuff Adobe CS Pillows

2009 Aug 11, 7:36Its like favicons on pillows.
PermalinkCommentscute internet geek pillow favicon social shopping
Older Entries Creative Commons License Some rights reserved.