Okay, here's one example (using Timeline_2.3.0 from simile-widgets.org).
Editing a JSON file for Simile Timeline events by hand is a pain. Lots of
quotes and curly braces. Let's try something simpler. It makes sense to try and
use well defined data formats rather than cook up our own. YAML
(http://www.yaml.org) is such a format. It is meant to be well-formed,
human-friendly and work with the languages of today. It is also a superset of
JSON (which is what we'd like to replace). So let's use YAML.
We just want a text file that lets us easily define events for our timeline.
YAML supports really, really simple syntax for defining a list of events. What
do we need for an event in Timeline? A title, description, start and end. The
YAML begins with the "---" and ends with the "..." so include that
---
title: This is my first event
description: This is the description for my event
start: 2011-06-02T17:40:00
end: 2011-06-02T20:14:00
...
That's really all there is. We want an array of events. In YAML it would be:
---
# my list of events
events:
-
title: My first event
description: This is the long description of the first event
start: 2011-06-03T12:23:45
end: 2011-06-03T18:51:00
-
title: My Second event
description: This is the long description of the second event
start: 2011-06-03T14:22:01
end: 2011-06-03T21:38:18
-
title: My third event
description: This is the long description of the third event
start: 2011-06-03T16:25:44
end: 2011-06-03T23:048:51
...
Remember, the YAML includes the "---" and the "..." lines. In YAML, structure
is determined by indentation, so make sure the leading spaces are there. There
should be two spaces before the "-" and four spaces before the attributes
"title", "description", etc.
We just need a YAML parser in Javascript. Jeremy Faivre has one at:
https://bitbucket.org/jeremyfa/yaml.js/overview
Grab that and add to your page:
<script type="text/javascript" src="yaml.js"></script>
Now we want to be able to load our YAML file the same way we're loading JSON or
XML in Timeline. We need a method:
Timeline._Impl.prototype.loadYAML = function(url, f) {
var tl = this;
var fError = function(statusText, status, xmlhttp) {
alert("Failed to load YAML data from " + url + "\n" + statusText);
tl.hideLoadingMessage();
};
var fDone = function(xmlhttp) {
try {
f(YAML.decode(xmlhttp.responseText), url);
} finally {
tl.hideLoadingMessage();
}
};
this.showLoadingMessage();
window.setTimeout(function() { SimileAjax.XmlHttp.get(url, fError, fDone);
}, 0);
};
Running the YAML.decode() converts the .yml file into a JS object, so we can
just pass that on to the loadJSON method of our event source.
So after setting up our Timeline object, we call:
tl.loadYAML("events.yml", function(data, url) {
eventSource.loadJSON(data, url);
});
If all goes well, you should see your events just as if you had done everything
in JSON.
YAML offers all sorts of interesting possibilities, esp. when you're working in
YAML-friendly environments like python or ruby already.
Let me know if this example works for you.
--Mike
On Jun 2, 2011, at 11:39 AM, Dan Aldrich wrote:
> Yes, an example would go a long way for me.
>
> Thanks,
> -d
--
You received this message because you are subscribed to the Google Groups
"SIMILE Widgets" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/simile-widgets?hl=en.
