Вот пример, который, надеюсь, поможет вам (он также доступен на вики). Большая часть магии происходит в 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 - здесь вы можете поместить теги , и они будут включены в компонент всей страницы.
И, наконец, есть файл dashlet.get.html.ftl, в котором есть тег , который обычно инициализирует ваш JS, обычно как новый 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 и т. Д. Вы также можете многому научиться, попробовав, скажем, мой -сайты или дашлеты моих задач, они не такие сложные.
И Alfresco поместит вашу часть html.ftl в тело страницы, вашу часть .head.ftl в заголовок страницы, и конечный пользователь загрузит страницу, которая:
- загружает HTML-часть
- загружает JavaScript и выполняет его
- Затем вступает javascript, загружая другие компоненты и делая вещи
Попытайтесь получить это, и вы сможете получить другие более сложные вещи. (может быть :))