interface - Dave's Blog

Search

Win10 UWP WebView AddWebAllowedObject details

2017 Sep 4, 3:09

The x-ms-webview HTML element has the void addWebAllowedObject(string name, any value) method and the webview XAML element has the void AddWebAllowedObject(String name, Object value) method. The object parameter is projected into the webview’s top-level HTML document’s script engine as a new property on the global object with property name set to the name parameter. It is not injected into the current document but rather it is projected during initialization of the next top-level HTML document to which the webview navigates.

Lifetime

If AddWebAllowedObject is called during a NavigationStarting event handler the object will be injected into the document resulting from the navigation corresponding to that event.

If AddWebAllowedObject is called outside of the NavigationStarting event handler it will apply to the navigation corresponding to the next explicit navigate method called on the webview or the navigation corresponding to the next NavigationStarting event handler that fires, whichever comes first.

To avoid this potential race, you should use AddWebAllowedObject in one of two ways: 1. During a NavigationStarting event handler, 2. Before calling a Navigate method and without returning to the main loop.

If called both before calling a navigate method and in the NavigationStarting event handler then the result is the aggregate of all those calls.

If called multiple times for the same document with the same name the last call wins and the previous are silently ignored.

If AddWebAllowedObject is called for a navigation and that navigation fails or redirects to a different URI, the AddWebAllowedObject call is silently ignored.

After successfully adding an object to a document, the object will no longer be projected once a navigation to a new document occurs.

WinRT access

If AddWebAllowedObject is called for a document with All WinRT access then projection will succeed and the object will be added.

If AddWebAllowedObject is called for a document which has a URI which has no declared WinRT access via ApplicationContentUriRules then Allow for web only WinRT access is given to that document.

If the document has Allow for web only WinRT access then projection will succeed only if the object’s runtimeclass has the Windows.Foundation.Metadata.AllowForWeb metadata attribute.

Object requirements

The object must implement the IAgileObject interface. Because the XAML and HTML webview elements run on ASTA view threads and the webview’s content’s JavaScript thread runs on another ASTA thread a developer should not create their non-agile runtimeclass on the view thread. To encourage end developers to do this correctly we require the object implements IAgileObject.

Property name

The name parameter must be a valid JavaScript property name, otherwise the call will fail silently. If the name is already a property name on the global object, that property is overwritten if the property is configurable. Non-configurable properties on the global object are not overwritten and the AddWebAllowedObject call fails silently. On success, the projected property is writable, configurable, and enumerable.

Errors

Some errors as described above fail silently. Other issues, such as lack of IAgileObject or lack of the AllowForWeb attribute result in an error in the JavaScript developer console.

PermalinkComments

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 codepo8

2015 Mar 8, 9:44
Facemoji - face detection and overlay - http://facemoji.me/  - excellent user interface, too.
PermalinkComments

location.hash and location.search are bad and they should feel bad

2014 May 22, 9:25
The DOM location interface exposes the HTML document's URI parsed into its properties. However, it is ancient and has problems that bug me but otherwise rarely show up in the real world. Complaining about mostly theoretical issues is why blogging exists, so here goes:
  • The location object's search, hash, and protocol properties are all misnomers that lead to confusion about the correct terms:
    • The 'search' property returns the URI's query property. The query property isn't limited to containing search terms.
    • The 'hash' property returns the URI's fragment property. This one is just named after its delimiter. It should be called the fragment.
    • The 'protocol' property returns the URI's scheme property. A URI's scheme isn't necessarily a protocol. The http URI scheme of course uses the HTTP protocol, but the https URI scheme is the HTTP protocol over SSL/TLS - there is no HTTPS protocol. Similarly for something like mailto - there is no mailto wire protocol.
  • The 'hash' and 'search' location properties both return null in the case that their corresponding URI property doesn't exist or if its the empty string. A URI with no query property and a URI with an empty string query property that are otherwise the same, are not equal URIs and are allowed by HTTP to return different content. Similarly for the fragment. Unless the specific URI scheme defines otherwise, an empty query or hash isn't the same as no query or hash.
But like complaining about the number of minutes in an hour none of this can ever change without huge compat issues on the web. Accordingly I can only give my thanks to Anne van Kesteren and the awesome work on the URL standard moving towards a more sane (but still working practically within the constraints of compat) location object and URI parsing in the browser.
PermalinkComments

Welcome to TypeScript

2012 Oct 1, 6:41

TypeScript is a typed superset of JavaScript that adds interfaces, and type safety and compiles to JavaScript. In VS this means you get much better auto completion suggestions.  Watch the Channel9 video.

