4

alfresco share で遊んでみると、UI と JavaScript を追跡するのが難しいことがわかりました。HTML タグにいくつかのクラス名しか表示されません. しかし、それらがどのように構築されているかを知ることは困難です. そして、これらの散らばった HTML コードがいつ、どこで、どのようにしてこのような凝ったページをレンダリングできるのでしょうか.

誰かが私を助けることができますか？いくつかの例を挙げて、それらがどのように機能するかを説明してください!

前もって感謝します！

4

2 に答える 2

3

うまくいけば役立つ例を次に示します (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="..."> タグを配置できます。これらは、完全なページの <head> コンポーネントに含まれます。

そして最後に、通常 new Alfresco.MyDashlet().setOptions({...}) のように、通常は JS を初期化する <script type="text/javascript"> タグを持つ dashlet.get.html.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 ダッシュレットなど、それほど複雑ではありません。

また、Alfresco は html.ftl 部分をページ本文に配置し、.head.ftl 部分をページ ヘッドに配置し、エンド ユーザーは次のようなページをロードします。

  • html 部分を読み込みます
  • JavaScript を読み込んで実行する
  • その後、javascript が引き継ぎ、他のコンポーネントをロードして処理を行います

それを取得しようとすると、他のより複雑なものを取得できるようになります。（多分 ：））

于 2012-04-02T16:26:43.430 に答える
2

クライアント側のコードをステップスルーするには、firebugを試してください。

Alfrescoには、各「ページ」を提供するためにサーバー側ですべてまとめられた一連のファイルが含まれています。

JeffPottsによるAlfrescoDeveloperGuideを強くお勧めします（購入してオンラインですぐに表示できます）。

  • James Raddock DOOR3 Inc.
于 2009-08-18T15:59:59.877 に答える