alfresco的javascript（不是webscript）机制如何？

When I play with alfresco share, I found it is difficult to track the UI and javascript. you can only see some class name in the HTML tags, But you are difficult to know how are they constructed, And When, where and how can these scattered HTML code can render such a fancy page.

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

Can someone help me ? Please offer several example and explain how they work!

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

Thanks in advance!

提前致谢！

2 个解决方案

#1

Here is some example that will hopefully help you (it's also available on Wiki). Most of the magic happens in JavaScript (although the layout is set in html partly too).

这里有一些例子可以帮助你（它也可以在Wiki上找到）。大多数魔法都发生在JavaScript中（虽然布局也部分用html设置）。

Let's say you want to build a dashlet. You have several files in the layout like this:

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

Server side components here:

这里的服务器端组件：

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

and client-side scripts are in

和客户端脚本在

$TOMCAT_HOME/share/components/dashlets...

So - in the server side, there is a dashlet.get.desc.xml - file that defines the URL and describes the webscript/dashlet.

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

There is also a dashlet.get.head.ftl file - this is where you can put a <script src="..."> tags and these will be included in the <head> component of the complete page.

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

And finally there is a dashlet.get.html.ftl file that has the <script type="text/javascript"> tag which usually initializes your JS, usually like new Alfresco.MyDashlet().setOptions({...});

最后有一个dashlet.get.html.ftl文件，其中包含

Now, there's the client side. You have, like I said, a client-side script in /share/components/dashlets/my-dashlet.js (or my-dashlet-min.js). That script usually contains a self-executing anonymous function that defines your Alfresco.MyDashlet object, something like this:

现在，有客户端。就像我说的那样，你有/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
}

So now you have it. If you go through the alfresco.js file, you'll find out about stuff you can use, like Alfresco.util.Ajax, createYUIButton, createYUIPanel, createYUIeverythingElse etc. You can also learn a lot by trying to play with, say, my-sites or my-tasks dashlets, they're not that complicated.

所以现在你拥有它。如果你浏览alfresco.js文件，你会发现你可以使用的东西，比如Alfresco.util.Ajax，createYUIButton，createYUIPanel，createYUIeverythingElse等。你也可以尝试玩，比方说，我可以学到很多东西。 -sites或my-tasks dashlets，它们并不复杂。

And Alfresco will put your html.ftl part in the page body, your .head.ftl part in the page head and the end user loads a page which:

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

loads the html part
加载html部分
loads the javascript and executes it
加载javascript并执行它
javascript then takes over, loading other components and doing stuff
然后javascript接管，加载其他组件和做东西

Try to get that, and you'll be able to get the other more complicated stuff. (maybe :))

试着去做，你就能得到其他更复杂的东西。（也许：））

#2

You should try firebug for stepping through your client side code.

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

Alfresco includes a bunch of files that are all pulled together on the server side to serve each "page".

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

I highly recommend Alfresco Developer Guide by Jeff Potts (you can buy it and view it online instantly).

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

James Raddock DOOR3 Inc.
James Raddock DOOR3 Inc.

#1