AnsweredAssumed Answered

Création bouton liste de données

Question asked by jlocke on Sep 14, 2013
Bonjour à tous,

J'essaye d'ajouter un bouton dans la toolbar des listes de données (donc à côté des boutons "Nouvel élément" et "Eléments sélectionnés"). Pour faire simple, ce bouton nommé "closeListButton" ferme une liste (propriété de actif à inactif) et en créé une nouvelle.
Pour cela, j'ai créé 2 fichiers dans <em>tomcat/shared/classes/alfresco/web-extension/site-webscripts/org/alfresco/components/data-lists</em> :

toolbar.get.head.ftl :

<#include "../component.head.inc">
<!– Data List Toolbar –>
<@link rel="stylesheet" type="text/css" href="${page.url.context}/res/components/data-lists/toolbar.css" />
<@script type="text/javascript" src="${page.url.context}/res/components/data-lists/toolbar.js"></@script>
<@script type="text/javascript" src="${page.url.context}/res/components/data-lists/extended-toolbar.js"></@script>


toolbar.get.html.ftl (qui affiche le nouveau bouton, une nouvelle div "new-row" pour l'instant) :

<#assign id = args.htmlid>
<script type="text/javascript">//<![CDATA[
new Alfresco.component.ExtDataListToolbar("${id}").setOptions(
{
siteId: "${page.url.templateArgs.site!""}"
}).setMessages(${messages});
//]]></script>
<div id="${args.htmlid}-body" class="datalist-toolbar toolbar">
        <div id="${args.htmlid}-headerBar" class="header-bar flat-button theme-bg-2">
                <div class="left">
                        <div class="new-row">
                                <span id="${id}-newRowButton" class="yui-button yui-push-button">
                                        <span class="first-child">
                                                <button type="button">${msg('button.new-row')}</button>
                                        </span>
                                </span>
                        </div>
                        <div class="new-row">
                                <span id="${id}-closeListButton" class="yui-button yui-push-button">
                                        <span class="first-child">
                                                <button type="button">Solder le mois</button>
                                        </span>
                                </span>
                        </div>
                        <div class="selected-items">
                                <button class="no-access-check" id="${args.htmlid}-selectedItems-button" name="doclist-selectedItems-button">${msg("menu.selected-items")}</button>
                                <div id="${args.htmlid}-selectedItems-menu" class="yuimenu">
                                        <div class="bd">
                                                <ul>
                                                        <#list actionSet as action>
                                                        <li><a type="${action.asset!""}" rel="${action.permission!""}" href="${action.href}"><span class="${action.id}">${msg(action.label)}</span></a></li>
                                                        </#list>
                                                        <li><a href="#"><hr /></a></li>
                                                        <li><a href="#"><span class="onActionDeselectAll">${msg("menu.selected-items.deselect-all")}</span></a></li>
                                                </ul>
                                        </div>
                                </div>
                        </div>
                </div>

                <div class="right" style="display: none;">
                        <span id="${id}-printButton" class="yui-button yui-push-button print">
                                <span class="first-child">
                                        <button type="button">${msg('button.print')}</button>
                                </span>
                        </span>
                        <span id="${id}-rssFeedButton" class="yui-button yui-push-button rss-feed">
                                <span class="first-child">
                                        <button type="button">${msg('button.rss-feed')}</button>
                                </span>
                        </span>
                </div>
        </div>
</div>


Et dans <em>tomcat/webapps/share/components/data-lists</em>, un fichier extended-toolbar.js qui contient l'action JS :

<code>(function()
{
   /**
    * YUI Library aliases
    */
   var Dom = YAHOO.util.Dom,
       Event = YAHOO.util.Event,
       Selector = YAHOO.util.Selector,
       Bubbling = YAHOO.Bubbling;

   /**
    * Alfresco Slingshot aliases
    */
   var $html = Alfresco.util.encodeHTML,
      $links = Alfresco.util.activateLinks,
      $combine = Alfresco.util.combinePaths,
      $userProfile = Alfresco.util.userProfileLink;

   Alfresco.component.ExtDataListToolbar = function(htmlId)
   {
      return Alfresco.component.ExtDataListToolbar.superclass.constructor.call(this, htmlId);
   };

   /**
    * Extend Alfresco.component.DataGrid
    */
   YAHOO.extend(Alfresco.component.ExtDataListToolbar, Alfresco.component.DataListToolbar);

   /**
    * Augment prototype with Common Actions module
    */
   YAHOO.lang.augmentProto(Alfresco.component.ExtDataListToolbar, Alfresco.service.DataListActions);

   /**
    * Augment prototype with main class implementation, ensuring overwrite is enabled
    */
   YAHOO.lang.augmentObject(Alfresco.component.ExtDataListToolbar.prototype,
   {
                /**
                * Fired by YUI when parent element is available for scripting.
                *
                * @method onReady
                */
                onReady: function DataListToolbar_onReady()
                {
                        this.widgets.closeListButton = Alfresco.util.createYUIButton(this, "closeListButton", this.onCloseList,
                        {
                                disabled: true,
                                value: "create"
                        });
                        Alfresco.component.ExtDataListToolbar.superclass.onReady.call(this);
                },

                /**
                * Terminate a list (create a new one)
                *
                * @method onCloseList
                * @param e {object} DomEvent
                * @param p_obj {object} Object passed back from addListener method
                */
                onCloseList: function ExtDataListToolbar_onCloseList(e, p_obj)
                {
                    Alfresco.util.PopupManager.displayPrompt(
                       {
                          title: "Yeah",
                          text: "Yeah",
                          noEscape: true,
                          modal: true,
                          buttons: [
                          {
                             text: this._msg("button.cancel"),
                             handler: function DLTB_onActionDelete_cancel()
                             {
                                this.destroy();
                             }
                          }]
                       });
                }
   }, true);
})();

Pour l'instant, le bouton ne devrait afficher qu'un prompt. Le problème est que le bouton (qui s'affiche bien sur la toolbar) ne fait rien. J'ai l'impression que l'action n'est pas lancée. Pourtant, le nouveau fichier extended-toolbar.js est bien chargé par Alfresco (je le vois via Firebug par exemple).

Qu'est-ce que j'ai manqué ?


Merci.

Outcomes