Patrick SchmitzSimon Thompson

Peter King

www.cs.kent.ac.uk/~sjt/PDXML/

Presentation Dynamism in XML

PDXML 2

Declarative style

What do we mean when we say that we use a declarative approach?

• Declarative programming encompasses logic and functional programming.

PDXML 3

Authors vs. programmers

In WWW circles declarative means something different: a markup style which gives an explicit description of an artefact. More succinctly,

declarative = non-programmed

Another way of saying this is that:

authors are not programmers

PDXML 4

Examples from SMIL / SVG

Examples from SMIL / SVG animation

<animateMotion from=“0,0” to “60,30” dur=“4s”>

<animateMotion path=“M50,125 C 100,25 150,225 …”>

Can also include attributes controllingrepeatCount rotate accelerate

fill end …

PDXML 5

Domain specific languages

You can see SVG, SMIL (and many other XML-based languages) as domain specific languages.

They give a little language for describing, say, graphical objects in a scalable (vector) format.

PDXML 6

What if a DSL is not enough?

• Embed the DSL in a programming language.• Haskell is a common substrate.• Java implements the Batik SVG toolkit.• Requires an author to be a programmer.

• Script extensions to the DSL (in JavaScript, …).• Scripts can manipulate the underlying Document Object Model.• Declarative model lost completely (worse than 1st model)

• Extend the declarative model as far as possible.

PDXML 7

Advantages of extension

Description remains at the domain level: easier for authors.

Higher-level descriptions can be exchanged between different tools etc.

Descriptions can be rendered in appropriate ways in different environments.

PDXML 8

Disadvantages of extension

It’s still a closed world …

… one analogy is with Turing (in)completeness;

… another is with a language like the LaTeX macros.

PDXML 9

Why is this of interest (to me)?

Looking at ideas that we take for granted, from a completely different perspective: that of ‘Joe author’ not ‘Simon functional programmer’.

How to integrate these into a widely-used system: Internet Explorer (PLS).

Potential impact on emerging standards: it would be nice to get these ideas into SVG 1.2 (and SMIL 3.0?).

PDXML 10

What extensions do we propose?

Attribute values can be calculated dynamically

User-defined events

Parameterized templates for document content

The inspiration comes from FP and FPR.

PDXML 11

Use cases for the additions

• Bubbles which rise through water• created at random points, with random size, at random times;• their speed of ascent is a function of their size;• when the bubbles hit the surface, they disappear with an audible ‘pop’.

• An animation which begins when it is scrolled into view; this can’t be pre-defined.

• A message which is layout-dependent: CSS styling etc. makes is non-predictable.

• Animated menu buttons: make children targets for animation, e.g colour, text, … .

PDXML 12

Expressions

Typed: numbers, booleans, character strings.

Library of mathematical functions, environment functions (current time, mouse position, etc.)

No user-defined functions.

Is ‘no functions’ too harsh? Could or should we include simple (e.g. non recursive) functions?

PDXML 13

Examples

<animate attributeName="width" dur="5s"

to="calc(main.width*0.8)" .../>

<animateMotion dur="5s"

from="calc(btn.x+btn.width),calc(btn.y)"

to="calc(content.x),calc(content.y)" …/>

<t:set attributeName="innerHtml"

to="calc((main.mouseY>(main.height/2))?

‘Lower’:‘Upper’)"/>

PDXML 14

When to calculate?

<animateMotion to="calc(target.x),

calc(target.y)" …/>

If you calculate at the start of the animation, it is like an arrow from a bow …

… if you repeatedly recalculate, then it is like a guided missile.

PDXML 15

When to calculate?

Four options:

1. parse-time: for static constants2. after layout complete: for values that depend

upon styles3. each time animation begins4. each sampling point.

All but 3: recalculate lazily: when and only when the value has (potentially) changed: signal this case (only).

PDXML 16

Implementation

Require the implementation to keep track of inter-value dependencies, and to propagate through effects of changing values.

PDXML 17

Events

An event is defined by a boolean expression.

It occurs when the expression becomes True; it occurs again only after• the predicate has taken the value False, or• the animation has been reset.

<event target="img1" type="enterView"

predicate="(img1.top + img1.height) <=

(main.scrollTop + main.scrollHeight)" />

PDXML 18

Event implementation

Fits straight into the model of calculation: recalculate at each point (where the expression might have changed).

PDXML 19

Templates and parameters

<template id=“bubble”>

<param name=“xOrigin” />

<param name=“size” />

<circle cx=“$ xOrigin” r=“$size” … >

<animate attributeName=“cy”

from=“100%” to=“10%”

dur=“calc((10-($size/2)),atStart)” />

</circle>

</template>

PDXML 20

Instances

<instance xlink:href=“#bubble”>

<param name=“xOrigin”

value=“calc(rand(0,100), atStart) />

<param name=“size” … />

</instance>

PDXML 21

Commentary

There’s a mechanism like this in SVG, but it doesn’t implement instantiation fully.

A ‘shadow DOM’ gives access to children of instances, but doesn’t instantiate them properly: e.g. these can’t be animated.

Need to introduce a proper mechanism for naming components of instances.

• A full solution would need to be at XML/DOM tool level.• We use instance.attribute; this works!

PDXML 22

Implementation details

Uses Internet Explorer 6 support for XHTML + SMIL: in particular the behavior mechanism.

Find calc(…), use JavaScript engine to give the result and then set the appropriate DOM values.

Can use DOM property mutation events to control evaluation.

Would be better to do it properly!

PDXML 23

Further work

Integration with SMIL timing.

Extend the scope of expression use.

Templates and the object model.