Hier ist ein Beispiel, das hoffentlich Ihnen helfen, (es ist auch auf Wiki zur Verfügung). Der Großteil der Magie passiert in JavaScript (obwohl das Layout teilweise auch in HTML eingestellt ist).
Angenommen, Sie möchten ein Dashlet erstellen. Sie haben mehrere Dateien im Layout wie folgt aus:
Serverseitige Komponenten hier:
$TOMCAT_HOME/share/WEB-INF/classes/alfresco/site-webscripts/org/alfresco/components/dashlets/...
und clientseitige Skripte sind in
$TOMCAT_HOME/share/components/dashlets...
So - in der Server-Seite, gibt es eine dashlet.get.desc.xml - Datei, die die URL definiert und das Webscript/Dashlet beschreibt.
Es gibt auch eine dashlet.get.head.ftl Datei - das ist, wo Sie einen < script src = „...“ setzen können > Tags und diese werden in dem <Kopf> Bestandteil der kompletten Seite enthalten sein .
Und schließlich gibt es eine dashlet.get.html.ftl Datei, die den < script type = "text/javascript" >-Tag hat die in der Regel Ihre JS initialisiert, in der Regel wie neu Alfresco.MyDashlet(). SetOptions ({. ..});
Jetzt gibt es die Client-Seite. Sie haben, wie ich bereits sagte, ein clientseitiges Skript in /share/components/dashlets/my-dashlet.js (oder my-dashlet-min.js). Das Skript enthält in der Regel eine selbstausführende anonyme Funktion, die Ihr Alfresco.MyDashlet Objekt definiert, so etwas wie dieses:
(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
}
So, jetzt haben Sie es. Wenn du die Datei alfresco.js durchsuchst, wirst du herausfinden, welche Sachen du benutzen kannst, wie Alfresco.util.Ajax, createYUIButton, createYUIPanel, createYUIeverythingElse usw. Du kannst auch eine Menge lernen, indem du versuchst, mit, sagen wir mal, zu spielen -Seiten oder Meine-Aufgaben-Dashlets, sie sind nicht so kompliziert.
Und Alfresco wird Ihre html.ftl Teil in den Seitenkörper, Ihre .head.FTL an dem Seitenkopf und den Endanwender lädt eine Seite, die:
- lädt den HTML-Teil
- lädt die Javascript und führt es aus
- Javascript übernimmt dann, andere Komponenten geladen wird und Dinge tun,
Versuchen Sie, das zu bekommen, und Sie werden in der Lage sein, die anderen komplizierteren Sachen zu bekommen. (vielleicht :))