Personnaliser beCPG

Supprimer les listes inutiles

Ouvrez "Repository" > "Système" > "Modèles d'entité" > "Projet".

Cliquez sur "Voir les listes de données", puis supprimez les listes inutiles.

Créer une nouvelle liste

Pour ajouter une nouvelle liste avec le concepteur de modèles ou un fichier XML, créez un modèle qui hérite de bcpg:entityListItem, ainsi que les formulaires associés.

Notre exemple utilise le modèle des livrables.

<type name="pjt:deliverableList">
    <parent>bcpg:entityListItem</parent>
        <properties>
            <property name="pjt:dlDescription">
                <type>d:text</type>
                <mandatory>true</mandatory>
            </property>

Ajouter une nouvelle vue Gantt

Pour ajouter une nouvelle vue Gantt, ajoutez une liste dans "Repository" > "Système" > "Modèles d'entité" > "Projet".

Le type associé correspond au type Alfresco que vous avez créé. Le nom de la vue personnalisée doit commencer par "View-gantt-".

Tous les projets qui héritent de ce modèle disposent aussi de cette nouvelle vue Gantt.

Une fonction JavaScript déclarée dans "gantt-columnRenderers.js" assure le rendu du Gantt. Chaque moteur de rendu Gantt est associé à un type. Pour initialiser un nouveau moteur de rendu, créez un événement YUI :

YAHOO.Bubbling.fire("registerGanttRenderer",  {
    typeName : "pjt:deliverableList",
      ganttInitialiser : function(callBack) {
      //TODO
    callBack.call(this);
    }
 });

La méthode ganttInitialiser récupère les légendes et crée le Gantt. Un exemple existe pour taskList. Voici la fonction qui affiche les livrables dans le Gantt :

ganttInitialiser : function(callBack)
{
    var fnDrawGantt = function PL_onReady_fnDrawGantt()
    {
        var recordSet = this.widgets.dataTable.getRecordSet();
        if (recordSet.getLength() != 0)
        {
            g = new JSGantt.GanttChart('g', Dom.get(this.id + "-gantt"), g != null ? g.getFormat() : 'day');
            g.setDateInputFormat("shortDate");
            g.setDateDisplayFormat("shortDate");
            g.setCaptionType('Caption'); 
            g.setShowRes(0); // Hides the resources
            g.setShowDur(0); // Hides the duration
            g.setShowComp(0); // Hides the progress
            var start = new Date();
            for (var i = 0; i < recordSet.getLength(); i++)
            {
                var oRecord = recordSet.getRecord(i);
                var deliverable = oRecord.getData();
                var taskId = deliverable.nodeRef;
                var precTaskIds = "";
                var pParent = 0;
                var pGroup = 0;
                var tlIsMilestone = true;
                var tlPercent = 0;
                var start = new Date();
                var end = new Date();
                var color = "006600";
                if (oRecord.getData("color"))
                {
                    color = oRecord.getData("color").replace('#', '');
                }

                var taskOwner = null;

                g.AddTaskItem(new JSGantt.TaskItem(taskId, this.getDeliverableTitle(deliverable,
                        this.options.entityNodeRef), start, end, color, null, tlIsMilestone ? 1 : 0, taskOwner,
                        tlPercent, pGroup, pParent, 1, precTaskIds));
            }

            this.refreshView();

        }
        else
        {
            Alfresco.util.populateHTML([ this.id + "-gantt",
                    "<div class=\"yui-dt-liner\">" + this.msg("message.empty") + "</div>" ]);
        }
    };

    this.extraAfterDataGridUpdate.push(fnDrawGantt);
    this.initTaskHandlers();

    callBack.call(this);
}

Le résultat :

Pour changer l'affichage par défaut du Gantt des tâches, modifiez la fonction ganttInitialiser de taskList.

Créer une vue multi-Gantt

Depuis la version 1.6.6, beCPG propose un nouvel extracteur de datalists capable de renvoyer plusieurs listes à la fois. Nous l'utilisons ici pour construire une nouvelle vue multi-Gantt.

Créer une vue personnalisée

Pour créer une vue personnalisée dans beCPG, écrivez un webscript Share dans org/alfresco/components/entity-charact-views. Son nom doit se terminer par "-view".

<webscript>
    <shortname>Multi Gantt View</shortname>
    <description>Multi Gantt View component</description>
    <url>/components/entity-charact-views/mtgantt-view</url>
</webscript>

Ajoutez ensuite la vue au modèle de projet.

La syntaxe d'appel de la vue est "view-{nom de la vue}-id". Notre exemple de vue regroupe plusieurs listes : il utilise donc le type parent bcpg:entityListItem. L'exemple complet figure dans les sources.

Appeler l'extracteur multiList et créer le Gantt

Pour créer une vue Gantt multi-listes, notre webscript instancie un composant JavaScript YUI défini dans "mtgantt-view.js".

var mtGanttView = {
    id : "mtGanttView", 
    name : "beCPG.component.MtGanttView",
    options : {
        entityNodeRef: page.url.args.nodeRef!=null ?page.url.args.nodeRef : ""
      }
};

Ce composant connecte une source de données YUI au service "becpg/entity/datalists".

Nous voulons récupérer les données de nos deux listes de projet :

