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)

 /***************************************************************************      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');
                        }
                    }
        }
            },

Dans le fichier id.js (/usr/local/Sitools2_Corot/workspace/client-user/js) : rajouter les lignes TIMELINE : 'portletTimelineId' et TIMELINE : 'navTimelineId'

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'

    }
};

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

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