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

Question

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

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

提前致谢!

Answer 1

这里有一些示例，希望对您有所帮助(它也可以在 Wiki 上找到)。大多数魔法都发生在 JavaScript 中(尽管布局也有一部分是在 html 中设置的)。

假设您要构建一个仪表板。您在这样的布局中有几个文件:

此处的服务器端组件:

$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 文件 - 您可以在其中放置 <script src="..."> 标签，这些标签将包含在完整页面的 组件中。

最后还有一个带有 <script type="text/javascript"> 标签的 dashlet.get.html.ftl 文件，它通常会初始化你的 JS，通常像 new Alfresco.MyDashlet().setOptions({.. .});

现在是客户端。正如我所说，您在/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 接管，加载其他组件并做一些事情

尝试得到它，你将能够得到其他更复杂的东西。 (也许 :))