PermalinkCommentstechnical javascript typescript Microsoft programming programming-language

Newsroom: Miscellaneous: New Online Tool Gives Public Wider Access to Key U.S. Statistics

2012 Jul 28, 2:35

The U.S. Census Bureau today released a new online service that makes key demographic, socio-economic and housing statistics more accessible than ever before. The Census Bureau’s first-ever public Application Programming Interface (API) allows developers to design Web and mobile apps to explore or learn more about America’s changing population and economy.

PermalinkCommentstechnical api census statistics stats web restful rest

Native x86 Android runtime will enable Android apps on Windows

2011 May 26, 1:28This was on my todo list. I'll scratch it off knowing far more funded folks are doing this: "A startup called BlueStacks has developed an Android runtime environment for the Windows operating system. It will enable users to run Android applications alongside conventional Windows software on Microsoft's operating system." "One example would be a convertible netbook tablet that normally runs Windows but switches to an Android interface for greater touch-friendliness when the screen is flipped.
Such a product would offer the full power and multitasking capabilities of Windows but also benefit from having access to Android's broad touch-enabled software ecosystem."PermalinkCommentswindows programming android java technical

MSDN content is also available as a Web service - The Old New Thing - Site Home - MSDN Blogs

2010 Jul 26, 6:56"But in addition to all the views, you can go directly to the back-end that drives all the data: The MSDN/TechNet Publish System (MTPS) Content Service. With that interface, you can request the back-end data and format it any way you like."PermalinkCommentsmsdn web microsoft reference webservice technical

Schneier on Security: Alerting Users that Applications are Using Cameras, Microphones, Etc.

2010 May 24, 6:26"What You See is What They Get: Protecting users from unwanted use of microphones, cameras, and other sensors," by Jon Howell and Stuart Schechter.

"We introduce the sensor-access widget, a graphical user interface element that resides within an application's display. The widget provides an animated representation of the personal data being collected by its corresponding sensor, calling attention to the application's attempt to collect the data."

Not sure how well that scales...PermalinkCommentstechnical security privacy research

ADsafe

2010 May 6, 7:14"ADsafe defines a safe subset of the JavaScript Programming Language, and an interface that allows programs written in that language to usefully interact with a specific subtree of of the HTML document."PermalinkCommentstechnical ajax javascript json security advertising ad web browser web-sandbox

Code Standards | Isobar

2010 May 2, 3:14"This document contains normative guidelines for web applications built by the Interface Development practice of Isobar North America (previously Molecular)." Glad to see coding styles and best practices for HTML, CSS, JS, associated HTTP headers etc etc etcPermalinkCommentscode css html html5 javascript web browser programming development technical via:kris.kowal

Easy: Connect your RSS or Atom feed to Google Buzz

2010 Mar 12, 1:28

It was relatively easy, although still more difficult than I would have guessed, to hook my bespoke website's Atom feed up to Google Buzz. I already have a Google email account and associated profile so Buzz just showed up in my Gmail interface. Setting it up it offered to connect to my YouTube account or my Google Chat account but I didn't see an option to connect to an arbitrary RSS or Atom feed like I expected.

But of course hooking up an arbitrary Atom or RSS feed is documented. You hook it up in the same manner you claim a website as your own via the Google Profile (for some reason they want to ensure you own the feed connected to your Buzz account). You do this via Google's social graph API which uses XFN or FOAF. I used XFN by simply adding a link to my feed to my Google profile (And be sure to check the 'This is a profile page about me' which ensures that a rel="me" tag is added to the HTML on your profile. This is how XFN works.) And by adding a corresponding link in my feed back to my Google profile page with the following:

atom:link rel="me" href="http://www.google.com/profiles/david.risney"
I used this Google tool to check my XFN connections and when I checked back the next day my feed showed up in Google Buzz's configuration dialog.

So more difficult than I would have expected (more difficult than just an 'Add your feed' button and textbox) but not super difficult. And yet after reading this Buzz from DeWitt Clinton I feel better about opting-in to Google's Social API.

PermalinkCommentstechnical atom google buzz rss social

Dewey Music

2010 Jan 20, 2:52"DeweyMusic is a new interface for Archive.org's wonderful public domain music library. You can listen to, download, remix, and share anything you see on this site legally and for free."PermalinkCommentsdewey-music music audio ip public-domain internet free mp3

GL10 (Java Binding for the OpenGL ES(R) API)

2009 Dec 25, 6:15"The GL10 interface contains the Java(TM) programming language bindings for OpenGL(R) ES 1.0 core functionality."PermalinkCommentsprogramming java opengl android cellphone technical reference 3d

stamen design | big ideas worth pursuing

