Use Silverlight Timeline from HTML

This document targets web developers who what to incorporate Silverlight Timeline into their web sites without digging into silverlight code by simply using html and javascript. The procedures requires several simple steps:

1. Upload timeline.xap to your web site.
2. Create Data xml file.
3. Create Web page which will show timeline.

1. Uploading timeline.xap to your site.

Go to Download page of this site http://timeline.codeplex.com and download latest timeline.xap file. This file should be copied to your web site folder.

2. Creating Data xml file.

Events shown by the control should be stored in xml file(s) with the following structure:
  • data - root element of the document. This element should consists of event elements with the following attributes:
    • title - short title of the event. This is required attribute
    • start - start date of the event in date time format (MM/DD/YYYY HH:MM:SS AM/PM) or just year (YYYY). Examples: "01/16/1997 12:00:00 AM", "1996". This is required attribute.
    • end - end date of the event in date time format (MM/DD/YYYY HH:MM:SS AM/PM) or just year (YYYY). Note that if isDuration attribute is not set then this value is ignored. Examples: "01/16/1997 12:00:00 AM", "1996". This is an optional attribute
    • isDuration - Specifies if event has duration from start to end. If false then only start date is used. Examples "true", "false". This is an optional attribute and false by default.
    • image - url of image that will be displayed when the user clicks on "More..." dialog box. Optional.
    • teaserimage - url of image that will be displayed on the timeline under bullet. Optional.
    • "color" - spedifies color of the event bullet or line. Examples are "Red", "Blue", "Green", etc. This is an optional attribute. Default event bullet color can be specified from javascript as explained below.
    • link - link to external site with more information about the event. For example: http://www.someurl.com/abouttheevent.html
Body of event element may contain optional description of the event.

Here is a partial example of data.xml:
<data>
  <event start="10/14/1840 12:00:00"
         title="Birth" color="Green" image="monet.png" link="http://en.wikipedia.org/wiki/Monet">
        Claude Monet, also known as Oscar-Claude Monet or Claude Oscar Monet
        was born to Adolphe and Louise-Justine Monet of 45 Rue Laffitte,
        in the 9th arrondissement of Paris.
  </event>
  <event start="06/01/1861"
         end="06/01/1863"
         isDuration="true"
         title="Joined Cavalry in Algeria">
    In June of 1861 Monet joined the First Regiment of African Light Cavalry
    in Algeria for two years of a seven-year commitment, but upon his
    contracting typhoid his aunt Madame Lecadre intervened to get him out
    of the army if he agreed to complete an art course at a university.
    It is also possible that the Dutch painter Johan Barthold Jongkind
    (whom Monet knew) may have prompted his aunt on this matter.
  </event>
</data>

3. Create Web page which will show timeline.

Copy Your site should have silverlight.js. This file will help the users of you site to install the silverlight. More information about silverlight.js can be found here http://code.msdn.microsoft.com/silverlightjs

<head>
    <script type="text/javascript" src="Silverlight.js"></script>
</head>

Add silverlight object to your page html. Most up to date example can be found in source code Timeline.aspx file.
<div id="timelineControlHost" style="width:100%;height:100%">
     <object id="timelineControl" data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
        <param name="source" value="Timeline.xap"/>
        <param name="onError" value="onSilverlightError" />
        <param name="background" value="white" />
        <param name="minRuntimeVersion" value="3.0.40624.0" />
        <param name="onload" value="onSlLoad"/>
        <param name="autoUpgrade" value="true" />
        <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40624.0" style="text-decoration:none">
             <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style:none"/>
        </a>
    </object>
    <iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe>
</div>

Now you need to implement onSlLoad javascript function which will initialize timeline control:
      <script type="text/javascript">
       function onSlLoad(sender, args) {
            sl = document.getElementById("timelineControl1");
            timeline = sl.Content.Instance;

            timeline.Urls = "/Monet.xml";
            timeline.CalendarType = "gregorian";
            timeline.MinDateTime = "01/01/1830";
            timeline.MaxDateTime = "01/01/1930";
            timeline.TeaserSize = 40;
            timeline.MoreLinkText = "more>>";
            timeline.CurrentDateTime = "01/01/1855";

            timeline.AddTimelineToolbox();
            timeline.AddTimelineBand(0, true, "years", 20, 130);
            timeline.AddTimelineBand(50, false, "decades", 20, 4);

            timeline.Run();
     }
    </script> 

3.1. Timeline Control Properties

Property Description Example Values
Urls ';' delimited list of data xmls with events to show. You need to specify this parameter or timeline will appear blank. http://mysite.com/monet.xml
CalendarType Optional type of calendar. Can be one of the following values: "hebrew", "hijri", "japanese", "korean", "taiwan", "thaibuddhist", "umalqura", "gregorian" "gregorian"
CultureID Optional culture code (by default en-US). If datetimes are not in default this property should be set before any date specified. Codes can be found here "sl-SI"
MinDateTime Min date and time which will be visible to the user. You need to specify this date or DateTime.MinValue date will be used. The value should be specified in MM/DD/YYYY HH:MM:SS AM format or you can assign it to "today", "now", "yesterday", "tomorrow". 01/01/1860
MaxDateTime Max date and time which will be visible to the user. You need to specify this date or DateTime.MaxValue date will be used. The value should be specified in MM/DD/YYYY HH:MM:SS AM format or you can assign it to "today", "now", "yesterday", "tomorrow". 01/01/1860
CurrentDateTime Date and time which will be visible to the user. You need to specify this date or today date will be used. The value should be specified in MM/DD/YYYY HH:MM:SS AM format or you can assign it to "today", "now", "yesterday", "tomorrow". This date is initially placed in middle of timeline. 01/01/1860
MoreLinkText Optional, "More..." by default. Link text for case when description is more than TeaserSize "More..."
TeaserSize Optional. Number of teaser characters. 80 by default. 50


3.2. Timeline Control Methods

Method Parameters Description Example Value
AddTimelineBand Add new timeline band to timeline control. You can have more then one timeline band: one main band which will display events as bullets/lines with titles and teaser. Main band usually have most height and least column timespan. You can also have several secondary timeline bands. For instance to display main timeline band may display days and 2 secondary timeline bands may display months and years.
height Height of timeline band in pixels. Usually main timeline band has most height. This parameter may be 0 in case if you need this band to take the rest of remaining height of control, which makes sence for main band. 400
isMain Specifies if this timeline band is main or secondary. Only one timeline band can be main. You may have 0 or more secondary timeline bands true
scaleType Timeline band scale type which may be "minutes", "minutes10", "hours", "days", "years" or "decades". "years"
colCount Number of columns for timeline band. For example if for "months" band you what the whole year to be visible you will specify 12 12
Run After initialization is finished and all bands are specified you should call this method to display all timebands and events. This method does not have parameters
ClearEvents Removes all events from all timeline bands.
ResetEvents Shows passed events.
xml XML content with events. This is the same file format as described above "<data><event start=...."











.

Last edited Dec 19, 2010 at 12:24 AM by andrewsyrov, version 15

Comments

No comments yet.