4

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

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

提前致谢！

4

2 回答 2

3

这是一些希望对您有所帮助的示例（也可以在 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 文件 - 您可以在其中放置 <script src="..."> 标记，这些标记将包含在完整页面的 <head> 组件中。

最后还有一个带有 <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 然后接管，加载其他组件并做一些事情

尝试得到它，你将能够得到其他更复杂的东西。（也许 ：））

于 2012-04-02T16:26:43.430 回答
2

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

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

我强烈推荐 Jeff Potts 的 Alfresco Developer Guide（您可以购买并立即在线查看）。

  • 詹姆斯拉多克 DOOR3 Inc.
于 2009-08-18T15:59:59.877 回答