SITools2

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 les lignes _TIMELINE : 'portletTimelineId'_ et TIMELINE : 'navTimelineId'

<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>

    <!-- Load the Timeline library after reseting the fonts, etc -->

    <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>