Voici quelques exemples qui nous l'espérons vous aider (il est également disponible sur le wiki). La plupart de la magie se passe en JavaScript (bien que la mise en page soit en partie aussi en html).
Imaginons que vous souhaitiez créer un dashlet. Vous avez plusieurs fichiers dans la mise en page comme ceci:
composants côté serveur ici:
$TOMCAT_HOME/share/WEB-INF/classes/alfresco/site-webscripts/org/alfresco/components/dashlets/...
et les scripts côté client sont
$TOMCAT_HOME/share/components/dashlets...
donc - du côté du serveur, il y a un dashlet.get.desc.xml - fichier qui définit l'URL et décrit la webscript/dashlet.
Il y a aussi un fichier dashlet.get.head.ftl - c'est là que vous pouvez mettre « ... » scénario < src = > balises et celles-ci seront inclus dans le composant de tête < > de la page complète .
Et enfin, il y a un fichier dashlet.get.html.ftl qui a le setOptions ({script type = < "text/javascript" tag > initialisant habituellement vos JS, habituellement comme neuf Alfresco.MyDashlet().. ..});
Maintenant, il y a le côté client. Vous avez, comme je l'ai dit, un script côté client dans /share/components/dashlets/my-dashlet.js (ou my-dashlet-min.js). Ce script contient généralement une fonction anonyme auto-exécution qui définit votre objet Alfresco.MyDashlet, quelque chose comme ceci:
(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
}
Alors maintenant, vous l'avez. Si vous parcourez le fichier alfresco.js, vous découvrirez des choses que vous pouvez utiliser, comme Alfresco.util.Ajax, createYUIButton, createYUIPanel, createYUIeverythingElse etc. Vous pouvez aussi apprendre beaucoup en essayant de jouer avec, disons, mon -sites ou my-tasks dashlets, ils ne sont pas si compliqués.
Et Alfresco mettra votre partie html.ftl dans le corps de la page, votre .head.partie FTL dans la tête de page et l'utilisateur final charge une page qui:
- charge la partie html
- de charge le javascript et l'exécute
- javascript prend alors en charge, le chargement d'autres composants et à faire des trucs
Essayez d'obtenir cela, et vous serez en mesure d'obtenir les autres choses plus compliquées. (peut-être :))