Version 2 - History - La timeline du portal - SITools2

La timeline du portal » History » Version 2

Version 1 (Anonymous, 02/07/2012 17:46) → Version 2/3 (Anonymous, 02/07/2012 17:49)

h1. La timeline du portal

La timeline est un plugin indépendant qui doit être accessible sur le server, actuellement : _/usr/local/Sitools2_Corot/workspace/client-public/timeline_v2.3.0_

Un onglet "timeline" spécifique a été créer dans le portal pour pouvoir afficher ou non cette timeline.

Pour configurer les données affichées sur la timeline ainsi que les couleurs, éditer */usr/local/Sitools2_Corot/workspace/client-public/timeline_v2.3.0corot_timeline.xml*

Le code extJS pour la timeline : Dans le fichier *portal.js* (_/usr/local/Sitools2_Corot/workspace/client-user/js/portal_)

<pre><code class="javascript">

/*************************************************************************** ligne 270
* Creation du portlet Timeline
*/

var portlet_timeline = new Ext.ux.Portlet({
layout : 'fit',
xtype : 'portal',
portalId : "idPortal",
id : ID.PORTLET.TIMELINE,
title : 'Timeline',
height : 300,
autoload: true,
triggerAction : 'all',
items : [ new Ext.ux.ManagedIFrame.Panel({
defaultSrc : "res/html/" + LOCALE + "/timeline.html",
autoScroll : true
})]
});

[.............]

/*************************************************************************** ligne 370

items : [ {
region : 'north',
//id : 'portalId',
columnWidth : 1,
style : 'padding:10px 10px 10px 10px', // 10 0 10 10 MH 12dec
// baseCls : 'portalMainPanel',
items : [ portlet_timeline ]
},

[..............]

/*************************************************************************** ligne 416

children : [ {
id : ID.PORTALTREENAV.TIMELINE,
panelId : ID.PORTLET.TIMELINE,
icon : 'res/images/icons/portlet.png',
text : 'Timeline',
leaf : true,
checked : true,
listeners : {
checkchange : function (node) {
if (!node.attributes.checked) {
Ext.get(node.attributes.panelId).hide();
// Pour que le panel n'ait plus de place reservee
// dans le portal
Ext.get(node.attributes.panelId).addClass('x-hide-display');
} else {
Ext.get(node.attributes.panelId).show();
Ext.get(node.attributes.panelId).removeClass('x-hide-display');
}
}
}
},

</code></pre>

Dans le fichier *id.js* (_/usr/local/Sitools2_Corot/workspace/client-user/js_) : rajouter la ligne _TIMELINE : 'portletTimelineId'_

<pre><code class="javascript">

var ID = {
PANEL : {
MENU : 'menuPanelId',
TREE : 'treePanelId',
MAIN : 'mainPanelId',
HELP : 'helpPanelId'
},
CMP : {
TOOLBAR : 'toolbarId',
MENU : 'menuId'
},
WIN : {
LOGIN : 'loginWinId',
ORDER : 'orderWinId'
},
BOX : {
REG : 'regBoxId',
USER : 'userBoxId',
GROUP : 'groupBoxId',
FIREWALL : 'firewallBoxId'
},
PORTLET : {
PROJET : 'portletProjectId',
RECHERCHE : 'portletRecherceID',
FEEDS : 'portletFeedsId',
TIMELINE : 'portletTimelineId'
},
PORTALTREENAV : {
PROJET : 'navProjectId',
RECHERCHE : 'navRechercheId',
FEEDS : 'navFeedsId',
TIMELINE : 'navTimelineId'

}
};

</pre></code>

Dans le fichier _/usr/local/Sitools2_Corot/workspace/client-user/res/html/en/*timeline.html*_ mettre le code :

<pre><code class="html">

<html>

<head>


<script type="text/javascript">
Timeline_ajax_url="/sitools/common/timeline_v2.3.0/timeline_ajax/simile-ajax-api.js";
Timeline_urlPrefix="/sitools/common/timeline_v2.3.0/timeline_js/";
Timeline_parameters='bundle=true';
</script>
<script
src="/sitools/common/timeline_v2.3.0/timeline_js/timeline-api.js?bundle=true&timeline-use-local-resources"
type="text/javascript"></script>

<script type="text/javascript">
var tl;
function timelineload() {
var eventSource = new Timeline.DefaultEventSource();
var bandInfos = [
Timeline.createBandInfo({
eventSource: eventSource,
width: "70%",
intervalUnit: Timeline.DateTime.MONTH,
intervalPixels: 50
}),
Timeline.createBandInfo({
overview: true,
eventSource: eventSource,
width: "30%",
intervalUnit: Timeline.DateTime.YEAR,
intervalPixels: 100
})
];
bandInfos[1].syncWith = 0;
bandInfos[1].highlight = true;

tl = Timeline.create(document.getElementById("tl"), bandInfos);
Timeline.loadXML("/sitools/common/timeline_v2.3.0/corot_timeline.xml", function(xml, url) { eventSource.loadXML(xml, url); });
}

</script>

<script type="text/javascript">
var resizeTimerID = null;
function onResize() {
if (resizeTimerID == null) {
resizeTimerID = window.setTimeout(function() {
resizeTimerID = null;
tl.layout();
}, 500);
}
}

</script>

</head>

<body onload="timelineload();" onresize="onResize();">

<div id="tl" style="height: 150px; border: 1px solid #aaa; font-size: 8pt;"></div>

<div align="center" style="margin:15px 0px 0px 0px"> <noscript> <div align="center" style="width:140px;border:1px solid #ccc; background: #2D84EF; color: #F7F5F2;font-weight:bold;font-size:12px;"> <a style="t\
ext-decoration: none; color:#F7F5F2;" href="http://mycountdown.org/Event/Launch/">Launch Countdown</a></div> </noscript> <script type="text/javascript" src="http://mycountdown.org/countdown.php?cp3_Hex=0F0200&cp2\
_Hex=2D84EF&cp1_Hex=F7F5F2&ham=0&img=&hbg=0&hfg=0&sid=0&fwdt=170&lab=1&text1=Launch&text2=CoRoT Launch&group=Event&countdown=Launch&widget_number=3010&event_time=1167229380&timezone=Europe/Madrid"></script> </div\
>

</body>
</html>

</pre></code>

Project

General

Profile

SITools2

La timeline du portal » History » Version 2