lib.Frames

Frames are a major way to modularize the design of complex applications. Since pages presented in frames are independent of each other they can fail without impact on other pages. In addition preparing content in individual HTML files largely simplfies the workflow of content production.

This approach, however, has limitations:

To solve the last mentioned problem, we prevent frames form touch events by assigning a

pointer-events: none;
style. A wrapping div is used to capture the events instead. Captured events are collected by an InteractionMapper and distributed as synthesized mouse or touch events to the wrapped iframes.

Let's look at an example of two HTML IFrames embedded in this Doctest.


<div id="frameWrapper1">
    <iframe style="pointer-events: none;" src="examples/multitouch.html"></iframe>
</div>
<div id="frameWrapper2" style="padding: 4px">
    <iframe style="pointer-events: none;" src="examples/multitouch.html"></iframe>
</div>

The distribution of events is handled by the enclosing container. The container registers a InteractionMapper and provides adapter for iframes, that implement IInteractionTarget by sending programmatically generated events. If you test these frames on a multitouch device you will notice that the scatters within the frames can be manipulated independently of each other:

References