alfresco'；s javascript（不是webscript）机制

当我玩alfresco share时，我发现很难跟踪UI和javascript。您只能在HTML标记中看到一些类名，但您很难知道它们是如何构造的，以及这些分散的HTML代码何时、何地和如何呈现这样一个奇特的页面

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

---

提前谢谢

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

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

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

• 詹姆斯·拉多克 多尔3公司

---

这里有一些例子，希望能对您有所帮助（也可以在Wiki上找到）。大部分魔法都发生在JavaScript中（尽管部分布局也是用html设置的）
假设您想要构建dashlet。布局中有多个文件，如下所示：

(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
}

此处的服务器端组件：

$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文件-您可以在其中放置标记，这些标记将包含在整个页面的组件中
最后还有一个dashlet.get.html.ftl文件，它有一个标签，通常用于初始化JS，通常类似于new Alfresco.MyDashlet（）.setOptions（{…}）
现在是客户端。正如我所说，您在/share/components/dashlet/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.MyDashlet=函数（htmlid）{
//通常延伸到露天。组件。底座或其他地方。
//在这里，您还经常声明需要的YUI组件数组，
//如按钮、数据表等
Alfresco.MyDashlet.superclass.constructor.call（…）；
//还有一些额外的初始化代码，比如从另一个组件绑定自定义事件
YAHOO.Bubbling.on（'someEvent'，this.someMethod，this）；
}
//最后是Alfresco.component.Base的扩展
//它有基本的Alfresco方法，比如setOptions（），msg（）等等
//并向其中添加新的参数和脚本。
extend（Alfresco.MyDashlet、Alfresco.component.Base、，
//扩展包含新类的变量和方法的对象，
//设置默认值等
{
选项：{
siteId:null，
someotherParam:false
},
//您可以在此处重写onComponentsLoaded方法，该方法在加载您请求的YUI组件时激发
//您可以将htmlid作为参数。这很有用，因为
//还可以在*html.ftl文件中使用${args.htmlid}来命名
//html元素，如和
//将按钮绑定到它，
//像这样。myButton=
//所以最后你的方法是：
onComponentsLoaded：函数MyDaslet\u onComponentsLoaded（id）{
//例如，您可以在此处渲染YUI按钮。
this.myButton=Alfresco.util.createYUIButton（这个“我的输入”，这个.onButtonClick，extraParamsObj，“额外字符串”）；
//打开/share/js/alfresco.js查找有关按钮的更多信息，并查找createYUIButton（）
},
//最后，有一个“onReady”方法，在dashlet完全加载时调用，您可以在这里绑定其他内容。
onReady：函数MyDashlet\u onReady（id）{
//在这里做一些事情，比如加载一些Ajax资源：
Alfresco.util.Ajax.request({
url:'要调用的url'，
方法：“get”，//可以是post、put、delete
successCallback:{//成功处理程序
fn:this.successHandler，//成功时将调用的某个方法
范围:本,，
obj:{myCustomParam:true}
},
成功消息：“成功消息”，
故障回调：{
fn:this.failureHandler//喜欢重试吗
}
});
}
//在这之后是你的自定义方法和东西
//比如成功和失败的处理程序和方法
//您使用冒泡库将事件绑定到
myMethod:函数（参数）{
//代码在这里
},
successHandler:函数MyDAshlet_successHandler（响应）{
//这是您从调用的ajax调用中得到的对象
Alfresco.logger.debug（响应）；
}
})；//YAHOO.extend的结尾
}

现在你有了它。如果你浏览alfresco.js文件，你会发现你可以使用的东西，比如alfresco.util.Ajax、createYUIButton、createYUIPanel、createyuieverything等等。你也可以通过尝试玩我的网站或我的任务dashlet学到很多东西，它们没有那么复杂
Alfresco将把html.ftl部分放在页面正文中，把.head.ftl部分放在页面标题中，最终用户加载一个页面，其中：
• 加载html部分
• 加载javascript并执行它
• 然后，javascript接管，加载其他组件并执行其他操作
试试看，你就能得到其他更复杂的东西