Timeline helper
2 : Example project - part 1
Easy to use helper for the MIT Simile Web Widgets component Timeline. Timeline allows web site creators to embed interactive timelines into their sites. It requires only that visitors have Javascript enabled. It's often referred to as "Google Maps" for time.
Example Project:
We have two models: MainActivity and SubActivity. MainActivity hasMany SubActivity. We wish to take advantage of the Timeline helper to compare main activities and to see all subactivities in relation the main activity they belong to. We implement this as MainActivitiesController::index and MainActivitiesController::view actions.
View 1 : index
<?php
// MainActivites controller action:
function index() {
}
?>
View Template:
<?php // /app/main_activites/index.php ?>
<div class="mainActivities index">
<h2><?php __('MainActivities');?></h2>
<div id="timeline" style="width:100%;height:500px;"></div>
<?php
echo $timeline->create('timeline');
$timeline->band(array(
'width' => '"90%"',
'intervalPixels' => '300',
'intervalUnit'=>'Timeline.DateTime.MONTH'
));
$timeline->band(array(
'width' => '"10%"',
'intervalPixels' => '700',
'intervalUnit'=>'Timeline.DateTime.YEAR',
'overview' => true
));
$timeline->setDataSource(array('action'=>'ajax_timedex'));
echo $timeline->end();
?>
</div>
We use an empty controller action as all data rendered in the view is rendered through the timeline and it uses the ajax request bellow to retrieve the data. In the view we create a DIV where the timeline will be placed, we initialize the helper and addd the two bands we wish to use. Then we set the datasource using Helper::url array notation and end the timeline.
<?php
// MainActivites controller action:
function timedex() {
Configure::write('debug',0);
$this->layout = 'ajax';
$this->set('data', $this->MainActivity->find('all',array('recursive' => -1)));
}
View Template:
<?php // /app/main_activities/ajax_timedex.ctp
foreach ($data as $key => $row) {
$data[$key]['MainActivity']['link'] =
$html->url(array(
'action' => 'timeline',
$row['MainActivity']['id']
));
}
$xpaths = array(
'title' => '/MainActivity/title',
'start' => '/MainActivity/from',
'end' => '/MainActivity/to',
'color' => '/MainActivity/color',
'description' => '/MainActivity/description',
'link' => '/MainActivity/link'
);
echo $timeline->renderJSON($data,array(),$xpaths);
?>
This being an ajax view, we make sure to set config to 0 and select an ajax layout. In the view we do 3 things. First we add a url to each main activity that will make Timeline use the title on the timeline bubble as a link. Then we prepare an options array for specifying where the helper can find the values that we wish included. And lastly we call what is essentially a JavascriptHelper::object, but it makes sure you only send the data you are going to use.
<?php
// MainActivites controller action:
function index() {
}
?>
View Template:
<?php // /app/main_activites/index.php ?>
<div class="mainActivities index">
<h2><?php __('MainActivities');?></h2>
<div id="timeline" style="width:100%;height:500px;"></div>
<?php
echo $timeline->create('timeline');
$timeline->band(array(
'width' => '"90%"',
'intervalPixels' => '300',
'intervalUnit'=>'Timeline.DateTime.MONTH'
));
$timeline->band(array(
'width' => '"10%"',
'intervalPixels' => '700',
'intervalUnit'=>'Timeline.DateTime.YEAR',
'overview' => true
));
$timeline->setDataSource(array('action'=>'ajax_timedex'));
echo $timeline->end();
?>
</div>
We use an empty controller action as all data rendered in the view is rendered through the timeline and it uses the ajax request bellow to retrieve the data. In the view we create a DIV where the timeline will be placed, we initialize the helper and addd the two bands we wish to use. Then we set the datasource using Helper::url array notation and end the timeline.
<?php
// MainActivites controller action:
function timedex() {
Configure::write('debug',0);
$this->layout = 'ajax';
$this->set('data', $this->MainActivity->find('all',array('recursive' => -1)));
}
View Template:
<?php // /app/main_activities/ajax_timedex.ctp
foreach ($data as $key => $row) {
$data[$key]['MainActivity']['link'] =
$html->url(array(
'action' => 'timeline',
$row['MainActivity']['id']
));
}
$xpaths = array(
'title' => '/MainActivity/title',
'start' => '/MainActivity/from',
'end' => '/MainActivity/to',
'color' => '/MainActivity/color',
'description' => '/MainActivity/description',
'link' => '/MainActivity/link'
);
echo $timeline->renderJSON($data,array(),$xpaths);
?>
This being an ajax view, we make sure to set config to 0 and select an ajax layout. In the view we do 3 things. First we add a url to each main activity that will make Timeline use the title on the timeline bubble as a link. Then we prepare an options array for specifying where the helper can find the values that we wish included. And lastly we call what is essentially a JavascriptHelper::object, but it makes sure you only send the data you are going to use.
Latest Comments