Geek Answers Handbook

How javascript (not webscript) works in alfresco

When I play with the alfresco stock, I find it difficult to track the user interface and javascript. you can only see some class name in the HTML tags, but it's hard for you to understand how they are built, and when, where and how this scattered HTML code can display such a fancy page.

Can someone help me? Suggest a few examples and explain how they work!

Thanks in advance!

+4
source share
2 answers

Here is an example that I hope will help you (it is also available on the Wiki). Most of the magic happens in JavaScript (although the layout is also partially installed in html).

Suppose you want to create a dashlet. You have several files in the layout:

Server server components:

$TOMCAT_HOME/share/WEB-INF/classes/alfresco/site-webscripts/org/alfresco/components/dashlets/...

and client scripts are in

 $TOMCAT_HOME/share/components/dashlets...

So, on the server side there is a dashlet.get.desc.xml file that defines the URL and describes the web page / dashlet.

There is also a dashlet.get.head.ftl file - here you can put <script src = "..."> tags and they will be included in the <head> component of the full page.

Finally, there is the dashlet.get.html.ftl file, which has the type <script type = "text / javascript"> tag, which usually initializes your JS, usually like the new Alfresco.MyDashlet (). setOptions ({...});

Now there is a client side. You have, as I said, the client side of the script in / share / components / dashlets / my-dashlet.js (or my-dashlet-min.js). This script usually contains a self-executing anonymous function that defines an Alfresco.MyDashlet object, something like this:

 (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 now you have it. If you look at the alfresco.js file, you will learn about materials that you can use, for example, Alfresco.util.Ajax, createYUIButton, createYUIPanel, createYUIeverythingElse, etc. You can also learn a lot by trying to play, say, mine-sites or target-tasks, they are not so complicated.

And Alfresco will put your html.ftl part in the body of the page, your .head.ftl part in the page title, and the end user will load the page, which:

  • loads the html part
  • loads javascript and executes it
  • javascript then takes care of loading other components and doing things

Try to get this and you can get other more complex stuff. (perhaps:))

+3
source

You should try firebug to execute your client code.

Alfresco includes a bunch of files that are all grouped together on the server side to serve each "page."

I highly recommend the Jeff Potts Alfresco Developer's Guide (you can buy it and watch it online instantly).

  • James Ruddock DOOR3 Inc.
+2
source

More articles:


All Articles