2009-08-03 23 views
4

alfresco共有でプレイすると、UIとjavascriptを追跡するのが難しいことがわかりました。 HTMLタグにはいくつかのクラス名しか見ることができませんが、どのように構築されているのかを知るのは難しいです。いつ、どこに、どのようにこれらの散らばったHTMLコードが素晴らしいページをレンダリングできるのですか?alfrescoのjavascript(webscriptではない)メカニズム

誰かが私を助けることができますか?いくつかの例を提示して、それらの仕組みを説明してください!

ありがとうございます!

答えて

2

クライアント側のコードを実行するためには、Firebugを試してください。

Alfrescoには、すべての "ページ"を配信するためにサーバー側ですべてのファイルがプルされている多数のファイルが含まれています。

Jeff PottsのAlfresco Developer Guideをお勧めします(購入してすぐにオンラインで見ることができます)。ここで

  • ジェームズRaddock DOOR3株式会社
3

は、うまくいけば(それはウィキでも利用可能です)あなたを助けるいくつかの例です。ほとんどの魔法は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ファイルもあり - あなたは<スクリプトSRC =「...」>タグを置くことができ、これらは完全なページの<頭>コンポーネントに含まれる場所です。

そして最後に<スクリプトタイプ=「テキスト/ javascriptの」通常、通常は新しいAlfresco.MyDashlet()。はsetOptions({のように、あなたのJSを初期化>タグを持つ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などのような、あなたが使えるものについて知ることができます。また、私と一緒に遊ぶことで多くを学ぶことができます - サイトや私の仕事のダッシュレットは、それほど複雑ではありません。

そして、Alfrescoはhtml.ftlの部分をページの本文、つまりあなたの頭に入れます。

  • はHTML部分
  • はJavaScriptをロードし、
  • javascriptのは、他のコンポーネントをロードするとか
  • をやって、引き継ぎ、それを実行ロード:ページの頭の中でFTL部分とエンドユーザーがページをロード

これを試してみると、他のもっと複雑なものを手に入れることができます。 (多分:))

関連する問題