Forums / Setup & design / Javascript Timeline, xml and eZ publish

Javascript Timeline, xml and eZ publish

Author Message

Softriva .com

Friday 22 June 2007 9:43:44 am

Dears

I am planing to use an AJAXy gadget called timeline from (http://simile.mit.edu/timeline/ ). This gadget requires reading an xml file to generate the timeline.

How can I make ez publish generate an xml file for the timeline to read.

see the bold line below shows how the Javascript reads the xml file

<b>Timeline.loadXML("/design/ar/javascript/ks-ksa.xml", function(xml, url) { eventSource.loadXML(xml, url); });</b>

 var tl;
function onLoad() {
		var eventSource = new Timeline.DefaultEventSource(0);
		
		var theme = Timeline.ClassicTheme.create();
		theme.event.bubble.width = 320;
		theme.event.bubble.height = 220;
		var d = Timeline.DateTime.parseGregorianDateTime("2000")
		var bandInfos = [
				Timeline.createBandInfo({
						width:          "100%", 
						intervalUnit:   Timeline.DateTime.YEAR, 
						intervalPixels: 200,
						eventSource:    eventSource,
						date:           d,
						theme:          theme
				})
		];
		
tl = Timeline.create(document.getElementById("kstl"), bandInfos, Timeline.HORIZONTAL);
Timeline.loadXML("/design/ar/javascript/ks-ksa.xml", function(xml, url) { eventSource.loadXML(xml, url); });
}
var resizeTimerID = null;
function onResize() {
		if (resizeTimerID == null) {
				resizeTimerID = window.setTimeout(function() {
						resizeTimerID = null;
						tl.layout();
				}, 500);
		}
}

 

André R.

Friday 22 June 2007 2:28:48 pm

Simplified example of your script (removed on resize)

 var tl, my_second_param = 'node_id:33456', tlXmlUrl = {'mymodul/myview/myfirst_param'|ezurl()} + '/' + my_second_param;

{literal}
function onLoad() {

                var eventSource = new Timeline.DefaultEventSource(0);
                var theme = Timeline.ClassicTheme.create();
                theme.event.bubble.width = 320;
                theme.event.bubble.height = 220;
                var d = Timeline.DateTime.parseGregorianDateTime("2000")
                var bandInfos = [
                                Timeline.createBandInfo({
                                                width:         "100%", 
                                                intervalUnit:  Timeline.DateTime.YEAR, 
                                                intervalPixels: 200,
                                                eventSource:   eventSource,
                                                date:          d,
                                                theme:         theme
                                                                  })
                                       ];
                tl = Timeline.create(document.getElementById("kstl"), bandInfos, Timeline.HORIZONTAL);
                Timeline.loadXML( tlXmlUrl, function(xml, url) {                 
                                eventSource.loadXML(xml, url);
                });
}
{/literal}

So create your own extension with a module and the views you need, for example 'timeline/xml', and output anything you need from php.

Unless the xml is static, in that case I would use ezdesign or ezroot operator on the uri, point it to the file and make sure that apache rewrite rules allow xml files.

eZ Online Editor 5: http://projects.ez.no/ezoe || eZJSCore (Ajax): http://projects.ez.no/ezjscore || eZ Publish EE http://ez.no/eZPublish/eZ-Publish-Enterprise-Subscription
@: http://twitter.com/andrerom

Softriva .com

Saturday 23 June 2007 2:17:49 am

Dear

This is the start. Can you give me more info on how to it. Any further information is appreciated.

[Edit]: No it is not static.

OOzy

André R.

Saturday 23 June 2007 2:44:07 pm

I have no intension's to solve the problem ( witch in practice means writing the whole extension ) for you..
But if you can specify what your struggling with, the forum is the right place :)

But I guess your asking how to generate xml from ez content?
If so there are many answears:
* use one of the xml output extensions
*write your own, where you fetch the content you need and generate xml off it

For the last one, some examples:
fetching examples: http://zev.ez.no/svn/extensions/ezjaxx/extension/ezjaxx/modules/jaxx/expand.php

    $node_array = eZContentObjectTreeNode::subTree(
        array( 'Depth' => 1,
               'Limit'            => $maxNodes,
               'Offset'           => 0,
               'SortBy'           => $sort_array,
               'DepthOperator'    => 'eq',
               'ClassFilterType'  => 'include',
               'ClassFilterArray' => $showClasses
               ), $nodeID );

ezxml example: http://zez.org/article/articleprint/76/
(but you can concat the xml manually as a string if you want)

eZ Online Editor 5: http://projects.ez.no/ezoe || eZJSCore (Ajax): http://projects.ez.no/ezjscore || eZ Publish EE http://ez.no/eZPublish/eZ-Publish-Enterprise-Subscription
@: http://twitter.com/andrerom

Softriva .com

Sunday 24 June 2007 7:44:56 am

André

Please excuse my ignorance. The thing that I am still not sure how to do is in a simple terms
" pass the xml data to the timeline javascrip code". Simply, I will fetch the data from ez then pass on to the timeline javascript. This what I am not sure how to do!!

André R.

Sunday 24 June 2007 1:16:44 pm

If you are talking about client side:
This depends on witch ajax/javascript library you use, but from what I understood from you code, timeline does this for you.
Timeline.loadXML("/design/ar/javascript/ks-ksa.xml",....

Serve side:
You need to fetch whatever data that goes into your timeline and create the xml timeline needs out of that fetched content.

eZ Online Editor 5: http://projects.ez.no/ezoe || eZJSCore (Ajax): http://projects.ez.no/ezjscore || eZ Publish EE http://ez.no/eZPublish/eZ-Publish-Enterprise-Subscription
@: http://twitter.com/andrerom