标题栏中的 Dashlet 编辑按钮未正确显示答案

【问题标题】：Dashlet edit button in titlebar not showing correctly标题栏中的 Dashlet 编辑按钮未正确显示
【发布时间】：2012-08-14 06:08:37
【问题描述】：

我正在尝试创建一个简单的 Alfresco dashlet，并在标题栏上启用了一个编辑按钮。不幸的是，我不知道如何让编辑按钮真正显示在标题栏上。

这是我目前所拥有的：

dashlet desc 文件 (.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>

似乎问题一定出在我的配置中，但我找不到。谁能指出我正确的方向？

【问题讨论】：

您尚未包含 MyCompany.dashlet.SampleDashlet 客户端 JavaScript 组件的实现。这应该驻留在 head 中引用的 JavaScript 文件中。

标签： javascript alfresco freemarker

【解决方案1】：

如果您想要一个非常简单的 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>

否则，编辑按钮如何知道在哪里呈现自己？

【讨论】：

【解决方案2】：

正如 Jeff 建议的那样，您需要在标记中为 dashlet 的标题栏添加一个 <div> 元素，并为 class 属性设置适当的值，如下所示

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

当您的内联 JavaScript 代码创建的 Alfresco.widget.DashletTitleBarActions 实例被实例化时，它会寻找具有 title 类的子 <div> 并在其中添加操作。

我还在父 div 中添加了一个 dashlet 类，这是应用默认 dashlet 样式所必需的。

【讨论】：