• taskList (qui contient des éléments pjt:taskList)
• view-gantt-deliverable (qui contient des éléments pjt:deliverableList)

Nous utilisons l'extracteur multiList avec dataListName=multiList_taskList_View-gantt-deliverable et itemType=bcpg:entityListItem. Voici l'URL complète :

getWebscriptUrl : function MtGanttView_getWebscriptUrl() {
     return Alfresco.constants.PROXY_URI + 
"becpg/entity/datalists/data/node?itemType=bcpg:entityListItem&pageSize=" 
+ this.options.maxItems
+ "&dataListName=multiList_taskList_View-gantt-deliverable&entityNodeRef="
+ this.options.entityNodeRef;
};

Indiquez enfin les champs que l'extracteur renvoie :

var request =
{
    fields : [ "bcpg_parentLevel","pjt_tlTaskName", "pjt_tlDuration", "pjt_tlPrevTasks", "pjt_tlState", "pjt_completionPercent", "pjt_tlStart", "pjt_tlEnd", "pjt_tlIsGroup","pjt_tlIsMilestone","pjt_tlResources",
            "pjt_tlTaskLegend|cm_name|bcpg_color", "pjt_dlDescription", "bcpg_color" ],
    page : this.currentPage,
    sort : "bcpg:sort",
    queryExecutionId : this.queryExecutionId
};

Nous définissons en même temps les champs de "pjt:taskList" et de "pjt:deliverableList".

Remarque : l'extracteur peut renvoyer des champs d'association. Vous récupérez ainsi en un seul appel les légendes associées aux tâches : pjt_tlTaskLegend|cm_name|bcpg_color.

L'initialisation du Gantt s'appuie ensuite sur les données renvoyées par le webscript. Les sources complètes sont fournies.

Remarque : le client doit effectuer le tri.

Ajouter un bouton à la barre d'outils

Vous pouvez ajouter des boutons à la barre d'outils des datalists beCPG. Pour cela, ajoutez un événement YUI dans l'un des fichiers JavaScript de la vue. Pour la vue Gantt, utilisez le fichier "gantt-view-toolbar.js".

L'événement à déclencher s'appelle "registerToolbarButtonAction". Il comprend :

• un évaluateur, qui détermine sur quelles listes et à quel endroit (à droite ou à gauche) le bouton s'affiche ;
• une fonction qui crée le widget, ou une fonction appelée au clic sur le bouton.

Voici l'exemple du bouton plein écran. Le fichier contient d'autres exemples.

YAHOO.Bubbling.fire("registerToolbarButtonAction",
        {
            actionName : "full-screen",
            evaluate : function(asset, entity)
            {
                return asset.name !== null && (asset.name.indexOf("View-gantt") > -1 || asset.name === "taskList") ;
            },
            fn : function(instance)
            {

                if (Dom.hasClass("alf-hd", "hidden"))
                {
                    Dom.removeClass("alf-hd", "hidden");
                    Dom.removeClass("alf-filters", "hidden");
                    Dom.removeClass("alf-ft", "hidden");
                    Dom.removeClass("Share", "full-screen");
                    Dom.addClass("alf-content", "yui-b");

                }
                else
                {
                    Dom.addClass("alf-hd", "hidden");
                    Dom.addClass("alf-ft", "hidden");
                    Dom.addClass("Share", "full-screen");
                    Dom.addClass("alf-ft", "hidden");
                    Dom.addClass("alf-filters", "hidden");
                    Dom.removeClass("alf-content", "yui-b");
                    Dom.setStyle("alf-content", "margin-left", null);

                }

            }
        });

CSS associé :

.datalist-toolbar .full-screen span.first-child
{
background: url(../images/fullscreen-enter.png) no-repeat 5px 4px;
}

Personnaliser le Gantt

Lors de l'initialisation du Gantt dans chaque vue, vous pouvez personnaliser son affichage :

g = new JSGantt.GanttChart('g', Dom.get(this.id + "-gantt"),  'day');
                                                    g.setDateInputFormat("shortDate");
                                                    g.setDateDisplayFormat("shortDate");
                                                    g.setCaptionType('Resource');

Description des paramètres :

Pour modifier le rendu du Gantt, surchargez l'une des méthodes suivantes :

 renderMile
(vcurrDivID,vTaskLeft,vTaskRight,vDayWidth,vColWidth,vDateRowStr,vCaptionStr,vTask)

 renderTask
(vcurrDivID,vTaskLeft,vTaskRight,vDayWidth,vColWidth,vDateRowStr,vCaptionStr,vTask)

renderGroup
(vcurrDivID,vTaskLeft,vTaskRight,vDayWidth,vColWidth,vDateRowStr,vCaptionStr,vTask)

// Exemple : colorer toute la case du jour et afficher la légende dedans

g.setColWidthFactor(2); // increases the boxes size
g.renderMile =  function(...){
    return '<div id="bardiv_' + vcurrDivID + '" style="position:absolute;       top:0px; left:' + Math.ceil(vTaskLeft * (vDayWidth))  + 'px; height: 23px;  width:'+vColWidth+'px; overflow:hidden;"><div id="taskbar_' + vcurrDivID +  '" style="width:100%;height:100%;background-color:#' +                                                  vTask.getColor() + ';">'+vCaptionStr+'</div>';
 };