は、うまくいけば(それはウィキでも利用可能です)あなたを助けるいくつかの例です。ほとんどの魔法は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部分とエンドユーザーがページをロード
これを試してみると、他のもっと複雑なものを手に入れることができます。 (多分:))