2009 Apr 23, 4:46Some lovely data visualizations. Is their Crimespotting visualization supposed to look like the map interface from GTA3SA? "Since 2001, Stamen has developed a reputation for beautiful and technologically sophisticated projects in a diverse range of commercial and cultural settings."PermalinkCommentsblog web art visualization information interactive interface portfolio mashup

s i x t h s e n s e - a wearable gestural interface (MIT Media Lab)

2009 Apr 3, 11:40"'SixthSense' is a wearable gestural interface that augments the physical world around us with digital information and lets us use natural hand gestures to interact with that information." The page is a lot easier to read with styling turned off. Actually, skip the text just watch the TED video.PermalinkCommentsvisualization design research mit hci mobile interactive ted

RFC 5514 - IPv6 over Social Networks

2009 Apr 1, 10:42Lol at actual Facebook app that does IPv6 over Facebook. "...most network users are not aware of what IPv6 is or are even afraid by IPv6 because it is unknown. On the other hand, Social Networks (like Facebook, LinkedIn, etc.) are well-known by users and the usage of those networks is huge... With IPv6 over Social Network (IPoSN): * Every user is a router with at least one loopback interface; * Every friend or connection between users will be used as a point-to-point link... A working prototype has been developed by the author and is freely available: IPv6 over Facebook Social Network [IPv6overFacebook]."PermalinkCommentshumor social network ipv6 ip iposn facebook ietf rfc

Notes on Creating Internet Explorer Extensions in C++ and COM

2009 Mar 20, 4:51

Working on Internet Explorer extensions in C++ & COM, I had to relearn or rediscover how to do several totally basic and important things. To save myself and possibly others trouble in the future, here's some pertinent links and tips.

First you must choose your IE extensibility point. Here's a very short list of the few I've used:

Once you've created your COM object that implements IObjectWithSite and whatever other interfaces your extensibility point requires as described in the above links you'll see your SetSite method get called by IE. You might want to know how to get the top level browser object from the IUnknown site object passed in via that method.

After that you may also want to listen for some events from the browser. To do this you'll need to:

  1. Implement the dispinterface that has the event you want. For instance DWebBrowserEvents2, or HTMLDocumentEvents, or HTMLWindowEvents2. You'll have to search around in that area of the documentation to find the event you're looking for.
  2. Register for events using AtlAdvise. The object you need to subscribe to depends on the events you want. For example, DWebBrowserEvents2 come from the webbrowser object, HTMLDocumentEvents come from the document object assuming its an HTML document (I obtained via get_Document method on the webbrowser), and HTMLWindowEvents2 come from the window object (which oddly I obtained via calling the get_script method on the document object). Note that depending on when your SetSite method is called the document may not exist yet. For my extension I signed up for browser events immediately and then listened for events like NavigateComplete before signing up for document and window events.
  3. Implement IDispatch. The Invoke method will get called with event notifications from the dispinterfaces you sign up for in AtlAdvise. Implementing Invoke manually is a slight pain as all the parameters come in as VARIANTs and are in reverse order. There's some ATL macros that may make this easier but I didn't bother.
  4. Call AtlUnadvise at some point -- at the latest when SetSite is called again and your site object changes.

If you want to check if an IHTMLElement is not visible on screen due how the page is scrolled, try comparing the Body or Document Element's client height and width, which appears to be the dimensions of the visible document area, to the element's bounding client rect which appears to be its position relative to the upper left corner of the visible document area. I've found this to be working for me so far, but I'm not positive that frames, iframes, zooming, editable document areas, etc won't mess this up.

Be sure to use pointers you get from the IWebBrowser/IHTMLDocument/etc. only on the thread on which you obtained the pointer or correctly marshal the pointers to other threads to avoid weird crashes and hangs.

Obtaining the HTML document of a subframe is slightly more complicated then you might hope. On the other hand this might be resolved by the new to IE8 method IHTMLFrameElement3::get_contentDocument

Check out Eric's IE blog post on IE extensibility which has some great links on this topic as well.

PermalinkCommentstechnical boring internet explorer com c++ ihtmlelement extension

Two Stanford students rethink the light switch - Nudge blog

2009 Feb 23, 11:04"...the two have designed what they are calling a SmartSwitch, which lets people know how much energy they are using, not through colors, but through tactile feedback."PermalinkCommentsecology ui interface hci energy light lightswitch

New Scientist Technology Blog: Dual-display e-book reader lets you flip pages naturally

2008 Jun 25, 2:50A few interesting interface ideas for a dual-display reading device.PermalinkCommentsvideo book interface ui
Older Entries Creative Commons License Some rights reserved.