alfresco 的 javascript( 不是 webscript) 机制如何

Question

当我玩 alfresco share 时，我发现很难跟踪 UI 和 javascript。你只能在 HTML 标签中看到一些类名，但你很难知道它们是如何构造的，以及这些零散的 HTML 代码何时、何地、如何渲染出如此花哨的页面。

有人可以帮助我吗？请提供几个例子并解释它们是如何工作的！

提前致谢！

Answer 1

以下是一些希望对您有所帮助的示例（也可在 Wiki 上找到）。大部分魔法都发生在 JavaScript 中（尽管部分布局也是在 html 中设置的）。

假设您要构建一个 dashlet。您在布局中有几个文件，如下所示：

这里的服务器端组件：

$TOMCAT_HOME/share/WEB-INF/classes/alfresco/site-webscripts/org/alfresco/components/dashlets/...

和客户端脚本在

$TOMCAT_HOME/share/components/dashlets...

所以 - 在服务器端，有一个 dashlet.get.desc.xml - 定义 URL 并描述 webscript/dashlet 的文件。

还有一个 dashlet.get.head.ftl 文件 - 您可以在其中放置

最后还有一个带有

现在，有客户端。正如我所说，您在 /share/components/dashlets/my-dashlet.js（或 my-dashlet-min.js）中有一个客户端脚本。该脚本通常包含一个定义您的 Alfresco.MyDashlet 对象的自执行匿名函数，如下所示：

(function()
{
  Alfresco.MyDashlet = function(htmlid) {
    // usually extending Alfresco.component.Base or something.
    // here, you also often declare array of YUI components you'll need,
    // like button, datatable etc
    Alfresco.MyDashlet.superclass.constructor.call(...);
    // and some extra init code, like binding a custom event from another component
    YAHOO.Bubbling.on('someEvent', this.someMethod, this);
  }

  // then in the end, there is the extending of Alfresco.component.Base
  // which has basic Alfresco methods, like setOptions(), msg() etc
  // and adding new params and scripts to it. 
  YAHOO.extend(Alfresco.MyDashlet, Alfresco.component.Base,
   // extending object holding variables and methods of the new class,
   // setting defaults etc
    {
      options: {
        siteId: null,
        someotherParam: false
      },
      // you can override onComponentsLoaded method here, which fires when YUI components you requested are loaded
      // you get the htmlid as parameter. this is usefull, because you
      // can also use ${args.htmlid} in the *html.ftl file to name the
      // html elements, like <input id="${args.htmlid}-my-input"> and 
      // bind buttons to it, 
      // like this.myButton = 
      // so finally your method:
      onComponentsLoaded: function MyDaslet_onComponentsLoaded(id) {
        // you can, for example, render a YUI button here. 
        this.myButton = Alfresco.util.createYUIButton(this, "my-input", this.onButtonClick, extraParamsObj, "extra-string");

        // find more about button by opening /share/js/alfresco.js and look for createYUIButton()
      },

      // finally, there is a "onReady" method that is called when your dashlet is fully loaded, here you can bind additional stuff.
      onReady: function MyDashlet_onReady(id) {
        // do stuff here, like load some Ajax resource:
        Alfresco.util.Ajax.request({
          url: 'url-to-call',
          method: 'get',   // can be post, put, delete
          successCallback: {     // success handler
            fn: this.successHandler,  // some method that will be called on success
            scope: this,
            obj: { myCustomParam: true}
          },
          successMessage: "Success message",
          failureCallback: {
            fn: this.failureHandler   // like retrying
          }
        });
      }

      // after this there are your custom methods and stuff
      // like the success and failure handlers and methods
      // you bound events to with Bubbling library
      myMethod: function (params) {
        // code here
      },
      successHandler: function MyDAshlet_successHandler(response) {
        // here is the object you got back from the ajax call you called
        Alfresco.logger.debug(response);
      }

    }); // end of YAHOO.extend
}

所以现在你有了。如果您浏览 alfresco.js 文件，您会发现可以使用的东西，例如 Alfresco.util.Ajax、createYUIButton、createYUIPanel、createYUIeverythingElse 等。您还可以通过尝试玩弄我的-sites 或 my-tasks dashlets，它们并没有那么复杂。

Alfresco 会将您的 html.ftl 部分放在页面正文中，将您的 .head.ftl 部分放在页面头部，最终用户会加载一个页面：

• 加载html部分
• 加载 javascript 并执行它
• javascript 然后接管，加载其他组件并做一些事情

试着得到它，你就能得到其他更复杂的东西。 （也许:)）

Answer 2

您应该尝试使用 firebug 来单步执行您的客户端代码。

Alfresco 包含一堆文件，这些文件都在服务器端拉到一起为每个“页面”提供服务。

我强烈推荐 Jeff Potts 的 Alfresco 开发者指南（您可以购买并立即在线查看）。

• 詹姆斯·拉多克 DOOR3 Inc.