2012-08-14 65 views
1

我正嘗試創建一個簡單的Alfresco Dashlet,並在標題欄上啓用了一個編輯按鈕。不幸的是,我無法弄清楚如何讓編輯按鈕在標題欄上實際顯示display標題欄中的Dashlet編輯按鈕無法正確顯示

這是我到目前爲止有:

dashlet說明文件(.desc.xml)

<webscript> 
    <shortname>Sample</shortname> 
    <description>Displays a Sample dashlet</description> 
    <family>dashlet</family> 
    <url>/mycompany/components/dashlets/sample-dashlet</url> 
</webscript> 

我的主要Freemarker模板文件(.ftl)

<script type="text/javascript"> 
    //<![CDATA[ 
    var sampleDashlet = new MyCompany.dashlet.SampleDashlet("${args.htmlid}").setOptions({ 
     "componentId": "${instance.object.id}", 
     "siteId": "${page.url.templateArgs.site!""}", 
     "title": "${msg("header")}" 
    }).setMessages(${messages}); 
    new Alfresco.widget.DashletResizer("${args.htmlid}", "${instance.object.id}"); 

    var editDashletEvent = new YAHOO.util.CustomEvent("onDashletConfigure"); 
    editDashletEvent.subscribe(sampleDashlet.onConfigClick, sampleDashlet, true); 

    new Alfresco.widget.DashletTitleBarActions("${args.htmlid}").setOptions({ 
     actions: [{ 
      cssClass: "edit", 
      eventOnClick: editDashletEvent, 
      tooltip: "${msg("dashlet.edit.tooltip")?js_string}" 
     }] 
    }); 
    //]]> 
</script> 

<div class="dashlet-1"> 
<div> Test </div> 
</div> 

似乎問題一定在我的配置某處,但我找不到它。任何人都可以向我指出正確的方向嗎?

+0

您尚未包含MyCompany.dashlet.SampleDashlet客戶端JavaScript組件的實現。這應該駐留在head中引用的JavaScript文件中。 – 2012-08-14 18:01:41

回答

2

如果您想要一個可以用這種方式設置爲可配置的非常簡單的Dashlet的工作示例,請參閱http://code.google.com/p/alfresco-get-latest-document。此博客文章設置了基本功能:http://ecmarchitect.com/archives/2012/05/08/1592。此博客文章擴展了這一點,以使初始Dashlet可配置:http://ecmarchitect.com/archives/2012/05/15/1599

在比較與我的FTL,我想知道,如果你的DIV類/ ID需要遵循這個模式:

<div class="dashlet getlatestdoc"> 
    <div id="getlatestdoc_title" class="title"> 
    ${title} 
    </div> 

否則,怎麼會編輯按鈕知道哪裏來表現自己?

1

傑夫建議,你需要包括與爲class屬性的適當的值的標記中的dashlet的標題欄中<div>元素,如下

<div class="dashlet dashlet-1"> 
    <div class="title">Title</div> 
    <div class="body">Body content</div> 
</div> 

Alfresco.widget.DashletTitleBarActions情況下,你的內聯JavaScript代碼創建實例化它將尋找一個<div>與類title並將在那裏添加動作。

我還向父div添加了一個dashlet類,這對於應用默認的dashlet樣式是必需的。