You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2878 lines
136 KiB
2878 lines
136 KiB
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
|
"http://www.w3.org/TR/html4/loose.dtd">
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
|
<title>SMIL Timesheets 1.0</title>
|
|
<link rel="stylesheet" href="style/spec.css" type="text/css">
|
|
<link rel="stylesheet" href="http://www.w3.org/StyleSheets/TR/W3C-WD.css"
|
|
type="text/css">
|
|
</head>
|
|
|
|
<body lang="en">
|
|
|
|
<div class="noprint" align="center">
|
|
<hr>
|
|
</div>
|
|
|
|
<div class="head">
|
|
<a href="http://www.w3.org/"><img height="48" width="72" alt="W3C"
|
|
src="http://www.w3.org/Icons/w3c_home"></a>
|
|
|
|
<h1 align="center">SMIL Timesheets 1.0</h1>
|
|
|
|
<h2 id="Working">W3C Working Draft 10 January 2008</h2>
|
|
<dl>
|
|
<dt>This version:</dt>
|
|
<dd><a
|
|
href="http://www.w3.org/TR/2008/WD-timesheets-20080110/">http://www.w3.org/TR/2008/WD-timesheets-20080110/</a></dd>
|
|
<dt>Latest version:</dt>
|
|
<dd><a
|
|
href="http://www.w3.org/TR/timesheets/">http://www.w3.org/TR/timesheets/</a></dd>
|
|
|
|
|
|
<!-- <dd><a href="http://www.w3.org/TR/2006/WD-SMIL3-20061204/">http://www.w3.org/TR/2006/WD-SMIL3-20061204/</a></dd>-->
|
|
<dt>Editors:</dt>
|
|
<dd>Petri Vuorimaa, TKK</dd>
|
|
<dd>Dick Bulterman, CWI</dd>
|
|
<dd>Pablo Cesar, CWI.</dd>
|
|
<!-- This section is optional and will be ignore during the publication
|
|
Do not use Headers H1, H2, H3 and DIV within this DIV class="ignore" section
|
|
-->
|
|
</dl>
|
|
<!--, <a
|
|
href="http://www.w3.org/TR/2007/WD-SMIL3-20070713/smil30.zip">zip archive</a> -->
|
|
|
|
<p class="copyright"><a
|
|
href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a>
|
|
© 2007 <a href="http://www.w3.org/"><acronym
|
|
title="World Wide Web Consortium">W3C</acronym></a><sup>®</sup> (<a
|
|
href="http://www.csail.mit.edu/"><acronym
|
|
title="Massachusetts Institute of Technology">MIT</acronym></a>, <a
|
|
href="http://www.ercim.org/"><acronym
|
|
title="European Research Consortium for Informatics and Mathematics">ERCIM</acronym></a>,
|
|
<a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
|
|
href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
|
|
<a
|
|
href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
|
|
and <a href="http://www.w3.org/Consortium/Legal/copyright-documents">document
|
|
use</a> rules apply.</p>
|
|
<hr>
|
|
</div>
|
|
|
|
<h2 id="Abstract"><a name="abstract">Abstract</a></h2>
|
|
|
|
<p>This document defines an XML timing language that makes SMIL 3.0 element
|
|
and attribute timing control available to a wide range of other XML
|
|
languages. This language allows SMIL timing to be integrated into a wide
|
|
variety of a-temporal languages, even when several such languages are
|
|
combined in a compound document. Because of its similarity with external
|
|
style and positioning descriptions in the Cascading Style Sheet (CSS)
|
|
language, this functionality has been termed <em>SMIL Timesheets</em>.</p>
|
|
|
|
<h2 id="Status"><a name="status">Status of this document</a></h2>
|
|
|
|
<p><em>This section describes the status of this document at the time of its
|
|
publication. Other documents may supersede this document. A list of current
|
|
W3C publications and the latest revision of this technical report can be
|
|
found in the <a href="http://www.w3.org/TR/">W3C technical reports index</a>
|
|
at http://www.w3.org/TR/.</em></p>
|
|
|
|
<p>This is a First Public Working Draft and Last Call Working Draft of a
|
|
possible future W3C Recommendation of the SMIL Timesheets 1.0. This document
|
|
has been produced by the <a href="http://www.w3.org/AudioVideo/Group/">SYMM
|
|
Working Group</a> as part of the <a href="http://www.w3.org/AudioVideo/">W3C
|
|
Synchronized Multimedia Activity</a>. The goals of the SYMM Working Group are
|
|
discussed in the <a
|
|
href="http://www.w3.org/AudioVideo/2004/symm-wg-charter20040903.html">SYMM
|
|
Working Group Charter</a>. The authors of this document are the SYMM Working
|
|
Group members. Different parts of the document have different editors.</p>
|
|
|
|
<p>This document was part of the SMIL 3.0 specification as the "<a
|
|
href="http://www.w3.org/TR/2007/WD-SMIL3-20070713/smil-timesheets.html">SMIL
|
|
3.0 External timing</a>" module, extending SMIL timing. It was removed from
|
|
the SMIL 3.0 specification at Candidate Recommandation phase in order to give
|
|
it more visibility as Timesheets allows integration of timing into a wide
|
|
range of other XML languages.</p>
|
|
|
|
<p>The <a href="http://www.w3.org/2005/10/Process-20051014/tr#last-call">Last
|
|
Call review period</a> for this document extends until 15 February 2008. The
|
|
public is invited to send comments or report errors on this document. Please
|
|
send them to the public mailing <a
|
|
href="mailto:www-smil@w3.org">www-smil@w3.org</a> - (<a
|
|
href="http://lists.w3.org/Archives/Public/www-smil/">public archives</a>)
|
|
including the prefix<code>'[Timesheets LC comment]'</code> in the subject
|
|
line.</p>
|
|
|
|
<p>Publication as a Working Draft does not imply endorsement by the W3C
|
|
Membership. This is a draft document and may be updated, replaced or
|
|
obsoleted by other documents at any time. It is inappropriate to cite this
|
|
document as other than work in progress.</p>
|
|
|
|
<p>This document was produced by a group operating under the <a
|
|
href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February 2004
|
|
W3C Patent Policy</a>. W3C maintains a <a rel="disclosure"
|
|
href="http://www.w3.org/2004/01/pp-impl/35663/status">public list of any
|
|
patent disclosures</a> made in connection with the deliverables of the group;
|
|
that page also includes instructions for disclosing a patent. An individual
|
|
who has actual knowledge of a patent which the individual believes contains
|
|
<a
|
|
href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
|
|
Claim(s)</a> must disclose the information in accordance with <a
|
|
href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
|
|
6 of the W3C Patent Policy</a>.</p>
|
|
|
|
<div class="noprint">
|
|
<h2 id="subtoc">Table of contents</h2>
|
|
<ul class="toc">
|
|
<li class="tocline2">
|
|
<div class="toc">
|
|
<ul>
|
|
<li><a href="#smilTimesheetsNS-Introduction">1 Introduction</a>
|
|
<ul>
|
|
<li><a href="#smilTimesheetsNS-Motivation">1.1 Motivation</a></li>
|
|
<li><a href="#smilTimesheetsNS-design">1.2 Design Rationale</a></li>
|
|
<li><a href="#smilTimesheetsNS-structure">1.3 Structure of the
|
|
Document</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#smilTimesheetsNS-Overview">2 Overview</a></li>
|
|
<li><a href="#smilTimesheetsNS-Basic">3 SMIL Timesheets Basic
|
|
Concepts</a>
|
|
<ul>
|
|
<li><a href="#smilTimesheetsNS-basicTiming">3.1 Timing and
|
|
Synchronization</a></li>
|
|
<li><a href="#smilTimesheetsNS-basicSelection">3.2 Selection
|
|
Mechanism</a></li>
|
|
<li><a href="#smilTimesheetsNS-basicEventModel">3.3 Event
|
|
Model</a></li>
|
|
<li><a href="#smilTimesheetsNS-basicIndex">3.4 Index
|
|
Functionality</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#smilTimesheetsNS-Elements">4 SMIL Timesheet Specific
|
|
Elements</a>
|
|
<ul>
|
|
<li><a href="#smilTimesheetsNS-Elements-Timesheet">4.1 The <span
|
|
class="edef">timesheet</span> element</a>
|
|
<ul>
|
|
<li><a
|
|
href="#smilTimesheetsNS-Elements-Timesheet-Attributes">Element
|
|
Attributes</a>
|
|
<ul>
|
|
<li><a
|
|
href="#smilTimesheetsNS-Elements-Timesheet-Attributes-Src">The
|
|
<span class="adef">src</span> Attribute</a></li>
|
|
<li><a
|
|
href="#smilTimesheetsNS-Elements-Timesheet-Attributes-Media">The
|
|
<span class="adef">media</span> Attribute</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a
|
|
href="#smilTimesheetsNS-Elements-Timesheet-Content">Element
|
|
Content</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#smilTimesheetsNS-Elements-Item">4.2 The <span
|
|
class="edef">item</span> element</a>
|
|
<ul>
|
|
<li><a
|
|
href="#smilTimesheetsNS-Elements-Item-Attributes">Element
|
|
Attributes</a>
|
|
<ul>
|
|
<li><a
|
|
href="#smilTimesheetsNS-Elements-Item-Attributes-Select">The
|
|
<span class="adef">select</span> Attribute</a></li>
|
|
<li><a
|
|
href="#smilTimesheetsNS-Elements-Item-Attributes-BeginInc">The
|
|
<span class="adef">beginInc</span> Attribute</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#smilTimesheetsNS-Elements-Item-Functions">Element
|
|
Functions</a>
|
|
<ul>
|
|
<li><a
|
|
href="#smilTimesheetsNS-Elements-Item-Functions-Index">The
|
|
Index() Function</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#smilTimesheetsNS-Elements-Item-Content">Element
|
|
Content</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#smilTimesheetsNS-Timing">5 SMIL Timing and
|
|
Synchronization Elements</a>
|
|
<ul>
|
|
<li><a href="#smilTimesheetsNS-Timing-Attributes">5.1
|
|
Attributes</a>
|
|
<ul>
|
|
<li><a href="#smilTimesheetsNS-Timing-Attributes-Begin">The
|
|
<span class="adef">begin</span> Attribute</a></li>
|
|
<li><a href="#smilTimesheetsNS-Timing-Attributes-Dur">The <span
|
|
class="adef">dur</span> Attribute</a></li>
|
|
<li><a href="#smilTimesheetsNS-Timing-Attributes-End">The <span
|
|
class="adef">end</span> Attribute</a></li>
|
|
<li><a href="#smilTimesheetsNS-Timing-Attributes-Fill">The
|
|
<span class="adef">fill</span> Attribute</a></li>
|
|
<li><a href="#smilTimesheetsNS-Timing-Attributes-Endsync">The
|
|
<span class="adef">endsync</span> Attribute</a></li>
|
|
<li><a
|
|
href="#smilTimesheetsNS-Timing-Attributes-RepeatCount">The
|
|
<span class="adef">repeatCount</span> Attribute</a></li>
|
|
<li><a href="#smilTimesheetsNS-Timing-Attributes-RepeatDur">The
|
|
<span class="adef">repeatDur</span> Attribute</a></li>
|
|
<li><a href="#smilTimesheetsNS-Timing-Attributes-First">The
|
|
<span class="adef">first</span> Attribute</a></li>
|
|
<li><a href="#smilTimesheetsNS-Timing-Attributes-Prev">The
|
|
<span class="adef">prev</span> Attribute</a></li>
|
|
<li><a href="#smilTimesheetsNS-Timing-Attributes-Next">The
|
|
<span class="adef">next</span> Attribute</a></li>
|
|
<li><a href="#smilTimesheetsNS-Timing-Attributes-Last">The
|
|
<span class="adef">last</span> Attribute</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#smilTimesheetsNS-Timing-Elements">5.2 Elements</a>
|
|
<ul>
|
|
<li><a href="#smilTimesheetsNS-Timing-Elements-Par">The <span
|
|
class="edef">par</span> Element</a></li>
|
|
<li><a href="#smilTimesheetsNS-Timing-Elements-Seq">The <span
|
|
class="edef">seq</span> Element</a></li>
|
|
<li><a href="#smilTimesheetsNS-Timing-Elements-Excl">The <span
|
|
class="edef">excl</span> Element</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#smilTimesheetsNS-Prefetch">6 Prefetch</a>
|
|
<ul>
|
|
<li><a href="#smilTimesheetsNS-Prefetch-Attributes">6.1
|
|
Attributes</a>
|
|
<ul>
|
|
<li><a
|
|
href="#smilTimesheetsNS-Prefetch-Attributes-MediaSize">The
|
|
<span class="adef">mediaSize</span> Attribute</a></li>
|
|
<li><a
|
|
href="#smilTimesheetsNS-Prefetch-Attributes-MediaTime">The
|
|
<span class="adef">mediaTime</span> Attribute</a></li>
|
|
<li><a
|
|
href="#smilTimesheetsNS-Prefetch-Attributes-Bandwidth">The
|
|
<span class="adef">bandwidth</span> Attribute</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#smilTimesheetsNS-Prefetch-Elements">6.2 Elements</a>
|
|
<ul>
|
|
<li><a href="#smilTimesheetsNS-Prefetch-Elements-Prefetch">The
|
|
<span class="edef">prefetch</span> Element</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#smilTimesheetsNS-Animation">7 Animation</a>
|
|
<ul>
|
|
<li><a href="#smilTimesheetsNS-Animation-Attributes">7.1
|
|
Attributes</a>
|
|
<ul>
|
|
<li><a
|
|
href="#smilTimesheetsNS-Animation-Attributes-AttributeName">The
|
|
<span class="adef">attributeName</span> Attribute</a></li>
|
|
<li><a
|
|
href="#smilTimesheetsNS-Animation-Attributes-AttributeType">The
|
|
<span class="adef">attributeType</span> Attribute</a></li>
|
|
<li><a href="#smilTimesheetsNS-Animation-Attributes-Values">The
|
|
<span class="adef">values</span> Attribute</a></li>
|
|
<li><a href="#smilTimesheetsNS-Animation-Attributes-From">The
|
|
<span class="adef">from</span> Attribute</a></li>
|
|
<li><a href="#smilTimesheetsNS-Animation-Attributes-To">The
|
|
<span class="adef">to</span> Attribute</a></li>
|
|
<li><a href="#smilTimesheetsNS-Animation-Attributes-By">The
|
|
<span class="adef">by</span> Attribute</a></li>
|
|
<li><a
|
|
href="#smilTimesheetsNS-Animation-Attributes-CalcMode">The
|
|
<span class="adef">calcMode</span> Attribute</a></li>
|
|
<li><a
|
|
href="#smilTimesheetsNS-Animation-Attributes-Accumulate">The
|
|
<span class="adef">accumulate</span> Attribute</a></li>
|
|
<li><a
|
|
href="#smilTimesheetsNS-Animation-Attributes-Additive">The
|
|
<span class="adef">additive</span> Attribute</a></li>
|
|
<li><a href="#smilTimesheetsNS-Animation-Attributes-Origin">The
|
|
<span class="adef">origin</span> Attribute</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#smilTimesheetsNS-Animation-Elements">7.2 Elements</a>
|
|
<ul>
|
|
<li><a href="#smilTimesheetsNS-Animation-Elements-Animate">The
|
|
<span class="edef">animate</span> Element</a></li>
|
|
<li><a href="#smilTimesheetsNS-Animation-Elements-Set">The
|
|
<span class="edef">set</span> Element</a></li>
|
|
<li><a
|
|
href="#smilTimesheetsNS-Animation-Elements-AnimateMotion">The
|
|
<span class="edef">animateMotion</span> Element</a></li>
|
|
<li><a
|
|
href="#smilTimesheetsNS-Animation-Elements-AnimateColor">The
|
|
<span class="edef">animateColor</span> Element</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#smilTimesheetsNS-Events">7 Event Model</a>
|
|
<ul>
|
|
<li><a href="#smilTimesheetsNS-Events-Internal">Internal
|
|
Events</a></li>
|
|
<li><a href="#smilTimesheetsNS-Events-User">User Events</a></li>
|
|
<li><a href="#smilTimesheetsNS-Events-Semantics">Event
|
|
Semantics</a></li>
|
|
<li><a href="#smilTimesheetsNS-Events-Index">Index Function</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#smilTimesheetsNS-CSS">8 Integration with CSS
|
|
Layout</a></li>
|
|
<li><a href="#Appendix">Appendix A. References</a>
|
|
<ul>
|
|
<li><a href="#refsNS-normative">E.1 Normative References</a></li>
|
|
<li><a href="#refsNS-informative">E.2 Informative
|
|
References</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#Appendix1">Appendix B. Acknowledgements</a></li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li class="tocline2"><a href="#q64" class="tocxref">8
|
|
Integration with CSS Layout</a></li>
|
|
<li class="tocline2"><a href="#references"
|
|
class="tocxref">Appendix A. References</a></li>
|
|
<li class="tocline2"><a href="#acknowledgements"
|
|
class="tocxref">Appendix B. Acknowledgements</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<h2 id="smilTimesheetsNS-Introduction"><a name="q2">1 Introduction</a></h2>
|
|
|
|
<div class="informative">
|
|
<p><em>This section is informative</em></p>
|
|
|
|
<p>This document defines an XML-based timing language that makes <a
|
|
href="http://www.w3.org/TR/SMIL3/">SMIL 3.0</a> element and attribute timing
|
|
control available to a wide range of other XML-based languages. This language
|
|
allows SMIL timing to be integrated into a wide variety of a-temporal
|
|
languages, even when several such languages are combined in a compound
|
|
document. Because of its similarity with external style and positioning
|
|
descriptions in the Cascading Style Sheet (CSS) language, this functionality
|
|
has been termed <em>SMIL Timesheets</em>.</p>
|
|
|
|
<p>SMIL Timesheets can be seen as a temporal counterpart of CSS. Whereas CSS
|
|
defines the spatial layout of the document and formatting of the
|
|
elements,SMIL Timesheets specify which elements are active at a certain
|
|
moment and what their temporal scope is within a document. And as with CSS,
|
|
SMIL Timesheets can be reused in multiple documents, which can provide a
|
|
common temporal framework for multimedia presentations with different
|
|
contents but identical storylines. The document can be shown in a user agent
|
|
even if SMIL Timesheets are not supported, since the contents and the layout
|
|
are still governed by the document itself. Of course, the temporal aspect of
|
|
the document is then lost, since all the elements are active all the time.</p>
|
|
|
|
<h3 id="smilTimesheetsNS-Motivation"><a name="q21">1.1 Motivation</a></h3>
|
|
|
|
<p>SMIL Timesheets allows the definition of out-of-line timing in conjunction
|
|
with non-SMIL languages including compound XML documents. To make authoring
|
|
easier, it contains only a limited subset of SMIL functionality.</p>
|
|
|
|
<p>SMIL Timesheets provides a temporal dimension to existing a-temporal web
|
|
documents, in the form of a external XML document. It can be used, for
|
|
example, for online slide shows or photo galleries. The following <span
|
|
class="inforef"><a href="#ref-TimesheetsTutorial" rel="biblioentry"
|
|
class="noxref"><span class="inforef">[TimesheetsTutorial]</span></a></span>
|
|
provides a number of examples together with an implementation of SMIL
|
|
Timesheets.</p>
|
|
|
|
<p>An alternative to Timesheets is XHTML+SMIL <span class="inforef"><a
|
|
href="#ref-XHTMLplusSMIL" rel="biblioentry" class="noxref"><span
|
|
class="inforef">[XHTMLplusSMIL]</span></a></span> which gives full SMIL
|
|
functionality as in-line in non-SMIL XML documents. On the other hand, SMIL
|
|
itself gives full SMIL functionality as in-line XML-based document.</p>
|
|
|
|
<h3 id="smilTimesheetsNS-design"><a name="q22">1.2 Design Rationale</a></h3>
|
|
|
|
<p>This section explains the design rationale behind Timesheets, its intended
|
|
use, and its relation to other XML-based languages.</p>
|
|
|
|
<p>XML-based compound documents need to define the structure of the document
|
|
and its content, the styling and layout of the document, and the user
|
|
interaction and internal logic. Where the structure and contents are defined
|
|
by the host language (XHTML) <span class="normref"><a href="#ref-XHTML"
|
|
rel="biblioentry" class="noxref"><span
|
|
class="normref">[XHTML]</span></a></span>, the styling and layout by
|
|
Stylesheets (CSS) <span class="normref"><a href="#ref-CSS2" rel="biblioentry"
|
|
class="noxref"><span class="normref">[CSS2]</span></a></span>, vector
|
|
graphics support by SVG <span class="normref"><a href="#ref-SVG"
|
|
rel="biblioentry" class="noxref"><span
|
|
class="normref">[SVG]</span></a></span>, and the user interaction and data
|
|
model by XForms <span class="normref"><a href="#ref-XForms" rel="biblioentry"
|
|
class="noxref"><span class="normref">[XForms]</span></a></span>. Timeshets is
|
|
a solution for providing timing control capabilities for such compound
|
|
documents. </p>
|
|
|
|
<table border="1">
|
|
<caption></caption>
|
|
<tbody>
|
|
<tr>
|
|
<td><strong><em>Topic</em></strong></td>
|
|
<td><strong><em>Technology</em></strong></td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>Structure</strong></td>
|
|
<td><strong>Host Language (XHTML)</strong> <span class="normref"><a
|
|
href="#ref-XHTML" rel="biblioentry" class="noxref"><span
|
|
class="normref">[XHTML]</span></a></span></td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>Layout and Styling</strong></td>
|
|
<td><strong>Stylesheets (CSS)</strong> <span class="normref"><a
|
|
href="#ref-CSS2" rel="biblioentry" class="noxref"><span
|
|
class="normref">[CSS2]</span></a></span></td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>Vector Graphics</strong></td>
|
|
<td><strong>SVG</strong> <span class="normref"><a href="#ref-SVG"
|
|
rel="biblioentry" class="noxref"><span
|
|
class="normref">[SVG]</span></a></span></td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>User Interaction and data model</strong></td>
|
|
<td><strong>XForms</strong> <span class="normref"><a href="#ref-XForms"
|
|
rel="biblioentry" class="noxref"><span
|
|
class="normref">[XForms]</span></a></span></td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>Timing</strong></td>
|
|
<td><strong>SMIL Timesheets</strong></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<p>Because the intention of Timesheets is to provide timing control
|
|
capabilities, they are based on the <a
|
|
href="http://www.w3.org/TR/SMIL3/smil-timing.html">SMIL 3.0 Timing and
|
|
Synchronization</a> modules with some restrictions and additional
|
|
attributes.</p>
|
|
|
|
<p>In addition to the <a
|
|
href="http://www.w3.org/TR/SMIL3/smil-timing.html">SMIL 3.0 Timing and
|
|
Synchronization</a> modules, SMIL Timesheets includes the <a
|
|
href="http://www.w3.org/TR/SMIL3/smil-content.html#ContentControlNS-PrefetchControl">SMIL
|
|
3.0 PrefetchControl</a> module and the <a
|
|
href="http://www.w3.org/TR/SMIL3/smil-animation.html">SMIL 3.0
|
|
BasicAnimation</a> module is used for controlling animations.</p>
|
|
|
|
<p>Moreover, SMIL Timesheets defines two new elements, not included in the <a
|
|
href="http://www.w3.org/TR/SMIL3/smil-timing.html">SMIL 3.0 Timing and
|
|
Synchronization modules: </a></p>
|
|
<ul>
|
|
<li><a href="#edef-timesheetsTimesheet" class="noxref"><span
|
|
class="einst-timesheetsTimesheet einst">timesheet</span></a></li>
|
|
<li><a href="#edef-timesheetsItem" class="noxref"><span
|
|
class="einst-timesheetsItem einst">item</span></a></li>
|
|
</ul>
|
|
|
|
<p>Finally, similary to CSS, SMIL Timesheets uses CSS selectors <span
|
|
class="normref"><a href="#ref-CSS2" rel="biblioentry" class="noxref"><span
|
|
class="normref">[CSS2]</span></a></span> for identifying the elements in the
|
|
web document to which apply timing control. </p>
|
|
|
|
<h3 id="smilTimesheetsNS-structure"><a name="q23">1.3 Structure of the
|
|
Document</a></h3>
|
|
|
|
<p>Firstly, an overview of the SMIL Timesheets is given in the <a
|
|
href="#smilTimesheetsNS-Overview">Overview</a> section. After that, the
|
|
normative definition of SMIL Timesheets is provided.</p>
|
|
|
|
<p>The normative definition starts with an introduction of the <a
|
|
href="#smilTimesheetsNS-Basic">basic concepts</a> behind SMIL Timesheets.
|
|
After that, the new elements <a
|
|
href="#edef-timesheetsTimesheet" class="noxref"><span
|
|
class="einst-timesheetsTimesheet einst">timesheet</span></a> and <a
|
|
href="#edef-timesheetsItem" class="noxref"><span
|
|
class="einst-timesheetsItem einst">item</span></a> and use of CSS selectors
|
|
are described in the <a href="#smilTimesheetsNS-Elements">SMIL Timesheet
|
|
Specific Elements</a> section. Then, the use of SMIL 3.0 Timing and
|
|
Synchronization modules is discussed in the <a
|
|
href="#smilTimesheetsNS-Timing">Timing and Synchronization</a> section. After
|
|
that, the <a href="#smilTimesheetsNS-Prefetch">Prefetch</a> section describes
|
|
how the SMIL 3.0 PrefetchControl is used. Next, <a
|
|
href="#smilTimesheetsNS-Animation">Animation</a> section covers the use of
|
|
SMIL 3.0 BasicAnimation module. Finally, integration with CSS layout is
|
|
discussed in the <a href="#smilTimesheetsNS-CSS">Integration with CSS
|
|
Layout</a> section.</p>
|
|
</div>
|
|
|
|
<h2 id="smilTimesheetsNS-Overview"><a name="q3">2 Overview</a></h2>
|
|
|
|
<div class="informative">
|
|
<p><em>This section is informative</em></p>
|
|
|
|
<div>
|
|
<p>The following example is a simple slide show. The SMIL Timesheet is
|
|
located in the head section. It is declared with the <a
|
|
href="#edef-timesheetsTimesheet" class="noxref"><span
|
|
class="einst-timesheetsTimesheet einst">timesheet</span></a> element, which
|
|
belongs to the smil namespace. In this example, the <a
|
|
href="#edef-timesheetsSeq" class="noxref"><span
|
|
class="einst-timesheetsSeq einst">seq</span></a> element is used for timing.
|
|
The <a href="#edef-timesheetsItem" class="noxref"><span
|
|
class="einst-timesheetsItem einst">item</span></a> elements contain
|
|
references to the body of the document and additional timing information. The
|
|
elements of the document body are selected using CSS selectors. In this
|
|
example, the id selectors (i.e., <code>"#Slide1"</code>,
|
|
<code>"#Slide2"</code>, and <code>"#Slide3"</code>) are used. Based on the
|
|
timing information a new slide is shown after five seconds.</p>
|
|
</div>
|
|
|
|
<div>
|
|
<pre class="example"><?xml version="1.0"?>
|
|
<html xmlns="http://www.w3.org/1999/xhtml"
|
|
xmlns:smil="http://www.w3.org/ns/SMIL30">
|
|
|
|
<head>
|
|
<title>Timesheet Example</title>
|
|
<smil:timesheet>
|
|
<smil:seq>
|
|
<smil:item select="#Slide1" dur="5s" />
|
|
<smil:item select="#Slide2" dur="5s" />
|
|
<smil:item select="#Slide3" dur="5s" />
|
|
</siml:seq>
|
|
</smil:timesheet>
|
|
</head>
|
|
|
|
<body>
|
|
<div xml:id ="Slide1" class="Slide">
|
|
<h1 xml:id="Title1">Timesheets</h1>
|
|
<ul>
|
|
<li xml:id="Bullet1_1" class="Bullet">Timesheets defines temporal dimension of documents</li>
|
|
<li xml:id="Bullet1_2" class="Bullet">Timesheets uses SMIL Timing and Synchronization primitives</li>
|
|
<li xml:id="Bullet1_3" class="Bullet">Timesheet is located in the head section of the document</li>
|
|
<li xml:id="Bullet1_4" class="Bullet">The body elements are selected using CSS selectors</li>
|
|
</ul>
|
|
</div>
|
|
<div xml:id ="Slide2" class="Slide">
|
|
<h1 xml:id="Title2">CSS Selectors</h1>
|
|
<ul>
|
|
<li xml:id="Bullet2_1" class="Bullet">Timesheets uses CSS selectors to reference body elements</li>
|
|
<li xml:id="Bullet2_2" class="Bullet">Id selector references individual elementst</li>
|
|
<li xml:id="Bullet2_3" class="Bullet">Other selectors can be used to match multiple elements</li>
|
|
<li xml:id="Bullet2_4" class="Bullet">For example, class selector matches all elements that belong to certain class</li>
|
|
</ul>
|
|
</div>
|
|
<div xml:id ="Slide3" class="Slide">
|
|
<h1 xml:id="Title3">Animations</h1>
|
|
<ul>
|
|
<li xml:id="Bullet3_1" class="Bullet">Timesheets includes also BasicAnimation module</li>
|
|
<li xml:id="Bullet3_2" class="Bullet">Supported elements are animate, set, animateMotion, and animateColor</li>
|
|
<li xml:id="Bullet3_3" class="Bullet">The animation can be defined with either values or from, to, and by attributes</li>
|
|
<li xml:id="Bullet3_4" class="Bullet">The target elements are referenced with CSS selectors</li>
|
|
</ul>
|
|
</div>
|
|
</body>
|
|
</html></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 id="smilTimesheetsNS-Basic"><a name="q300">3 SMIL Timesheets Basic
|
|
Concepts</a></h2>
|
|
|
|
<div class="normative">
|
|
<p><em>This section is normative.</em></p>
|
|
|
|
<p>This section defines the four basic concepts behind Timesheets:</p>
|
|
<ul>
|
|
<li><a href="#smilTimesheetsNS-basicTiming">Timing and
|
|
Synchronization</a></li>
|
|
<li><a href="#smilTimesheetsNS-basicSelection">Selection Mechanism</a></li>
|
|
<li><a href="#smilTimesheetsNS-basicEventModel">Event Model</a></li>
|
|
<li><a href="#smilTimesheetsNS-basicIndex">Index Functionality</a></li>
|
|
</ul>
|
|
|
|
<h3 id="smilTimesheetsNS-basicTiming"><a name="q302">3.1 Timing and
|
|
Synchronization</a></h3>
|
|
|
|
<p>SMIL Timesheets use five <a
|
|
href="http://www.w3.org/TR/SMIL3/smil-timing.html">SMIL 3.0 Timing and
|
|
Synchronization</a> modules:</p>
|
|
<ol>
|
|
<li><a
|
|
href="http://www.w3.org/TR/SMIL3/smil-timing.html#Timing-BasicInlineTiming-Module">BasicInlineTiming</a></li>
|
|
<li><a
|
|
href="http://www.w3.org/TR/SMIL3/smil-timing.html#Timing-EventTiming-Module">EventTiming</a></li>
|
|
<li><a
|
|
href="http://www.w3.org/TR/SMIL3/smil-timing.html#Timing-BasicTimeContainers-Module">BasicTimeContainers</a></li>
|
|
<li><a
|
|
href="http://www.w3.org/TR/SMIL3/smil-timing.html#Timing-BasicExclTimeContainers-Module">BasicExclTimeContainers</a></li>
|
|
<li><a
|
|
href="http://www.w3.org/TR/SMIL3/smil-timing.html#Timing-RepeatTiming-Module">RepeatTiming</a></li>
|
|
</ol>
|
|
|
|
<p>The timing semantics of SMIL Timesheets is based on the semantics of the
|
|
<a href="http://www.w3.org/TR/SMIL3/smil-timing.html">SMIL 3.0 Timing and
|
|
Synchronization</a> module. Host document's elements are set to
|
|
<code>"active"</code> and <code>"inactive"</code> following the semantics of
|
|
the defined time containers. In case of an element in the document that is
|
|
not referenced by the Timsheets, the element will be visible as dictated by
|
|
the stylesheet. By default the element will remain visible all the time.</p>
|
|
|
|
<p>The base time, or the <em>syncbase</em> of a <a
|
|
href="#edef-timesheetsTimesheet" class="noxref"><span
|
|
class="einst-timesheetsTimesheet einst">timesheet</span></a> element is the
|
|
moment when the element is started by its parent. Starting an element does
|
|
not necessarily make the referenced media element visible. Rather, it sets
|
|
the time moment <code>"0s"</code>, to which the element's attributes are
|
|
compared.</p>
|
|
|
|
<p>The syncbase of the child elements of a time container is dependent on the
|
|
type of the container. The children of <a
|
|
href="#edef-timesheetsPar" class="noxref"><span
|
|
class="einst-timesheetsPar einst">par</span></a> and <a
|
|
href="#edef-timesheetsExcl" class="noxref"><span
|
|
class="einst-timesheetsExcl einst">excl</span></a> elements have the starting
|
|
time of their parent as their syncbase. The children of the <a
|
|
href="#edef-timesheetsSeq" class="noxref"><span
|
|
class="einst-timesheetsSeq einst">seq</span></a> element consider the end
|
|
time of preceding child as their syncbase. This time is resolved only at the
|
|
moment the preceding child ends.</p>
|
|
|
|
<div class="informative">
|
|
<p><em>This section is informative.</em></p>
|
|
|
|
<p><a href="#smilTimesheetsNS-BasicTimesheets-timesemantics">Figure 1</a>
|
|
shows a simple example of the semantics of a timesheet. A parallel time
|
|
container has two children, which are <a
|
|
href="#edef-timesheetsItem" class="noxref"><span
|
|
class="einst-timesheetsItem einst">item</span></a> elements referencing two
|
|
media elements. When the <a href="#edef-timesheetsPar"
|
|
class="noxref"><span class="einst-timesheetsPar einst">par</span></a> is
|
|
started, it activates both its children with the current time as their
|
|
syncbase. The media elements referenced by the children are not activated
|
|
yet. At time moment <em>1s</em>, the media element <em>item1</em> is
|
|
activated, according to the begin value of the referencing <a
|
|
href="#edef-timesheetsTimesheet" class="noxref"><span
|
|
class="einst-timesheetsTimesheet einst">timesheet</span></a> element. At
|
|
<em>2s</em>, the <em>item2</em> is activated. At <em>3s</em>, the duration of
|
|
<em>item1</em> runs out, so it is stopped and the corresponding timesheet
|
|
element deactivates itself. At <em>4s</em>, the parent container stops
|
|
according to its duration attribute, stopping all of its active children.</p>
|
|
|
|
<p><img src="Images/time_semantics.png" alt="Time semantics"></p>
|
|
|
|
<p id="smilTimesheetsNS-BasicTimesheets-timesemantics">Figure 1: Timeline of
|
|
a Timesheets</p>
|
|
</div>
|
|
|
|
<p>The duration of an element is primarily defined by the <a
|
|
href="#adef-timesheetsDur" class="noxref"><span
|
|
class="ainst-timesheetsDur ainst">dur</span></a> attribute. If the element is
|
|
not stopped prematurely, due to an event or scheduling of its parent, the <a
|
|
href="#adef-timesheetsDur" class="noxref"><span
|
|
class="ainst-timesheetsDur ainst">dur</span></a> attribute tells the overall
|
|
duration of the element. The element will not stop until this duration has
|
|
passed, and will not stay active longer than this duration. The value of the
|
|
<a href="#adef-timesheetsDur" class="noxref"><span
|
|
class="ainst-timesheetsDur ainst">dur</span></a> attribute will prevail:</p>
|
|
<ul>
|
|
<li>when the sum of the durations of the children of a time container
|
|
extends the value of the attribute;</li>
|
|
<li>when the implicit duration of the media elements, like audio or video
|
|
is longer than the specified duration;</li>
|
|
<li>when the <a href="#adef-timesheetsRepeatCount"
|
|
class="noxref"><span
|
|
class="ainst-timesheetsRepeatCount ainst">repeatCount</span></a> or <a
|
|
href="#adef-timesheetsRepeatDur" class="noxref"><span
|
|
class="ainst-timesheetsRepeatDur ainst">repeatDur</span></a> attributes
|
|
extend the duration of a media element to be longer than the specified
|
|
duration.</li>
|
|
</ul>
|
|
|
|
<p>If the duration is not set, the duration of an element depends on the type
|
|
of the referenced elements, or the durations of the children. The timesheet
|
|
items can reference to discrete and continuous elements in the document. The
|
|
intrisic duration of an <a href="#edef-timesheetsItem"
|
|
class="noxref"><span class="einst-timesheetsItem einst">item</span></a>
|
|
element referencing a discrete media element is <code>"0s"</code>. But, the
|
|
default <a href="#adef-timesheetsFill" class="noxref"><span
|
|
class="ainst-timesheetsFill ainst">fill</span></a> behaviour is
|
|
<code>"freeze"</code>. Continuous media elements have their own durations,
|
|
which will be also used as the duration of the timesheet element. The default
|
|
duration of the time container depends on the duration of their children. By
|
|
default, a time container ends when the last scheduled child ends. By default
|
|
the <a href="#adef-timesheetsBegin" class="noxref"><span
|
|
class="ainst-timesheetsBegin ainst">begin</span></a> attibute of a children
|
|
of a <a href="#edef-timesheetsSeq" class="noxref"><span
|
|
class="einst-timesheetsSeq einst">seq</span></a> and a <a
|
|
href="#edef-timesheetsPar" class="noxref"><span
|
|
class="einst-timesheetsPar einst">par</span></a> time containers is
|
|
<code>"0s"</code>. On the other hand, the <a
|
|
href="#adef-timesheetsBegin" class="noxref"><span
|
|
class="ainst-timesheetsBegin ainst">begin</span></a> attribute of a children
|
|
of a <a href="#edef-timesheetsExcl" class="noxref"><span
|
|
class="einst-timesheetsExcl einst">excl</span></a> time container is
|
|
<code>"indefinite"</code>.</p>
|
|
|
|
<h3 id="smilTimesheetsNS-basicSelection"><a name="q301">3.2 Selection
|
|
Mechanism</a></h3>
|
|
|
|
<p>The <a href="#edef-timesheetsItem" class="noxref"><span
|
|
class="einst-timesheetsItem einst">item</span></a> target element references
|
|
elements in the document host language(s). It is the mechanism SMIL
|
|
Timesheets uses to select the elements in the host language that will be
|
|
timed.</p>
|
|
|
|
<p>The <a href="#edef-timesheetsItem" class="noxref"><span
|
|
class="einst-timesheetsItem einst">item</span></a> can reference a media
|
|
element in the host language or a set of elements by the element's tag, id or
|
|
class. If follows the syntax and processing mechanism of the <a
|
|
href="http://www.w3.org/TR/REC-CSS2/selector.html">CSS Selectors</a>.</p>
|
|
|
|
<p>The CSS selector can match more than one element in the document host
|
|
language, for example, when CSS class selector is used. When multiple
|
|
matching occur, a sequence of elements that all match exactly the <a
|
|
href="#edef-timesheetsItem" class="noxref"><span
|
|
class="einst-timesheetsItem einst">item</span></a> element is constructed.
|
|
This sequence is ordered following the host document's order and the
|
|
selection mechanism will consider the elements as ordered in such list. Thus,
|
|
one <a href="#edef-timesheetsItem" class="noxref"><span
|
|
class="einst-timesheetsItem einst">item</span></a> element can reference
|
|
multiple host language elements at the same time.</p>
|
|
|
|
<div class="informative">
|
|
<p><em>This section is informative.</em></p>
|
|
|
|
<p>In the following example, an <a href="#edef-timesheetsItem"
|
|
class="noxref"><span class="einst-timesheetsItem einst">item</span></a>
|
|
element contains <a href="#edef-timesheetsSeq"
|
|
class="noxref"><span class="einst-timesheetsSeq einst">seq</span></a> time
|
|
container and further another <a href="#edef-timesheetsItem"
|
|
class="noxref"><span class="einst-timesheetsItem einst">item</span></a>
|
|
element.</p>
|
|
|
|
<div>
|
|
<pre class="example"><smil:timesheet>
|
|
<smil:seq>
|
|
<smil:item xml:id="first" select=".Slide" dur="7s">
|
|
<smil:seq>
|
|
<smil:item xml:id="second" select=".Bullet" dur="1s" />
|
|
</smil:seq>
|
|
</smil:item>
|
|
</smil:seq>
|
|
</smil:timesheet></pre>
|
|
</div>
|
|
|
|
<p>The "first" <a href="#edef-timesheetsItem"
|
|
class="noxref"><span class="einst-timesheetsItem einst">item</span></a>
|
|
element selects one slide at a time and shows each slide for 7 seconds.
|
|
Within each slide the "second" <a href="#edef-timesheetsItem"
|
|
class="noxref"><span class="einst-timesheetsItem einst">item</span></a>
|
|
element selects each bullet and shows it for 1 second.</p>
|
|
|
|
<p><img src="Images/time_nested_items.png" alt="Nested items"></p>
|
|
|
|
<p id="smilTimesheetsNS-BasicTimesheets-nesteditems">Figure 1: Item Selection
|
|
Process for Nested Items</p>
|
|
|
|
<p>The item selection process of the above example is depicted in the <a
|
|
href="#smilTimesheetsNS-BasicTimesheets-nesteditems">Figure 1</a>. The left
|
|
side of the figure shows the timesheet as a tree, while the right side
|
|
presents the body of the host document also as a tree. As the figure shows,
|
|
the "first" item element selects the slides by using the ".Slide" CSS class
|
|
selector. The selector matches all the div elements of the host document
|
|
body, since they have the class attribute set to "Slide". Thus, three slides
|
|
are shown in sequential order.</p>
|
|
|
|
<p>The "second" item elements uses the ".Bullet" CSS class selector to select
|
|
all the bullets of the presentation. However, the scope of the selection is
|
|
limited by the first item element. WIthin the first slide, the CSS selector
|
|
can match only the descendants of the div element "Slide1". Similarly within
|
|
the second slide, the CSS selector can match only the descendants of the div
|
|
element "Slide2". The same applies also to the third slide.</p>
|
|
</div>
|
|
|
|
<h3 id="smilTimesheetsNS-basicEventModel"><a name="q303">3.3 Event
|
|
Model</a></h3>
|
|
|
|
<p>The <a href="#adef-timesheetsBegin" class="noxref"><span
|
|
class="ainst-timesheetsBegin ainst">begin</span></a>, <a
|
|
href="#adef-timesheetsDur" class="noxref"><span
|
|
class="ainst-timesheetsDur ainst">dur</span></a>, and <a
|
|
href="#adef-timesheetsEnd" class="noxref"><span
|
|
class="ainst-timesheetsEnd ainst">end</span></a> attributes can contain
|
|
references to DOM events <span class="inforef"><a href="#ref-DOM2Events"
|
|
rel="biblioentry" class="noxref"><span
|
|
class="inforef">[DOM2Events]</span></a></span>. DOM events can be triggered
|
|
by user interaction or by some other event in the document. Events are
|
|
divided into two distinct groups: internal events and user events.</p>
|
|
|
|
<p>Internal events are dispatched from within the timesheets. They can be
|
|
used by other elements in the timesheet to create relations between different
|
|
parts of the timeline. The events specified are <code>beginEvent</code>
|
|
event, which is dispatched when an element starts and <code>endEvent</code>
|
|
event, which is dispatched when an element stops. User events are triggered
|
|
by user actions.</p>
|
|
|
|
<p>A <a href="#edef-timesheetsTimesheet" class="noxref"><span
|
|
class="einst-timesheetsTimesheet einst">timesheet</span></a> element is set
|
|
to listen to a certain event by specifying the event's target and type by
|
|
either the <a href="#adef-timesheetsBegin"
|
|
class="noxref"><span class="ainst-timesheetsBegin ainst">begin</span></a>, <a
|
|
href="#adef-timesheetsDur" class="noxref"><span
|
|
class="ainst-timesheetsDur ainst">dur</span></a>, or <a
|
|
href="#adef-timesheetsEnd" class="noxref"><span
|
|
class="ainst-timesheetsEnd ainst">end</span></a> attributes. When specified
|
|
by the <a href="#adef-timesheetsBegin" class="noxref"><span
|
|
class="ainst-timesheetsBegin ainst">begin</span></a> attribute, an inactive
|
|
or started but not yet activated element will be activated when it receives
|
|
the specified event. The parent time containers and item elements have to be
|
|
active, though.</p>
|
|
|
|
<p>When the element is specified to stop according to an event, the element
|
|
informs its parent that it has stopped and parent then decides what should
|
|
happen next. Of course, some other element could be waiting to be activated
|
|
according to the <code>endEvent</code> event from the particular element.</p>
|
|
|
|
<h3 id="smilTimesheetsNS-basicIndex"><a name="q304">3.4 Index
|
|
Functionality</a></h3>
|
|
|
|
<p>As defined in the <a href="#smilTimesheetsNS-basicSelection">Selection
|
|
Mechanism</a> section, when multiple elements in the host document match
|
|
multiple items, an ordered list of item elements is constructed following the
|
|
document order. In case only one element matches the list will include one
|
|
element and if there are no matches the list will be empty. SMIL Timesheets
|
|
provide a way to identify each of the elements by using the <a
|
|
href="#smilTimesheetsNS-Elements-Item-Functions-Index"><code>index()</code></a>
|
|
function. Thus, the <a
|
|
href="#smilTimesheetsNS-Elements-Item-Functions-Index"><code>index()</code></a>
|
|
function becomes a shortcut to each of the elements composing the ordered
|
|
list and provide index numbers for the <code>DOMActivate</code> event
|
|
references in the Timesheets.</p>
|
|
|
|
<div class="informative">
|
|
<p><em>This section is informative.</em></p>
|
|
|
|
<p>The following example gives an example on how the <a
|
|
href="#smilTimesheetsNS-Elements-Item-Functions-Index"><code>index()</code></a>
|
|
function works. The example is an image show, which consist of images and
|
|
corresponding thumbnail images. The thumbnail images can be used to select an
|
|
individual image for viewing. Only one image is shown at a time.</p>
|
|
|
|
<div>
|
|
<pre class="example"><html xmlns="http://www.w3.org/1999/xhtml"
|
|
xmlns:smil="http://www.w3.org/ns/SMIL30">
|
|
<head>
|
|
<title>Timesheet Example</title>
|
|
<smil:timesheet>
|
|
<smil:par>
|
|
|
|
<smil:excl>
|
|
<smil:item select="#Image1" begin="Thumbnail1.DOMActivate" />
|
|
<smil:item select="#Image2" begin="Thumbnail2.DOMActivate" />
|
|
<smil:item select="#Image3" begin="Thumbnail3.DOMActivate" />
|
|
<smil:item select="#Image4" begin="Thumbnail4.DOMActivate" />
|
|
<smil:item select="#Image5" begin="Thumbnail5.DOMActivate" />
|
|
|
|
</smil:excl>
|
|
<smil:par>
|
|
<smil:item select="#Thumbnail1" />
|
|
<smil:item select="#Thumbnail2" />
|
|
<smil:item select="#Thumbnail3" />
|
|
<smil:item select="#Thumbnail4" />
|
|
|
|
<smil:item select="#Thumbnail5" />
|
|
</smil:par>
|
|
</smil:par>
|
|
</smil:timesheet>
|
|
</head>
|
|
<body>
|
|
|
|
<img alt="image1" src="Image1.jpg" class="Image" xml:id="Image1" />
|
|
<img alt="image2" src="Image2.jpg" class="Image" xml:id="Image2" />
|
|
<img alt="image3" src="Image3.jpg" class="Image" xml:id="Image3" />
|
|
<img alt="image4" src="Image4.jpg" class="Image" xml:id="Image4" />
|
|
<img alt="image5" src="Image5.jpg" class="Image" xml:id="Image5" />
|
|
<br />
|
|
|
|
<button class="Thumbnail" xml:id="Thumbnail1">
|
|
<img src="Thumbnail1.jpg" />
|
|
</button>
|
|
<button class="Thumbnail" xml:id="Thumbnail2">
|
|
<img src="Thumbnail2.jpg" />
|
|
</button>
|
|
|
|
<button class="Thumbnail" xml:id="Thumbnail3">
|
|
<img src="Thumbnail3.jpg" />
|
|
</button>
|
|
<button class="Thumbnail" xml:id="Thumbnail4">
|
|
<img src="Thumbnail4.jpg" />
|
|
</button>
|
|
|
|
<button class="Thumbnail" xml:id="Thumbnail5">
|
|
<img src="Thumbnail5.jpg" />
|
|
</button>
|
|
</body>
|
|
</html></pre>
|
|
</div>
|
|
|
|
<p>In the above example, the body of the HTML file consists of five pictures
|
|
and five buttons, which contain thumbnails of the same images. The idea is to
|
|
show one image at a time. The image to be shown is selected by the thumbnail
|
|
buttons. Therefore, the timesheets consist of one <a
|
|
href="#edef-timesheetsPar" class="noxref"><span
|
|
class="einst-timesheetsPar einst">par</span></a> time container, which
|
|
contains one <a href="#edef-timesheetsExcl"
|
|
class="noxref"><span class="einst-timesheetsExcl einst">excl</span></a> and
|
|
another <a href="#edef-timesheetsPar" class="noxref"><span
|
|
class="einst-timesheetsPar einst">par</span></a> time container. Within the
|
|
<a href="#edef-timesheetsExcl" class="noxref"><span
|
|
class="einst-timesheetsExcl einst">excl</span></a> time container the <a
|
|
href="#edef-timesheetsItem" class="noxref"><span
|
|
class="einst-timesheetsItem einst">item</span></a> elements select the
|
|
images, while the <a href="#edef-timesheetsItem"
|
|
class="noxref"><span class="einst-timesheetsItem einst">item</span></a>
|
|
elements within the second <a href="#edef-timesheetsPar"
|
|
class="noxref"><span class="einst-timesheetsPar einst">par</span></a> time
|
|
container select the individual thumbnail buttons. <code>DOMActivate</code>
|
|
events cause the <a href="#edef-timesheetsExcl"
|
|
class="noxref"><span class="einst-timesheetsExcl einst">excl</span></a> time
|
|
container to change the shown image according to which button was pushed.</p>
|
|
|
|
<p>The problem with the above example is that each time the host document is
|
|
changed, for example, by changing an image, deleting an image, or adding a
|
|
new image, the Timesheet has to be updated. Therefore, the Timesheet is not
|
|
reusable. The main problem lies in the references to the
|
|
<code>DOMActive</code> events, because the index numbers have to be updated
|
|
everytime a modification in the host document occurs. Thus, there is need to
|
|
automatically generate the index numbers for the <code>DOMActivate</code>
|
|
event references in the Timesheets. The <a
|
|
href="#smilTimesheetsNS-Elements-Item-Functions-Index"><code>index()</code></a>
|
|
function can be used exactly for this purpose. In the Timesheet below, the <a
|
|
href="#smilTimesheetsNS-Elements-Item-Functions-Index"><code>index()</code></a>
|
|
function is used within the <a href="#adef-timesheetsBegin"
|
|
class="noxref"><span class="ainst-timesheetsBegin ainst">begin</span></a>
|
|
attribute of <a href="#edef-timesheetsItem"
|
|
class="noxref"><span class="einst-timesheetsItem einst">item</span></a>
|
|
element, which selects the images within the <a
|
|
href="#edef-timesheetsExcl" class="noxref"><span
|
|
class="einst-timesheetsExcl einst">excl</span></a> time container.</p>
|
|
|
|
<div>
|
|
<pre class="example"><smil:timesheet>
|
|
<smil:par>
|
|
<smil:excl>
|
|
<smil:item select=".Image" begin="index(Thumbnail).DOMActivate" />
|
|
</smil:excl>
|
|
<smil:par>
|
|
|
|
<smil:item select=".Thumbnail" />
|
|
</smil:par>
|
|
</smil:par>
|
|
</smil:timesheet></pre>
|
|
</div>
|
|
|
|
<p>The <a
|
|
href="#smilTimesheetsNS-Elements-Item-Functions-Index"><code>index()</code></a>function
|
|
adds the index number to the Thumbnail parameter (e.g.,
|
|
<code>Thumbnail0.DOMActivate</code>, <code>Thumbnail1.DOMActivate</code>,
|
|
etc.) in the <a href="#adef-timesheetsBegin"
|
|
class="noxref"><span class="ainst-timesheetsBegin ainst">begin</span></a>
|
|
attribute. Therefore, one <code>".Image"</code> class selector can be used in
|
|
the <a href="#adef-timesheetsSelect" class="noxref"><span
|
|
class="ainst-timesheetsSelect ainst">select</span></a> attribute instead of
|
|
severall id selectors. The main advantage of this is that changing the order
|
|
of images, deleting images, or adding new images does not any longer require
|
|
updating the Timesheet. Thus, the Timesheets is now much more reusable.</p>
|
|
|
|
<p>However, the Timesheets can be written in even more compact format. As
|
|
defined in the <a href="#smilTimesheetsNS-basicTiming">Timing and
|
|
Synchronization</a> section, when an element in the host language does not
|
|
match any <a href="#edef-timesheetsItem" class="noxref"><span
|
|
class="einst-timesheetsItem einst">item</span></a> in the Timesheet, the
|
|
element will remain visible all the time. Since all the thumbnail images in
|
|
buttons are allways shown, the second <a
|
|
href="#edef-timesheetsPar" class="noxref"><span
|
|
class="einst-timesheetsPar einst">par</span></a> is actually unnecessary.
|
|
When it is removed, also the first <a
|
|
href="#edef-timesheetsPar" class="noxref"><span
|
|
class="einst-timesheetsPar einst">par</span></a> time container becomes
|
|
unnecessary. Therefore, the most simple Timesheets for this use case is as
|
|
follows.</p>
|
|
|
|
<div>
|
|
<pre class="example"><smil:timesheet>
|
|
<smil:excl>
|
|
<smil:item select=".Image" begin="index(Thumbnail).DOMActivate" />
|
|
</smil:excl>
|
|
</smil:timesheet></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 id="smilTimesheetsNS-Elements"><a name="q4">4 SMIL Timesheet Specific
|
|
Elements</a></h2>
|
|
|
|
<div class="normative">
|
|
<p><em>This section is normative.</em></p>
|
|
|
|
<p>This section defines the new <a
|
|
href="#edef-timesheetsTimesheet" class="noxref"><span
|
|
class="einst-timesheetsTimesheet einst">timesheet</span></a> and <a
|
|
href="#edef-timesheetsItem" class="noxref"><span
|
|
class="einst-timesheetsItem einst">item</span></a> elements and their
|
|
attributes.</p>
|
|
|
|
<h3 id="smilTimesheetsNS-Elements-Timesheet">4.1 The <a
|
|
name="edef-timesheetsTimesheet"><span class="edef">timesheet</span></a>
|
|
element</h3>
|
|
|
|
<p>The <a href="#edef-timesheetsTimesheet"
|
|
class="noxref"><span
|
|
class="einst-timesheetsTimesheet einst">timesheet</span></a> element is
|
|
located in the head section of the document. It defines a parent container
|
|
for other SMIL Timesheet elements.</p>
|
|
|
|
<h4 id="smilTimesheetsNS-Elements-Timesheet-Attributes"><a name="q6">Element
|
|
Attributes</a></h4>
|
|
|
|
<p>The <a href="#edef-timesheetsTimesheet"
|
|
class="noxref"><span
|
|
class="einst-timesheetsTimesheet einst">timesheet</span></a> element defines
|
|
two attributes: <a href="#adef-timesheetsSrc"
|
|
class="noxref"><span class="ainst-timesheetsSrc ainst">src</span></a> and <a
|
|
href="#adef-timesheetsMedia" class="noxref"><span
|
|
class="ainst-timesheetsMedia ainst">media</span></a>.</p>
|
|
|
|
<h5 id="smilTimesheetsNS-Elements-Timesheet-Attributes-Src">The <a
|
|
name="adef-timesheetsSrc"><span class="adef">src</span></a> Attribute</h5>
|
|
|
|
<p>The <a href="#adef-timesheetsSrc" class="noxref"><span
|
|
class="ainst-timesheetsSrc ainst">src</span></a> attribute tells the location
|
|
of an external timesheet. With this attribute a common timesheet can be
|
|
reused in multiple documents. The attribute must contain a valid URI.</p>
|
|
|
|
<div class="informative">
|
|
<p><em>This section is informative</em></p>
|
|
|
|
<div>
|
|
<p>The following example shows how the timing information can be provided as
|
|
an external document.</p>
|
|
</div>
|
|
|
|
<div>
|
|
<pre class="example">--- example.xhtml ----
|
|
<?xml version="1.0"?>
|
|
<html xmlns="http://www.w3.org/1999/xhtml"
|
|
xmlns:smil="http://www.w3.org/ns/SMIL30">
|
|
|
|
<head>
|
|
<title>Timesheet Example (External Document)</title>
|
|
<smil:timesheet src="./timesheet.smil" />
|
|
</head>
|
|
--- ---
|
|
|
|
--- timesheet.smil ---
|
|
<?xml version="1.0"?>
|
|
|
|
<smil:timesheet xmlns:smil="http://www.w3.org/ns/SMIL30">
|
|
<smil:seq>
|
|
<smil:item select="#Slide1" dur="5s" />
|
|
<smil:item select="#Slide2" dur="5s" />
|
|
<smil:item select="#Slide3" dur="5s" />
|
|
</smil:seq>
|
|
</smil:timesheet>
|
|
--- ---</pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="informative">
|
|
<p><em>This section is informative</em></p>
|
|
|
|
<div>
|
|
<p>In non-XML markup languages, the link element can be used to reference an
|
|
external timesheet document. In the following example, a HTML document
|
|
contains a reference to external timesheet.smil document.</p>
|
|
<pre class="example"><!doctype html public "-//W3C//DTD HTML 4.01//EN">
|
|
<html>
|
|
<head>
|
|
<link href="timesheet.smil" rel="timesheet" type="application/smil+xml">
|
|
</head>
|
|
</html></pre>
|
|
</div>
|
|
|
|
<p>The language designers of the non-XML host language language should define
|
|
what the different attributes of the link element mean. For example, the HTML
|
|
language should define the timesheet link type.</p>
|
|
</div>
|
|
|
|
<h5 id="smilTimesheetsNS-Elements-Timesheet-Attributes-Media">The <a
|
|
name="adef-timesheetsMedia"><span class="adef">media</span></a> Attribute</h5>
|
|
|
|
<p>The <a href="#adef-timesheetsMedia" class="noxref"><span
|
|
class="ainst-timesheetsMedia ainst">media</span></a> attribute is used for
|
|
selecting the most suitable timesheet for the current media device. It works
|
|
in the same way as the @media rule in the CSS stylesheets <span
|
|
class="normref"><a href="#ref-CSS2" rel="biblioentry" class="noxref"><span
|
|
class="normref">[CSS2]</span></a></span>. The <a
|
|
href="#adef-timesheetsMedia" class="noxref"><span
|
|
class="ainst-timesheetsMedia ainst">media</span></a> attribute contains a
|
|
comma separated list of CSS media types. The timesheet timing and animation
|
|
information is applied to the host language document, only when the target
|
|
device media type matches one of the media types defined by the <a
|
|
href="#adef-timesheetsMedia" class="noxref"><span
|
|
class="ainst-timesheetsMedia ainst">media</span></a> attribute. If the media
|
|
attribute is not defined, the default value is "all".</p>
|
|
|
|
<div class="informative">
|
|
<p><em>This section is informative</em></p>
|
|
|
|
<div>
|
|
<p>In the following example, the media attribute contains only one CSS media
|
|
type: projection. Therefore, the timing is applied to the slideshow only when
|
|
the slideshow is given as a presentation, e.g., the browser is in so called
|
|
full screen mode. Otherwise, the timing information is not applied, and thus
|
|
all the slides are shown at the same time. </p>
|
|
</div>
|
|
|
|
<div>
|
|
<pre class="example"><smil:timesheet media="projection">
|
|
<smil:seq>
|
|
<smil:item select="#Slide1" dur="5s" />
|
|
<smil:item select="#Slide2" dur="5s" />
|
|
<smil:item select="#Slide3" dur="5s" />
|
|
</smil:seq>
|
|
</smil:timesheet></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<h4 id="smilTimesheetsNS-Elements-Timesheet-Content"><a name="q9">Element
|
|
Content</a></h4>
|
|
|
|
<p>The <a href="#edef-timesheetsTimesheet"
|
|
class="noxref"><span
|
|
class="einst-timesheetsTimesheet einst">timesheet</span></a> element contains
|
|
the <a href="#edef-timesheetsPar" class="noxref"><span
|
|
class="einst-timesheetsPar einst">par</span></a>, <a
|
|
href="#edef-timesheetsSeq" class="noxref"><span
|
|
class="einst-timesheetsSeq einst">seq</span></a>, and <a
|
|
href="#edef-timesheetsExcl" class="noxref"><span
|
|
class="einst-timesheetsExcl einst">excl</span></a> time containers. The
|
|
semantics and restrictions are specified in the <a
|
|
href="http://www.w3.org/TR/SMIL3/smil-timing.html#Timing-timeContainerAttribute">the
|
|
time container attributes</a>. In addition, it contains the <a
|
|
href="#edef-timesheetsItem" class="noxref"><span
|
|
class="einst-timesheetsItem einst">item</span></a> and <a
|
|
href="#edef-timesheetsPrefetch" class="noxref"><span
|
|
class="einst-timesheetsPrefetch einst">prefetch</span></a> elements. Finally,
|
|
it also contains the animation elements: <a
|
|
href="#edef-timesheetsAnimate" class="noxref"><span
|
|
class="einst-timesheetsAnimate einst">animate</span></a>, <a
|
|
href="#edef-timesheetsSet" class="noxref"><span
|
|
class="einst-timesheetsSet einst">set</span></a>, <a
|
|
href="#edef-timesheetsAnimateMotion" class="noxref"><span
|
|
class="einst-timesheetsAnimateMotion einst">animateMotion</span></a>, and <a
|
|
href="#edef-timesheetsAnimateColor" class="noxref"><span
|
|
class="einst-timesheetsAnimateColor einst">animateColor</span></a>.</p>
|
|
|
|
<p>In case of having timing containers inside of <a
|
|
href="#edef-timesheetsItem" class="noxref"><span
|
|
class="einst-timesheetsItem einst">item</span></a> elements, their semantics
|
|
are the same </p>
|
|
|
|
<h3 id="smilTimesheetsNS-Elements-Item">4.2 The <a
|
|
name="edef-timesheetsItem"><span class="edef">item</span></a> element</h3>
|
|
|
|
<p>The <a href="#edef-timesheetsItem" class="noxref"><span
|
|
class="einst-timesheetsItem einst">item</span></a> target element references
|
|
elements in the document host language(s). The <a
|
|
href="#edef-timesheetsItem" class="noxref"><span
|
|
class="einst-timesheetsItem einst">item</span></a> element implements the
|
|
actual connection between the timesheet and the document. It can reference a
|
|
media element or a set of elements by the element's tag, id or class; the
|
|
syntax and processing is the same to the CSS selector <span
|
|
class="normref"><a href="#ref-CSS2" rel="biblioentry" class="noxref"><span
|
|
class="normref">[CSS2]</span></a></span> syntax.</p>
|
|
|
|
<p>As indicated in the <a href="#smilTimesheetsNS-basicSelection">Selection
|
|
Mechanism</a>, when multiple elements of the host document match an <a
|
|
href="#edef-timesheetsItem" class="noxref"><span
|
|
class="einst-timesheetsItem einst">item</span></a> element an ordered list
|
|
based on the host document order is constructed. </p>
|
|
|
|
<div class="informative">
|
|
<p><em>This section is informative.</em></p>
|
|
|
|
<p>The following example illustrates how the CSS class selector can be used
|
|
to select more than one slides at the same time.</p>
|
|
|
|
<div>
|
|
<pre class="example"><smil:timesheet>
|
|
<smil:seq>
|
|
<smil:item select=".Slide" dur="5s"/>
|
|
</smil:seq>
|
|
</smil:timesheet></pre>
|
|
</div>
|
|
|
|
<p>The class selector <code>".Slide"</code> selects all the slides at once.
|
|
Thus, the above timesheet is equivalent to the first example.</p>
|
|
</div>
|
|
|
|
<h4 id="smilTimesheetsNS-Elements-Item-Attributes"><a name="q11">Element
|
|
Attributes</a></h4>
|
|
|
|
<p>The <a href="#edef-timesheetsItem" class="noxref"><span
|
|
class="einst-timesheetsItem einst">item</span></a> element defines two
|
|
attributes: <a href="#adef-timesheetsSelect"
|
|
class="noxref"><span class="ainst-timesheetsSelect ainst">select</span></a>
|
|
and <a href="#adef-timesheetsBeginInc" class="noxref"><span
|
|
class="ainst-timesheetsBeginInc ainst">beginInc</span></a>. In addition, it
|
|
uses the <a href="#adef-timesheetsBegin" class="noxref"><span
|
|
class="ainst-timesheetsBegin ainst">begin</span></a>, <a
|
|
href="#adef-timesheetsDur" class="noxref"><span
|
|
class="ainst-timesheetsDur ainst">dur</span></a>, <a
|
|
href="#adef-timesheetsEnd" class="noxref"><span
|
|
class="ainst-timesheetsEnd ainst">end</span></a>, <a
|
|
href="#adef-timesheetsRepeatCount" class="noxref"><span
|
|
class="ainst-timesheetsRepeatCount ainst">repeatCount</span></a>, and <a
|
|
href="#adef-timesheetsRepeatDur" class="noxref"><span
|
|
class="ainst-timesheetsRepeatDur ainst">repeatDur</span></a> attributes
|
|
defined in the <a href="http://www.w3.org/TR/SMIL3/smil-timing.html">SMIL 3.0
|
|
Timing and Synchronization</a> module.</p>
|
|
|
|
<h5 id="smilTimesheetsNS-Elements-Item-Attributes-Select">The <a
|
|
name="adef-timesheetsSelect"><span class="adef">select</span></a>
|
|
Attribute</h5>
|
|
|
|
<p>The <a href="#adef-timesheetsSelect" class="noxref"><span
|
|
class="ainst-timesheetsSelect ainst">select</span></a> attribute links the
|
|
timesheet to the document. Its value is a comma-separated list of CSS
|
|
selectors <span class="normref"><a href="#ref-CSS2" rel="biblioentry"
|
|
class="noxref"><span class="normref">[CSS2]</span></a></span>. The attribute
|
|
follows the same syntax as the CSS selectors, so that the elements can be
|
|
referenced by their name, id, or class, or a more complex combination of the
|
|
selectors. If the attribute targets multiple elements in the host document,
|
|
<a href="#edef-timesheetsItem" class="noxref"><span
|
|
class="einst-timesheetsItem einst">item</span></a> controls all of them based
|
|
on the host document order.</p>
|
|
|
|
<h5 id="smilTimesheetsNS-Elements-Item-Attributes-BeginInc">The <a
|
|
name="adef-timesheetsBeginInc"><span class="adef">beginInc</span></a>
|
|
Attribute</h5>
|
|
|
|
<p>When the selector matches more than one element, an ordered list of
|
|
elements is constructed. The <a
|
|
href="#adef-timesheetsBeginInc" class="noxref"><span
|
|
class="ainst-timesheetsBeginInc ainst">beginInc</span></a> attribute
|
|
increments the <a href="#adef-timesheetsBegin"
|
|
class="noxref"><span class="ainst-timesheetsBegin ainst">begin</span></a>
|
|
time of each of the elements, but the first one, by the defined value. Note
|
|
that the <a href="#adef-timesheetsBegin" class="noxref"><span
|
|
class="ainst-timesheetsBegin ainst">begin</span></a> time of the first
|
|
element is never modified. The <a
|
|
href="#adef-timesheetsBeginInc" class="noxref"><span
|
|
class="ainst-timesheetsBeginInc ainst">beginInc</span></a> attribute has to
|
|
be a positive integer.</p>
|
|
|
|
<div class="informative">
|
|
<p><em>This section is informative.</em></p>
|
|
|
|
<p>The following example illustrates how the beginInc can be used to
|
|
increment the starting times of individual elements.</p>
|
|
|
|
<div>
|
|
<pre class="example"><smil:par>
|
|
<smil:item select=".Bullet" beginInc="1s" />
|
|
</smil:par></pre>
|
|
</div>
|
|
|
|
<p>In practise, the above example could also be expressed as follows.</p>
|
|
|
|
<div>
|
|
<pre class="example"><smil:par>
|
|
<smil:item select="#Bullet1_1" begin="0s" />
|
|
<smil:item select="#Bullet1_2" begin="1s" />
|
|
<smil:item select="#Bullet1_3" begin="2s" />
|
|
<smil:item select="#Bullet1_4" begin="3s" />
|
|
</smil:par></pre>
|
|
</div>
|
|
</div>
|
|
<!--
|
|
<h5 id="smilTimesheetsNS-Elements-Item-Attributes-IndexStart">The <a
|
|
name="adef-timesheetsIndexStart"><span class="adef">indexStart</span></a>
|
|
Attribute</h5>
|
|
|
|
<div class="normative">
|
|
<p><em>This section is normative.</em></p>
|
|
|
|
<p>The <a href="#adef-timesheetsIndexStart"
|
|
class="noxref"><span
|
|
class="ainst-timesheetsIndexStart ainst">indexStart</span></a> attribute can
|
|
be used to change the starting value of the <code>index()</code> function.
|
|
The default value of the <a href="#adef-timesheetsIndexStart"
|
|
class="noxref"><span
|
|
class="ainst-timesheetsIndexStart ainst">indexStart</span></a> attribute is
|
|
0, and thus the <code>index()</code> function starts to count the found <a
|
|
href="#edef-timesheetsItem" class="noxref"><span
|
|
class="einst-timesheetsItem einst">item</span></a> elements from index number
|
|
0. The <a href="#adef-timesheetsIndexStart"
|
|
class="noxref"><span
|
|
class="ainst-timesheetsIndexStart ainst">indexStart</span></a> attribute can
|
|
be given a positive integer value to change the starting value of the
|
|
<code>index()</code> function to the given value.</p>
|
|
</div>
|
|
|
|
<div class="informative">
|
|
<p><em>This section is informative.</em></p>
|
|
|
|
<p>An example of how the <a href="#adef-timesheetsIndexStart"
|
|
class="noxref"><span
|
|
class="ainst-timesheetsIndexStart ainst">indexStart</span></a> attribute can
|
|
be used is given in the <a href="#smilTimesheetsNS-Events-Index">Event Model
|
|
</a> section, which describes a use case of the <code>index()</code>
|
|
function.</p>
|
|
</div>
|
|
-->
|
|
|
|
<h4 id="smilTimesheetsNS-Elements-Item-Functions"><a name="q15">Element
|
|
Functions</a></h4>
|
|
|
|
<p>The <a href="#edef-timesheetsItem" class="noxref"><span
|
|
class="einst-timesheetsItem einst">item</span></a> element defines one
|
|
function: <a
|
|
href="#smilTimesheetsNS-Elements-Item-Functions"><code>index()</code></a>.
|
|
</p>
|
|
|
|
<h5 id="smilTimesheetsNS-Elements-Item-Functions-Index"><a name="q16">The
|
|
Index() Function</a></h5>
|
|
|
|
<p>As introduced in the <a href="#smilTimesheetsNS-basicIndex">Index
|
|
Functionality</a> section, the <a
|
|
href="#smilTimesheetsNS-Elements-Item-Functions"><code>index()</code></a>
|
|
function can be used for identifying a specific element within the sorted
|
|
list resulting from multiple items matching. Thus, it can be used to
|
|
automatically generate index numbers for both internal and external events
|
|
within the <a href="#adef-timesheetsBegin"
|
|
class="noxref"><span class="ainst-timesheetsBegin ainst">begin</span></a>, <a
|
|
href="#adef-timesheetsDur" class="noxref"><span
|
|
class="ainst-timesheetsDur ainst">dur</span></a>, or <a
|
|
href="#adef-timesheetsEnd" class="noxref"><span
|
|
class="ainst-timesheetsEnd ainst">end</span></a> attributes of the <a
|
|
href="#edef-timesheetsItem" class="noxref"><span
|
|
class="einst-timesheetsItem einst">item</span></a>, <a
|
|
href="#edef-timesheetsAnimate" class="noxref"><span
|
|
class="einst-timesheetsAnimate einst">animate</span></a>, <a
|
|
href="#edef-timesheetsSet" class="noxref"><span
|
|
class="einst-timesheetsSet einst">set</span></a>, <a
|
|
href="#edef-timesheetsAnimateMotion" class="noxref"><span
|
|
class="einst-timesheetsAnimateMotion einst">animateMotion</span></a>, and <a
|
|
href="#edef-timesheetsAnimateColor" class="noxref"><span
|
|
class="einst-timesheetsAnimateColor einst">animateColor</span></a> elements.
|
|
</p>
|
|
|
|
<p>The <a
|
|
href="#smilTimesheetsNS-Elements-Item-Functions"><code>index()</code></a>
|
|
function has the format:</p>
|
|
|
|
<p><code>index(<selector>, <indexStart>)</code></p>
|
|
|
|
<p>where:</p>
|
|
<ul>
|
|
<li>The <code><selector></code> parameter contains the CSS
|
|
selector.</li>
|
|
<li>The <code><indexStart></code> parameter indicates the index
|
|
start.</li>
|
|
</ul>
|
|
|
|
<p>The <code><selector></code> parameter has to be a valid CSS
|
|
selector, while the <code><indexStart></code> parameter has to be a
|
|
positive integer value. By default <code><indexStart></code> is
|
|
<code>"0"</code>. If there are no elements in the host document matching the
|
|
CSS selector, the <a
|
|
href="#smilTimesheetsNS-Elements-Item-Functions">index()</a> function is not
|
|
called. If there are elements in the host document matching the CSS selector,
|
|
an ordered list of the elements is constructed. In this case, when an element
|
|
from the list is activated, the <a
|
|
href="#smilTimesheetsNS-Elements-Item-Functions">index()</a> function returns
|
|
the index of such element within the list plus the
|
|
<code><indexStart></code> value.</p>
|
|
<!--
|
|
The <identifier> parameter contains the event identifier name without index numbers.
|
|
The result of the <code>index()</code>
|
|
function is a concatenation of the <identifier> parameter and the
|
|
current index number of the matched item. The index number starts from 0 and
|
|
counts upwards. The starting number can be changed to some other positive
|
|
integer number using the <a href="#adef-timesheetsIndexStart"
|
|
class="noxref"><span
|
|
class="ainst-timesheetsIndexStart ainst">indexStart</span></a> attribute.</p>
|
|
-->
|
|
|
|
<h4 id="smilTimesheetsNS-Elements-Item-Content"><a name="q17">Element
|
|
Content</a></h4>
|
|
|
|
<p>The <a href="#edef-timesheetsItem" class="noxref"><span
|
|
class="einst-timesheetsItem einst">item</span></a> element can contain:</p>
|
|
<ul>
|
|
<li>time containers: <a href="#edef-timesheetsSeq"
|
|
class="noxref"><span class="einst-timesheetsSeq einst">seq</span></a>, <a
|
|
href="#edef-timesheetsPar" class="noxref"><span
|
|
class="einst-timesheetsPar einst">par</span></a>, and <a
|
|
href="#edef-timesheetsExcl" class="noxref"><span
|
|
class="einst-timesheetsExcl einst">excl</span></a></li>
|
|
<li><a href="#edef-timesheetsPrefetch" class="noxref"><span
|
|
class="einst-timesheetsPrefetch einst">prefetch</span></a> elements</li>
|
|
<li>animation elements: <a href="#edef-timesheetsAnimate"
|
|
class="noxref"><span
|
|
class="einst-timesheetsAnimate einst">animate</span></a>, <a
|
|
href="#edef-timesheetsSet" class="noxref"><span
|
|
class="einst-timesheetsSet einst">set</span></a>, <a
|
|
href="#edef-timesheetsAnimateMotion" class="noxref"><span
|
|
class="einst-timesheetsAnimateMotion einst">animateMotion</span></a>, and
|
|
<a href="#edef-timesheetsAnimateColor"
|
|
class="noxref"><span
|
|
class="einst-timesheetsAnimateColor einst">animateColor</span></a></li>
|
|
<li>and other <a href="#edef-timesheetsItem"
|
|
class="noxref"><span class="einst-timesheetsItem einst">item</span></a>
|
|
elements</li>
|
|
</ul>
|
|
|
|
<p>However, the direct child of the <a
|
|
href="#edef-timesheetsItem" class="noxref"><span
|
|
class="einst-timesheetsItem einst">item</span></a> element can only have one
|
|
child or none. All other children than the first one are ignored. If the <a
|
|
href="#edef-timesheetsItem" class="noxref"><span
|
|
class="einst-timesheetsItem einst">item</span></a> element has several
|
|
descendants they have to be included within a child time container. The
|
|
timing and synchronization of the child element is controlled by the <a
|
|
href="#edef-timesheetsItem" class="noxref"><span
|
|
class="einst-timesheetsItem einst">item</span></a>, as described in the <a
|
|
href="#smilTimesheetsNS-basicTiming">Timing andSynchronization</a> section.
|
|
Furthermore, the parent <a href="#edef-timesheetsItem"
|
|
class="noxref"><span class="einst-timesheetsItem einst">item</span></a>
|
|
element limits the scope of the CSS selectors of the descendant <a
|
|
href="#edef-timesheetsItem" class="noxref"><span
|
|
class="einst-timesheetsItem einst">item</span></a>, <a
|
|
href="#edef-timesheetsPrefetch" class="noxref"><span
|
|
class="einst-timesheetsPrefetch einst">prefetch</span></a>, <a
|
|
href="#edef-timesheetsAnimate" class="noxref"><span
|
|
class="einst-timesheetsAnimate einst">animate</span></a>, <a
|
|
href="#edef-timesheetsSet" class="noxref"><span
|
|
class="einst-timesheetsSet einst">set</span></a>, <a
|
|
href="#edef-timesheetsAnimateMotion" class="noxref"><span
|
|
class="einst-timesheetsAnimateMotion einst">animateMotion</span></a>, and <a
|
|
href="#edef-timesheetsAnimateColor" class="noxref"><span
|
|
class="einst-timesheetsAnimateColor einst">animateColor</span></a> elements
|
|
to match only descendant elements of the host language elements selected by
|
|
the parent <a href="#edef-timesheetsItem" class="noxref"><span
|
|
class="einst-timesheetsItem einst">item</span></a> element, as described in
|
|
the <a href="#smilTimesheetsNS-basicSelection">SelectionMechanism</a>
|
|
section.</p>
|
|
</div>
|
|
|
|
<h2 id="smilTimesheetsNS-Timing"><a name="q18">5 SMIL Timing and
|
|
Synchronization Elements</a></h2>
|
|
|
|
<div class="normative">
|
|
<p><em>This section is normative.</em></p>
|
|
|
|
<div class="ignore">
|
|
|
|
<div class="informative">
|
|
<p><em>This section is informative.</em></p>
|
|
|
|
<p>The SMIL Timesheets uses five <a
|
|
href="http://www.w3.org/TR/SMIL3/smil-timing.html">SMIL 3.0 Timing and
|
|
Synchronization</a> modules:</p>
|
|
<ol>
|
|
<li><a
|
|
href="http://www.w3.org/TR/SMIL3/smil-timing.html#Timing-BasicInlineTiming-Module">BasicInlineTiming</a></li>
|
|
<li><a
|
|
href="http://www.w3.org/TR/SMIL3/smil-timing.html#Timing-EventTiming-Module">EventTiming</a></li>
|
|
<li><a
|
|
href="http://www.w3.org/TR/SMIL3/smil-timing.html#Timing-BasicTimeContainers-Module">BasicTimeContainers</a></li>
|
|
<li><a
|
|
href="http://www.w3.org/TR/SMIL3/smil-timing.html#Timing-BasicExclTimeContainers-Module">BasicExclTimeContainers</a></li>
|
|
<li><a
|
|
href="http://www.w3.org/TR/SMIL3/smil-timing.html#Timing-RepeatTiming-Module">RepeatTiming</a></li>
|
|
</ol>
|
|
|
|
<p>This section gives futher details on the attributes and elements of the
|
|
above mentioned modules. The reader is presumed to have read and be familiar
|
|
with them.</p>
|
|
|
|
<p>The timing semantics of the timesheets is based on the semantics of the <a
|
|
href="http://www.w3.org/TR/SMIL3/smil-timing.html">SMIL 3.0 Timing and
|
|
Synchronization</a> chapter, although it has been simplified a bit. This may
|
|
cause the timing model not to be as powerful in expressing timing relations
|
|
as SMIL's, but it should be more approachable to the authors.</p>
|
|
|
|
<p>The base time, or the <em>syncbase</em> of a <a
|
|
href="#edef-timesheetsTimesheet" class="noxref"><span
|
|
class="einst-timesheetsTimesheet einst">timesheet</span></a> element is the
|
|
moment when the element is started by its parent. Starting an element does
|
|
not necessarily make the referenced media element visible. Rather, it sets
|
|
the time moment "0s", to which the element's attributes are compared.</p>
|
|
|
|
<p>The syncbase of the child elements of a time container is dependent on the
|
|
type of the container. The children of <a
|
|
href="#edef-timesheetsPar" class="noxref"><span
|
|
class="einst-timesheetsPar einst">par</span></a> and <a
|
|
href="#edef-timesheetsExcl" class="noxref"><span
|
|
class="einst-timesheetsExcl einst">excl</span></a> elements have the starting
|
|
time of their parent as their syncbase. The children of the <a
|
|
href="#edef-timesheetsSeq" class="noxref"><span
|
|
class="einst-timesheetsSeq einst">seq</span></a> element consider the end
|
|
time of preceding child as their syncbase. This time is resolved only at the
|
|
moment the preceding child ends.</p>
|
|
|
|
<p><a href="#smilTimesheetsNS-BasicTimesheets-timesemantics">Figure 2</a>
|
|
shows a simple example of the semantics of a timesheet. A parallel time
|
|
container has two children, which are <a
|
|
href="#edef-timesheetsItem" class="noxref"><span
|
|
class="einst-timesheetsItem einst">item</span></a> elements referencing two
|
|
media elements. When the <a href="#edef-timesheetsPar"
|
|
class="noxref"><span class="einst-timesheetsPar einst">par</span></a> is
|
|
started, it activates both its children with the current time as their
|
|
syncbase. The media elements referenced by the children are not activated
|
|
yet. At time moment <em>1s</em>, the media element <em>item1</em> is
|
|
activated, according to the begin value of the referencing <a
|
|
href="#edef-timesheetsTimesheet" class="noxref"><span
|
|
class="einst-timesheetsTimesheet einst">timesheet</span></a> element. At
|
|
<em>2s</em>, the <em>item2</em> is activated. At <em>3s</em>, the duration of
|
|
<em>item1</em> runs out, so it is stopped and the corresponding timesheet
|
|
element deactivates itself. At <em>4s</em>, the parent container stops
|
|
according to its duration attribute, stopping all of its active children.</p>
|
|
|
|
<p>The duration of an element is primarily defined by the <a
|
|
href="#adef-timesheetsDur" class="noxref"><span
|
|
class="ainst-timesheetsDur ainst">dur</span></a> attribute. If the element is
|
|
not stopped prematurely, due to an event or scheduling of its parent, the <a
|
|
href="#adef-timesheetsDur" class="noxref"><span
|
|
class="ainst-timesheetsDur ainst">dur</span></a> attribute tells the overall
|
|
duration of the element. The element will not stop until this duration has
|
|
passed, and will not stay active longer than this duration. The value of the
|
|
<a href="#adef-timesheetsDur" class="noxref"><span
|
|
class="ainst-timesheetsDur ainst">dur</span></a> attribute will prevail:</p>
|
|
<ul>
|
|
<li>when the sum of the durations of the children of a time container
|
|
extends the value of the attribute;</li>
|
|
<li>when the implicit duration of the media elements, like audio or video
|
|
is longer than the specified duration;</li>
|
|
<li>when the <a href="#adef-timesheetsRepeatCount"
|
|
class="noxref"><span
|
|
class="ainst-timesheetsRepeatCount ainst">repeatCount</span></a> or <a
|
|
href="#adef-timesheetsRepeatDur" class="noxref"><span
|
|
class="ainst-timesheetsRepeatDur ainst">repeatDur</span></a> attributes
|
|
extend the duration of a media element to be longer than the specified
|
|
duration.</li>
|
|
</ul>
|
|
|
|
<p>If the duration is not set, the duration of an element depends on the type
|
|
of the referenced elements, or the durations of the children. The timesheet
|
|
items can reference to discrete and continuous elements in the document.
|
|
Discrete elements don't have implicit durations, and the implicit duration of
|
|
an <a href="#edef-timesheetsItem" class="noxref"><span
|
|
class="einst-timesheetsItem einst">item</span></a> element referencing a
|
|
discrete element is <code>"indefinite"</code>. Continuous elements have their
|
|
own durations, which will be also used as the duration of the timesheet
|
|
element. The duration of the timecontainer depends on the durations and
|
|
activations of its children. The <a href="#edef-timesheetsSeq"
|
|
class="noxref"><span class="einst-timesheetsSeq einst">seq</span></a> and <a
|
|
href="#edef-timesheetsPar" class="noxref"><span
|
|
class="einst-timesheetsPar einst">par</span></a> elements stay active until
|
|
all of their children have stopped. The implicit duration of the <a
|
|
href="#edef-timesheetsExcl" class="noxref"><span
|
|
class="einst-timesheetsExcl einst">excl</span></a> is always
|
|
<code>"indefinite"</code>.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 id="smilTimesheetsNS-Timing-Attributes"><a name="q19">5.1
|
|
Attributes</a></h3>
|
|
|
|
<p>The SMIL Timesheets includes the basic timing attributes <a
|
|
href="#adef-timesheetsBegin" class="noxref"><span
|
|
class="ainst-timesheetsBegin ainst">begin</span></a>, <a
|
|
href="#adef-timesheetsDur" class="noxref"><span
|
|
class="ainst-timesheetsDur ainst">dur</span></a>, and <a
|
|
href="#adef-timesheetsEnd" class="noxref"><span
|
|
class="ainst-timesheetsEnd ainst">end</span></a> as defined in the <a
|
|
href="http://www.w3.org/TR/SMIL3/smil-timing.html#Timing-BasicInlineTiming-Module">BasicInlineTiming</a>
|
|
and <a
|
|
href="http://www.w3.org/TR/SMIL3/smil-timing.html#Timing-EventTiming-Module">EventTiming</a>
|
|
modules. In addition <a href="#adef-timesheetsFill"
|
|
class="noxref"><span class="ainst-timesheetsFill ainst">fill</span></a> and
|
|
<a href="#adef-timesheetsEndsync" class="noxref"><span
|
|
class="ainst-timesheetsEndsync ainst">endsync</span></a> attributes are
|
|
included as defined in the <a
|
|
href="http://www.w3.org/TR/SMIL3/smil-timing.html#Timing-BasicTimeContainers-Module">BasicTimeContainers</a>
|
|
and <a
|
|
href="http://www.w3.org/TR/SMIL3/smil-timing.html#Timing-BasicExclTimeContainers-Module">BasicExclTimeContainers</a>
|
|
modules. Also, it includes the <a
|
|
href="#adef-timesheetsRepeatCount" class="noxref"><span
|
|
class="ainst-timesheetsRepeatCount ainst">repeatCount</span></a> and <a
|
|
href="#adef-timesheetsRepeatDur" class="noxref"><span
|
|
class="ainst-timesheetsRepeatDur ainst">repeatDur</span></a> attributes as
|
|
defined in the <a
|
|
href="http://www.w3.org/TR/SMIL3/smil-timing.html#Timing-RepeatTiming-Module">RepeatTiming</a>
|
|
module. The rest of the <a
|
|
href="http://www.w3.org/TR/SMIL3/smil-timing.html">SMIL 3.0 Timing and
|
|
Synchronization</a> attributes are not supported. Finally, the SMIL
|
|
Timesheets includes four new Timing and Synchronization attributes: <a
|
|
href="#adef-timesheetsFirst" class="noxref"><span
|
|
class="ainst-timesheetsFirst ainst">first</span></a>, <a
|
|
href="#adef-timesheetsPrev" class="noxref"><span
|
|
class="ainst-timesheetsPrev ainst">prev</span></a>, <a
|
|
href="#adef-timesheetsNext" class="noxref"><span
|
|
class="ainst-timesheetsNext ainst">next</span></a>, and <a
|
|
href="#adef-timesheetsLast" class="noxref"><span
|
|
class="ainst-timesheetsLast ainst">last</span></a>.</p>
|
|
|
|
<h4 id="smilTimesheetsNS-Timing-Attributes-Begin">The <a
|
|
name="adef-timesheetsBegin"><span class="adef">begin</span></a> Attribute</h4>
|
|
|
|
<p>The <a href="#adef-timesheetsBegin" class="noxref"><span
|
|
class="ainst-timesheetsBegin ainst">begin</span></a> attribute supports
|
|
offset and event values, <code>"indefinite"</code>, or a semi-colon separated
|
|
list of values. All other values are not supported. The allowed values and
|
|
semantics of the <a href="#adef-timesheetsBegin"
|
|
class="noxref"><span class="ainst-timesheetsBegin ainst">begin</span></a>
|
|
attribute are defined in the <a
|
|
href="http://www.w3.org/TR/SMIL3/smil-timing.html#Timing-BasicTiming">SMIL
|
|
3.0 Timing and Synchronization</a> module.</p>
|
|
|
|
<h4 id="smilTimesheetsNS-Timing-Attributes-Dur">The <a
|
|
name="adef-timesheetsDur"><span class="adef">dur</span></a> Attribute</h4>
|
|
|
|
<p>The <a href="#adef-timesheetsDur" class="noxref"><span
|
|
class="ainst-timesheetsDur ainst">dur</span></a> attribute supports the clock
|
|
values, <code>"media"</code>, and <code>"indefinite"</code>. The allowed
|
|
values and semantics of the <a href="#adef-timesheetsDur"
|
|
class="noxref"><span class="ainst-timesheetsDur ainst">dur</span></a>
|
|
attribute are defined in the <a
|
|
href="http://www.w3.org/TR/SMIL3/smil-timing.html#Timing-BasicTiming">SMIL
|
|
3.0 Timing and Synchronization</a> module.</p>
|
|
|
|
<h4 id="smilTimesheetsNS-Timing-Attributes-End">The <a
|
|
name="adef-timesheetsEnd"><span class="adef">end</span></a> Attribute</h4>
|
|
|
|
<p>The <a href="#adef-timesheetsEnd" class="noxref"><span
|
|
class="ainst-timesheetsEnd ainst">end</span></a> attribute supports offset
|
|
and event values, <code>"indefinite"</code>, or a semi-colon separated list
|
|
of values. All other values are not supported. The allowed values and
|
|
semantics of the <a href="#adef-timesheetsEnd"
|
|
class="noxref"><span class="ainst-timesheetsEnd ainst">end</span></a>
|
|
attribute are defined in the <a
|
|
href="http://www.w3.org/TR/SMIL3/smil-timing.html#Timing-BasicTiming">SMIL
|
|
3.0 Timing and Synchronization</a> module.</p>
|
|
|
|
<h4 id="smilTimesheetsNS-Timing-Attributes-Fill">The <a
|
|
name="adef-timesheetsFill"><span class="adef">fill</span></a> Attribute</h4>
|
|
|
|
<p>The <a href="#adef-timesheetsFill" class="noxref"><span
|
|
class="ainst-timesheetsFill ainst">fill</span></a> attribute allows an author
|
|
to specify that an element should be extended beyond the active duration by
|
|
freezing the final state of the element. It is defined in the <a
|
|
href="http://www.w3.org/TR/SMIL3/smil-timing.html#Timing-fillAttribute">SMIL
|
|
3.0 Timing and Synchronization</a> module. Since SMIL Timesheets does not
|
|
include transitions, the <code>fill="transition"</code> value of <a
|
|
href="#adef-timesheetsFill" class="noxref"><span
|
|
class="ainst-timesheetsFill ainst">fill</span></a> attribute is not
|
|
supported. Also, since the <code>fillDefault</code> attribute is not included
|
|
in the SMIL Timesheets, the <code>fill="default"</code> is interpreted the
|
|
same as <code>fill="auto"</code>.</p>
|
|
|
|
<h4 id="smilTimesheetsNS-Timing-Attributes-Endsync">The <a
|
|
name="adef-timesheetsEndsync"><span class="adef">endsync</span></a>
|
|
Attribute</h4>
|
|
|
|
<p>The <a href="#adef-timesheetsEndsync" class="noxref"><span
|
|
class="ainst-timesheetsEndsync ainst">endsync</span></a> attribute controls
|
|
the implicit duration of time containers, as a function of their children. It
|
|
is defined in the <a
|
|
href="http://www.w3.org/TR/SMIL3/smil-timing.html#Timing-endsyncAttribute">SMIL
|
|
3.0 Timing and Synchronization</a> module.</p>
|
|
|
|
<h4 id="smilTimesheetsNS-Timing-Attributes-RepeatCount">The <a
|
|
name="adef-timesheetsRepeatCount"><span class="adef">repeatCount</span></a>
|
|
Attribute</h4>
|
|
|
|
<p>The <a href="#adef-timesheetsRepeatCount"
|
|
class="noxref"><span
|
|
class="ainst-timesheetsRepeatCount ainst">repeatCount</span></a> attribute
|
|
specifies the number of iterations of a simple duration. It is defined in the
|
|
<a
|
|
href="http://www.w3.org/TR/SMIL3/smil-timing.html#Timing-RepeatCountAttribute">SMIL
|
|
3.0 Timing and Synchronization</a> module.</p>
|
|
|
|
<h4 id="smilTimesheetsNS-Timing-Attributes-RepeatDur">The <a
|
|
name="adef-timesheetsRepeatDur"><span class="adef">repeatDur</span></a>
|
|
Attribute</h4>
|
|
|
|
<p>The <a href="#adef-timesheetsRepeatDur"
|
|
class="noxref"><span
|
|
class="ainst-timesheetsRepeatDur ainst">repeatDur</span></a> attribute
|
|
specifies the total duration for repeat. It is defined in the <a
|
|
href="http://www.w3.org/TR/SMIL3/smil-timing.html#Timing-RepeatDurAttribute">SMIL
|
|
3.0 Timing and Synchronization</a> module.</p>
|
|
|
|
<h4 id="smilTimesheetsNS-Timing-Attributes-First">The <a
|
|
name="adef-timesheetsFirst"><span class="adef">first</span></a> Attribute</h4>
|
|
|
|
<p>The <a href="#adef-timesheetsFirst" class="noxref"><span
|
|
class="ainst-timesheetsFirst ainst">first</span></a> attribute sets the
|
|
current active child of a time container<a
|
|
href="#edef-timesheetsSeq" class="noxref"><span
|
|
class="einst-timesheetsSeq einst"></span></a> <code>"inactive"</code>. Then,
|
|
it selects the first child element and sets it <code>"active"</code>. The <a
|
|
href="#adef-timesheetsFirst" class="noxref"><span
|
|
class="ainst-timesheetsFirst ainst">first</span></a> attribute can only be
|
|
used for the <a href="#edef-timesheetsExcl"
|
|
class="noxref"><span class="einst-timesheetsExcl einst">excl</span></a> time
|
|
container. The allowed value of the <a
|
|
href="#adef-timesheetsFirst" class="noxref"><span
|
|
class="ainst-timesheetsFirst ainst">first</span></a> attribute is a DOM event
|
|
<span class="inforef"><a href="#ref-DOM2Events" rel="biblioentry"
|
|
class="noxref"><span class="inforef">[DOM2Events]</span></a></span>.</p>
|
|
|
|
<h4 id="smilTimesheetsNS-Timing-Attributes-Prev">The <a
|
|
name="adef-timesheetsPrev"><span class="adef">prev</span></a> Attribute</h4>
|
|
|
|
<p>The <a href="#adef-timesheetsPrev" class="noxref"><span
|
|
class="ainst-timesheetsPrev ainst">prev</span></a> attribute first checks,
|
|
whether the current active child is the first child. If not, it sets the
|
|
current active child of a time container <code>"inactive"</code>. Then, it
|
|
selects the previous child of the time container<a
|
|
href="#edef-timesheetsSeq" class="noxref"><span
|
|
class="einst-timesheetsSeq einst"></span></a> and sets it
|
|
<code>"active"</code>. The <a href="#adef-timesheetsPrev"
|
|
class="noxref"><span class="ainst-timesheetsPrev ainst">prev</span></a>
|
|
attribute can only be used for the <a
|
|
href="#edef-timesheetsExcl" class="noxref"><span
|
|
class="einst-timesheetsExcl einst">excl</span></a> time container. The
|
|
allowed value of the <a href="#adef-timesheetsPrev"
|
|
class="noxref"><span class="ainst-timesheetsPrev ainst">prev</span></a>
|
|
attribute is a DOM event <span class="inforef"><a href="#ref-DOM2Events"
|
|
rel="biblioentry" class="noxref"><span
|
|
class="inforef">[DOM2Events]</span></a></span> </p>
|
|
|
|
<h4 id="smilTimesheetsNS-Timing-Attributes-Next">The <a
|
|
name="adef-timesheetsNext"><span class="adef">next</span></a> Attribute</h4>
|
|
|
|
<p>The <a href="#adef-timesheetsNext" class="noxref"><span
|
|
class="ainst-timesheetsNext ainst">next</span></a> attribute first checks,
|
|
whether the current active child is the last child. If not, it sets the
|
|
current active child of a time container<a
|
|
href="#edef-timesheetsSeq" class="noxref"><span
|
|
class="einst-timesheetsSeq einst"></span></a> <code>"inactive"</code>. Then,
|
|
it selects the next child of the time container<a
|
|
href="#edef-timesheetsSeq" class="noxref"><span
|
|
class="einst-timesheetsSeq einst"></span></a> and sets it
|
|
<code>"active"</code>. The <a href="#adef-timesheetsNext"
|
|
class="noxref"><span class="ainst-timesheetsNext ainst">next</span></a>
|
|
attribute can only be used for the <a
|
|
href="#edef-timesheetsExcl" class="noxref"><span
|
|
class="einst-timesheetsExcl einst">excl</span></a> time container. The
|
|
allowed value of the <a href="#adef-timesheetsNext"
|
|
class="noxref"><span class="ainst-timesheetsNext ainst">next</span></a>
|
|
attribute is a DOM event <span class="inforef"><a href="#ref-DOM2Events"
|
|
rel="biblioentry" class="noxref"><span
|
|
class="inforef">[DOM2Events]</span></a></span></p>
|
|
|
|
<h4 id="smilTimesheetsNS-Timing-Attributes-Last">The <a
|
|
name="adef-timesheetsLast"><span class="adef">last</span></a> Attribute</h4>
|
|
|
|
<p>The <a href="#adef-timesheetsLast" class="noxref"><span
|
|
class="ainst-timesheetsLast ainst">last</span></a> attribute sets the current
|
|
active child of a time container<a href="#edef-timesheetsSeq"
|
|
class="noxref"><span class="einst-timesheetsSeq einst"></span></a>
|
|
<code>"inactive"</code>. Then, it selects the last child of the time
|
|
container<a href="#edef-timesheetsSeq" class="noxref"><span
|
|
class="einst-timesheetsSeq einst"></span></a> and sets it
|
|
<code>"active"</code>. The <a href="#adef-timesheetsLast"
|
|
class="noxref"><span class="ainst-timesheetsLast ainst">last</span></a>
|
|
attribute can only be used for the <a
|
|
href="#edef-timesheetsExcl" class="noxref"><span
|
|
class="einst-timesheetsExcl einst">excl</span></a> time container. The
|
|
allowed value of the <a href="#adef-timesheetsLast"
|
|
class="noxref"><span class="ainst-timesheetsLast ainst">last</span></a>
|
|
attribute is a DOM event <span class="inforef"><a href="#ref-DOM2Events"
|
|
rel="biblioentry" class="noxref"><span
|
|
class="inforef">[DOM2Events]</span></a></span></p>
|
|
|
|
<h3 id="smilTimesheetsNS-Timing-Elements"><a name="q31">5.2 Elements</a></h3>
|
|
|
|
<p>The SMIL Timesheets includes three elements <a
|
|
href="#edef-timesheetsPar" class="noxref"><span
|
|
class="einst-timesheetsPar einst">par</span></a>, <a
|
|
href="#edef-timesheetsSeq" class="noxref"><span
|
|
class="einst-timesheetsSeq einst">seq</span></a>, and <a
|
|
href="#edef-timesheetsExcl" class="noxref"><span
|
|
class="einst-timesheetsExcl einst">excl</span></a> as defined in the
|
|
BasicTimeContainers and BasicExclTimeContainers modules.</p>
|
|
|
|
<h4 id="smilTimesheetsNS-Timing-Elements-Par">The <a
|
|
name="edef-timesheetsPar" id="edef-timesheetsPar"><span
|
|
class="edef">par</span></a> Element</h4>
|
|
|
|
<p>The <a href="#edef-timesheetsPar" class="noxref"><span
|
|
class="einst-timesheetsPar einst">par</span></a> element short for
|
|
"parallel", defines a simple time grouping in which multiple elements can
|
|
play back at the same. It is defined in the <a
|
|
href="http://www.w3.org/TR/SMIL3/smil-timing.html#Timing-ParSyntax">SMIL 3.0
|
|
Timing and Synchronization</a> module.</p>
|
|
|
|
<h4 id="smilTimesheetsNS-Timing-Elements-Seq">The <a
|
|
name="edef-timesheetsSeq" id="edef-timesheetsSeq"><span
|
|
class="edef">seq</span></a> Element</h4>
|
|
|
|
<p>The <a href="#edef-timesheetsSeq" class="noxref"><span
|
|
class="einst-timesheetsSeq einst">seq</span></a> element defines a sequence
|
|
of elements in which elements play one after the other. Children of a <a
|
|
href="#edef-timesheetsSeq" class="noxref"><span
|
|
class="einst-timesheetsSeq einst">seq</span></a> can never play
|
|
simultaneously and play strictly in document order, except when a hyperlink
|
|
traversal targets an earlier child. It is defined in the <a
|
|
href="http://www.w3.org/TR/SMIL3/smil-timing.html#Timing-SeqSyntax">SMIL 3.0
|
|
Timing and Synchronization</a> module.</p>
|
|
|
|
<h4 id="smilTimesheetsNS-Timing-Elements-Excl">The <a
|
|
name="edef-timesheetsExcl" id="edef-timesheetsExcl"><span
|
|
class="edef">excl</span></a> Element</h4>
|
|
|
|
<p>The <a href="#edef-timesheetsExcl" class="noxref"><span
|
|
class="einst-timesheetsExcl einst">excl</span></a> element defines a time
|
|
container with semantics based upon <a
|
|
href="#edef-timesheetsPar" class="noxref"><span
|
|
class="einst-timesheetsPar einst">par</span></a>, but with the additional
|
|
constraint that only one child element may play at any given time. If any
|
|
element begins playing while another is already playing, the element that was
|
|
playing is stopped. In SMIL Timesshets, it is a simplified version of the <a
|
|
href="#edef-timesheetsExcl" class="noxref"><span
|
|
class="einst-timesheetsExcl einst">excl</span></a> element defined in the <a
|
|
href="http://www.w3.org/TR/SMIL3/smil-timing.html#Timing-ExclSyntax">SMIL 3.0
|
|
Timing and Synchronization</a> module, since the BasicPriorityClassContainers
|
|
module is not included.</p>
|
|
|
|
<p>There are also four additional attributes that are specified for the <a
|
|
href="#edef-timesheetsExcl" class="noxref"><span
|
|
class="einst-timesheetsExcl einst">excl</span></a> element. They are <a
|
|
href="#adef-timesheetsFirst" class="noxref"><span
|
|
class="ainst-timesheetsFirst ainst">first</span></a>, <a
|
|
href="#adef-timesheetsPrev" class="noxref"><span
|
|
class="ainst-timesheetsPrev ainst">prev</span></a>, <a
|
|
href="#adef-timesheetsNext" class="noxref"><span
|
|
class="ainst-timesheetsNext ainst">next</span></a>, and <a
|
|
href="#adef-timesheetsLast" class="noxref"><span
|
|
class="ainst-timesheetsLast ainst">last</span></a>. These are used to select
|
|
a certain child of the <a href="#edef-timesheetsExcl"
|
|
class="noxref"><span class="einst-timesheetsExcl einst">excl</span></a>
|
|
element, which facilitates the creation of presentations where the user can
|
|
have control of the progression of the presentation, for example, a picture
|
|
show.</p>
|
|
|
|
<div class="informative">
|
|
<p><em>This section is informative.</em></p>
|
|
|
|
<p>The following example illustrates how the additional <a
|
|
href="#adef-timesheetsFirst" class="noxref"><span
|
|
class="ainst-timesheetsFirst ainst">first</span></a>, <a
|
|
href="#adef-timesheetsPrev" class="noxref"><span
|
|
class="ainst-timesheetsPrev ainst">prev</span></a>, <a
|
|
href="#adef-timesheetsNext" class="noxref"><span
|
|
class="ainst-timesheetsNext ainst">next</span></a>, and <a
|
|
href="#adef-timesheetsLast" class="noxref"><span
|
|
class="ainst-timesheetsLast ainst">last</span></a> attributes can be used in
|
|
slideshow. It contains a new timesheet and four buttons, which are appended
|
|
to the body part of first example.</p>
|
|
|
|
<div>
|
|
<pre class="example"><head>
|
|
<smil:timesheet>
|
|
<smil:excl first="first.DOMActivate" prev="prev.DOMActivate" next="next.DOMActivate" last="last.DOMActivate">
|
|
<smil:item select=".Slide" />
|
|
</smil:excl>
|
|
</smil:timesheet>
|
|
</head>
|
|
|
|
<body>
|
|
...
|
|
<button xml:id="first">First slide</button>
|
|
<button xml:id="prev">Previous slide</button>
|
|
<button xml:id="next">Next slide</button>
|
|
<button xml:id="last">Last slide</button>
|
|
</body></pre>
|
|
</div>
|
|
|
|
<p>The <em>first</em> button selects the first slide, the <em>prev</em>
|
|
button selects the previous slide, the <em>next</em> button selects the next
|
|
slide, and finally the <em>last</em> button selects the last slide.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 id="smilTimesheetsNS-Prefetch"><a name="q35">6 Prefetch</a></h2>
|
|
|
|
<div class="normative">
|
|
<p><em>This section is normative.</em></p>
|
|
|
|
<p>The SMIL Timesheets uses the <a
|
|
href="http://www.w3.org/TR/SMIL3/smil-content.html#ContentControlNS-PrefetchControl">SMIL
|
|
3.0 PrefetchControl</a> module. The module defines one element <a
|
|
href="#edef-timesheetsPrefetch" class="noxref"><span
|
|
class="einst-timesheetsPrefetch einst">prefetch</span></a>, which has three
|
|
attributes <a href="#adef-timesheetsMediaSize"
|
|
class="noxref"><span
|
|
class="ainst-timesheetsMediaSize ainst">mediaSize</span></a>, <a
|
|
href="#adef-timesheetsMediaTime" class="noxref"><span
|
|
class="ainst-timesheetsMediaTime ainst">mediaTime</span></a>, and <a
|
|
href="#adef-timesheetsBandwidth" class="noxref"><span
|
|
class="ainst-timesheetsBandwidth ainst">bandwidth</span></a>. The original <a
|
|
href="http://www.w3.org/TR/SMIL3/smil-content.html#ContentControlNS-PrefetchControl">SMIL
|
|
3.0 PrefetchControl</a> module uses the <a
|
|
href="#adef-timesheetsSrc" class="noxref"><span
|
|
class="ainst-timesheetsSrc ainst">src</span></a> attribute for locating and
|
|
fetching the associated media. In the SMIL Timesheets, the <a
|
|
href="#adef-timesheetsSrc" class="noxref"><span
|
|
class="ainst-timesheetsSrc ainst">src</span></a> attribute is replaced with
|
|
the <a href="#adef-timesheetsSelect" class="noxref"><span
|
|
class="ainst-timesheetsSelect ainst">select</span></a> attribute. This
|
|
section gives further details on how the attributes and elements of the <a
|
|
href="http://www.w3.org/TR/SMIL3/smil-content.html#ContentControlNS-PrefetchControl">SMIL
|
|
3.0 PrefetchControl</a> module are used in Timesheets.</p>
|
|
|
|
<p>If multiple elements in the host language match the <a
|
|
href="#adef-timesheetsSelect" class="noxref"><span
|
|
class="ainst-timesheetsSelect ainst">select</span></a> attribute, the
|
|
behaviour is the same as with the <a
|
|
href="#edef-timesheetsItem" class="noxref"><span
|
|
class="einst-timesheetsItem einst">item</span></a> element. An oredered list
|
|
of elements is constructed based on the host document order, so that the
|
|
parent time container determines whether the prefetching of the elements is
|
|
done in parallel or in sequence.</p>
|
|
|
|
<h3 id="smilTimesheetsNS-Prefetch-Attributes"><a name="q36">6.1
|
|
Attributes</a></h3>
|
|
|
|
<p>The SMIL Timesheets includes all three attributes of the <a
|
|
href="http://www.w3.org/TR/SMIL3/smil-content.html#ContentControlNS-PrefetchControl">SMIL
|
|
3.0 PrefetchControl</a> module: <a
|
|
href="#adef-timesheetsMediaSize" class="noxref"><span
|
|
class="ainst-timesheetsMediaSize ainst">mediaSize</span></a>, <a
|
|
href="#adef-timesheetsMediaTime" class="noxref"><span
|
|
class="ainst-timesheetsMediaTime ainst">mediaTime</span></a>, and <a
|
|
href="#adef-timesheetsBandwidth" class="noxref"><span
|
|
class="ainst-timesheetsBandwidth ainst">bandwidth</span></a>.</p>
|
|
|
|
<h4 id="smilTimesheetsNS-Prefetch-Attributes-MediaSize">The <a
|
|
name="adef-timesheetsMediaSize"><span class="adef">mediaSize</span></a>
|
|
Attribute</h4>
|
|
|
|
<p>The <a href="#adef-timesheetsMediaSize"
|
|
class="noxref"><span
|
|
class="ainst-timesheetsMediaSize ainst">meadiaSize</span></a> attribute
|
|
defines how much of the resource to fetch as a function of the file size of
|
|
the resource. It is defined in the <a
|
|
href="http://www.w3.org/TR/SMIL3/smil-content.html#ContentControlNS-PrefetchControl">SMIL
|
|
3.0 PrefetchControl</a> module.</p>
|
|
|
|
<h4 id="smilTimesheetsNS-Prefetch-Attributes-MediaTime">The <a
|
|
name="adef-timesheetsMediaTime"><span class="adef">mediaTime</span></a>
|
|
Attribute</h4>
|
|
|
|
<p>The <a href="#adef-timesheetsMediaTime"
|
|
class="noxref"><span
|
|
class="ainst-timesheetsMediaTime ainst">meadiaTime</span></a> attribute
|
|
defines how much of the resource to fetch as a function of the duration of
|
|
the resource. It is defined in the <a
|
|
href="http://www.w3.org/TR/SMIL3/smil-content.html#ContentControlNS-PrefetchControl">SMIL
|
|
3.0 PrefetchControl</a> module.</p>
|
|
|
|
<h4 id="smilTimesheetsNS-Prefetch-Attributes-Bandwidth">The <a
|
|
name="adef-timesheetsBandwidth"><span class="adef">bandwidth</span></a>
|
|
Attribute</h4>
|
|
|
|
<p>The <a href="#adef-timesheetsBandwidth"
|
|
class="noxref"><span
|
|
class="ainst-timesheetsBandwidth ainst">bandwidth</span></a> attribute
|
|
defines how much network bandwidth the user agent should use when doing the
|
|
prefetch. It is defined in the <a
|
|
href="http://www.w3.org/TR/SMIL3/smil-content.html#ContentControlNS-PrefetchControl">SMIL
|
|
3.0 PrefetchControl</a> module.</p>
|
|
|
|
<h3 id="smilTimesheetsNS-Prefetch-Elements"><a name="q40">6.2
|
|
Elements</a></h3>
|
|
|
|
<p>The SMIL Timesheets includes the <a
|
|
href="#edef-timesheetsPrefetch" class="noxref"><span
|
|
class="einst-timesheetsPrefetch einst">prefetch</span></a> element of the <a
|
|
href="http://www.w3.org/TR/SMIL3/smil-content.html#ContentControlNS-PrefetchControl">SMIL
|
|
3.0 PrefetchControl</a> module.</p>
|
|
|
|
<h4 id="smilTimesheetsNS-Prefetch-Elements-Prefetch">The <a
|
|
name="edef-timesheetsPrefetch" id="edef-timesheetsPrefetch"><span
|
|
class="edef">prefetch</span></a> Element</h4>
|
|
|
|
<p>The <a href="#edef-timesheetsPrefetch" class="noxref"><span
|
|
class="einst-timesheetsPrefetch einst">prefetch</span></a> element gives
|
|
authoring tools or savvy authors the ability to schedule retrieval of
|
|
resources when they think that there is available bandwidth or time to do it.
|
|
It is defined in the <a
|
|
href="http://www.w3.org/TR/SMIL3/smil-content.html#ContentControlNS-PrefetchControl">SMIL
|
|
3.0 PrefetchControl</a> module. It uses the <a
|
|
href="#adef-timesheetsMediaSize" class="noxref"><span
|
|
class="ainst-timesheetsMediaSize ainst">mediaSize</span></a>, <a
|
|
href="#adef-timesheetsMediaTime" class="noxref"><span
|
|
class="ainst-timesheetsMediaTime ainst">mediaTime</span></a>, and <a
|
|
href="#adef-timesheetsBandwidth" class="noxref"><span
|
|
class="ainst-timesheetsBandwidth ainst">bandwidth</span></a> attributes.</p>
|
|
|
|
<div class="informative">
|
|
<p><em>This section is informative.</em></p>
|
|
|
|
<p>The following example illustrates how to use the <a
|
|
href="#edef-timesheetsPrefetch" class="noxref"><span
|
|
class="einst-timesheetsPrefetch einst">prefetch</span></a> element.</p>
|
|
|
|
<div>
|
|
<pre class="example"> <head>
|
|
<smil:timesheet>
|
|
<smil:seq>
|
|
<smil:prefetch select="#Image1" mediaSize="100%" />
|
|
<smil:par>
|
|
<smil:item select="#Image1" dur="5s" />
|
|
<smil:prefetch select="#Image2" />
|
|
</smil:par>
|
|
<smil:par>
|
|
<smil:item select="#Image2" dur="5s" />
|
|
<smil:prefetch select="#Image3" />
|
|
</smil:par>
|
|
<smil:par>
|
|
<smil:item select="#Image3" dur="5s" />
|
|
<smil:prefetch select="#Image4" />
|
|
</smil:par>
|
|
<smil:par>
|
|
<smil:item select="#Image4" dur="5s" />
|
|
<smil:prefetch select="#Image5" />
|
|
</smil:par>
|
|
<smil:item select="#Image5" dur="5s" />
|
|
</smil:seq>
|
|
</smil:timesheet>
|
|
</head>
|
|
<body>
|
|
<div xml:id="Images">
|
|
<img src="img/Image1.jpg" alt="Image1" class="Image" xml:id="Image1" />
|
|
<img src="img/Image2.jpg" alt="Image2" class="Image" xml:id="Image2" />
|
|
<img src="img/Image3.jpg" alt="Image3" class="Image" xml:id="Image3" />
|
|
<img src="img/Image4.jpg" alt="Image4" class="Image" xml:id="Image4" />
|
|
<img src="img/Image5.jpg" alt="Image5" class="Image" xml:id="Image5" />
|
|
</div>
|
|
</body></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 id="smilTimesheetsNS-Animation"><a name="q42">7 Animation</a></h2>
|
|
|
|
<div class="normative">
|
|
<p><em>This section is normative.</em></p>
|
|
|
|
<p>The SMIL Timesheets uses the <a
|
|
href="http://www.w3.org/TR/SMIL3/smil-animation.html#animationNS-OverviewBasic">SMIL
|
|
3.0 BasicAnimation</a> module. This section gives further details on how the
|
|
attributes and elements of the <a
|
|
href="http://www.w3.org/TR/SMIL3/smil-animation.html#animationNS-OverviewBasic">SMIL
|
|
3.0 BasicAnimation</a> module are used in Timesheets.The reader is presumed
|
|
to have read the <a
|
|
href="http://www.w3.org/TR/SMIL3/smil-animation.html#animationNS-OverviewBasic">SMIL
|
|
3.0 BasicAnimation</a> module and be familiar with it.</p>
|
|
|
|
<h3 id="smilTimesheetsNS-Animation-Attributes"><a name="q43">7.1
|
|
Attributes</a></h3>
|
|
|
|
<div class="informative">
|
|
<p><em>This section is informative.</em></p>
|
|
|
|
<p>In <a
|
|
href="http://www.w3.org/TR/SMIL3/smil-animation.html#animationNS-OverviewBasic">SMIL
|
|
3.0 BasicAnimation</a> module, the animation target element can be referenced
|
|
either with <code>targetElement</code> or XLink <code>href</code> attribute.
|
|
According to the module, a host language designer should select only one of
|
|
them. In Timesheets, the <code>href</code> is more natural choice. However,
|
|
use of wider selection of CSS selectors is prefered as in the <a
|
|
href="#edef-timesheetsItem" class="noxref"><span
|
|
class="einst-timesheetsItem einst">item</span></a> element. Therefore, the <a
|
|
href="#adef-timesheetsSelect" class="noxref"><span
|
|
class="ainst-timesheetsSelect ainst">select</span></a> attribute is used
|
|
instead of <code>targetElement</code> and <code>href</code> attributes.
|
|
Because of this choise, the XLink <code>actuate</code>, <code>show</code>,
|
|
and <code>type</code> attributes are also not used.</p>
|
|
</div>
|
|
|
|
<p>An animation element can define the target element of the animation either
|
|
explicitly or implicitly. An explicit definition uses the <a
|
|
href="#adef-timesheetsSelect" class="noxref"><span
|
|
class="ainst-timesheetsSelect ainst">select</span></a> attribute to specify
|
|
the target element. The syntax for this is described below. If no explicit
|
|
target is specified, that is, the animation element does not specify the <a
|
|
href="#adef-timesheetsSelect" class="noxref"><span
|
|
class="ainst-timesheetsSelect ainst">select</span></a> attribute, the
|
|
implicit target element is the host language element or elements referenced
|
|
by the parent or ancestor <a href="#edef-timesheetsItem"
|
|
class="noxref"><span class="einst-timesheetsItem einst">item</span></a>
|
|
element.</p>
|
|
|
|
<p>Timesheets uses the <a href="#adef-timesheetsSelect"
|
|
class="noxref"><span class="ainst-timesheetsSelect ainst">select</span></a>
|
|
attribute to specify the target element. Therefore it does not include the
|
|
<code>targetElement</code> and the XLink attributes <code>href</code>,
|
|
<code>actuate</code>, <code>show</code>, and <code>type</code> attributes.
|
|
The target attribute is specified with the <a
|
|
href="#adef-timesheetsAttributeName" class="noxref"><span
|
|
class="ainst-timesheetsAttributeName ainst">attributeName</span></a>
|
|
attribute and optional <a href="#adef-timesheetsAttributeType"
|
|
class="noxref"><span
|
|
class="ainst-timesheetsAttributeType ainst">attributeType</span></a>
|
|
attribute, which specifies whether the target attribute is CSS property or
|
|
XML attribute. Animation is described either as a list of <a
|
|
href="#adef-timesheetsValues" class="noxref"><span
|
|
class="ainst-timesheetsValues ainst">values</span></a>, or in a simplified
|
|
form that describes the <a href="#adef-timesheetsFrom"
|
|
class="noxref"><span class="ainst-timesheetsFrom ainst">from</span></a>, <a
|
|
href="#adef-timesheetsTo" class="noxref"><span
|
|
class="ainst-timesheetsTo ainst">to</span></a>, and <a
|
|
href="#adef-timesheetsBy" class="noxref"><span
|
|
class="ainst-timesheetsBy ainst">by</span></a> values. The <a
|
|
href="#adef-timesheetsCalcMode" class="noxref"><span
|
|
class="ainst-timesheetsCalcMode ainst">calcMode</span></a> attribute
|
|
specifies the interpolation mode for the animation. The cumulative and
|
|
additive behavior of repeating animations is controlled with the <a
|
|
href="#adef-timesheetsAccumulate" class="noxref"><span
|
|
class="ainst-timesheetsAccumulate ainst">accumulate</span></a> and <a
|
|
href="#adef-timesheetsAdditive" class="noxref"><span
|
|
class="ainst-timesheetsAdditive ainst">additive</span></a> attributes,
|
|
respectively. The <a href="#adef-timesheetsOrigin"
|
|
class="noxref"><span class="ainst-timesheetsOrigin ainst">origin</span></a>
|
|
attribute specifies the origin of motion for the animation. The <a
|
|
href="#adef-timesheetsBegin" class="noxref"><span
|
|
class="ainst-timesheetsBegin ainst">begin</span></a>, <a
|
|
href="#adef-timesheetsDur" class="noxref"><span
|
|
class="ainst-timesheetsDur ainst">dur</span></a>, <a
|
|
href="#adef-timesheetsEnd" class="noxref"><span
|
|
class="ainst-timesheetsEnd ainst">end</span></a>, and <a
|
|
href="#adef-timesheetsEnd" class="noxref"><span
|
|
class="ainst-timesheetsEnd ainst">fill</span></a> attributes are used to
|
|
control the timing of animation, while <a
|
|
href="#adef-timesheetsRepeatCount" class="noxref"><span
|
|
class="ainst-timesheetsRepeatCount ainst">repeatCount</span></a> and <a
|
|
href="#adef-timesheetsRepeatDur" class="noxref"><span
|
|
class="ainst-timesheetsRepeatDur ainst">repeatDur</span></a> attributes are
|
|
used to control the repeat of animation. Finally, <a
|
|
href="#adef-timesheetsBeginInc" class="noxref"><span
|
|
class="ainst-timesheetsBeginInc ainst">beginInc</span></a> attribute can be
|
|
used to increment the begin time, while the <a
|
|
href="#smilTimesheetsNS-Elements-Item-Functions-Index"><code>index()</code></a>
|
|
function can be used to automatically generate index numbers for events.</p>
|
|
|
|
<p>The <a href="#adef-timesheetsSelect" class="noxref"><span
|
|
class="ainst-timesheetsSelect ainst">select</span></a> and <a
|
|
href="#adef-timesheetsBeginInc" class="noxref"><span
|
|
class="ainst-timesheetsBeginInc ainst">beginInc</span></a> attributes and the
|
|
<a
|
|
href="#smilTimesheetsNS-Elements-Item-Functions-Index"><code>index()</code></a>
|
|
function are described in the <a href="#smilTimesheetsNS-Elements">SMIL
|
|
Timesheet Specific Elements</a> section, while the <a
|
|
href="#adef-timesheetsBegin" class="noxref"><span
|
|
class="ainst-timesheetsBegin ainst">begin</span></a>, <a
|
|
href="#adef-timesheetsDur" class="noxref"><span
|
|
class="ainst-timesheetsDur ainst">dur</span></a>, <a
|
|
href="#adef-timesheetsEnd" class="noxref"><span
|
|
class="ainst-timesheetsEnd ainst">end</span></a>, <a
|
|
href="#adef-timesheetsEnd" class="noxref"><span
|
|
class="ainst-timesheetsEnd ainst">fill</span></a>, <a
|
|
href="#adef-timesheetsRepeatCount" class="noxref"><span
|
|
class="ainst-timesheetsRepeatCount ainst">repeatCount</span></a>, and <a
|
|
href="#adef-timesheetsRepeatDur" class="noxref"><span
|
|
class="ainst-timesheetsRepeatDur ainst">repeatDur</span></a> attributes are
|
|
described in the <a href="#smilTimesheetsNS-Timing">Timing and
|
|
Synchronization</a> section. The other animation attributes are described
|
|
below.</p>
|
|
|
|
<h4 id="smilTimesheetsNS-Animation-Attributes-AttributeName">The <a
|
|
name="adef-timesheetsAttributeName"><span
|
|
class="adef">attributeName</span></a> Attribute</h4>
|
|
|
|
<p>The <a href="#adef-timesheetsAttributeName"
|
|
class="noxref"><span
|
|
class="ainst-timesheetsAttributeName ainst">attributeName</span></a>
|
|
attribute specifies the name of the target attribute. It is defined in the <a
|
|
href="http://www.w3.org/TR/SMIL3/smil-animation.html#animationNS-SpecifyingTargetAttribute">SMIL
|
|
3.0 BasicAnimation </a> module.</p>
|
|
|
|
<h4 id="smilTimesheetsNS-Animation-Attributes-AttributeType">The <a
|
|
name="adef-timesheetsAttributeType"><span
|
|
class="adef">attributeType</span></a> Attribute</h4>
|
|
|
|
<p>The <a href="#adef-timesheetsAttributeType"
|
|
class="noxref"><span
|
|
class="ainst-timesheetsAttributeType ainst">attributeType</span></a>
|
|
attribute specifies the namespace in which the target attribute and its
|
|
associated values are defined. It is defined in the <a
|
|
href="http://www.w3.org/TR/SMIL3/smil-animation.html#animationNS-SpecifyingTargetAttribute">SMIL
|
|
3.0 BasicAnimation </a> module.</p>
|
|
|
|
<h4 id="smilTimesheetsNS-Animation-Attributes-Values">The <a
|
|
name="adef-timesheetsValues"><span class="adef">values</span></a>
|
|
Attribute</h4>
|
|
|
|
<p>The <a href="#adef-timesheetsValues" class="noxref"><span
|
|
class="ainst-timesheetsValues ainst">values</span></a> attribute contains a
|
|
semicolon-separated list of one or more values. It is defined in the <a
|
|
href="http://www.w3.org/TR/SMIL3/smil-animation.html#animationNS-SpecifyingAnimationFunction">SMIL
|
|
3.0 BasicAnimation </a> module.</p>
|
|
|
|
<h4 id="smilTimesheetsNS-Animation-Attributes-From">The <a
|
|
name="adef-timesheetsFrom"><span class="adef">from</span></a> Attribute</h4>
|
|
|
|
<p>The <a href="#adef-timesheetsFrom" class="noxref"><span
|
|
class="ainst-timesheetsFrom ainst">from</span></a> attribute specifies the
|
|
starting value of the animation. It is defined in the <a
|
|
href="http://www.w3.org/TR/SMIL3/smil-animation.html#AnimationNS-FromToBy">SMIL
|
|
3.0 BasicAnimation </a> module.</p>
|
|
|
|
<h4 id="smilTimesheetsNS-Animation-Attributes-To">The <a
|
|
name="adef-timesheetsTo"><span class="adef">to</span></a> Attribute</h4>
|
|
|
|
<p>The <a href="#adef-timesheetsTo" class="noxref"><span
|
|
class="ainst-timesheetsTo ainst">to</span></a> attribute specifies the ending
|
|
value of the animation. It is defined in the <a
|
|
href="http://www.w3.org/TR/SMIL3/smil-animation.html#AnimationNS-FromToBy">SMIL
|
|
3.0 BasicAnimation </a> module.</p>
|
|
|
|
<h4 id="smilTimesheetsNS-Animation-Attributes-By">The <a
|
|
name="adef-timesheetsBy"><span class="adef">by</span></a> Attribute</h4>
|
|
|
|
<p>The <a href="#adef-timesheetsBy" class="noxref"><span
|
|
class="ainst-timesheetsBy ainst">by</span></a> attribute Specifies a relative
|
|
offset value for the animation. It is defined in the <a
|
|
href="http://www.w3.org/TR/SMIL3/smil-animation.html#AnimationNS-FromToBy">SMIL
|
|
3.0 BasicAnimation </a> module.</p>
|
|
|
|
<h4 id="smilTimesheetsNS-Animation-Attributes-CalcMode">The <a
|
|
name="adef-timesheetsCalcMode"><span class="adef">calcMode</span></a>
|
|
Attribute</h4>
|
|
|
|
<p>The <a href="#adef-timesheetsCalcMode" class="noxref"><span
|
|
class="ainst-timesheetsCalcMode ainst">calcMode</span></a> attribute
|
|
specifies the interpolation mode for the animation. It is defined in the <a
|
|
href="http://www.w3.org/TR/SMIL3/smil-animation.html#animationNS-SpecifyingAnimationFunction">SMIL
|
|
3.0 BasicAnimation </a> module.</p>
|
|
|
|
<h4 id="smilTimesheetsNS-Animation-Attributes-Accumulate">The <a
|
|
name="adef-timesheetsAccumulate"><span class="adef">accumulate</span></a>
|
|
Attribute</h4>
|
|
|
|
<p>The <a href="#adef-timesheetsAccumulate"
|
|
class="noxref"><span
|
|
class="ainst-timesheetsAccumulate ainst">accumulate</span></a> attribute
|
|
controls whether or not the animation is cumulative. It is defined in the <a
|
|
href="http://www.w3.org/TR/SMIL3/smil-animation.html#animationNS-SpecifyingAnimationEffect">SMIL
|
|
3.0 BasicAnimation </a> module.</p>
|
|
|
|
<h4 id="smilTimesheetsNS-Animation-Attributes-Additive">The <a
|
|
name="adef-timesheetsAdditive"><span class="adef">additive</span></a>
|
|
Attribute</h4>
|
|
|
|
<p>The <a href="#adef-timesheetsAdditive" class="noxref"><span
|
|
class="ainst-timesheetsAdditive ainst">additive</span></a> attribute controls
|
|
whether or not the animation is additive. It is defined in the <a
|
|
href="http://www.w3.org/TR/SMIL3/smil-animation.html#animationNS-SpecifyingAnimationEffect">SMIL
|
|
3.0 BasicAnimation </a> module.</p>
|
|
|
|
<h4 id="smilTimesheetsNS-Animation-Attributes-Origin">The <a
|
|
name="adef-timesheetsOrigin"><span class="adef">origin</span></a>
|
|
Attribute</h4>
|
|
|
|
<p>The <a href="#adef-timesheetsOrigin" class="noxref"><span
|
|
class="ainst-timesheetsOrigin ainst">origin</span></a> attribute specifies
|
|
the origin of motion for the animation. It is defined in the <a
|
|
href="http://www.w3.org/TR/SMIL3/smil-animation.html#animationNS-animateMotionElement">SMIL
|
|
3.0 BasicAnimation </a> module.</p>
|
|
|
|
<h3 id="smilTimesheetsNS-Animation-Elements"><a name="q54">7.2
|
|
Elements</a></h3>
|
|
|
|
<p>The SMIL Timesheets includes all elements of the <a
|
|
href="http://www.w3.org/TR/SMIL3/smil-animation.html#animationNS-OverviewBasic">SMIL
|
|
3.0 BasicAnimation</a> module: <a
|
|
href="#edef-timesheetsAnimate" class="noxref"><span
|
|
class="einst-timesheetsAnimate einst">animate</span></a>, <a
|
|
href="#edef-timesheetsSet" class="noxref"><span
|
|
class="einst-timesheetsSet einst">set</span></a>, <a
|
|
href="#edef-timesheetsAnimateMotion" class="noxref"><span
|
|
class="einst-timesheetsAnimateMotion einst">animateMotion</span></a>, and <a
|
|
href="#edef-timesheetsAnimateColor" class="noxref"><span
|
|
class="einst-timesheetsAnimateColor einst">animateColor</span></a>.</p>
|
|
|
|
<h4 id="smilTimesheetsNS-Animation-Elements-Animate">The <a
|
|
name="edef-timesheetsAnimate" id="edef-timesheetsAnimate"><span
|
|
class="edef">animate</span></a> Element</h4>
|
|
|
|
<p>The <a href="#edef-timesheetsAnimate" class="noxref"><span
|
|
class="einst-timesheetsAnimate einst">animate</span></a> element controls the
|
|
animation of both CSS properties and XML element attributes. It is defined in
|
|
the <a
|
|
href="http://www.w3.org/TR/SMIL3/smil-animation.html#animationNS-animateElement">SMIL
|
|
3.0 BasicAnimation</a> module. It uses the <a
|
|
href="#adef-timesheetsSelect" class="noxref"><span
|
|
class="ainst-timesheetsSelect ainst">select</span></a>, <a
|
|
href="#adef-timesheetsBeginInc" class="noxref"><span
|
|
class="ainst-timesheetsBeginInc ainst">beginInc</span></a>, <a
|
|
href="#adef-timesheetsFrom" class="noxref"><span
|
|
class="ainst-timesheetsFrom ainst">from</span></a>, <a
|
|
href="#adef-timesheetsTo" class="noxref"><span
|
|
class="ainst-timesheetsTo ainst">to</span></a>, <a
|
|
href="#adef-timesheetsBy" class="noxref"><span
|
|
class="ainst-timesheetsBy ainst">by</span></a>, <a
|
|
href="#adef-timesheetsValues" class="noxref"><span
|
|
class="ainst-timesheetsValues ainst">values</span></a>, <a
|
|
href="#adef-timesheetsCalcMode" class="noxref"><span
|
|
class="ainst-timesheetsCalcMode ainst">calcMode</span></a>, <a
|
|
href="#adef-timesheetsAccumulate" class="noxref"><span
|
|
class="ainst-timesheetsAccumulate ainst">accumulate</span></a>, <a
|
|
href="#adef-timesheetsAdditive" class="noxref"><span
|
|
class="ainst-timesheetsAdditive ainst">additive</span></a>, <a
|
|
href="#adef-timesheetsBegin" class="noxref"><span
|
|
class="ainst-timesheetsBegin ainst">begin</span></a>, <a
|
|
href="#adef-timesheetsDur" class="noxref"><span
|
|
class="ainst-timesheetsDur ainst">dur</span></a>, <a
|
|
href="#adef-timesheetsEnd" class="noxref"><span
|
|
class="ainst-timesheetsEnd ainst">end</span></a>, <a
|
|
href="#adef-timesheetsFill" class="noxref"><span
|
|
class="ainst-timesheetsFill ainst">fill</span></a>, <a
|
|
href="#adef-timesheetsRepeatCount" class="noxref"><span
|
|
class="ainst-timesheetsRepeatCount ainst">repeatCount</span></a>, and <a
|
|
href="#adef-timesheetsRepeatDur" class="noxref"><span
|
|
class="ainst-timesheetsRepeatDur ainst">repeatDur</span></a> attributes.</p>
|
|
|
|
<div class="informative">
|
|
<p><em>This section is informative.</em></p>
|
|
|
|
<p>The following example illustrates how the animate element can be used to
|
|
animate CSS properties of elements of the host language.</p>
|
|
|
|
<div>
|
|
<pre class="example"><smil:timesheet>
|
|
<smil:seq>
|
|
<smil:item select=".Slide" dur="15s">
|
|
<smil:par>
|
|
<smil:item select=".Bullet" beginInc="3s">
|
|
<smil:animate select=".Bullet" attributeType="CSS"
|
|
attributeName="margin-left" values="200;0" dur="1s" />
|
|
</smil:item>
|
|
</smil:par>
|
|
</smil:item>
|
|
</smil:seq>
|
|
</smil:timesheet></pre>
|
|
</div>
|
|
|
|
<p>The slides are shown in sequential order, while the bullets are shown in
|
|
parallel within each slide. However, each bullet starts 3 seconds after the
|
|
previous one. Each bullet flies from right to left for 1 second when
|
|
shown.</p>
|
|
</div>
|
|
|
|
<h4 id="smilTimesheetsNS-Animation-Elements-Set">The <a
|
|
name="edef-timesheetsSet" id="edef-timesheetsSet"><span
|
|
class="edef">set</span></a> Element</h4>
|
|
|
|
<p>The <a href="#edef-timesheetsSet" class="noxref"><span
|
|
class="einst-timesheetsSet einst">set</span></a> element provides a simple
|
|
means of setting the value of an attribute for a specified duration. It is
|
|
defined in the <a
|
|
href="http://www.w3.org/TR/SMIL3/smil-animation.html#animationNS-setElement">SMIL
|
|
3.0 BasicAnimation</a> module. It uses the <a
|
|
href="#adef-timesheetsSelect" class="noxref"><span
|
|
class="ainst-timesheetsSelect ainst">select</span></a>, <a
|
|
href="#adef-timesheetsBeginInc" class="noxref"><span
|
|
class="ainst-timesheetsBeginInc ainst">beginInc</span></a>, <a
|
|
href="#adef-timesheetsTo" class="noxref"><span
|
|
class="ainst-timesheetsTo ainst">to</span></a>, <a
|
|
href="#adef-timesheetsBegin" class="noxref"><span
|
|
class="ainst-timesheetsBegin ainst">begin</span></a>, <a
|
|
href="#adef-timesheetsDur" class="noxref"><span
|
|
class="ainst-timesheetsDur ainst">dur</span></a>, <a
|
|
href="#adef-timesheetsEnd" class="noxref"><span
|
|
class="ainst-timesheetsEnd ainst">end</span></a>, <a
|
|
href="#adef-timesheetsFill" class="noxref"><span
|
|
class="ainst-timesheetsFill ainst">fill</span></a>, <a
|
|
href="#adef-timesheetsRepeatCount" class="noxref"><span
|
|
class="ainst-timesheetsRepeatCount ainst">repeatCount</span></a>, and <a
|
|
href="#adef-timesheetsRepeatDur" class="noxref"><span
|
|
class="ainst-timesheetsRepeatDur ainst">repeatDur</span></a> attributes.</p>
|
|
|
|
<h4 id="smilTimesheetsNS-Animation-Elements-AnimateMotion">The <a
|
|
name="edef-timesheetsAnimateMotion" id="edef-timesheetsAnimateMotion"><span
|
|
class="edef">animateMotion</span></a> Element</h4>
|
|
|
|
<p>The <a href="#edef-timesheetsAnimateMotion"
|
|
class="noxref"><span
|
|
class="einst-timesheetsAnimateMotion einst">animateMotion</span></a> element
|
|
moves an element along a path. It is defined in the <a
|
|
href="http://www.w3.org/TR/SMIL3/smil-animation.html#animationNS-animateMotionElement">SMIL
|
|
3.0 BasicAnimation</a> module. It uses the <a
|
|
href="#adef-timesheetsSelect" class="noxref"><span
|
|
class="ainst-timesheetsSelect ainst">select</span></a>, <a
|
|
href="#adef-timesheetsBeginInc" class="noxref"><span
|
|
class="ainst-timesheetsBeginInc ainst">beginInc</span></a>, <a
|
|
href="#adef-timesheetsFrom" class="noxref"><span
|
|
class="ainst-timesheetsFrom ainst">from</span></a>, <a
|
|
href="#adef-timesheetsTo" class="noxref"><span
|
|
class="ainst-timesheetsTo ainst">to</span></a>, <a
|
|
href="#adef-timesheetsBy" class="noxref"><span
|
|
class="ainst-timesheetsBy ainst">by</span></a>, <a
|
|
href="#adef-timesheetsValues" class="noxref"><span
|
|
class="ainst-timesheetsValues ainst">values</span></a>, <a
|
|
href="#adef-timesheetsCalcMode" class="noxref"><span
|
|
class="ainst-timesheetsCalcMode ainst">calcMode</span></a>, <a
|
|
href="#adef-timesheetsAccumulate" class="noxref"><span
|
|
class="ainst-timesheetsAccumulate ainst">accumulate</span></a>, <a
|
|
href="#adef-timesheetsAdditive" class="noxref"><span
|
|
class="ainst-timesheetsAdditive ainst">additive</span></a>, <a
|
|
href="#adef-timesheetsOrigin" class="noxref"><span
|
|
class="ainst-timesheetsOrigin ainst">origin</span></a>, <a
|
|
href="#adef-timesheetsBegin" class="noxref"><span
|
|
class="ainst-timesheetsBegin ainst">begin</span></a>, <a
|
|
href="#adef-timesheetsDur" class="noxref"><span
|
|
class="ainst-timesheetsDur ainst">dur</span></a>, <a
|
|
href="#adef-timesheetsEnd" class="noxref"><span
|
|
class="ainst-timesheetsEnd ainst">end</span></a>, <a
|
|
href="#adef-timesheetsFill" class="noxref"><span
|
|
class="ainst-timesheetsFill ainst">fill</span></a>, <a
|
|
href="#adef-timesheetsRepeatCount" class="noxref"><span
|
|
class="ainst-timesheetsRepeatCount ainst">repeatCount</span></a>, and <a
|
|
href="#adef-timesheetsRepeatDur" class="noxref"><span
|
|
class="ainst-timesheetsRepeatDur ainst">repeatDur</span></a> attributes.</p>
|
|
|
|
<h4 id="smilTimesheetsNS-Animation-Elements-AnimateColor">The <a
|
|
name="edef-timesheetsAnimateColor" id="edef-timesheetsAnimateColor"><span
|
|
class="edef">animateColor</span></a> Element</h4>
|
|
|
|
<p>The <a href="#edef-timesheetsAnimateColor"
|
|
class="noxref"><span
|
|
class="einst-timesheetsAnimateColor einst">animateColor</span></a> element
|
|
specifies an animation of a color attribute. It is defined in the <a
|
|
href="http://www.w3.org/TR/SMIL3/smil-animation.html#animationNS-animateColorElement">SMIL
|
|
3.0 BasicAnimation</a> module. It uses the <a
|
|
href="#adef-timesheetsSelect" class="noxref"><span
|
|
class="ainst-timesheetsSelect ainst">select</span></a>, <a
|
|
href="#adef-timesheetsBeginInc" class="noxref"><span
|
|
class="ainst-timesheetsBeginInc ainst">beginInc</span></a>, <a
|
|
href="#adef-timesheetsFrom" class="noxref"><span
|
|
class="ainst-timesheetsFrom ainst">from</span></a>, <a
|
|
href="#adef-timesheetsTo" class="noxref"><span
|
|
class="ainst-timesheetsTo ainst">to</span></a>, <a
|
|
href="#adef-timesheetsBy" class="noxref"><span
|
|
class="ainst-timesheetsBy ainst">by</span></a>, <a
|
|
href="#adef-timesheetsValues" class="noxref"><span
|
|
class="ainst-timesheetsValues ainst">values</span></a>, <a
|
|
href="#adef-timesheetsCalcMode" class="noxref"><span
|
|
class="ainst-timesheetsCalcMode ainst">calcMode</span></a>, <a
|
|
href="#adef-timesheetsAccumulate" class="noxref"><span
|
|
class="ainst-timesheetsAccumulate ainst">accumulate</span></a>, <a
|
|
href="#adef-timesheetsAdditive" class="noxref"><span
|
|
class="ainst-timesheetsAdditive ainst">additive</span></a>, <a
|
|
href="#adef-timesheetsBegin" class="noxref"><span
|
|
class="ainst-timesheetsBegin ainst">begin</span></a>, <a
|
|
href="#adef-timesheetsDur" class="noxref"><span
|
|
class="ainst-timesheetsDur ainst">dur</span></a>, <a
|
|
href="#adef-timesheetsEnd" class="noxref"><span
|
|
class="ainst-timesheetsEnd ainst">end</span></a>, <a
|
|
href="#adef-timesheetsFill" class="noxref"><span
|
|
class="ainst-timesheetsFill ainst">fill</span></a>, <a
|
|
href="#adef-timesheetsRepeatCount" class="noxref"><span
|
|
class="ainst-timesheetsRepeatCount ainst">repeatCount</span></a>, and <a
|
|
href="#adef-timesheetsRepeatDur" class="noxref"><span
|
|
class="ainst-timesheetsRepeatDur ainst">repeatDur</span></a> attributes.</p>
|
|
</div>
|
|
|
|
<h2 id="smilTimesheetsNS-Events"><a name="q59">7 Event Model</a></h2>
|
|
|
|
<div class="ignore">
|
|
|
|
<div class="informative">
|
|
<p><em>This section is informative.</em></p>
|
|
|
|
<p>The <a href="#adef-timesheetsBegin" class="noxref"><span
|
|
class="ainst-timesheetsBegin ainst">begin</span></a>, <a
|
|
href="#adef-timesheetsDur" class="noxref"><span
|
|
class="ainst-timesheetsDur ainst">dur</span></a>, and <a
|
|
href="#adef-timesheetsEnd" class="noxref"><span
|
|
class="ainst-timesheetsEnd ainst">end</span></a> attributes can contain
|
|
references to DOM events <span class="inforef"><a href="#ref-DOM2Events"
|
|
rel="biblioentry" class="noxref"><span
|
|
class="inforef">[DOM2Events]</span></a></span>. DOM events can be triggered
|
|
by user interaction or by some other event in the document. Events are
|
|
divided into two distinct groups, internal events and user events.</p>
|
|
</div>
|
|
|
|
<h4 id="smilTimesheetsNS-Events-Internal"><a name="q60">Internal
|
|
Events</a></h4>
|
|
|
|
<div class="informative">
|
|
<p><em>This section is informative.</em></p>
|
|
|
|
<p>Internal events are dispatched from within the timesheets. They can be
|
|
used by other elements in the timesheet to create relations between different
|
|
parts of the timeline. The events specified are <code>beginEvent</code>
|
|
event, which is dispatched when an element starts and <code>endEvent</code>
|
|
event, which is dispatched when element stops.</p>
|
|
</div>
|
|
|
|
<h4 id="smilTimesheetsNS-Events-User"><a name="q61">User Events</a></h4>
|
|
|
|
<div class="informative">
|
|
<p><em>This section is informative.</em></p>
|
|
|
|
<p>User events are triggered by the actions that user makes. A typical
|
|
example is that the user activates a link in the document, and thus a
|
|
<code>DOMActivate</code> event is dispatched <span class="inforef"><a
|
|
href="#ref-DOM2Events" rel="biblioentry" class="noxref"><span
|
|
class="inforef">[DOM2Events]</span></a></span>.</p>
|
|
</div>
|
|
|
|
<h4 id="smilTimesheetsNS-Events-Semantics"><a name="q62">Event
|
|
Semantics</a></h4>
|
|
|
|
<div class="informative">
|
|
<p><em>This section is informative.</em></p>
|
|
|
|
<p>A <a href="#edef-timesheetsTimesheet" class="noxref"><span
|
|
class="einst-timesheetsTimesheet einst">timesheet</span></a> element is set
|
|
to listen to a certain event by specifying the event's target and type by
|
|
either the <a href="#adef-timesheetsBegin"
|
|
class="noxref"><span class="ainst-timesheetsBegin ainst">begin</span></a>, <a
|
|
href="#adef-timesheetsDur" class="noxref"><span
|
|
class="ainst-timesheetsDur ainst">dur</span></a>, or <a
|
|
href="#adef-timesheetsEnd" class="noxref"><span
|
|
class="ainst-timesheetsEnd ainst">end</span></a> attributes. When specified
|
|
by the <a href="#adef-timesheetsBegin" class="noxref"><span
|
|
class="ainst-timesheetsBegin ainst">begin</span></a> attribute, an inactive
|
|
or started but not yet activated element will be activated when it receives
|
|
the specified event. The parent time containers and item elements have to be
|
|
active, though.</p>
|
|
|
|
<p>When the element is specified to stop according to an event, it does not
|
|
cause that much processing in the timesheet. The element informs its parent
|
|
that it has stopped and parent then decides what should happen next. Of
|
|
course, some other element could be waiting to be activated according to the
|
|
<code>endEvent</code> event from the particular element.</p>
|
|
</div>
|
|
|
|
<h4 id="smilTimesheetsNS-Events-Index"><a name="q63">Index Function</a></h4>
|
|
|
|
<div class="informative">
|
|
<p><em>This section is informative.</em></p>
|
|
|
|
<p>The <code>index()</code> function can be used to automatically generate
|
|
index numbers for both internal and external events within <a
|
|
href="#adef-timesheetsBegin" class="noxref"><span
|
|
class="ainst-timesheetsBegin ainst">begin</span></a>, <a
|
|
href="#adef-timesheetsDur" class="noxref"><span
|
|
class="ainst-timesheetsDur ainst">dur</span></a>, or <a
|
|
href="#adef-timesheetsEnd" class="noxref"><span
|
|
class="ainst-timesheetsEnd ainst">end</span></a> attributes of item element.
|
|
The following example gives an example on how <code>index()</code> function
|
|
can be used. The example is an image show, which consist of images and
|
|
corresponding thumbnail images, which can be used to select an individual
|
|
image for viewing. Only one image is shown at a time.</p>
|
|
|
|
<div>
|
|
<pre class="example"><html xmlns="http://www.w3.org/1999/xhtml"
|
|
xmlns:smil="http://www.w3.org/ns/SMIL30">
|
|
<head>
|
|
<title>Timesheet Example</title>
|
|
<smil:timesheet>
|
|
<smil:par>
|
|
<smil:excl>
|
|
<smil:item select="#Image1" begin="Thumbnail1.DOMActivate" />
|
|
<smil:item select="#Image2" begin="Thumbnail2.DOMActivate" />
|
|
<smil:item select="#Image3" begin="Thumbnail3.DOMActivate" />
|
|
<smil:item select="#Image4" begin="Thumbnail4.DOMActivate" />
|
|
<smil:item select="#Image5" begin="Thumbnail5.DOMActivate" />
|
|
</smil:excl>
|
|
<smil:par>
|
|
<smil:item select="#Thumbnail1" />
|
|
<smil:item select="#Thumbnail2" />
|
|
<smil:item select="#Thumbnail3" />
|
|
<smil:item select="#Thumbnail4" />
|
|
<smil:item select="#Thumbnail5" />
|
|
</smil:par>
|
|
</smil:par>
|
|
</smil:timesheet>
|
|
</head>
|
|
<body>
|
|
<img alt="image1" src="Image1.jpg" class="Image" xml:id="Image1" />
|
|
<img alt="image2" src="Image2.jpg" class="Image" xml:id="Image2" />
|
|
<img alt="image3" src="Image3.jpg" class="Image" xml:id="Image3" />
|
|
<img alt="image4" src="Image4.jpg" class="Image" xml:id="Image4" />
|
|
<img alt="image5" src="Image5.jpg" class="Image" xml:id="Image5" />
|
|
<br />
|
|
<button class="Thumbnail" xml:id="Thumbnail1">
|
|
<img src="Thumbnail1.jpg" />
|
|
</button>
|
|
<button class="Thumbnail" xml:id="Thumbnail2">
|
|
<img src="Thumbnail2.jpg" />
|
|
</button>
|
|
<button class="Thumbnail" xml:id="Thumbnail3">
|
|
<img src="Thumbnail3.jpg" />
|
|
</button>
|
|
<button class="Thumbnail" xml:id="Thumbnail4">
|
|
<img src="Thumbnail4.jpg" />
|
|
</button>
|
|
<button class="Thumbnail" xml:id="Thumbnail5">
|
|
<img src="Thumbnail5.jpg" />
|
|
</button>
|
|
</body>
|
|
</html></pre>
|
|
</div>
|
|
|
|
<p>In the above example, the body of the HTML file consists of five pictures
|
|
and five buttons, which contain thumbnails of the same images. The idea is to
|
|
show one image at a time. The image to be shown is selected by the thumbnail
|
|
buttons. Therefore, the timesheets consist of one <a
|
|
href="#edef-timesheetsPar" class="noxref"><span
|
|
class="einst-timesheetsPar einst">par</span></a> time container, which
|
|
contains one <a href="#edef-timesheetsExcl"
|
|
class="noxref"><span class="einst-timesheetsExcl einst">excl</span></a> and
|
|
another <a href="#edef-timesheetsPar" class="noxref"><span
|
|
class="einst-timesheetsPar einst">par</span></a> time container. Within the
|
|
<a href="#edef-timesheetsExcl" class="noxref"><span
|
|
class="einst-timesheetsExcl einst">excl</span></a> time container the <a
|
|
href="#edef-timesheetsItem" class="noxref"><span
|
|
class="einst-timesheetsItem einst">item</span></a> elements select the
|
|
images, while the <a href="#edef-timesheetsItem"
|
|
class="noxref"><span class="einst-timesheetsItem einst">item</span></a>
|
|
elements within the second <a href="#edef-timesheetsPar"
|
|
class="noxref"><span class="einst-timesheetsPar einst">par</span></a> time
|
|
container select the individual thumbnail buttons. <code>DOMActivate</code>
|
|
events cause the <a href="#edef-timesheetsExcl"
|
|
class="noxref"><span class="einst-timesheetsExcl einst">excl</span></a> time
|
|
container to change the shown image according to which button was pushed.</p>
|
|
|
|
<p>The problem with the above example is that each time the position of an
|
|
image is changed, deleted, or added to the image show, the Timesheet has to
|
|
be updated. Therefore, the Timesheet is not reusable. The main problem lies
|
|
in the references to the <code>DOMActive</code> events, because the index
|
|
numbers have to be updated. Thus, there is need to automatically generate
|
|
index numbers for the <code>DOMActivate</code> event references in the
|
|
Timesheets. The <code>index()</code> function can be used exactly for this
|
|
purpose. In the Timesheet below, <code>index()</code> function is used within
|
|
the <a href="#adef-timesheetsBegin" class="noxref"><span
|
|
class="ainst-timesheetsBegin ainst">begin</span></a> attribute of <a
|
|
href="#edef-timesheetsItem" class="noxref"><span
|
|
class="einst-timesheetsItem einst">item</span></a> element, which selects the
|
|
images within the <a href="#edef-timesheetsExcl"
|
|
class="noxref"><span class="einst-timesheetsExcl einst">excl</span></a> time
|
|
container.</p>
|
|
|
|
<div>
|
|
<pre class="example"><smil:timesheet>
|
|
<smil:par>
|
|
<smil:excl>
|
|
<smil:item select=".Image" begin="index(Thumbnail).DOMActivate" />
|
|
</smil:excl>
|
|
<smil:par>
|
|
<smil:item select=".Thumbnail" />
|
|
</smil:par>
|
|
</smil:par>
|
|
</smil:timesheet></pre>
|
|
</div>
|
|
|
|
<p>The <code>index()</code> function adds the index number to the Thumbnail
|
|
parameter (e.g., <code>Thumbnail0.DOMActivate</code>,
|
|
<code>Thumbnail1.DOMActivate</code>, etc.) in the <a
|
|
href="#adef-timesheetsBegin" class="noxref"><span
|
|
class="ainst-timesheetsBegin ainst">begin</span></a> attribute. Therefore,
|
|
one <code>".Image"</code> class selector can be used in the <a
|
|
href="#adef-timesheetsSelect" class="noxref"><span
|
|
class="ainst-timesheetsSelect ainst">select</span></a> attribute instead of
|
|
severall id selectors. The main advantage of this is that changing the order
|
|
of images, deleting images, or adding new images does not any longer require
|
|
updating the Timesheet. Thus, the Timesheets is now much more reusable.
|
|
However, there is one problem in the above example. The index numbering
|
|
starts from 0. It should be corrected to start from 1 by using the indexStart
|
|
attribute as shown in the example below.</p>
|
|
|
|
<div>
|
|
<pre class="example"><smil:timesheet>
|
|
<smil:par>
|
|
<smil:excl>
|
|
<smil:item select=".Image" indexStart="1" begin="index(Thumbnail).DOMActivate" />
|
|
</smil:excl>
|
|
<smil:par>
|
|
<smil:item select=".Thumbnail" />
|
|
</smil:par>
|
|
</smil:par>
|
|
</smil:timesheet></pre>
|
|
</div>
|
|
|
|
<p>Now, the index numbering starts from 1, and thus the Timesheet functions
|
|
properly. However, the Timesheets can be written in even more compact format.
|
|
The reason is that all the thumbnail images in buttons are allways shown, and
|
|
thus the second <a href="#edef-timesheetsPar"
|
|
class="noxref"><span class="einst-timesheetsPar einst">par</span></a> is
|
|
actually unnecessary. When it is removed, also the first <a
|
|
href="#edef-timesheetsPar" class="noxref"><span
|
|
class="einst-timesheetsPar einst">par</span></a> time container becomes
|
|
unnecessary. Therefore, the most simple Timesheets for this use case is as
|
|
follows.</p>
|
|
|
|
<div>
|
|
<pre class="example"><smil:timesheet>
|
|
<smil:excl>
|
|
<smil:item select=".Image" indexStart="1" begin="index(Thumbnail).DOMActivate" />
|
|
</smil:excl>
|
|
</smil:timesheet></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 id="smilTimesheetsNS-CSS"><a name="q64">8 Integration with CSS
|
|
Layout</a></h2>
|
|
|
|
<div class="informative">
|
|
<p><em>This section is informative.</em></p>
|
|
|
|
<p>Since SMIL Timesheets only describes the temporal dimension of the
|
|
document, it must be integrated with a host language's layout system. It can
|
|
be integrated, for example, with CSS based layout by affecting the CSS
|
|
properties of the timed elements. For instance, the CSS display property can
|
|
be used to control, whether an element is displayed or not. The SMIL
|
|
Timesheets processor sets the CSS display property to to "none", when the
|
|
timed element should not be visible based on the timesheet. According to CSS
|
|
specification, this causes the element to have no effect on the layout of the
|
|
document, and thus the element is invisible. At the same time the original
|
|
value should be stored for later use. When the media element should become
|
|
visible, the original display value can be restored.</p>
|
|
|
|
<p>The content authors should be aware that according to the CSS
|
|
specification the descendant elements of an element, which has display value
|
|
set to none, are also invisible. Therefore, the content authors should check
|
|
that all the parent elements of an active elements are also set active in the
|
|
timesheet if they are referenced in the timesheet.</p>
|
|
|
|
<p>Finally, the content authors should also be aware that only visible
|
|
elements can increment CSS counters. Therefore, CSS counters might not work
|
|
as expected when they are used together with timesheet. One solution is to
|
|
use CSS attributes instead and define their values in the document or
|
|
increment the attribute values, e.g., using a scripting language.</p>
|
|
</div>
|
|
|
|
<h2 id="Appendix"><a name="references" id="references">Appendix A.
|
|
References</a></h2>
|
|
|
|
<div class="informative">
|
|
<p><em>This section is informative.</em></p>
|
|
|
|
<h3 id="refsNS-normative">E.1 <a name="refsNSnormative">Normative
|
|
References</a></h3>
|
|
<dl>
|
|
<dt><strong><a class="normref" name="ref-CSS2">[CSS2]</a></strong></dt>
|
|
<dd>"<a href="http://www.w3.org/TR/1998/REC-CSS2-19980512/"><em>Cascading
|
|
Style Sheets, level 2: CSS2 Specification</em></a>", B. Bos, et al.,
|
|
Editors. World Wide Web Consortium, 12 May 1998. This W3C
|
|
Recommendation is available at
|
|
http://www.w3.org/TR/1998/REC-CSS2-19980512/. <br>
|
|
The latest version is available at <a
|
|
href="http://www.w3.org/TR/REC-CSS2/">http://www.w3.org/TR/REC-CSS2/</a></dd>
|
|
</dl>
|
|
|
|
<h3 id="refsNS-informative">E.2 <a name="refsNSinformative">Informative
|
|
References</a></h3>
|
|
<dl>
|
|
<dt><strong><a class="inforef" name="ref-DOM2Events"
|
|
id="ref-DOM2Events">[DOM2Events]</a></strong></dt>
|
|
<dd>"<em><a
|
|
href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html">Document
|
|
Object Model (DOM) Level2 : Events</a></em>", Tom Pixley. World Wide
|
|
Web Consortium, 13 November 2000. This W3C Recommendation is available
|
|
at
|
|
http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html.<br>
|
|
The latest version is available at <a
|
|
href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">http://www.w3.org/TR/DOM-Level-2-Events/events.html</a></dd>
|
|
<dt><strong><a class="inforef" name="ref-SMIL30"
|
|
id="ref-SMIL30">[SMIL30]</a></strong></dt>
|
|
<dd>"<a
|
|
href="http://www.w3.org/TR/2007/WD-SMIL3-20070713/"><em>Synchronized
|
|
Multimedia Integration Language (SMIL 3.0) </em></a>", Dick Bulterman
|
|
et al., Editors. World Wide Web Consortium, 13 July 2007. This W3C
|
|
Working Draft is available at
|
|
http://www.w3.org/TR/2007/WD-SMIL3-20070713/.<br>
|
|
The latest version is available at <a
|
|
href="http://www.w3.org/TR/SMIL3/">http://www.w3.org/TR/SMIL3/</a></dd>
|
|
<dt><strong><a class="inforef" name="ref-SVG"
|
|
id="ref-SVG">[SVG]</a></strong></dt>
|
|
<dd>"<a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/"><em>Scalable
|
|
Vector Graphics (SVG) 1.1 Specification</em></a>", Jon Ferraiolo et
|
|
al., Editors. World Wide Web Consortium, 14 January 2003. This W3C
|
|
Recommendation is available at
|
|
http://www.w3.org/TR/2003/REC-SVG11-20030114/.<br>
|
|
The latest version is available at <a
|
|
href="http://www.w3.org/TR/SVG">http://www.w3.org/TR/SVG/</a></dd>
|
|
<dt><strong><a class="inforef" name="ref-TimesheetsTutorial"
|
|
id="ref-TimesheetsTutorial">[TimesheetsTutorial]</a></strong></dt>
|
|
<dd>"<a href="http://www.tml.tkk.fi/~pv/timesheets/"><em>Timesheets
|
|
Tutorial</em></a>", Petri Vuorimaa. This tutorial is avaialble at
|
|
http://www.tml.tkk.fi/~pv/timesheets/.<br>
|
|
</dd>
|
|
<dt><strong><a class="inforef" name="ref-XForms"
|
|
id="ref-XForms">[XForms]</a></strong></dt>
|
|
<dd>"<a href="http://www.w3.org/TR/2007/REC-xforms-20071029/"><em>XForms
|
|
1.0 (Third Edition)</em></a>", John M. Boyer, Editor. World Wide Web
|
|
Consortium, 29 October 2007. This W3C Recommendation is available at
|
|
http://www.w3.org/TR/2007/REC-xforms-20071029/.<br>
|
|
The latest version is available at <a
|
|
href="http://www.w3.org/TR/xforms">http://www.w3.org/TR/xforms</a></dd>
|
|
<dt><strong><a class="inforef" name="ref-XHTML"
|
|
id="ref-XHTML">[XHTML]</a></strong></dt>
|
|
<dd>"<a href="http://www.w3.org/TR/2002/REC-xhtml1-20020801/"><em>XHTML
|
|
1.0 The Extensible HyperText Markup Language (Second Edition)</em>
|
|
</a>" Steven Pemberton et al., Editors. World Wide Web Consortium, 24
|
|
January 2000, revised 1 August 2002. This W3C NOTE is available at
|
|
http://www.w3.org/TR/2002/REC-xhtml1-20020801/.<br>
|
|
The latest version is available at <a
|
|
href="http://www.w3.org/TR/xhtml1/">http://www.w3.org/TR/xhtml1/</a></dd>
|
|
<dt><strong><a class="inforef" name="ref-XHTMLplusSMIL"
|
|
id="ref-XHTMLplusSMIL">[XHTMLplusSMIL]</a></strong></dt>
|
|
<dd>"<a
|
|
href="http://www.w3.org/TR/2002/NOTE-XHTMLplusSMIL-20020131/"><em>XHTML+SMIL
|
|
Profile</em></a>" Debbie Newman, Patrick Schmitz, Aaron Patterson.
|
|
World Wide Web Consortium, 31 January 2002. This W3C NOTE is available
|
|
at http://www.w3.org/TR/2002/NOTE-XHTMLplusSMIL-20020131/.<br>
|
|
The latest version is available at <a
|
|
href="http://www.w3.org/TR/XHTMLplusSMIL/">http://www.w3.org/TR/XHTMLplusSMIL/</a></dd>
|
|
</dl>
|
|
|
|
<h2 id="Appendix1">Appendix B. <a
|
|
name="acknowledgements">Acknowledgements</a></h2>
|
|
|
|
<p>This document has been prepared by the Synchronized Multimedia Working
|
|
Group (SYMM WG) of the World Wide Web Consortium. <br>
|
|
The SYMM WG which specified SMIL 3.0 included the following individuals:</p>
|
|
<dl>
|
|
<dd>Dick Bulterman, CWI - Pablo Cesar, CWI - Samuel Cruz-Lara, INRIA -
|
|
Marisa DeMeglio, DAISY Consortium - Xabiel García Pañeda, Universidad
|
|
de Oviedo - Luiz Fernando Gomes Soares (Invited Experts) - Eric Hyche,
|
|
RealNetworks - Jack Jansen, CWI - Hiroshi Kawamura, NRCD - Nabil
|
|
Layaïda, INRIA - David Melendi, Universidad de Oviedo, Thierry Michel,
|
|
W3C - Sjoerd Mullender, CWI - Julien Quint, DAISY Consortium - Petri
|
|
Vuorimaa, Helsinki University of Technology - Daniel Weck, NRCD -
|
|
Daniel F. Zucker, Invited Expert. </dd>
|
|
</dl>
|
|
</div>
|
|
<!--</div>-->
|
|
</body>
|
|
</html>
|